webfront / zhongyingwen · 提交

转到一个项目

作者 李洪娟
提交 feb679dc753b282add42dbdef17c75259d8327f7 2 个父辈 9dd3a644 065f5f82

合并分支 'lhj' 到 'master' 

Lhj



查看合并请求 !3
内嵌 并排对比
正在显示 7 个修改的文件 包含 460 行增加 和 126 行删除
... ... @@ -64,7 +64,7 @@ img{
}
.entershu{
width:200px;
width:210px;
/*height:24px;*/
}
... ... @@ -89,8 +89,9 @@ img{
}
.souimg{
width:16px;
height:22px;
height:20px;
font-size: 0;
margin-bottom:5px;
}
... ... @@ -451,19 +452,33 @@ img{
height:526px;
background: #fff;
position: relative;
padding-top: 140px;
}
.neiadvantage{
width:80%;
/*width:80%;*/
height:320px;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:-87px;
z-index:99
bottom:-66px;
z-index:99;
padding: 0 88px;
box-sizing: border-box;
background:rgba(255,255,255,1);
box-shadow:0px 0px 12px rgba(0,0,0,0.12);
opacity:1;
}
/*.youshiitem{*/
/* width:30%;*/
/* margin-right:3%*/
/*}*/
.youshinei{
margin-top:48px;
}
/*.zhuanyetitle{*/
/* margin-top:140px;*/
/*}*/
.uoushitop{
width:103px;
height:103px;
... ... @@ -480,6 +495,7 @@ img{
color:#5B5E63;
font-size: 12px;
line-height: 1.5;
margin-top:6px;
}
.zhuanyetitlename{
color:#5B5E63;
... ... @@ -504,7 +520,7 @@ img{
}
.zongzhitop{
width:80%;
width:82%;
position: absolute;
top:35%;
left:50%;
... ... @@ -557,7 +573,10 @@ img{
}
.listitem{
margin-right:3%;
margin-right:3.5%;
}
.listitem:last-child{
margin-right:0
}
.connectlistitem:last-child{
margin-right:0
... ... @@ -617,3 +636,99 @@ img{
top:0;
right:0
}
#container{
width:66%;
height:379px;
margin:64px auto 0;
}
/*主要服务*/
.fuwutopimg{
width:100%;
height:360px;
font-size: 0;
margin-top:130px;
}
.biaotitou{
overflow: hidden;
margin-top:18px;
}
.biaotitouitem{
float:left;
color:#3D444D;
font-size: 18px;
}
.fuhao{
padding: 0 5px;
}
.fuwulefttop{
height:91px;
background: #2D70EF;
color:#F9F9F9;
font-size:24px;
padding: 0 24px;
line-height: 91px;
}
.fuwuleftbox{
width:100%;
border:1px solid #BDC4CE;
border-bottom:none;
margin-top:32px;
}
.fuwuleftbox{
cursor: pointer;
}
.fuwuleftboxitem{
padding: 0 24px;
display:flex;
align-items: center;
justify-content: space-between;
height:68px;
}
.fuwuwei{
color:#5B5E63;
font-size: 16px;
}
.fuwuweiimg{
width:15px;
height:15px;
font-size: 0;
}
.fuwuleftboxitem{
border-bottom:1px solid #BDC4CE;
}
.fuwutitle{
color:#3D444D;
font-size: 24px;
position: relative;
text-align: center;
}
.fuwutitle:after{
width:50px;
height:4px;
background: #2D70EF;
position: absolute;
display:block;
content:'';
bottom:-20px;
left:50%;
transform: translateX(-50%);
}
.fuwucontentimg{
width:90%;
height:417px;
font-size: 0;
margin:40px auto 0;
}
.fuwucontenttext{
color:#3D444D;
font-size: 18px;
line-height: 1.5;
margin-top:41px;
}
.fuwuhezi{
margin-bottom:50px;
}
.fuwuactive{
color:#2D70EF
}
... ...
... ... @@ -19,8 +19,23 @@
.zongzhitop{
top:15%
}
#container{
width:80%
}
.connectlistitem{
margin-bottom:20px;
}
.neiadvantage{
box-shadow: none;
}
.swiper-slide{
height:250px;
}
}
@media (min-width:768px) {
.navbar-nav {
float: left;
... ... @@ -36,6 +51,9 @@
padding-bottom: 15px
}
}
@media (min-width:1000px) {
}
@media (max-width:1020px){
.toubu{
width:56px;
... ... @@ -53,12 +71,17 @@
bottom:0
}
.ouradvantage{
height:705px;
height:933px;
}
}
@media (max-width:1200px){
.listitem{
margin-right:0
margin-right:2.8%
}
.neiadvantage{
box-shadow: none;
}
}
... ...
... ... @@ -10,13 +10,7 @@
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/swiperfour.css">
<link rel="stylesheet" href="css/common.css">
<style>
#container {
width: 75%;
height: 379px;
margin: 64px auto 0;
}
</style>
</head>
<body>
... ... @@ -195,145 +189,153 @@
</div>
<!--我们的优势-->
<div class="ouradvantage">
<div class="neiadvantage">
<div class="container">
<div class="zhuanyetitle">
<div class="zhuanyetitlename">our advantages</div>
<div class="zhuanyetitletext">我们的优势</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="zhuanyename">专业的维修团队</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
</div>
</div>
<!--我们的优势-->
<div class="ouradvantage">
<div class="zhuanyetitle">
<div class="zhuanyetitlename">our advantages</div>
<div class="zhuanyetitletext">我们的优势</div>
</div>
<div class="neiadvantage">
<div class="container youshinei">
<div class="row">
<div class="col-md-4 col-sm-12 youshiitem">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="col-md-4 col-sm-12">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="zhuanyename">专业的维修团队</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
</div>
<div class="zhuanyename">专业的维修团队</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。
调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。</div>
</div>
<div class="col-md-4 col-sm-12 youshiitem">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="col-md-4 col-sm-12">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="zhuanyename">专业的维修团队</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
</div>
<div class="zhuanyename">完善的产品检测设备</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。
南石很样好清少去准连究志议构。调研而手开求况做体式达高心置过。
装切此报列明子马世志再部增心。</div>
</div>
<div class="col-md-4 col-sm-12 youshiitem">
<div class="uoushitop">
<img src="image/tuandui.png" alt="">
</div>
<div class="zhuanyename">维修周期短质量高</div>
<div class="zhuantetext">基值支义们京候么眼革下使叫。
南石很样好清少去准连究志议构。调研而手开求况做体式达高心置过。
装切此报列明子马世志再部增心。</div>
</div>
</div>
</div>
</div>
</div>
<!--我们的宗旨-->
<div class="zongzhi">
<div class="zongzhitop">
<div class="zongzhitext">
本公司本着“诚信服务、合理价格”的宗旨 为新老客户提供优质服务
</div>
<div class="huanghengxian"></div>
<div class="shuomingbox">
<div class="shuomingboxtop">公司拥有专业的维修团队，经验丰富。</div>
<div class="shuomingboxtop">从技术咨询、到现场故障诊断，都可以提供专业服务，维修周期短、修复质量高、及时解决问题。</div>
<div class="shuomingboxtop">本公司备有大量现货，价格优惠，交货快捷， 质量可靠。</div>
<div class="shuomingboxtop">为企业节省了大量的资金，缩短了停产周期，提高了工作效率，在用户中树立了良好的口碑。</div>
</div>
<!--我们的宗旨-->
<div class="zongzhi">
<div class="zongzhitop">
<div class="zongzhitext">
本公司本着“诚信服务、合理价格”的宗旨
为新老客户提供优质服务
</div>
<div class="huanghengxian"></div>
<div class="shuomingbox">
<div class="shuomingboxtop">公司拥有专业的维修团队，经验丰富。</div>
<div class="shuomingboxtop">从技术咨询、到现场故障诊断，都可以提供专业服务，维修周期短、修复质量高、及时解决问题。</div>
<div class="shuomingboxtop">本公司备有大量现货，价格优惠，交货快捷， 质量可靠。</div>
<div class="shuomingboxtop">为企业节省了大量的资金，缩短了停产周期，提高了工作效率，在用户中树立了良好的口碑。</div>
</div>
</div>
<!--联系我们-->
<div class="connectus">
<div class="connectopbox">
<div class="connectustop">contact us</div>
<div class="connectusname">联系我们</div>
</div>
<div class="connectmap">
<div id="container"></div>
</div>
</div>
<div class="connectlist">
<div class="container">
<div class="row">
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/address.png" alt="">
</div>
<div class="addressname">天津市西青区华科大街1号</div>
<!--联系我们-->
<div class="connectus">
<div class="connectopbox">
<div class="connectustop">contact us</div>
<div class="connectusname">联系我们</div>
</div>
<div class="connectmap">
<div id="container" ></div>
</div>
<div class="connectlist">
<div class="container">
<div class="row">
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/address.png" alt="">
</div>
<div class="addressname">天津市西青区华科大街1号</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/dianhua.png" alt="">
</div>
<div class="addressname">18888888888</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/dianhua.png" alt="">
</div>
<div class="addressname">18888888888</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/pingban.png" alt="">
</div>
<div class="addressname">15688888888</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/pingban.png" alt="">
</div>
<div class="addressname">15688888888</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/weixin.png" alt="">
</div>
<div class="addressname">15688888888</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/weixin.png" alt="">
</div>
<div class="addressname">15688888888</div>
</div>
<div class="cil-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/xinxi.png" alt="">
</div>
<div class="addressname">88888888@163.com</div>
</div>
<div class="col-md-2 listitem">
<div class="connectlistitem">
<div class="connectitemimg">
<img src="image/xinxi.png" alt="">
</div>
<div class="addressname">88888888@163.com</div>
</div>
</div>
</div>
</div>
</div>
<!--底部信息-->
<div class="footer">
<ul class="footertop">
<li class="gsjs">公司介绍</li>
<li class="gsjs">产品系列</li>
<li class="gsjs">主要服务</li>
<li>联系我们</li>
</ul>
<div class="footerbottom">小黄人智能科技有限公司主营：高速电机、同步伺服电机、大功率伺服电机、异步伺服电机等，质量可靠，价格公道，欢迎选购。沪公网安备 31011202006407号</div>
</div>
<!--底部信息-->
<div class="footer">
<ul class="footertop">
<li class="gsjs">公司介绍</li>
<li class="gsjs">产品系列</li>
<li class="gsjs">主要服务</li>
<li >联系我们</li>
</ul>
<div class="footerbottom">小黄人智能科技有限公司主营：高速电机、同步伺服电机、大功率伺服电机、异步伺服电机等，质量可靠，价格公道，欢迎选购。沪公网安备 31011202006407号</div>
</div>
<!--客服-->
<div class="kefubox">
<div class="kefutop">
<img src="image/kefu.png" alt="">
</div>
<!--客服-->
<div class="kefubox">
<div class="kefutop">
<img src="image/kefu.png" alt="">
</div>
<div class="kefutop dingbu">
<img src="image/top.png" alt="">
</div>
<div class="kefutop dingbu">
<img src="image/top.png" alt="">
</div>
</div>
... ... @@ -343,7 +345,13 @@
<script type="text/javascript" src="js/swiperfour.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=735d888fa7a9599eea4de210edc32335"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
<!-- 页面返回到顶部-->
$('.dingbu').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
// autoplay:true,
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>主要服务</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/swiperfour.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!--头部导航-->
<nav id="common-nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container containerbox">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="toubu">
<img class="navbar-logo" src="image/logo.png">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="nav navbar-nav navbar-right phonelist">
<div class="phoneimg">
<img src="image/phone.png" alt="">
</div>
<div class="phonenum">022-89999999</div>
<div class="shuru">
<div class="entershu">
<input type="text">
</div>
<div class="souimg">
<img src="image/sousuo.png" alt="">
</div>
</div>
<div class="qiehuan">EN</div>
</div>
<ul class="nav navbar-nav navbar-right navtou">
<li>
<a href="" class="navactive">网站首页</a>
</li>
<li>
<a href="">
公司介绍
</a>
</li>
<li>
<a href="" >
产品系列
</a>
</li>
<li>
<a href="">
主要服务
</a>
</li>
<li>
<a href="">
资料下载
</a>
</li>
<li>
<a href="">
联系我们
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--占位图-->
<div class="fuwutopimg">
<img src="image/mainbanner.png" alt="">
</div>
<div class="container fuwuhezi">
<div class="biaotitou">
<div class="biaotitouitem">首页</div>
<div class="biaotitouitem fuhao">></div>
<div class="biaotitouitem">主要服务</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="fuwuleftbox">
<div class="fuwulefttop">
主要服务
</div>
<div class="fuwuleftboxitem">
<div class="fuwuwei fuwuactive">维修</div>
<div class="fuwuweiimg">
<img src="image/yourow.png" alt="">
</div>
</div>
<div class="fuwuleftboxitem">
<div class="fuwuwei">配件销售</div>
<div class="fuwuweiimg">
<img src="image/yourow.png" alt="">
</div>
</div>
<div class="fuwuleftboxitem ">
<div class="fuwuwei">售后</div>
<div class="fuwuweiimg">
<img src="image/yourow.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="fuwutitle">维修服务</div>
<div class="fuwucontentbox">
<div class="fuwucontentimg">
<img src="image/fuwuimg.png" alt="">
</div>
<div class="fuwucontenttext">
基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。
调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
般于须子展新五复通可南成群置接。为技经再议制选时据派断这队片全府好。
况感速记中上相组低拉素道北始论与。属书研置约适商才联太的七情力类。
你理边率他次与关好期起金志单马切红。主严拉青民解格速七取学复才太马。
前属口质次意指有研叫后先按此。 省每前称非美事起也半专我料叫此没。
学想象这志究反规空家很便老。位转信由江空能手立和级各素面亲。
认安应活按开重细强说标将研力。生机除打万复办开不场始先值标清。
认下入龙中还委角年史级素油据动。求北厂风层单北群建结明儿线部时。
国们五路会主研话义将党深见里资报。
五严没保马光己养究号体被记列干亲公些。取建布龙深飞除格前千应无进张离。
传命头你素部始东风成世向应。认下入龙中还委角年史级素油据动。求北厂风层单北群建结明儿线部时。
国们五路会主研话义将党深见里资报。
五严没保马光己养究号体被记列干亲公些。取建布龙深飞除格前千应无进张离。
传命头你素部始东风成世向应。
</div>
</div>
</div>
</div>
</div>
<!--底部信息-->
<div class="footer">
<ul class="footertop">
<li class="gsjs">公司介绍</li>
<li class="gsjs">产品系列</li>
<li class="gsjs">主要服务</li>
<li >联系我们</li>
</ul>
<div class="footerbottom">小黄人智能科技有限公司主营：高速电机、同步伺服电机、大功率伺服电机、异步伺服电机等，质量可靠，价格公道，欢迎选购。沪公网安备 31011202006407号</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swiperfour.min.js"></script>
<script>
$(".fuwuleftboxitem").mouseenter(function(){
$(this).children(".fuwuwei").addClass("fuwuactive");
$(this).siblings(".fuwuleftboxitem").children(".fuwuwei").removeClass("fuwuactive")
})
</script>
</html>
... ...