webfront / zhongyingwen · 提交

转到一个项目

作者 lihongjuan
提交 9e5fa4225b999339daf76233e40b8738f6c9537e 1 个父辈 21c7a374

23434

内嵌 并排对比
正在显示 11 个修改的文件 包含 648 行增加 和 12 行删除
  1 +*{
  2 + margin:0;
  3 + padding: 0;
  4 +}
  5 +.swiper-container{
  6 + margin-top:100px;
  7 +}
  8 +
1 .swiper-slide{ 9 .swiper-slide{
2 - width:1920px; 10 + width:100%;
3 height:640px; 11 height:640px;
  12 + position: relative;
4 13
5 } 14 }
  15 +#common-nav{
  16 + /*height:131px;*/
  17 +}
  18 +.containerbox{
  19 + /*height:100%;*/
  20 + padding: 21px 32px;
  21 + box-sizing: border-box;
  22 +}
6 img{ 23 img{
7 width:100%; 24 width:100%;
8 height:100% 25 height:100%
9 } 26 }
  27 +.seenow{
  28 + width:123px;
  29 + height:39px;
  30 + background:rgba(239,196,0,1);
  31 + opacity:1;
  32 + color:#fff;
  33 + font-size: 19px;
  34 + text-align: center;
  35 + line-height: 39px;
  36 + position: absolute;
  37 + top:70%;
  38 + left:20%;
  39 + z-index:999
  40 +}
  41 +.phonelist{
  42 + padding:0 14px;
  43 + box-sizing: border-box;
  44 + display:flex;
  45 + align-items: center;
  46 + justify-content: flex-end;
  47 +}
  48 +.shuru{
  49 + width:258px;
  50 + height:24px;
  51 + line-height: 24px;
  52 + overflow: hidden;
  53 + border:1px solid #BDC4CE;
  54 + border-radius: 90px;
  55 +
  56 + padding: 0 12px;
  57 + box-sizing: border-box;
  58 + display:flex;
  59 + align-items: center;
  60 + justify-content: space-between;
  61 + margin-left:37px;
  62 +
  63 +}
  64 +.entershu{
  65 + width:200px;
  66 + /*height:24px;*/
  67 +
  68 +}
  69 +.qiehuan{
  70 + width:44px;
  71 + height:23px;
  72 + background:#2D70EF ;
  73 + border-radius: 12px;
  74 + color:#F9F9F9;
  75 + font-size: 16px;
  76 + text-align: center;
  77 + line-height: 23px;
  78 + margin-left:22px;
  79 +}
  80 +.entershu input{
  81 + width:100%;
  82 + height:100%;
  83 + border:none;
  84 + outline: none;
  85 +
  86 +
  87 +}
  88 +.souimg{
  89 + width:16px;
  90 + height:22px;
  91 + font-size: 0;
  92 +
  93 +
  94 +}
  95 +
  96 +
  97 +/*头部标题*/
  98 +.phoneimg{
  99 + width:26px;
  100 + height:26px;
  101 + font-size: 0;
  102 + float:right
  103 +
  104 +}
  105 +.phonenum{
  106 + color:#5B5E63;
  107 + font-size: 26px;
  108 + margin-left:8px;
  109 +
  110 +
  111 +}
  112 +
  113 +.toubu{
  114 + width:86px;
  115 + height:81px;
  116 + font-size: 0;
  117 +
  118 +}
  119 +.toubuname{
  120 + color:#333;
  121 + font-size:20px;
  122 + font-weight: bold;
  123 + margin-right:20px;
  124 + /*float:left;*/
  125 +}
  126 +
  127 +
  128 +.navbar-brand{
  129 + margin-bottom:12px;
  130 + /*float:left;*/
  131 +}
  132 +
  133 +
  134 +
  135 +/*
  136 + * 页数按钮样式
  137 + */
  138 +.page_div a {
  139 + min-width: 30px;
  140 + height: 28px;
  141 + border: 1px solid #dce0e0!important;
  142 + text-align: center;
  143 + margin: 0 4px;
  144 + cursor: pointer;
  145 + line-height: 28px;
  146 + color: #666666;
  147 + font-size: 13px;
  148 + display: inline-block;
  149 +}
  150 +#firstPage,
  151 +#lastPage {
  152 + width: 50px;
  153 + color: #0286FF;
  154 + border: 1px solid #0286FF!important;
  155 +}
  156 +#prePage,
  157 +#nextPage {
  158 + width: 70px;
  159 + color: #0286FF;
  160 + border: 1px solid #0286FF!important;
  161 +}
  162 +.page_div .current {
  163 + background-color: #0286FF;
  164 + border-color:#0286FF;
  165 + color: #FFFFFF;
  166 +}
  167 +.totalPages {
  168 + margin: 0 10px;
  169 +}
  170 +.totalPages span,
  171 +.totalSize span {
  172 + color: #0073A9;
  173 + margin: 0 5px;
  174 +}
  175 +/***************************************/
  176 +.navbar-toggle{
  177 + background:#8EC63F ;
  178 + opacity: 0.4;
  179 +}
  180 +.navbar-inverse .navbar-toggle:hover {
  181 + background:#8EC63F ;
  182 + opacity: 0.4;
  183 +}
  184 +.navbar-right{
  185 + width:85%;
  186 + margin-top:5px;
  187 +}
  188 +.navbar-right li{
  189 + padding: 0 14px;
  190 +}
  191 +.navbar-inverse {
  192 + background:#fff;
  193 + box-shadow:0px 4px 8px 0px rgba(78,78,78,0.1);
  194 + border:none;
  195 +}
  196 +.navbar-inverse .navbar-nav > li > a {
  197 + color: #171717;
  198 +}
  199 +.navbar-inverse .navbar-nav > li > a.navactive {
  200 + color: #2D70EF;
  201 + position: relative;
  202 +
  203 +}
  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;*/
  219 +/*}*/
  220 +.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
  221 + color: #fff;
  222 + background-color: transparent;
  223 +}
  224 +.navbar-inverse .navbar-toggle {
  225 + border:none ;
  226 +}
  227 +/*.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{*/
  228 +/*background:transparent;*/
  229 +/*}*/
  230 +
  231 +.navbar-header{
  232 + border:none;
  233 +}
  234 +.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  235 + border: none;
  236 + background:rgba(255,255,255,0.5);
  237 +}
  238 +
  239 +
  240 +.indexcourael li em{
  241 + display: inline-block;
  242 + width: 8px;
  243 + height: 8px;
  244 + /*margin: 1px;*/
  245 + text-indent: -999px;
  246 + cursor: pointer;
  247 +
  248 + background-color:#fff;
  249 + border: 1px solid #fff;
  250 + border-radius: 10px;
  251 + position: absolute;
  252 + top:10%;
  253 + left:0;
  254 + right:0;
  255 + margin: 0 auto;
  256 +
  257 +}
  258 +.indexcourael li{
  259 + display: inline-block;
  260 + width: 12px;
  261 + height: 12px;
  262 +
  263 + text-indent: -999px;
  264 + cursor: pointer;
  265 + background-color: transparent ;
  266 +
  267 + border: none;
  268 + border-radius: 10px;
  269 + position: relative;
  270 +
  271 +}
  272 +.indexcourael .active em{
  273 + width: 6px;
  274 + height:6px;
  275 + background-color: #fff;
  276 + position: absolute;
  277 + top:24%;
  278 + left:0;
  279 + right:0;
  280 + margin: 0 auto;
  281 +}
  282 +.indexcourael .active {
  283 + width: 15px;
  284 + height: 15px;
  285 + margin: 0;
  286 + background: transparent;
  287 + border:1px solid #fff;
  288 +
  289 +}
  290 +.indexcourael{
  291 + bottom:55px;
  292 +}
  293 +.positionlist a{
  294 + color:#999999;
  295 + font-size: 18px;
  296 +}
  297 +
  298 +
  299 +/*关于我们*/
  300 +.beyellow{
  301 + width:470px;
  302 + height:182px;
  303 + background: #EFC400;
  304 + position: relative;
  305 + margin-top:299px;
  306 +}
  307 +.beiimg{
  308 + width:473px;
  309 + height:314px;
  310 + font-size: 0;
  311 + position: absolute;
  312 + left:18px;
  313 + bottom:18px;
  314 + z-index:999
  315 +}
  316 +.guanyuourtop{
  317 + color:#3D444D;
  318 + font-size: 40px;
  319 + font-weight: bold;
  320 +
  321 +}
  322 +.guanyuourbottom{
  323 + color:#3D444D;
  324 + font-size: 25px;
  325 + /*margin-top:2px;*/
  326 +}
  327 +.guanyuour{
  328 + margin-top:144px;
  329 + position: relative;
  330 + padding-left: 10px;
  331 +}
  332 +.guanyuour:before{
  333 + display:block;
  334 + content:'';
  335 + position: absolute;
  336 + top:0;
  337 + left:0;
  338 + width:2px;
  339 + height:90px;
  340 + background:#2D70EF ;
  341 +}
  342 +.introtext{
  343 + width:573px;
  344 + height:130px;
  345 + color:#3D444D;
  346 + font-size: 16px;
  347 + margin-top:35px;
  348 + display: -webkit-box;
  349 + -webkit-box-orient: vertical;
  350 + -webkit-line-clamp: 6;
  351 + overflow: hidden;
  352 +}
  353 +.seegengduo{
  354 + width:131px;
  355 + height:30px;
  356 + background:rgba(45,112,239,1);
  357 + opacity:1;
  358 + color:#fff;
  359 + font-size: 16px;
  360 + text-align: center;
  361 + line-height: 30px;
  362 + margin-top:25px;
  363 +
  364 +}
  365 +.aboutwomen{
  366 + padding-bottom:181px ;
  367 + /*background:#F0F9FD;*/
  368 +}
  369 +.womencontainer{
  370 + background: #FFFFFF;
  371 +}
  372 +.kefutop{
  373 + width:40px;
  374 + height:40px;
  375 + font-size: 0;
  376 + background:#2D70EF ;
  377 + border-radius: 4px;
  378 + padding: 8px;
  379 + box-sizing: border-box;
  380 +}
  381 +.dingbu{
  382 + margin-top:14px;
  383 +}
  384 +.kefubox{
  385 + position: fixed;
  386 + right:5%;
  387 + top:85%;
  388 +}
  389 +.ourproduct{
  390 + background:#F0F9FD;
  391 + padding: 71px 0 92px;
  392 + box-sizing: border-box;
  393 +}
  394 +.pronametop{
  395 + color:#5B5E63;
  396 + font-size: 40px;
  397 + font-weight: bold;
  398 + text-align: center;
  399 +}
  400 +.pronamebottom{
  401 + text-align: center;
  402 + color:#5B5E63;
  403 + font-size: 25px;
  404 +}
  405 +.protoppic{
  406 + width:376px;
  407 + height:376px;
  408 + font-size: 0;
  409 +}
  410 +.propicname{
  411 + color:#3D444D;
  412 + font-size: 22px;
  413 + text-align: center;
  414 + font-weight: bold;
  415 + margin-top:23px;
  416 +
  417 +}
  418 +.propictext{
  419 + color:#5B5E63;
  420 + font-size: 16px;
  421 + width:300px;
  422 + overflow: hidden;
  423 + text-overflow: ellipsis;
  424 + white-space: nowrap;
  425 + text-align: center;
  426 +
  427 + margin:5px auto 0;
  428 +
  429 +}
  430 +.propicbottom{
  431 + padding: 23px 20px 52px;
  432 + box-sizing: border-box;
  433 +}
  434 +.pronum{
  435 + margin-top:54px;
  436 +}
