webfront / zhongyingwen · 提交

转到一个项目

作者 lihongjuan
提交 a25a08cca75f12cf06ddef0d56d3603e8a6a3a69 1 个父辈 9e5fa422

34343443

内嵌 并排对比
正在显示 12 个修改的文件 包含 424 行增加 和 42 行删除
@@ -19,6 +19,8 @@ @@ -19,6 +19,8 @@
19 /*height:100%;*/ 19 /*height:100%;*/
20 padding: 21px 32px; 20 padding: 21px 32px;
21 box-sizing: border-box; 21 box-sizing: border-box;
  22 + background: #fff;
  23 +
22 } 24 }
23 img{ 25 img{
24 width:100%; 26 width:100%;
@@ -174,12 +176,12 @@ img{ @@ -174,12 +176,12 @@ img{
174 } 176 }
175 /***************************************/ 177 /***************************************/
176 .navbar-toggle{ 178 .navbar-toggle{
177 - background:#8EC63F ;  
178 - opacity: 0.4; 179 + background:#EFC400 ;
  180 + opacity:1;
179 } 181 }
180 .navbar-inverse .navbar-toggle:hover { 182 .navbar-inverse .navbar-toggle:hover {
181 - background:#8EC63F ;  
182 - opacity: 0.4; 183 + background:#EFC400 ;
  184 + opacity: 1;
183 } 185 }
184 .navbar-right{ 186 .navbar-right{
185 width:85%; 187 width:85%;
@@ -201,22 +203,22 @@ img{ @@ -201,22 +203,22 @@ img{
201 position: relative; 203 position: relative;
202 204
203 } 205 }
204 -.navbar-inverse .navbar-nav > li > a.navactive:before{  
205 - content:'';  
206 - display:block;  
207 - width:72px;  
208 - height:2px;  
209 - background: #2D70EF ;  
210 - position: absolute;  
211 - left:50%;  
212 - transform: translateX(-50%);  
213 - bottom:-20px;  
214 -}  
215 -  
216 -/*.navbar-inverse .navbar-nav > li > a:hover{*/  
217 -/* color: #171717;*/  
218 -/* font-weight: bold;*/ 206 +/*.navbar-inverse .navbar-nav > li > a.navactive:before{*/
  207 +/* content:'';*/
  208 +/* display:block;*/
  209 +/* width:72px;*/
  210 +/* height:2px;*/
  211 +/* background: #2D70EF ;*/
  212 +/* position: absolute;*/
  213 +/* left:50%;*/
  214 +/* transform: translateX(-50%);*/
  215 +/* bottom:-20px;*/
219 /*}*/ 216 /*}*/
  217 +
  218 +.navbar-inverse .navbar-nav > li > a:hover{
  219 + color: #171717;
  220 + /*font-weight: bold;*/
  221 +}
220 .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover { 222 .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
221 color: #fff; 223 color: #fff;
222 background-color: transparent; 224 background-color: transparent;
@@ -298,20 +300,23 @@ img{ @@ -298,20 +300,23 @@ img{
298 300
299 /*关于我们*/ 301 /*关于我们*/
300 .beyellow{ 302 .beyellow{
301 - width:470px; 303 + width:100%;
302 height:182px; 304 height:182px;
303 background: #EFC400; 305 background: #EFC400;
304 position: relative; 306 position: relative;
305 margin-top:299px; 307 margin-top:299px;
306 } 308 }
  309 +.guanyuwomenzi{
  310 + margin-left:12%
  311 +}
307 .beiimg{ 312 .beiimg{
308 - width:473px; 313 + width:100%;
309 height:314px; 314 height:314px;
310 font-size: 0; 315 font-size: 0;
311 position: absolute; 316 position: absolute;
312 left:18px; 317 left:18px;
313 bottom:18px; 318 bottom:18px;
314 - z-index:999 319 + z-index:10
315 } 320 }
316 .guanyuourtop{ 321 .guanyuourtop{
317 color:#3D444D; 322 color:#3D444D;
@@ -335,12 +340,12 @@ img{ @@ -335,12 +340,12 @@ img{
335 position: absolute; 340 position: absolute;
336 top:0; 341 top:0;
337 left:0; 342 left:0;
338 - width:2px; 343 + width:3px;
339 height:90px; 344 height:90px;
340 background:#2D70EF ; 345 background:#2D70EF ;
341 } 346 }
342 .introtext{ 347 .introtext{
343 - width:573px; 348 + width:100%;
344 height:130px; 349 height:130px;
345 color:#3D444D; 350 color:#3D444D;
346 font-size: 16px; 351 font-size: 16px;
@@ -369,6 +374,12 @@ img{ @@ -369,6 +374,12 @@ img{
369 .womencontainer{ 374 .womencontainer{
370 background: #FFFFFF; 375 background: #FFFFFF;
371 } 376 }
  377 +/*.navbar-nav{*/
  378 +/* display:table*/
  379 +/*}*/
  380 +/*.navbar-nav>li {*/
  381 +/* display:table-cell;*/
  382 +/*}*/
372 .kefutop{ 383 .kefutop{
373 width:40px; 384 width:40px;
374 height:40px; 385 height:40px;
@@ -385,6 +396,7 @@ img{ @@ -385,6 +396,7 @@ img{
385 position: fixed; 396 position: fixed;
386 right:5%; 397 right:5%;
387 top:85%; 398 top:85%;
  399 + z-index:99
388 } 400 }
389 .ourproduct{ 401 .ourproduct{
390 background:#F0F9FD; 402 background:#F0F9FD;
@@ -403,7 +415,7 @@ img{ @@ -403,7 +415,7 @@ img{
403 font-size: 25px; 415 font-size: 25px;
404 } 416 }
405 .protoppic{ 417 .protoppic{
406 - width:376px; 418 + width:100%;
407 height:376px; 419 height:376px;
408 font-size: 0; 420 font-size: 0;
409 } 421 }
@@ -423,7 +435,7 @@ img{ @@ -423,7 +435,7 @@ img{
423 text-overflow: ellipsis; 435 text-overflow: ellipsis;
424 white-space: nowrap; 436 white-space: nowrap;
425 text-align: center; 437 text-align: center;
426 - 438 +
427 margin:5px auto 0; 439 margin:5px auto 0;
428 440
429 } 441 }
@@ -434,3 +446,174 @@ img{ @@ -434,3 +446,174 @@ img{
434 .pronum{ 446 .pronum{
435 margin-top:54px; 447 margin-top:54px;
436 } 448 }
  449 +.ouradvantage{
  450 + width:100%;
  451 + height:526px;
  452 + background: #fff;
  453 + position: relative;
  454 +}
  455 +.neiadvantage{
  456 + width:80%;
  457 + height:320px;
  458 + position: absolute;
  459 + left:50%;
  460 + transform: translateX(-50%);
  461 + bottom:-87px;
  462 + z-index:99
  463 +
  464 +
  465 +
  466 +}
  467 +.uoushitop{
  468 + width:103px;
  469 + height:103px;
  470 + font-size: 0;
  471 + margin:0 auto;
  472 +}
  473 +.zhuanyename{
  474 + color:#3D444D;
  475 + font-size:16px;
  476 + font-weight: bold;
  477 + text-align: center;
  478 +}
  479 +.zhuantetext{
  480 + color:#5B5E63;
  481 + font-size: 12px;
  482 + line-height: 1.5;
  483 +}
  484 +.zhuanyetitlename{
  485 + color:#5B5E63;
  486 + font-size: 40px;
  487 + font-weight: bold;
  488 + text-align: center;
  489 +}
  490 +.zhuanyetitletext{
  491 + color:#5B5E63;
  492 + font-size: 25px;
  493 + text-align: center;
  494 +
  495 +}
  496 +.zongzhi{
  497 + width:100%;
  498 + height: 604px;
  499 + background: url("../image/bagimg.png")no-repeat center;
  500 + background-size: 100% 100%;
  501 + position: relative;
  502 +
  503 +
  504 +}
  505 +.zongzhitop{
  506 +
  507 + width:80%;
  508 + position: absolute;
  509 + top:35%;
  510 + left:50%;
  511 + transform: translateX(-50%);
  512 +}
  513 +.zongzhitext{
  514 + color:#F9F9F9;
  515 + font-size: 40px;
  516 + text-align: center;
  517 +}
  518 +.huanghengxian{
  519 + width:108px;
  520 +
  521 + border:2px solid rgba(239,196,0,1);
  522 + opacity:1;
  523 + margin:24px auto 0;
  524 +
  525 +}
  526 +.shuomingboxtop{
  527 + text-align: center;
  528 + color:#fff;
  529 + font-size: 12px;
  530 + margin-top:5px;
  531 +
  532 +}
  533 +.shuomingbox{
  534 + margin-top:33px;
  535 +}
  536 +.connectlist{
  537 + /*overflow: hidden;*/
  538 + /*width:80%;*/
  539 + /*margin:64px auto 0;*/
  540 + margin-top:64px;
  541 + margin-bottom:120px;
  542 +}
  543 +.connectlistitem{
  544 + float:left;
  545 +}
  546 +.connectustop{
  547 + color:#5B5E63;
  548 + font-size: 40px;
  549 + font-weight: bold;
  550 + text-align: center;
  551 + margin-top:148px;
  552 +}
  553 +.connectusname{
  554 + color:#5B5E63;
  555 + font-size: 25px;
  556 + text-align: center;
  557 +}
  558 +.listitem{
  559 +
  560 + margin-right:3%;
  561 +}
  562 +.connectlistitem:last-child{
  563 + margin-right:0
  564 +}
  565 +.connectitemimg{
  566 + width:70px;
  567 + height:70px;
  568 + font-size: 0;
  569 + margin:0 auto;
  570 +}
  571 +.footertop{
  572 + color:#fff;
  573 +}
  574 +.addressname{
  575 + margin-top:24px;
  576 + width:184px;
  577 + text-align: center;
  578 +}
  579 +/*底部*/
  580 +.footerbottom{
  581 + color:#8C9198;
  582 + text-align: center;
  583 + font-size: 12px;
  584 +
  585 + width:90%;
  586 + margin:24px auto 0;
  587 +}
  588 +.footer{
  589 + border-top:8px solid #EFC400;
  590 + width:100%;
  591 + height:174px;
  592 + background: #343434;
  593 +}
  594 +.footertop{
  595 + list-style: none;
  596 + width:80%;
  597 + margin:63px auto 0;
  598 + display:flex;
  599 + justify-content: center;
  600 + align-items: center;
  601 +
  602 +}
  603 +.footertop li{
  604 + color:#8C9198;
  605 + font-size: 12px;
  606 + padding:0 10px;
  607 +
  608 + position: relative;
  609 +}
  610 +.gsjs:after{
  611 + display:block;
  612 + content:'';
  613 + width:1px;
  614 + height:14px;
  615 + background:#8C9198 ;
  616 + position: absolute;
  617 + top:0;
  618 + right:0
  619 +}
@@ -2,6 +2,23 @@ @@ -2,6 +2,23 @@
2 .phonelist { 2 .phonelist {
3 display:none 3 display:none
4 } 4 }
  5 + .toubu{
  6 + width:56px;
  7 + height:51px;
  8 + }
  9 + .beyellow{
  10 + width:95%
  11 + }
  12 + .zongzhi{
  13 + height:383px;
  14 +
  15 + }
  16 + .zongzhitext{
  17 + font-size: 21px;
  18 + }
  19 + .zongzhitop{
  20 + top:15%
  21 + }
5 22
6 } 23 }
7 @media (min-width:768px) { 24 @media (min-width:768px) {
@@ -11,7 +28,7 @@ @@ -11,7 +28,7 @@
11 } 28 }
12 29
13 .navbar-nav>li { 30 .navbar-nav>li {
14 - float: right 31 + float: left
15 } 32 }
16 33
17 .navbar-nav>li>a { 34 .navbar-nav>li>a {
@@ -19,3 +36,29 @@ @@ -19,3 +36,29 @@
19 padding-bottom: 15px 36 padding-bottom: 15px
20 } 37 }
21 } 38 }
  39 +@media (max-width:1020px){
  40 + .toubu{
  41 + width:56px;
  42 + height:51px;
  43 + }
  44 + .navbar-right{
  45 + width:91%;
  46 + }
  47 + .navbar-right li {
  48 + padding: 0 9px;
  49 + }
  50 + .neiadvantage{
  51 + position: relative;
  52 + top:0;
  53 + bottom:0
  54 + }
  55 + .ouradvantage{
  56 + height:705px;
  57 + }
  58 +
  59 +}
  60 +@media (max-width:1200px){
  61 + .listitem{
  62 + margin-right:0
  63 + }
  64 +}
@@ -9,13 +9,19 @@ @@ -9,13 +9,19 @@
9 <link rel="stylesheet" href="css/base.css"> 9 <link rel="stylesheet" href="css/base.css">
10 <link rel="stylesheet" href="css/swiperfour.css"> 10 <link rel="stylesheet" href="css/swiperfour.css">
11 <link rel="stylesheet" href="css/common.css"> 11 <link rel="stylesheet" href="css/common.css">
  12 + <style>
  13 + #container{
  14 + width:75%;
  15 + height:379px;
  16 + margin:64px auto 0;
  17 + }
  18 + </style>
12 </head> 19 </head>
13 <body> 20 <body>
14 21
15 <!--头部导航--> 22 <!--头部导航-->
16 <nav id="common-nav" class="navbar navbar-inverse navbar-fixed-top"> 23 <nav id="common-nav" class="navbar navbar-inverse navbar-fixed-top">
17 <div class="container containerbox"> 24 <div class="container containerbox">
18 - <!-- Brand and toggle get grouped for better mobile display -->  
19 <div class="navbar-header"> 25 <div class="navbar-header">
20 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 26 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
21 <span class="sr-only">Toggle navigation</span> 27 <span class="sr-only">Toggle navigation</span>
@@ -28,7 +34,6 @@ @@ -28,7 +34,6 @@
28 </div> 34 </div>
29 </div> 35 </div>
30 36
31 - <!-- Collect the nav links, forms, and other content for toggling -->  
32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 37 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
33 <div class="nav navbar-nav navbar-right phonelist"> 38 <div class="nav navbar-nav navbar-right phonelist">
34 <div class="phoneimg"> 39 <div class="phoneimg">
@@ -49,20 +54,14 @@ @@ -49,20 +54,14 @@
49 54
50 <ul class="nav navbar-nav navbar-right navtou"> 55 <ul class="nav navbar-nav navbar-right navtou">
51 <li> 56 <li>
52 - <a href="{:url('portal/invitePeople/viewOfPeople')}">  
53 - 联系我们  
54 - </a> 57 + <a href="" class="navactive">网站首页</a>
55 </li> 58 </li>
56 - <li>  
57 - <a href="">  
58 - 资料下载  
59 59
60 - </a>  
61 - </li>  
62 <li> 60 <li>
63 <a href=""> 61 <a href="">
64 - 主要服务 62 + 公司介绍
65 </a> 63 </a>
  64 +
66 </li> 65 </li>
67 <li> 66 <li>
68 <a href="" > 67 <a href="" >
@@ -72,14 +71,26 @@ @@ -72,14 +71,26 @@
72 </li> 71 </li>
73 <li> 72 <li>
74 <a href=""> 73 <a href="">
75 - 公司介绍 74 + 主要服务
76 </a> 75 </a>
  76 + </li>
  77 + <li>
  78 + <a href="">
  79 + 资料下载
77 80
  81 + </a>
78 </li> 82 </li>
  83 +
79 <li> 84 <li>
80 - <a href="" class="navactive">网站首页</a> 85 + <a href="">
  86 + 联系我们
  87 + </a>
81 </li> 88 </li>
82 89
  90 +
  91 +
  92 +
  93 +
83 </ul> 94 </ul>
84 </div><!-- /.navbar-collapse --> 95 </div><!-- /.navbar-collapse -->
85 96
@@ -110,14 +121,14 @@ @@ -110,14 +121,14 @@
110 <div class="container"> 121 <div class="container">
111 122
112 <div class="row aboutwomen"> 123 <div class="row aboutwomen">
113 - <div class="col-md-6 col-sm-12"> 124 + <div class="col-md-5 col-sm-12">
114 <div class="beyellow"> 125 <div class="beyellow">
115 <div class="beiimg"> 126 <div class="beiimg">
116 <img src="image/beijing.png" alt=""> 127 <img src="image/beijing.png" alt="">
117 </div> 128 </div>
118 </div> 129 </div>
119 </div> 130 </div>
120 - <div class="col-md-6 col-sm-12"> 131 + <div class="col-md-5 col-sm-12 guanyuwomenzi">
121 <div class="guanyuour"> 132 <div class="guanyuour">
122 <div class="guanyuourtop">ABOUT US</div> 133 <div class="guanyuourtop">ABOUT US</div>
123 <div class="guanyuourbottom">关于我们</div> 134 <div class="guanyuourbottom">关于我们</div>
@@ -187,6 +198,137 @@ @@ -187,6 +198,137 @@
187 198
188 </div> 199 </div>
189 200
  201 +<!--我们的优势-->
  202 +<div class="ouradvantage">
  203 + <div class="neiadvantage">
  204 + <div class="container">
  205 + <div class="zhuanyetitle">
  206 + <div class="zhuanyetitlename">our advantages</div>
  207 + <div class="zhuanyetitletext">我们的优势</div>
  208 + </div>
  209 + <div class="row">
  210 + <div class="col-md-4 col-sm-12">
  211 + <div class="uoushitop">
  212 + <img src="image/tuandui.png" alt="">
  213 + </div>
  214 + <div class="zhuanyename">专业的维修团队</div>
  215 + <div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。
  216 + 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。</div>
  217 + </div>
  218 + <div class="col-md-4 col-sm-12">
  219 + <div class="uoushitop">
  220 + <img src="image/tuandui.png" alt="">
  221 + </div>
  222 + <div class="zhuanyename">专业的维修团队</div>
  223 + <div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。
  224 + 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。</div>
  225 + </div>
  226 + <div class="col-md-4 col-sm-12">
  227 + <div class="uoushitop">
  228 + <img src="image/tuandui.png" alt="">
  229 + </div>
  230 + <div class="zhuanyename">专业的维修团队</div>
  231 + <div class="zhuantetext">基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。
  232 + 调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。</div>
  233 + </div>
  234 +
  235 + </div>
  236 + </div>
  237 + </div>
  238 +</div>
  239 +
  240 +<!--我们的宗旨-->
  241 +<div class="zongzhi">
  242 +
  243 + <div class="zongzhitop">
  244 + <div class="zongzhitext">
  245 + 本公司本着“诚信服务、合理价格”的宗旨
  246 + 为新老客户提供优质服务
  247 + </div>
  248 + <div class="huanghengxian"></div>
  249 + <div class="shuomingbox">
  250 + <div class="shuomingboxtop">公司拥有专业的维修团队，经验丰富。</div>
  251 + <div class="shuomingboxtop">从技术咨询、到现场故障诊断，都可以提供专业服务，维修周期短、修复质量高、及时解决问题。</div>
  252 + <div class="shuomingboxtop">本公司备有大量现货，价格优惠，交货快捷， 质量可靠。</div>
  253 + <div class="shuomingboxtop">为企业节省了大量的资金，缩短了停产周期，提高了工作效率，在用户中树立了良好的口碑。</div>
  254 + </div>
  255 +
  256 + </div>
  257 +
  258 +
  259 +</div>
  260 +
  261 +<!--联系我们-->
  262 +<div class="connectus">
  263 + <div class="connectopbox">
  264 + <div class="connectustop">contact us</div>
  265 + <div class="connectusname">联系我们</div>
  266 + </div>
  267 +
  268 + <div class="connectmap">
  269 + <div id="container" ></div>
  270 +
  271 + </div>
  272 + <div class="connectlist">
  273 + <div class="container">
  274 + <div class="row">
  275 + <div class="col-md-2 listitem">
  276 + <div class="connectlistitem">
  277 + <div class="connectitemimg">
  278 + <img src="image/address.png" alt="">
  279 + </div>
  280 + <div class="addressname">天津市西青区华科大街1号</div>
  281 + </div>
  282 + </div>
  283 + <div class="col-md-2 listitem">
  284 + <div class="connectlistitem">
  285 + <div class="connectitemimg">
  286 + <img src="image/dianhua.png" alt="">
  287 + </div>
  288 + <div class="addressname">18888888888</div>
  289 + </div>
  290 + </div>
  291 + <div class="col-md-2 listitem">
  292 + <div class="connectlistitem">
  293 + <div class="connectitemimg">
  294 + <img src="image/pingban.png" alt="">
  295 + </div>
  296 + <div class="addressname">15688888888</div>
  297 + </div>
  298 + </div>
  299 + <div class="col-md-2 listitem">
  300 + <div class="connectlistitem">
  301 + <div class="connectitemimg">
  302 + <img src="image/weixin.png" alt="">
  303 + </div>
  304 + <div class="addressname">15688888888</div>
  305 + </div>
  306 + </div>
  307 + <div class="cil-md-2 listitem">
  308 + <div class="connectlistitem">
  309 + <div class="connectitemimg">
  310 + <img src="image/xinxi.png" alt="">
  311 + </div>
  312 + <div class="addressname">88888888@163.com</div>
  313 + </div>
  314 + </div>
  315 + </div>
  316 + </div>
  317 + </div>
  318 +
  319 +</div>
  320 +
  321 +<!--底部信息-->
  322 +<div class="footer">
  323 + <ul class="footertop">
  324 + <li class="gsjs">公司介绍</li>
  325 + <li class="gsjs">产品系列</li>
  326 + <li class="gsjs">主要服务</li>
  327 + <li >联系我们</li>
  328 + </ul>
  329 + <div class="footerbottom">小黄人智能科技有限公司主营：高速电机、同步伺服电机、大功率伺服电机、异步伺服电机等，质量可靠，价格公道，欢迎选购。沪公网安备 31011202006407号</div>
  330 +</div>
  331 +
190 <!--客服--> 332 <!--客服-->
191 <div class="kefubox"> 333 <div class="kefubox">
192 <div class="kefutop"> 334 <div class="kefutop">
@@ -203,6 +345,7 @@ @@ -203,6 +345,7 @@
203 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 345 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
204 <script type="text/javascript" src="js/bootstrap.min.js"></script> 346 <script type="text/javascript" src="js/bootstrap.min.js"></script>
205 <script type="text/javascript" src="js/swiperfour.min.js"></script> 347 <script type="text/javascript" src="js/swiperfour.min.js"></script>
  348 +<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=735d888fa7a9599eea4de210edc32335"></script>
206 <script> 349 <script>
207 350
208 351
@@ -226,6 +369,19 @@ @@ -226,6 +369,19 @@
226 $(this).parents("li").siblings("li").children("a").removeClass("navactive") 369 $(this).parents("li").siblings("li").children("a").removeClass("navactive")
227 }) 370 })
228 371
  372 +
  373 +
  374 +
  375 + var map = new AMap.Map('container', {
  376 + resizeEnable: true,
  377 + center:[116.480983, 39.989628],
  378 + zoom:11
  379 + });
  380 + AMap.plugin('AMap.ToolBar',function(){
  381 + var toolbar = new AMap.ToolBar();
  382 + map.addControl(toolbar)
  383 + })
  384 +
229 </script> 385 </script>
230 386
231 </html> 387 </html>