此 diff 太大无法显示。
  1 +@media (max-width: 750px) {
  2 + .phonelist {
  3 + display:none
  4 + }
  5 +
  6 +}
  7 +@media (min-width:768px) {
  8 + .navbar-nav {
  9 + float: left;
  10 + margin: 0
  11 + }
  12 +
  13 + .navbar-nav>li {
  14 + float: right
  15 + }
  16 +
  17 + .navbar-nav>li>a {
  18 + padding-top: 15px;
  19 + padding-bottom: 15px
  20 + }
  21 +}
@@ -214,7 +214,7 @@ @@ -214,7 +214,7 @@
214 transition: 300ms opacity; 214 transition: 300ms opacity;
215 -webkit-transform: translate3d(0, 0, 0); 215 -webkit-transform: translate3d(0, 0, 0);
216 transform: translate3d(0, 0, 0); 216 transform: translate3d(0, 0, 0);
217 - z-index: 10; 217 + z-index: 99;
218 } 218 }
219 .swiper-pagination.swiper-pagination-hidden { 219 .swiper-pagination.swiper-pagination-hidden {
220 opacity: 0; 220 opacity: 0;
@@ -273,8 +273,10 @@ @@ -273,8 +273,10 @@
273 height: 8px; 273 height: 8px;
274 display: inline-block; 274 display: inline-block;
275 border-radius: 100%; 275 border-radius: 100%;
276 - background: #000; 276 + border:2px solid #fff;
277 opacity: 0.2; 277 opacity: 0.2;
  278 + background: transparent;
  279 +
278 } 280 }
279 button.swiper-pagination-bullet { 281 button.swiper-pagination-bullet {
280 border: none; 282 border: none;
@@ -291,7 +293,7 @@ button.swiper-pagination-bullet { @@ -291,7 +293,7 @@ button.swiper-pagination-bullet {
291 } 293 }
292 .swiper-pagination-bullet-active { 294 .swiper-pagination-bullet-active {
293 opacity: 1; 295 opacity: 1;
294 - background: #007aff; 296 + background: #fff;
295 } 297 }
296 .swiper-container-vertical > .swiper-pagination-bullets { 298 .swiper-container-vertical > .swiper-pagination-bullets {
297 right: 10px; 299 right: 10px;

415 字节
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="zh-CN"> 2 +<html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,39 +7,225 @@ @@ -7,39 +7,225 @@
7 <title>首页</title> 7 <title>首页</title>
8 <link rel="stylesheet" href="css/bootstrap.min.css"> 8 <link rel="stylesheet" href="css/bootstrap.min.css">
9 <link rel="stylesheet" href="css/base.css"> 9 <link rel="stylesheet" href="css/base.css">
10 - <link rel="stylesheet" href="css/swiperthree.css"> 10 + <link rel="stylesheet" href="css/swiperfour.css">
  11 + <link rel="stylesheet" href="css/common.css">
11 </head> 12 </head>
12 <body> 13 <body>
13 -<div class="container">  
14 - <div class="swiper-container"> 14 +
  15 +<!--头部导航-->
  16 +<nav id="common-nav" class="navbar navbar-inverse navbar-fixed-top">
  17 + <div class="container containerbox">
  18 + <!-- Brand and toggle get grouped for better mobile display -->
  19 + <div class="navbar-header">
  20 + <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>
  22 + <span class="icon-bar"></span>
  23 + <span class="icon-bar"></span>
  24 + <span class="icon-bar"></span>
  25 + </button>
  26 + <div class="toubu">
  27 + <img class="navbar-logo" src="image/logo.png">
  28 + </div>
  29 + </div>
  30 +
  31 + <!-- Collect the nav links, forms, and other content for toggling -->
  32 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  33 + <div class="nav navbar-nav navbar-right phonelist">
  34 + <div class="phoneimg">
  35 + <img src="image/phone.png" alt="">
  36 + </div>
  37 + <div class="phonenum">022-89999999</div>
  38 + <div class="shuru">
  39 + <div class="entershu">
  40 + <input type="text">
  41 + </div>
  42 + <div class="souimg">
  43 + <img src="image/sousuo.png" alt="">
  44 + </div>
  45 + </div>
  46 + <div class="qiehuan">EN</div>
  47 + </div>
  48 +
  49 +
  50 + <ul class="nav navbar-nav navbar-right navtou">
  51 + <li>
  52 + <a href="{:url('portal/invitePeople/viewOfPeople')}">
  53 + 联系我们
  54 + </a>
  55 + </li>
  56 + <li>
  57 + <a href="">
  58 + 资料下载
  59 +
  60 + </a>
  61 + </li>
  62 + <li>
  63 + <a href="">
  64 + 主要服务
  65 + </a>
  66 + </li>
  67 + <li>
  68 + <a href="" >
  69 + 产品系列
  70 +
  71 + </a>
  72 + </li>
  73 + <li>
  74 + <a href="">
  75 + 公司介绍
  76 + </a>
  77 +
  78 + </li>
  79 + <li>
  80 + <a href="" class="navactive">网站首页</a>
  81 + </li>
  82 +
  83 + </ul>
  84 + </div><!-- /.navbar-collapse -->
  85 +
  86 +
  87 + </div><!-- /.container-fluid -->
  88 +</nav>
  89 +<div class="swiper-container" >
15 <div class="swiper-wrapper"> 90 <div class="swiper-wrapper">
16 <div class="swiper-slide"> 91 <div class="swiper-slide">
17 <img src="image/banner.png" alt=""> 92 <img src="image/banner.png" alt="">
  93 +<!-- <div class="seenow">立即查看></div>-->
18 </div> 94 </div>
19 <div class="swiper-slide"> 95 <div class="swiper-slide">
20 <img src="image/banner.png" alt=""> 96 <img src="image/banner.png" alt="">
  97 +<!-- <div class="seenow">立即查看></div>-->
21 </div> 98 </div>
22 <div class="swiper-slide"> 99 <div class="swiper-slide">
23 <img src="image/banner.png" alt=""> 100 <img src="image/banner.png" alt="">
  101 +<!-- <div class="seenow">立即查看></div>-->
24 </div> 102 </div>
25 </div> 103 </div>
26 <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。--> 104 <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
  105 +
  106 +
  107 +</div>
  108 +<!-- 关于我们-->
  109 +<div class="womencontainer">
  110 + <div class="container">
  111 +
  112 + <div class="row aboutwomen">
  113 + <div class="col-md-6 col-sm-12">
  114 + <div class="beyellow">
  115 + <div class="beiimg">
  116 + <img src="image/beijing.png" alt="">
  117 + </div>
  118 + </div>
  119 + </div>
  120 + <div class="col-md-6 col-sm-12">
  121 + <div class="guanyuour">
  122 + <div class="guanyuourtop">ABOUT US</div>
  123 + <div class="guanyuourbottom">关于我们</div>
  124 + </div>
  125 +
  126 + <div class="introtext">
  127 + 天津小黄人智能科技有限公司是一家以工业自动化产品维修、
  128 + 销售的高新科技企业，拥有专业发那科维修设备，完善的产品
  129 + 检测设备和强大的售后团队。主要经营发那科设备检测平台搭建，
  130 + 开通功能，发那科设备快修保养及销售，主要经营包括： 交流伺服
  131 + 放大器、伺器电源、伺服电机、主轴电机、 编码器、手摇脉冲发生器
  132 + 、 控制板，MDI 单元、操作面板、触摸屏等产品。
  133 + 天津小黄人智能科技有限公司是一家以工业自动化产品维修、
  134 + 销售的高新科技企
  135 +
  136 + </div>
  137 +
  138 + <div class="seegengduo">查看更多>></div>
  139 + </div>
  140 + </div>
27 </div> 141 </div>
28 </div> 142 </div>
29 143
  144 +<!--我们的产品-->
  145 +<div class="ourproduct">
  146 + <div class="container">
  147 + <div class="proname">
  148 + <div class="pronametop">our product</div>
  149 + <div class="pronamebottom">我们的产品</div>
  150 + </div>
  151 + <div class="row pronum">
  152 + <div class="col-md-4">
  153 + <div class="protoppic">
  154 + <img src="image/xitong.png" alt="">
  155 + </div>
  156 + <div class="propicbottom">
  157 + <div class="propicname">
  158 + 系统
  159 + </div>
  160 + <div class="propictext">0i系统、18i-21i系统、31i-32i系统、显示器</div>
  161 + </div>
  162 + </div>
  163 + <div class="col-md-4">
  164 + <div class="protoppic">
  165 + <img src="image/dianji.png" alt="">
  166 + </div>
  167 + <div class="propicbottom">
  168 + <div class="propicname">
  169 + 电机
  170 + </div>
  171 + <div class="propictext">主轴电机、伺服电机</div>
  172 + </div>
  173 + </div>
  174 + <div class="col-md-4">
  175 + <div class="protoppic">
  176 + <img src="image/qudongqi.png" alt="">
  177 + </div>
  178 + <div class="propicbottom">
  179 + <div class="propicname">
  180 + 驱动器
  181 + </div>
  182 + <div class="propictext">电源驱动、主轴驱动、伺服驱动、一体化驱动</div>
  183 + </div>
  184 + </div>
  185 + </div>
  186 + </div>
  187 +
  188 +</div>
  189 +
  190 +<!--客服-->
  191 +<div class="kefubox">
  192 + <div class="kefutop">
  193 + <img src="image/kefu.png" alt="">
  194 + </div>
  195 + <div class="kefutop dingbu">
  196 + <img src="image/top.png" alt="">
  197 + </div>
  198 +</div>
  199 +
  200 +
30 201
31 </body> 202 </body>
32 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 203 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
33 <script type="text/javascript" src="js/bootstrap.min.js"></script> 204 <script type="text/javascript" src="js/bootstrap.min.js"></script>
34 -<script type="text/javascript" src="js/swiper4.min.js"></script> 205 +<script type="text/javascript" src="js/swiperfour.min.js"></script>
35 <script> 206 <script>
36 - var mySwiper = new Swiper('.swiper-container',{ 207 +
  208 +
  209 + var mySwiper = new Swiper ('.swiper-container', {
  210 +
  211 + loop: true,
  212 + // autoplay:true,
  213 +
  214 + // duration:1000,
  215 + // 如果需要分页器
37 pagination: { 216 pagination: {
38 el: '.swiper-pagination', 217 el: '.swiper-pagination',
39 - clickable :true,  
40 - loop : true,  
41 }, 218 },
  219 +
  220 +
42 }) 221 })
  222 +
  223 + $("a").mouseenter(function(){
  224 + console.log(9999)
  225 + $(this).addClass("navactive");
  226 + $(this).parents("li").siblings("li").children("a").removeClass("navactive")
  227 + })
  228 +
43 </script> 229 </script>
44 230
45 </html> 231 </html>