作者 乔爽

update

  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>首页</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 +
  9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
  10 + <link rel="stylesheet" type="text/css" href="css/banner.css">
  11 + <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
  12 +
  13 + <script src="js/base.js"></script>
  14 + <style>
  15 + .banner{
  16 + width: 7.5rem;
  17 + height: 100%;
  18 + position: relative;
  19 + }
  20 + .banner_pic{
  21 + width: 7.5rem;
  22 + height:100%;
  23 + display: flex;
  24 + }
  25 + .banner_pic img{
  26 + width: 100%;
  27 + height: 100%
  28 + }
  29 + .swiper-pagination-bullet{
  30 + background-color: #7ECEF4;
  31 + }
  32 + .swiper-pagination-bullet-active{
  33 + background-color: #ffffff;
  34 + }
  35 + /*按钮之间的间隔*/
  36 + .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
  37 + margin: 0 0.6rem;
  38 + }
  39 + </style>
  40 +</head>
  41 +<body>
  42 +<div class="banner">
  43 +
  44 + <!-- Swiper -->
  45 + <div class="swiper-container">
  46 + <div class="swiper-wrapper">
  47 + <div class="swiper-slide banner_pic">
  48 + <img src="images/banner.png">
  49 + <div class="btn_button">点击进入 天津汽车零部件展网站>></div>
  50 + </div>
  51 + <div class="swiper-slide banner_pic">
  52 + <img src="images/banner.png">
  53 + <div class="btn_button">点击进入 工业装配及自动化展网站>></div>
  54 + </div>
  55 + <div class="swiper-slide banner_pic">
  56 + <img src="images/banner.png">
  57 + <div class="btn_button">点击进入 天津汽车零部件展网站>></div>
  58 + </div>
  59 +
  60 + </div>
  61 + <!-- Add Pagination -->
  62 + <div class="swiper-pagination"></div>
  63 + </div>
  64 +
  65 +</div>
  66 +</body>
  67 +<script src="js/jquery.min.js"></script>
  68 +<script src="js/swiper-3.4.2.jquery.min.js"></script>
  69 +<script>
  70 + $('.btn_button').click(function () {
  71 + console.log(111)
  72 + window.location.href = "index.html";
  73 + })
  74 + var swiper = new Swiper('.swiper-container',{
  75 + // autoplay: {
  76 + // delay: 3000,
  77 + // disableOnInteraction: false,
  78 + // },
  79 + loop: true, // 循环模式选项
  80 +
  81 + pagination: {
  82 + el: '.swiper-pagination',
  83 + },
  84 + });
  85 +</script>
  86 +</html>
  1 +body,html{
  2 + width:100%;
  3 + height:100%;
  4 +}
  5 +.banner{
  6 + height:100%;
  7 +}
  8 +body{
  9 + background-color: #F4F5F9;
  10 +}
  11 +*{
  12 + margin: 0;
  13 + padding: 0;
  14 +}
  15 +
  16 +.btn_button{
  17 + width: 100%;
  18 + font-size: 0.26rem;
  19 + font-family:MicrosoftYaHei;
  20 + font-weight:400;
  21 + color:rgba(255,255,255,1);
  22 + line-height:79px;
  23 + text-align: center;
  24 + position: absolute;
  25 + bottom: 0.8rem;
  26 +}
  27 +
@@ -15,10 +15,31 @@ body{ @@ -15,10 +15,31 @@ body{
15 } 15 }
16 .head{ 16 .head{
17 width: 7.5rem; 17 width: 7.5rem;
  18 + height: 0.88rem;
  19 + background:rgba(201,201,201,1);
  20 + position: fixed;
  21 + top: 0;
  22 + left: 0;
  23 + z-index: 999;
  24 + display: flex;
  25 + align-items: center;
  26 + justify-content: space-between;
  27 + box-sizing: border-box;
  28 + padding: 0 0.2rem;
  29 +}
  30 +.head_new{
  31 + font-size: 0.3rem;
  32 + color: rgba(68,68,68,1);
  33 + font-weight: bold;
  34 +
  35 +}
  36 +.head_pic{
  37 + width: 7.5rem;
18 height: 2.18rem; 38 height: 2.18rem;
19 display: flex; 39 display: flex;
  40 + margin-top: 0.88rem;
20 } 41 }
21 -.head img{ 42 +.head_pic img{
22 width: 100%; 43 width: 100%;
23 height: 100%; 44 height: 100%;
24 } 45 }
@@ -15,10 +15,31 @@ body{ @@ -15,10 +15,31 @@ body{
15 } 15 }
16 .head{ 16 .head{
17 width: 7.5rem; 17 width: 7.5rem;
  18 + height: 0.88rem;
  19 + background:rgba(201,201,201,1);
  20 + position: fixed;
  21 + top: 0;
  22 + left: 0;
  23 + z-index: 999;
  24 + display: flex;
  25 + align-items: center;
  26 + justify-content: space-between;
  27 + box-sizing: border-box;
  28 + padding: 0 0.2rem;
  29 +}
  30 +.head_new{
  31 + font-size: 0.3rem;
  32 + color: rgba(68,68,68,1);
  33 + font-weight: bold;
  34 +
  35 +}
  36 +.head_pic{
  37 + width: 7.5rem;
18 height: 2.9rem; 38 height: 2.9rem;
19 display: flex; 39 display: flex;
  40 + margin-top: 0.88rem;
20 } 41 }
21 -.head img{ 42 +.head_pic img{
22 width: 100%; 43 width: 100%;
23 height: 100%; 44 height: 100%;
24 } 45 }
@@ -18,6 +18,10 @@ body{ @@ -18,6 +18,10 @@ body{
18 background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8)); 18 background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8));
19 display: flex; 19 display: flex;
20 } 20 }
  21 +.head img{
  22 + width: 100%;
  23 + height: 100%;
  24 +}
21 .menu{ 25 .menu{
22 width: 6.86rem; 26 width: 6.86rem;
23 display: flex; 27 display: flex;
@@ -45,6 +49,11 @@ body{ @@ -45,6 +49,11 @@ body{
45 height: 0.7rem; 49 height: 0.7rem;
46 background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); 50 background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1));
47 border-radius:50%; 51 border-radius:50%;
  52 + display: flex;
  53 +}
  54 +.menu_item_top img{
  55 + width: 100%;
  56 + height: 100%;
48 } 57 }
49 .menu_item_bottom{ 58 .menu_item_bottom{
50 margin-top: 0.1rem; 59 margin-top: 0.1rem;
@@ -56,17 +65,28 @@ body{ @@ -56,17 +65,28 @@ body{
56 .middle{ 65 .middle{
57 width: 7.5rem; 66 width: 7.5rem;
58 height: 1.96rem; 67 height: 1.96rem;
59 - opacity: 0.35;  
60 - background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9));  
61 margin-top: 0.23rem; 68 margin-top: 0.23rem;
62 display: flex; 69 display: flex;
  70 + position: relative;
  71 + align-items: center;
63 } 72 }
64 .middle img{ 73 .middle img{
65 width: 100%; 74 width: 100%;
66 height: 100%; 75 height: 100%;
67 } 76 }
  77 +.middle_text{
  78 + width: 100%;
  79 + font-size: 0.32rem;
  80 + font-family:MicrosoftYaHei;
  81 + font-weight:400;
  82 + color:rgba(255,255,255,1);
  83 + line-height: 0.29rem;
  84 + position: absolute;
  85 + text-align: center;
  86 +}
68 .new{ 87 .new{
69 width: 1.56rem; 88 width: 1.56rem;
  89 + height: 0.5rem;
70 font-size: 0.27rem; 90 font-size: 0.27rem;
71 display: flex; 91 display: flex;
72 align-items: center; 92 align-items: center;
@@ -75,13 +95,13 @@ body{ @@ -75,13 +95,13 @@ body{
75 95
76 } 96 }
77 .new_text{ 97 .new_text{
78 - 98 + margin-left: 0.1rem;
79 } 99 }
80 .new_underline{ 100 .new_underline{
81 width: 1.56rem; 101 width: 1.56rem;
82 height:2px; 102 height:2px;
83 background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1)); 103 background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1));
84 - margin-top: 0.2rem; 104 + margin-top: 0.1rem;
85 } 105 }
86 .bottom{ 106 .bottom{
87 display: flex; 107 display: flex;
@@ -60,17 +60,104 @@ body{ @@ -60,17 +60,104 @@ body{
60 /*-webkit-text-fill-color:transparent;*/ 60 /*-webkit-text-fill-color:transparent;*/
61 } 61 }
62 .item_color:before{ 62 .item_color:before{
63 -  
64 content: ""; 63 content: "";
65 width: 1.52rem; 64 width: 1.52rem;
66 height: 0.02rem; 65 height: 0.02rem;
67 background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1)); 66 background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1));
68 - -webkit-background-clip:text; 67 + /*-webkit-background-clip:text;*/
69 -webkit-text-fill-color:transparent; 68 -webkit-text-fill-color:transparent;
70 position: absolute; 69 position: absolute;
71 bottom: 0; 70 bottom: 0;
  71 +}
  72 +.bottom_sub{
  73 + margin-top: 0.51rem;
  74 + width: 6.16rem;
  75 + height: 0.91rem;
  76 + background:linear-gradient(-85deg,rgba(110,15,119,0.9),rgba(3,24,165,0.9));
  77 + border:1px solid rgba(112,112,112,1);
  78 + border-radius: 0.08rem;
  79 + font-size: 0.33rem;
  80 + font-family:MicrosoftYaHei;
  81 + font-weight:400;
  82 + color:rgba(255,255,255,1);
  83 + line-height: 0.91rem;
  84 + text-align: center;
  85 +}
  86 +.bottom_t{
  87 + font-size: 0.26rem;
  88 + font-family:MicrosoftYaHei;
  89 + font-weight:400;
  90 + color:rgba(128,128,128,1);
  91 + line-height: 0.32rem;
  92 + display: flex;
  93 + justify-content: space-between;
  94 + box-sizing: border-box;
  95 + padding: 0 0.2rem;
  96 +}
  97 +.bottom_t_item{
  98 + display: flex;
  99 + align-items: center;
  100 + margin-top: 0.51rem;
  101 +}
  102 +.bottom_t_item span{
  103 + margin-left: 0.2rem;
  104 +}
  105 +
  106 +/*注册输入框*/
  107 +.bottom_small{
  108 + width: 100%;
  109 + display: flex;
  110 + justify-content: space-between;
  111 + margin-top: 0.4rem;
  112 +}
  113 +.bottom_small_left{
  114 + width: 3.34rem;
  115 + height: 0.9rem;
  116 + border:1px solid rgba(112,112,112,1);
  117 + border-radius: 0.08rem;
  118 + display: flex;
  119 + align-items: center;
  120 + box-sizing: border-box;
  121 + padding: 0 0.2rem;
  122 +
  123 +}
  124 +.bottom_small_left input{
  125 + width: 2.2rem;
  126 + height: 0.6rem;
  127 + box-sizing: border-box;
  128 + padding: 0 0.2rem;
  129 + outline: none;
  130 + border: none;
  131 + background: transparent;
  132 +}
  133 +.bottom_small_left input::placeholder{
  134 + color: #B3B3B3;
  135 +}
  136 +.bottom_small_right{
  137 + width: 2.64rem;
  138 + height: 0.9rem;
  139 + background:linear-gradient(-85deg,rgba(91,51,16,0.9),rgba(243,192,96,0.9));
  140 + border-radius: 0.08rem;
  141 +
72 142
  143 + font-size: 0.28rem;
  144 + font-family:MicrosoftYaHei;
  145 + font-weight:400;
  146 + color:rgba(255,255,255,1);
  147 + line-height: 0.9rem;
  148 + text-align: center;
  149 +}
  150 +.bottom_text{
  151 + margin-top: 0.32rem;
  152 + font-size: 0.26rem;
  153 + font-family:MicrosoftYaHei;
  154 + font-weight:400;
  155 + color:rgba(128,128,128,1);
  156 + line-height: 0.26rem;
  157 + text-align: center;
73 } 158 }
  159 +
  160 +
74 .bottom{ 161 .bottom{
75 display: flex; 162 display: flex;
76 flex-flow: column; 163 flex-flow: column;
  1 +
  2 +body{
  3 + background-color: #F4F5F9;
  4 +}
  5 +*{
  6 + margin: 0;
  7 + padding: 0;
  8 +}
  9 +.container{
  10 + width: 7.5rem;
  11 + line-height: 1;
  12 + display: flex;
  13 + flex-flow: column;
  14 + align-items: center;
  15 +}
  16 +/*头部*/
  17 +.head{
  18 + width: 7.5rem;
  19 + height: 0.88rem;
  20 + background:rgba(201,201,201,1);
  21 + position: fixed;
  22 + top: 0;
  23 + left: 0;
  24 + z-index: 999;
  25 + display: flex;
  26 + align-items: center;
  27 + justify-content: space-between;
  28 + box-sizing: border-box;
  29 + padding: 0 0.2rem;
  30 +}
  31 +.head_new{
  32 + font-size: 0.3rem;
  33 + color: rgba(68,68,68,1);
  34 + font-weight: bold;
  35 +
  36 +}
  37 +.items{
  38 + margin-top: 0.88rem;
  39 + margin-bottom: 1rem;
  40 +
  41 +}
  42 +.item{
  43 + width: 7.3rem;
  44 + height: 2rem;
  45 + display: flex;
  46 + background:rgba(255,255,255,1);
  47 + box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22);
  48 + margin-top: 0.1rem;
  49 + position: relative;
  50 +}
  51 +.item:first-child{
  52 + margin-top: 0.21rem;
  53 +}
  54 +
  55 +.item_left{
  56 + width: 1.8rem;
  57 + height: 1.75rem;
  58 + display: flex;
  59 + border-radius: 0.1rem;
  60 + margin: 0.13rem 0 0.13rem 0.1rem;
  61 +}
  62 +.item_left img{
  63 + width: 100%;
  64 + height: 100%;
  65 + border-radius: 0.1rem;
  66 +}
  67 +.item_mid{
  68 + width: 4rem;
  69 + height: 1.6rem;
  70 + display: flex;
  71 + flex-flow: column;
  72 + margin: 0.2rem;
  73 +}
  74 +.item_mid_big{
  75 + height: 1rem;
  76 + font-size: 0.3rem;
  77 + font-weight: bold;
  78 + line-height: 0.42rem;
  79 + box-sizing: border-box;
  80 + text-overflow: ellipsis;
  81 + display: -webkit-box;
  82 + -webkit-box-orient: vertical;
  83 + -webkit-line-clamp: 2;
  84 + overflow: hidden;
  85 +}
  86 +.item_mid_small{
  87 + height: 0.9rem;
  88 + font-size: 0.22rem;
  89 + color: #333333;
  90 + line-height: 0.38rem;
  91 +
  92 + box-sizing: border-box;
  93 + text-overflow: ellipsis;
  94 + display: -webkit-box;
  95 + -webkit-box-orient: vertical;
  96 + -webkit-line-clamp: 2;
  97 + overflow: hidden;
  98 + margin-top: 0.1rem;
  99 +}
  100 +.item_right{
  101 + width: 0.9rem;
  102 + height: 2rem;
  103 + background: #EA474B;
  104 + border-radius: 0.02rem;
  105 + position: absolute;
  106 + right: 0;
  107 +
  108 +
  109 + font-size: 0.22rem;
  110 + font-family:MicrosoftYaHei;
  111 + font-weight:400;
  112 + color:rgba(255,255,255,1);
  113 + line-height: 0.38rem;
  114 + display: flex;
  115 + flex-flow: column;
  116 + align-items: center;
  117 + justify-content: center;
  118 +}
  119 +.color_gray{
  120 + background-color: #e5e5e5;
  121 +}
  122 +
  123 +/*底部菜单栏*/
  124 +.bottom_menu{
  125 + width: 7.5rem;
  126 + height: 0.88rem;
  127 + display: flex;
  128 + align-items: center;
  129 + justify-content: space-around;
  130 + background-color: #ffffff;
  131 + position: fixed;
  132 + bottom: 0;
  133 +}
  134 +.bottom_menu_index{
  135 + display: flex;
  136 + flex-flow: column;
  137 + align-items: center;
  138 + color: #666666;
  139 +}
  140 +.bottom_menu_index_text{
  141 + font-size: 0.22rem;
  142 + color: #666666;
  143 +}
  1 +.pagingUl{
  2 + float:right;
  3 + padding:0;
  4 + margin:0;
  5 + list-style: none;
  6 +}
  7 +.pagingUl li{
  8 + float: left;
  9 + width: 30px;
  10 + height: 30px;
  11 + list-style: 30px;
  12 + text-align: center;
  13 +}
  14 +.pagingUl li a{
  15 + text-decoration: none;
  16 + display: inline-block;
  17 + width: 30px;
  18 + height: 30px;
  19 + text-align: center;
  20 + line-height: 28px;
  21 + padding: 0;
  22 + background: #fafafa;
  23 + color: #666;
  24 + font-size: 12px;
  25 + border: 1px solid #ddd;
  26 +}
  27 +
  28 +.prv, .next {
  29 + width: 30px;
  30 + height: 30px;
  31 + float: left;
  32 + text-align: center;
  33 + line-height: 30px;
  34 + border: 1px solid #ddd;
  35 + cursor: pointer;
  36 +}
  37 +.first, .last {
  38 + width: 30px;
  39 + height: 30px;
  40 + font-size: 12px;
  41 + text-align: center;
  42 + line-height: 30px;
  43 + border: 1px solid #ddd;
  44 + cursor: pointer;
  45 +}
@@ -148,6 +148,11 @@ body{ @@ -148,6 +148,11 @@ body{
148 height: 0.7rem; 148 height: 0.7rem;
149 background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); 149 background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1));
150 border-radius:50%; 150 border-radius:50%;
  151 + display: flex;
  152 +}
  153 +.menu_item_top img{
  154 + width: 100%;
  155 + height: 100%;
151 } 156 }
152 .menu_item_bottom{ 157 .menu_item_bottom{
153 margin-top: 0.1rem; 158 margin-top: 0.1rem;
@@ -159,15 +164,25 @@ body{ @@ -159,15 +164,25 @@ body{
159 .middle{ 164 .middle{
160 width: 7.5rem; 165 width: 7.5rem;
161 height: 1.96rem; 166 height: 1.96rem;
162 - opacity: 0.35;  
163 - background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9));  
164 margin-top: 0.23rem; 167 margin-top: 0.23rem;
165 display: flex; 168 display: flex;
  169 + position: relative;
  170 + align-items: center;
166 } 171 }
167 .middle img{ 172 .middle img{
168 width: 100%; 173 width: 100%;
169 height: 100%; 174 height: 100%;
170 } 175 }
  176 +.middle_text{
  177 + width: 100%;
  178 + font-size: 0.32rem;
  179 + font-family:MicrosoftYaHei;
  180 + font-weight:400;
  181 + color:rgba(255,255,255,1);
  182 + line-height: 0.29rem;
  183 + position: absolute;
  184 + text-align: center;
  185 +}
171 .new{ 186 .new{
172 width: 1.56rem; 187 width: 1.56rem;
173 font-size: 0.27rem; 188 font-size: 0.27rem;
  1 +/**
  2 + * Swiper 4.4.6
  3 + * Most modern mobile touch slider and framework with hardware accelerated transitions
  4 + * http://www.idangero.us/swiper/
  5 + *
  6 + * Copyright 2014-2018 Vladimir Kharlampidi
  7 + *
  8 + * Released under the MIT License
  9 + *
  10 + * Released on: December 19, 2018
  11 + */
  12 +.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}
@@ -15,10 +15,31 @@ body{ @@ -15,10 +15,31 @@ body{
15 } 15 }
16 .head{ 16 .head{
17 width: 7.5rem; 17 width: 7.5rem;
  18 + height: 0.88rem;
  19 + background:rgba(201,201,201,1);
  20 + position: fixed;
  21 + top: 0;
  22 + left: 0;
  23 + z-index: 999;
  24 + display: flex;
  25 + align-items: center;
  26 + justify-content: space-between;
  27 + box-sizing: border-box;
  28 + padding: 0 0.2rem;
  29 +}
  30 +.head_new{
  31 + font-size: 0.3rem;
  32 + color: rgba(68,68,68,1);
  33 + font-weight: bold;
  34 +
  35 +}
  36 +.head_pic{
  37 + margin-top: 0.88rem;
  38 + width: 7.5rem;
18 height: 2.18rem; 39 height: 2.18rem;
19 display: flex; 40 display: flex;
20 } 41 }
21 -.head img{ 42 +.head_pic img{
22 width: 100%; 43 width: 100%;
23 height: 100%; 44 height: 100%;
24 } 45 }
@@ -126,6 +126,11 @@ body{ @@ -126,6 +126,11 @@ body{
126 overflow: hidden; 126 overflow: hidden;
127 127
128 } 128 }
  129 +.func_page{
  130 + width: 4.5rem;
  131 + display: flex;
  132 + margin-bottom: 1.3rem;
  133 +}
129 134
130 /*底部菜单栏*/ 135 /*底部菜单栏*/
131 .bottom_menu{ 136 .bottom_menu{
@@ -6,16 +6,42 @@ @@ -6,16 +6,42 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 8
9 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> 9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
10 <link rel="stylesheet" type="text/css" href="css/dlhd.css"> 10 <link rel="stylesheet" type="text/css" href="css/dlhd.css">
11 <link rel="stylesheet" type="text/css" href="css/dropload.css"> 11 <link rel="stylesheet" type="text/css" href="css/dropload.css">
12 <script src="js/base.js"></script> 12 <script src="js/base.js"></script>
13 <script src="js/jquery.min.js"></script> 13 <script src="js/jquery.min.js"></script>
  14 + <style>
  15 + .icon-zuo{
  16 + color: #959595;
  17 + font-size: 0.38rem;
  18 + }
  19 + .icon-iconfont-edu12{
  20 + color: #959595;
  21 + font-size: 0.5rem;
  22 + }
  23 + </style>
14 </head> 24 </head>
15 <body> 25 <body>
16 <div class="container"> 26 <div class="container">
17 - <!--头部图片--> 27 + <!--头部信息-->
18 <div class="head"> 28 <div class="head">
  29 + <!--左图标-->
  30 + <div class="iconfont icon-zuo">
  31 +
  32 + </div>
  33 + <!--导览活动-->
  34 + <div class="head_new">
  35 + 导览活动
  36 + </div>
  37 + <!--右菜单-->
  38 + <div>
  39 +
  40 + </div>
  41 +
  42 + </div>
  43 + <!--头部图片-->
  44 + <div class="head_pic">
19 <img src="images/666.png"> 45 <img src="images/666.png">
20 </div> 46 </div>
21 <!--顶部内容--> 47 <!--顶部内容-->
@@ -6,14 +6,40 @@ @@ -6,14 +6,40 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 8
9 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> 9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
10 <link rel="stylesheet" type="text/css" href="css/gyzh.css"> 10 <link rel="stylesheet" type="text/css" href="css/gyzh.css">
11 <script src="js/base.js"></script> 11 <script src="js/base.js"></script>
  12 + <style>
  13 + .icon-zuo{
  14 + color: #959595;
  15 + font-size: 0.38rem;
  16 + }
  17 + .icon-iconfont-edu12{
  18 + color: #959595;
  19 + font-size: 0.5rem;
  20 + }
  21 + </style>
12 </head> 22 </head>
13 <body> 23 <body>
14 <div class="container"> 24 <div class="container">
15 - <!--头部图片--> 25 + <!--头部信息-->
16 <div class="head"> 26 <div class="head">
  27 + <!--左图标-->
  28 + <div class="iconfont icon-zuo">
  29 +
  30 + </div>
  31 + <!--关于展位-->
  32 + <div class="head_new">
  33 + 关于展位
  34 + </div>
  35 + <!--右菜单-->
  36 + <div>
  37 +
  38 + </div>
  39 +
  40 + </div>
  41 + <!--头部图片-->
  42 + <div class="head_pic">
17 <img src="images/333.png"> 43 <img src="images/333.png">
18 </div> 44 </div>
19 <!--顶部信息--> 45 <!--顶部信息-->
@@ -9,18 +9,23 @@ @@ -9,18 +9,23 @@
9 <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> 9 <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
10 <link rel="stylesheet" type="text/css" href="css/index.css"> 10 <link rel="stylesheet" type="text/css" href="css/index.css">
11 <script src="js/base.js"></script> 11 <script src="js/base.js"></script>
  12 + <style>
  13 + .icon-diqiu{
  14 + font-size: 0.35rem;
  15 + }
  16 + </style>
12 </head> 17 </head>
13 <body> 18 <body>
14 <div class="container"> 19 <div class="container">
15 <!--头部--> 20 <!--头部-->
16 <div class="head"> 21 <div class="head">
17 - <img src=""> 22 + <img src="images/index.png">
18 </div> 23 </div>
19 <!--菜单--> 24 <!--菜单-->
20 <div class="menu"> 25 <div class="menu">
21 <div class="menu_top"> 26 <div class="menu_top">
22 <!--关于展会--> 27 <!--关于展会-->
23 - <div class="menu_item"> 28 + <div class="menu_item item_1">
24 <div class="menu_item_top"> 29 <div class="menu_item_top">
25 <img src=""> 30 <img src="">
26 </div> 31 </div>
@@ -28,81 +33,82 @@ @@ -28,81 +33,82 @@
28 关于展会 33 关于展会
29 </div> 34 </div>
30 </div> 35 </div>
31 - <!--关于展会-->  
32 - <div class="menu_item"> 36 + <!--展品范围-->
  37 + <div class="menu_item item_2">
33 <div class="menu_item_top"> 38 <div class="menu_item_top">
34 - <img src=""> 39 + <img src="#">
35 </div> 40 </div>
36 <div class="menu_item_bottom"> 41 <div class="menu_item_bottom">
37 - 关于展会 42 + 展品范围
38 </div> 43 </div>
39 </div> 44 </div>
40 - <!--关于展会-->  
41 - <div class="menu_item"> 45 + <!--展览活动-->
  46 + <div class="menu_item item_3">
42 <div class="menu_item_top"> 47 <div class="menu_item_top">
43 <img src=""> 48 <img src="">
44 </div> 49 </div>
45 <div class="menu_item_bottom"> 50 <div class="menu_item_bottom">
46 - 关于展会 51 + 展览活动
47 </div> 52 </div>
48 </div> 53 </div>
49 <!--关于展会--> 54 <!--关于展会-->
50 - <div class="menu_item"> 55 + <div class="menu_item item_4">
51 <div class="menu_item_top"> 56 <div class="menu_item_top">
52 <img src=""> 57 <img src="">
53 </div> 58 </div>
54 <div class="menu_item_bottom"> 59 <div class="menu_item_bottom">
55 - 关于展会 60 + 参展申请
56 </div> 61 </div>
57 </div> 62 </div>
58 </div> 63 </div>
59 <div class="menu_bottom"> 64 <div class="menu_bottom">
60 - <!--关于展会-->  
61 - <div class="menu_item"> 65 + <!--新闻报道-->
  66 + <div class="menu_item item_5">
62 <div class="menu_item_top"> 67 <div class="menu_item_top">
63 <img src=""> 68 <img src="">
64 </div> 69 </div>
65 <div class="menu_item_bottom"> 70 <div class="menu_item_bottom">
66 - 关于展会 71 + 新闻报道
67 </div> 72 </div>
68 </div> 73 </div>
69 - <!--关于展会-->  
70 - <div class="menu_item"> 74 + <!--论坛活动-->
  75 + <div class="menu_item item_6">
71 <div class="menu_item_top"> 76 <div class="menu_item_top">
72 <img src=""> 77 <img src="">
73 </div> 78 </div>
74 <div class="menu_item_bottom"> 79 <div class="menu_item_bottom">
75 - 关于展会 80 + 论坛活动
76 </div> 81 </div>
77 </div> 82 </div>
78 - <!--关于展会-->  
79 - <div class="menu_item"> 83 + <!--商旅服务-->
  84 + <div class="menu_item item_7">
80 <div class="menu_item_top"> 85 <div class="menu_item_top">
81 <img src=""> 86 <img src="">
82 </div> 87 </div>
83 <div class="menu_item_bottom"> 88 <div class="menu_item_bottom">
84 - 关于展会 89 + 商旅服务
85 </div> 90 </div>
86 </div> 91 </div>
87 - <!--关于展会-->  
88 - <div class="menu_item"> 92 + <!--参观登记-->
  93 + <div class="menu_item item_8">
89 <div class="menu_item_top"> 94 <div class="menu_item_top">
90 <img src=""> 95 <img src="">
91 </div> 96 </div>
92 <div class="menu_item_bottom"> 97 <div class="menu_item_bottom">
93 - 关于展会 98 + 参观登记
94 </div> 99 </div>
95 </div> 100 </div>
96 </div> 101 </div>
97 </div> 102 </div>
98 <!--中部图片--> 103 <!--中部图片-->
99 <div class="middle"> 104 <div class="middle">
100 - <img src=""> 105 + <img src="images/index_2.png">
  106 + <div class="middle_text">2019汽车产业装备与智能制造峰会>></div>
101 </div> 107 </div>
102 - <!--最新咨询--> 108 + <!--最新资讯-->
103 <div class="new"> 109 <div class="new">
104 <div class="iconfont icon-diqiu"></div> 110 <div class="iconfont icon-diqiu"></div>
105 - <div class="new_text">最新咨询</div> 111 + <div class="new_text">最新资讯</div>
106 </div> 112 </div>
107 <!--下划线--> 113 <!--下划线-->
108 <div class="new_underline"></div> 114 <div class="new_underline"></div>
@@ -133,7 +139,7 @@ @@ -133,7 +139,7 @@
133 139
134 <!--底部菜单--> 140 <!--底部菜单-->
135 <div class="bottom_menu"> 141 <div class="bottom_menu">
136 - <div class="bottom_menu_index"> 142 + <div class="bottom_menu_index index">
137 <!--上图标--> 143 <!--上图标-->
138 <div class="iconfont icon-zhuye2"></div> 144 <div class="iconfont icon-zhuye2"></div>
139 <!--下文字--> 145 <!--下文字-->
@@ -141,7 +147,7 @@ @@ -141,7 +147,7 @@
141 首页 147 首页
142 </div> 148 </div>
143 </div> 149 </div>
144 - <div class="bottom_menu_index"> 150 + <div class="bottom_menu_index tel">
145 <!--上图标--> 151 <!--上图标-->
146 <div class="iconfont icon-dianhua-copy"></div> 152 <div class="iconfont icon-dianhua-copy"></div>
147 <!--下文字--> 153 <!--下文字-->
@@ -149,7 +155,7 @@ @@ -149,7 +155,7 @@
149 电话咨询 155 电话咨询
150 </div> 156 </div>
151 </div> 157 </div>
152 - <div class="bottom_menu_index"> 158 + <div class="bottom_menu_index exhibition">
153 <!--上图标--> 159 <!--上图标-->
154 <div class="iconfont icon-user-address"></div> 160 <div class="iconfont icon-user-address"></div>
155 <!--下文字--> 161 <!--下文字-->
@@ -157,7 +163,7 @@ @@ -157,7 +163,7 @@
157 网上展厅 163 网上展厅
158 </div> 164 </div>
159 </div> 165 </div>
160 - <div class="bottom_menu_index"> 166 + <div class="bottom_menu_index personal">
161 <!--上图标--> 167 <!--上图标-->
162 <div class="iconfont icon-gerenzhongxin"></div> 168 <div class="iconfont icon-gerenzhongxin"></div>
163 <!--下文字--> 169 <!--下文字-->
@@ -170,4 +176,45 @@ @@ -170,4 +176,45 @@
170 176
171 177
172 </body> 178 </body>
  179 +<script src="js/jquery.min.js"></script>
  180 +<script>
  181 + //底部四个按钮
  182 + $('.index').click(function () {
  183 + window.location.href = "index.html"
  184 + })
  185 + $('.tel').click(function () {
  186 + window.location.href = "index.html"
  187 + })
  188 + $('.exhibition').click(function () {
  189 + window.location.href = "wszt.html"
  190 + })
  191 + $('.personal').click(function () {
  192 + window.location.href = "index.html"
  193 + })
  194 + //中部八个按钮
  195 + $('.item_1').click(function () {
  196 + window.location.href = "gyzh.html"
  197 + })
  198 + $('.item_2').click(function () {
  199 + window.location.href = "zpfw.html"
  200 + })
  201 + $('.item_3').click(function () {
  202 + window.location.href = "dlhd.html"
  203 + })
  204 + $('.item_4').click(function () {
  205 + window.location.href = "czsq.html"
  206 + })
  207 + $('.item_5').click(function () {
  208 + window.location.href = "xwbd.html"
  209 + })
  210 + $('.item_6').click(function () {
  211 + window.location.href = "lthd.html"
  212 + })
  213 + $('.item_7').click(function () {
  214 + window.location.href = "slfw_2.html"
  215 + })
  216 + $('.item_8').click(function () {
  217 + window.location.href = "cgdj.html"
  218 + })
  219 +</script>
173 </html> 220 </html>
  1 +/* 一个简单的分页,每次点击重渲染
  2 +******by wuati*****
  3 +*/
  4 +(function ($) {
  5 + //默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)
  6 + var defaults = {
  7 + //id : '#paging',//id
  8 + leng: 3,//总页数
  9 + activeClass: 'page-active' ,//active类
  10 + firstPage: '首页',//
  11 + lastPage: '末页',
  12 + prv: '«',
  13 + next: '»',
  14 + clickBack:function(){
  15 + }
  16 + };
  17 + var opts,myOptions;
  18 + //扩展
  19 + $.fn.extend({
  20 + //插件名称
  21 + page: function (options) {
  22 + //覆盖默认参数
  23 + myOptions = options
  24 + opts = $.extend(defaults, options);
  25 + console.log(opts,998,this)
  26 + //主函数
  27 + return this.each(function () {
  28 + //激活事件
  29 + var obj = $(this);
  30 + var str1 = '';
  31 + var str = '';
  32 + var l = opts.leng;
  33 + if (l > 1&&l < 10) {
  34 + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
  35 + for (i = 2; i < l + 1; i++) {
  36 + str += '<li><a href="javascript:">' + i + '</a></li>';
  37 + }
  38 + }else if(l > 9){
  39 + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
  40 + for (i = 2; i < 10; i++) {
  41 + str += '<li><a href="javascript:">' + i + '</a></li>';
  42 + }
  43 + //str += '<li><a href="javascript:">...</a></li>'
  44 + } else {
  45 + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
  46 + }
  47 + // obj.html('<div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div>');
  48 +
  49 + obj.html('<div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div>');
  50 +
  51 + obj.on('click', '.next', function () {
  52 + var pageshow = parseInt($('.' + opts.activeClass).html());
  53 + if(pageshow==l){
  54 + return false;
  55 + }
  56 + if(pageshow == l) {
  57 + }else if(pageshow > l-5&&pageshow < l){
  58 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
  59 + }else if(pageshow > 0&&pageshow < 6){
  60 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
  61 + }else {
  62 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
  63 + fpageShow();
  64 + }
  65 + opts.clickBack(pageshow+1)
  66 + });
  67 + obj.on('click', '.prv', function () {
  68 + var pageshow = parseInt($('.' + opts.activeClass).html());
  69 +
  70 + if (pageshow == 1) {
  71 + return false;
  72 + }else if(pageshow > l-5&&pageshow < l+1){
  73 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  74 + //this.fpageBranch(pageshow-1);
  75 + }else if(pageshow > 1&&pageshow < 6){
  76 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  77 + //this.fpageBranch(pageshow-1);
  78 + }else {
  79 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  80 + //this.fpageBranch(pageshow-1);
  81 + fpageShow();
  82 + }
  83 + opts.clickBack(pageshow-1)
  84 + });
  85 +
  86 + obj.on('click', '.first', function(){
  87 + var pageshow = 1;
  88 + var nowshow = parseInt($('.' + opts.activeClass).html());
  89 + if(nowshow==1){
  90 + return false;
  91 + }
  92 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  93 + fpagePrv(0);
  94 + opts.clickBack(pageshow)
  95 + })
  96 + obj.on('click', '.last', function(){
  97 + var pageshow = l;
  98 + var nowshow = parseInt($('.' + opts.activeClass).html());
  99 + if(nowshow==l){
  100 + return false;
  101 + }
  102 + if(l>9){
  103 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  104 + fpageNext(8);
  105 + }else{
  106 + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
  107 + fpageNext(l-1);
  108 + }
  109 + opts.clickBack(pageshow)
  110 + })
  111 +
  112 + obj.on('click', 'li', function(){
  113 + var $this = $(this);
  114 + var pageshow = parseInt($this.find('a').html());
  115 + var nowshow = parseInt($('.' + opts.activeClass).html());
  116 + console.log(l,256)
  117 + if(pageshow==nowshow){
  118 + return false;
  119 + }
  120 + if(l>9){
  121 + console.log(1234567,pageshow,l)
  122 + if(pageshow > l-5&&pageshow < l+1){
  123 + $('.' + opts.activeClass).removeClass(opts.activeClass);
  124 + $this.find('a').addClass(opts.activeClass);
  125 + fpageNext(8-(l-pageshow));
  126 + }else if(pageshow > 0&&pageshow < 5){
  127 + $('.' + opts.activeClass).removeClass(opts.activeClass);
  128 + $this.find('a').addClass(opts.activeClass);
  129 + fpagePrv(pageshow-1);
  130 + }else{
  131 + $('.' + opts.activeClass).removeClass(opts.activeClass);
  132 + $this.find('a').addClass(opts.activeClass);
  133 + fpageShow();
  134 + }
  135 + }else{
  136 + console.log(123456)
  137 + $('.' + opts.activeClass).removeClass(opts.activeClass);
  138 + $this.find('a').addClass(opts.activeClass);
  139 + }
  140 + opts.clickBack(pageshow)
  141 + })
  142 +
  143 + function fpageShow(){
  144 + var pageshow = parseInt($('.' + opts.activeClass).html());
  145 + var pageStart = pageshow - 4;
  146 + var pageEnd = pageshow + 5;
  147 + var str1 = '';
  148 + for(i=0;i<9;i++){
  149 + str1 += '<li><a href="javascript:" class="">' + (pageStart+i) + '</a></li>'
  150 + }
  151 + obj.find('ul').html(str1);
  152 + obj.find('ul li').eq(4).find('a').addClass(opts.activeClass);
  153 +
  154 + }
  155 +
  156 + function fpagePrv(prv){
  157 + var str1 = '';
  158 + if(l>8){
  159 + for(i=0;i<9;i++){
  160 + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
  161 + }
  162 + }else{
  163 + for(i=0;i<l;i++){
  164 + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
  165 + }
  166 + }
  167 + obj.find('ul').html(str1);
  168 + obj.find('ul li').eq(prv).find('a').addClass(opts.activeClass);
  169 + }
  170 +
  171 + function fpageNext(next){
  172 + var str1 = '';
  173 + if(l>8){
  174 + for(i=l-8;i<l+1;i++){
  175 + str1 += '<li><a href="javascript:" class="">' + i + '</a></li>'
  176 + }
  177 + obj.find('ul').html(str1);
  178 + obj.find('ul li').eq(next).find('a').addClass(opts.activeClass);
  179 + }else{
  180 + for(i=0;i<l;i++){
  181 + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
  182 + }
  183 + obj.find('ul').html(str1);
  184 + obj.find('ul li').eq(next).find('a').addClass(opts.activeClass);
  185 + }
  186 + }
  187 + });
  188 + },
  189 + setLength: function(newLength){
  190 + myOptions.leng = newLength
  191 + $(this).html('')
  192 + $(this).unbind()
  193 + $(this).page(myOptions)
  194 + }
  195 + })
  196 +})(jQuery);
此 diff 太大无法显示。
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 8
9 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_hkazqqzd2pg.css"> 9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_ucda0dtgz1.css">
10 <link rel="stylesheet" type="text/css" href="css/login.css"> 10 <link rel="stylesheet" type="text/css" href="css/login.css">
11 <script src="js/base.js"></script> 11 <script src="js/base.js"></script>
12 12
@@ -20,6 +20,13 @@ @@ -20,6 +20,13 @@
20 font-size: 0.5rem; 20 font-size: 0.5rem;
21 color: #B3B3B3; 21 color: #B3B3B3;
22 } 22 }
  23 + .icon-yanzhengma{
  24 + font-size: 0.5rem;
  25 + color: #B3B3B3;
  26 + }
  27 + .margin_item{
  28 + margin-top: 0.35rem;
  29 + }
23 </style> 30 </style>
24 31
25 </head> 32 </head>
@@ -43,8 +50,9 @@ @@ -43,8 +50,9 @@
43 </div> 50 </div>
44 51
45 </div> 52 </div>
46 - <!--输入框-->  
47 - <div class="bottom"> 53 +
  54 + <!--登录输入框-->
  55 + <div class="bottom" style="display: none">
48 <div class="bottom_item"> 56 <div class="bottom_item">
49 <div class="iconfont icon-Fill"></div> 57 <div class="iconfont icon-Fill"></div>
50 <input type="text" placeholder="请输入手机号"> 58 <input type="text" placeholder="请输入手机号">
@@ -53,8 +61,62 @@ @@ -53,8 +61,62 @@
53 <div class="iconfont icon-mima"></div> 61 <div class="iconfont icon-mima"></div>
54 <input type="text" placeholder="请输入密码"> 62 <input type="text" placeholder="请输入密码">
55 </div> 63 </div>
  64 +
  65 + <!--登录框-->
  66 + <div class="bottom_sub">
  67 + 立即登录
  68 + </div>
  69 +
  70 + <!--记住密码 立即注册-->
  71 + <div class="bottom_t">
  72 + <div class="bottom_t_item">
  73 + <input type="checkbox"> <span>记住密码</span>
  74 + </div>
  75 + <div class="bottom_t_item">
  76 + <div>忘记密码?立即注册</div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 +
  81 + <!--注册输入框-->
  82 + <div class="bottom" style="display: flex">
  83 + <div class="bottom_item ">
  84 + <div class="iconfont icon-Fill"></div>
  85 + <input type="text" placeholder="请输入手机号">
  86 + </div>
  87 + <!--输入验证码-->
  88 + <div class="bottom_small margin_item">
  89 + <!--验证码输入框-->
  90 + <div class="bottom_small_left">
  91 + <div class="iconfont icon-yanzhengma"></div>
  92 + <input type="text" placeholder="输入验证码">
  93 + </div>
  94 + <!--获取验证码框-->
  95 + <div class="bottom_small_right">
  96 + 获取验证码
  97 + </div>
  98 + </div>
  99 +
  100 + <div class="bottom_item margin_item">
  101 + <div class="iconfont icon-mima"></div>
  102 + <input type="text" placeholder="请输入密码">
  103 + </div>
  104 +
  105 + <!--登录框-->
  106 + <div class="bottom_sub margin_item">
  107 + 立即注册
  108 + </div>
  109 +
  110 + <!--记住密码 立即注册-->
  111 + <div class="bottom_text">
  112 + 已有账号,立即登录
  113 + </div>
56 </div> 114 </div>
57 115
  116 +
  117 +
  118 +
  119 +
58 </div> 120 </div>
59 121
60 122
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>论坛活动</title>
  6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 +
  9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
  10 + <link rel="stylesheet" type="text/css" href="css/xwbd.css">
  11 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  12 + <script src="js/base.js"></script>
  13 +
  14 + <style>
  15 + .icon-zuo{
  16 + color: #959595;
  17 + font-size: 0.38rem;
  18 + }
  19 + .icon-iconfont-edu12{
  20 + color: #959595;
  21 + font-size: 0.5rem;
  22 + }
  23 + </style>
  24 +</head>
  25 +<body>
  26 +<div class="container">
  27 + <!--头部信息-->
  28 + <div class="head">
  29 + <!--左图标-->
  30 + <div class="iconfont icon-zuo">
  31 +
  32 + </div>
  33 + <!--论坛活动-->
  34 + <div class="head_new">
  35 + 论坛活动
  36 + </div>
  37 + <!--右菜单-->
  38 + <div class="iconfont icon-iconfont-edu12">
  39 +
  40 + </div>
  41 +
  42 + </div>
  43 +
  44 + <!--条目信息-->
  45 + <div class="items">
  46 + <div class="items_box">
  47 + <div class="item">
  48 + <!--左边-->
  49 + <div class="item_left">
  50 + <img src="images/10.png">
  51 + </div>
  52 + <!--中部-->
  53 + <div class="item_mid">
  54 + <p class="item_mid_big">
  55 +
  56 + 智能时代"云"发展"新模式"驻
  57 + 占天津
  58 +
  59 + </p>
  60 + <p class="item_mid_small">
  61 + 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  62 + </p>
  63 + </div>
  64 + <!--右边-->
  65 + <div class="item_right ">
  66 +
  67 + <p>12月</p>
  68 + <p>25日</p>
  69 + <p>星期二</p>
  70 + </div>
  71 + </div>
  72 + <div class="item">
  73 + <!--左边-->
  74 + <div class="item_left">
  75 + <img src="images/10.png">
  76 + </div>
  77 + <!--中部-->
  78 + <div class="item_mid">
  79 + <p class="item_mid_big">
  80 +
  81 + 智能时代"云"发展"新模式"驻
  82 + 占天津
  83 +
  84 + </p>
  85 + <p class="item_mid_small">
  86 + 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  87 + </p>
  88 + </div>
  89 + <!--右边-->
  90 + <div class="item_right color_gray">
  91 +
  92 + <p>12月</p>
  93 + <p>25日</p>
  94 + <p>星期二</p>
  95 + </div>
  96 + </div>
  97 + </div>
  98 + </div>
  99 +
  100 +
  101 + <!--底部菜单-->
  102 + <div class="bottom_menu">
  103 + <div class="bottom_menu_index">
  104 + <!--上图标-->
  105 + <div class="iconfont icon-zhuye2"></div>
  106 + <!--下文字-->
  107 + <div class="bottom_menu_index_text">
  108 + 首页
  109 + </div>
  110 + </div>
  111 + <div class="bottom_menu_index">
  112 + <!--上图标-->
  113 + <div class="iconfont icon-dianhua-copy"></div>
  114 + <!--下文字-->
  115 + <div class="bottom_menu_index_text">
  116 + 电话咨询
  117 + </div>
  118 + </div>
  119 + <div class="bottom_menu_index">
  120 + <!--上图标-->
  121 + <div class="iconfont icon-user-address"></div>
  122 + <!--下文字-->
  123 + <div class="bottom_menu_index_text">
  124 + 网上展厅
  125 + </div>
  126 + </div>
  127 + <div class="bottom_menu_index">
  128 + <!--上图标-->
  129 + <div class="iconfont icon-gerenzhongxin"></div>
  130 + <!--下文字-->
  131 + <div class="bottom_menu_index_text">
  132 + 个人中心
  133 + </div>
  134 + </div>
  135 + </div>
  136 +
  137 +</div>
  138 +
  139 +</body>
  140 +<script src="js/jquery.min.js"></script>
  141 +<script src="js/dropload.min.js"></script>
  142 +
  143 +<script>
  144 + $('.item').click(function () {
  145 + window.location.href = "nrxq.html";
  146 + })
  147 + //菜单功能
  148 + $(document).ready(function () {
  149 +
  150 +
  151 + // 页数
  152 + var page = 1;
  153 + // 每次循环展示10个
  154 + var size = 10;
  155 + $('.items').dropload({
  156 + scrollArea : window,
  157 + domUp : {
  158 + domClass : 'dropload-up',
  159 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  160 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  161 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  162 + },
  163 + domDown : {
  164 + domClass : 'dropload-down',
  165 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  166 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  167 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  168 + },
  169 + loadDownFn : function(me){
  170 + page++;
  171 + // 拼接HTML
  172 + var result = '';
  173 + var s = "";
  174 + var show="";
  175 + var list_compressor="";
  176 + var list_answer="";
  177 + $.ajax({
  178 + type: 'GET',
  179 + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  180 + dataType: 'json',
  181 + success: function(data){
  182 + console.log(data);
  183 + var arrLen = data.length;
  184 + if(arrLen > 0){
  185 + for(var i=0; i<arrLen; i++){
  186 + result +='<div class="item">\n' +
  187 + ' <!--左边-->\n' +
  188 + ' <div class="item_left">\n' +
  189 + ' <img src="images/10.png">\n' +
  190 + ' </div>\n' +
  191 + ' <!--中部-->\n' +
  192 + ' <div class="item_mid">\n' +
  193 + ' <p class="item_mid_big">\n' +
  194 + '\n' +
  195 + ' 智能时代"云"发展"新模式"驻\n' +
  196 + ' 占天津\n' +
  197 + '\n' +
  198 + ' </p>\n' +
  199 + ' <p class="item_mid_small">\n' +
  200 + ' 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
  201 + ' </p>\n' +
  202 + ' </div>\n' +
  203 + ' <!--右边-->\n' +
  204 + ' <div class="item_right color_gray">\n' +
  205 + '\n' +
  206 + ' <p>12月</p>\n' +
  207 + ' <p>25日</p>\n' +
  208 + ' <p>星期二</p>\n' +
  209 + ' </div>\n' +
  210 + ' </div>'
  211 +
  212 +
  213 +
  214 +
  215 + }
  216 +
  217 + // 如果没有数据
  218 + }else{
  219 + // 锁定
  220 + me.lock();
  221 + // 无数据
  222 + me.noData();
  223 + }
  224 + // 为了测试,延迟1秒加载
  225 + setTimeout(function(){
  226 + // 插入数据到页面,放到最后面
  227 + $('.items_box').append(result);
  228 + // 每次数据插入,必须重置
  229 + me.resetload();
  230 + },500);
  231 + },
  232 + error: function(xhr, type){
  233 + alert('Ajax error!');
  234 + // 即使加载出错,也得重置
  235 + me.resetload();
  236 + }
  237 + });
  238 + },
  239 + threshold : 50
  240 + });
  241 +
  242 + })
  243 +</script>
  244 +
  245 +</html>
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 内容详情 35 内容详情
36 </div> 36 </div>
37 <!--右菜单--> 37 <!--右菜单-->
38 - <div class="iconfont icon-iconfont-edu12"> 38 + <div >
39 39
40 </div> 40 </div>
41 41
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 <div class="menu"> 64 <div class="menu">
65 <div class="menu_top"> 65 <div class="menu_top">
66 <!--关于展会--> 66 <!--关于展会-->
67 - <div class="menu_item"> 67 + <div class="menu_item item_1">
68 <div class="menu_item_top"> 68 <div class="menu_item_top">
69 <img src=""> 69 <img src="">
70 </div> 70 </div>
@@ -72,76 +72,78 @@ @@ -72,76 +72,78 @@
72 关于展会 72 关于展会
73 </div> 73 </div>
74 </div> 74 </div>
75 - <!--关于展会-->  
76 - <div class="menu_item"> 75 + <!--展品范围-->
  76 + <div class="menu_item item_2">
77 <div class="menu_item_top"> 77 <div class="menu_item_top">
78 - <img src=""> 78 + <img src="#">
79 </div> 79 </div>
80 <div class="menu_item_bottom"> 80 <div class="menu_item_bottom">
81 - 关于展会 81 + 展品范围
82 </div> 82 </div>
83 </div> 83 </div>
84 - <!--关于展会-->  
85 - <div class="menu_item"> 84 + <!--展览活动-->
  85 + <div class="menu_item item_3">
86 <div class="menu_item_top"> 86 <div class="menu_item_top">
87 <img src=""> 87 <img src="">
88 </div> 88 </div>
89 <div class="menu_item_bottom"> 89 <div class="menu_item_bottom">
90 - 关于展会 90 + 展览活动
91 </div> 91 </div>
92 </div> 92 </div>
93 <!--关于展会--> 93 <!--关于展会-->
94 - <div class="menu_item"> 94 + <div class="menu_item item_4">
95 <div class="menu_item_top"> 95 <div class="menu_item_top">
96 <img src=""> 96 <img src="">
97 </div> 97 </div>
98 <div class="menu_item_bottom"> 98 <div class="menu_item_bottom">
99 - 关于展会 99 + 参展申请
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 <div class="menu_bottom"> 103 <div class="menu_bottom">
104 - <!--关于展会-->  
105 - <div class="menu_item"> 104 + <!--新闻报道-->
  105 + <div class="menu_item item_5">
106 <div class="menu_item_top"> 106 <div class="menu_item_top">
107 <img src=""> 107 <img src="">
108 </div> 108 </div>
109 <div class="menu_item_bottom"> 109 <div class="menu_item_bottom">
110 - 关于展会 110 + 新闻报道
111 </div> 111 </div>
112 </div> 112 </div>
113 - <!--关于展会-->  
114 - <div class="menu_item"> 113 + <!--论坛活动-->
  114 + <div class="menu_item item_6">
115 <div class="menu_item_top"> 115 <div class="menu_item_top">
116 <img src=""> 116 <img src="">
117 </div> 117 </div>
118 <div class="menu_item_bottom"> 118 <div class="menu_item_bottom">
119 - 关于展会 119 + 论坛活动
120 </div> 120 </div>
121 </div> 121 </div>
122 - <!--关于展会-->  
123 - <div class="menu_item"> 122 + <!--商旅服务-->
  123 + <div class="menu_item item_7">
124 <div class="menu_item_top"> 124 <div class="menu_item_top">
125 <img src=""> 125 <img src="">
126 </div> 126 </div>
127 <div class="menu_item_bottom"> 127 <div class="menu_item_bottom">
128 - 关于展会 128 + 商旅服务
129 </div> 129 </div>
130 </div> 130 </div>
131 - <!--关于展会-->  
132 - <div class="menu_item"> 131 + <!--参观登记-->
  132 + <div class="menu_item item_8">
133 <div class="menu_item_top"> 133 <div class="menu_item_top">
134 <img src=""> 134 <img src="">
135 </div> 135 </div>
136 <div class="menu_item_bottom"> 136 <div class="menu_item_bottom">
137 - 关于展会 137 + 参观登记
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 <!--中部图片--> 142 <!--中部图片-->
  143 +
143 <div class="middle"> 144 <div class="middle">
144 - <img src=""> 145 + <img src="images/index_2.png">
  146 + <div class="middle_text">2019汽车产业装备与智能制造峰会>></div>
145 </div> 147 </div>
146 <!--最新咨询--> 148 <!--最新咨询-->
147 <div class="new"> 149 <div class="new">
@@ -211,7 +213,46 @@ @@ -211,7 +213,46 @@
211 </div> 213 </div>
212 </div> 214 </div>
213 </div> 215 </div>
214 -  
215 - 216 +<script src="js/jquery.min.js"></script>
  217 +<script>
  218 + //底部四个按钮
  219 + $('.index').click(function () {
  220 + window.location.href = "index.html"
  221 + })
  222 + $('.tel').click(function () {
  223 + window.location.href = "index.html"
  224 + })
  225 + $('.exhibition').click(function () {
  226 + window.location.href = "wszt.html"
  227 + })
  228 + $('.personal').click(function () {
  229 + window.location.href = "index.html"
  230 + })
  231 + //中部八个按钮
  232 + $('.item_1').click(function () {
  233 + window.location.href = "gyzh.html"
  234 + })
  235 + $('.item_2').click(function () {
  236 + window.location.href = "zpfw.html"
  237 + })
  238 + $('.item_3').click(function () {
  239 + window.location.href = "dlhd.html"
  240 + })
  241 + $('.item_4').click(function () {
  242 + window.location.href = "czsq.html"
  243 + })
  244 + $('.item_5').click(function () {
  245 + window.location.href = "xwbd.html"
  246 + })
  247 + $('.item_6').click(function () {
  248 + window.location.href = "lthd.html"
  249 + })
  250 + $('.item_7').click(function () {
  251 + window.location.href = "slfw_2.html"
  252 + })
  253 + $('.item_8').click(function () {
  254 + window.location.href = "cgdj.html"
  255 + })
  256 +</script>
216 </body> 257 </body>
217 </html> 258 </html>
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 <link rel="stylesheet" type="text/css" href="css/xwbd.css"> 10 <link rel="stylesheet" type="text/css" href="css/xwbd.css">
11 <link rel="stylesheet" type="text/css" href="css/dropload.css"> 11 <link rel="stylesheet" type="text/css" href="css/dropload.css">
12 <script src="js/base.js"></script> 12 <script src="js/base.js"></script>
13 - <script src="js/jquery.min.js"></script> 13 +
14 <style> 14 <style>
15 .icon-zuo{ 15 .icon-zuo{
16 color: #959595; 16 color: #959595;
@@ -137,9 +137,13 @@ @@ -137,9 +137,13 @@
137 </div> 137 </div>
138 138
139 </body> 139 </body>
  140 +<script src="js/jquery.min.js"></script>
140 <script src="js/dropload.min.js"></script> 141 <script src="js/dropload.min.js"></script>
141 142
142 <script> 143 <script>
  144 + $('.item').click(function () {
  145 + window.location.href = "nrxq.html";
  146 + })
143 //菜单功能 147 //菜单功能
144 $(document).ready(function () { 148 $(document).ready(function () {
145 149
@@ -6,14 +6,40 @@ @@ -6,14 +6,40 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 8
9 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> 9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
10 <link rel="stylesheet" type="text/css" href="css/zpfw.css"> 10 <link rel="stylesheet" type="text/css" href="css/zpfw.css">
11 <script src="js/base.js"></script> 11 <script src="js/base.js"></script>
  12 + <style>
  13 + .icon-zuo{
  14 + color: #959595;
  15 + font-size: 0.38rem;
  16 + }
  17 + .icon-iconfont-edu12{
  18 + color: #959595;
  19 + font-size: 0.5rem;
  20 + }
  21 + </style>
12 </head> 22 </head>
13 <body> 23 <body>
14 <div class="container"> 24 <div class="container">
15 - <!--头部图片--> 25 + <!--头部信息-->
16 <div class="head"> 26 <div class="head">
  27 + <!--左图标-->
  28 + <div class="iconfont icon-zuo">
  29 +
  30 + </div>
  31 + <!--展品范围-->
  32 + <div class="head_new">
  33 + 展品范围
  34 + </div>
  35 + <!--右菜单-->
  36 + <div>
  37 +
  38 + </div>
  39 +
  40 + </div>
  41 + <!--头部图片-->
  42 + <div class="head_pic">
17 <img src="images/555.png"> 43 <img src="images/555.png">
18 </div> 44 </div>
19 <!--中部内容--> 45 <!--中部内容-->
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css"> 10 <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css">
11 <link rel="stylesheet" type="text/css" href="css/zsml.css"> 11 <link rel="stylesheet" type="text/css" href="css/zsml.css">
12 <link rel="stylesheet" type="text/css" href="css/dropload.css"> 12 <link rel="stylesheet" type="text/css" href="css/dropload.css">
  13 + <link rel="stylesheet" type="text/css" href="css/page.css">
13 <script src="js/base.js"></script> 14 <script src="js/base.js"></script>
14 <script src="js/jquery.min.js"></script> 15 <script src="js/jquery.min.js"></script>
15 <style> 16 <style>
@@ -25,7 +26,41 @@ @@ -25,7 +26,41 @@
25 color: #ffffff; 26 color: #ffffff;
26 } 27 }
27 .items_box{ 28 .items_box{
28 - margin-bottom: 1rem; 29 + margin-bottom: 0.4rem;
  30 + }
  31 + .pageTest{
  32 + width: 4.5rem;
  33 + height: 0.5rem;
  34 + display: flex;
  35 + }
  36 + .activP{
  37 + background-color: #367fa9!important;
  38 + color: #fff!important;
  39 + }
  40 +
  41 + .prv,.next{
  42 + width: 0.8rem;
  43 + font-size: 0.16rem;
  44 + border: none;
  45 + }
  46 + .last,.first{
  47 + width: 0.5rem;
  48 + border: none;
  49 + }
  50 + .pagingUl li{
  51 + width: 0.5rem;
  52 + height: 0.5rem;
  53 + display: flex;
  54 + }
  55 + .pagingUl li a{
  56 + border: none;
  57 + background-color: transparent;
  58 + }
  59 + .prv{
  60 + margin-left: 0.2rem;
  61 + }
  62 + .last{
  63 + margin-left: 0.2rem;
29 } 64 }
30 </style> 65 </style>
31 </head> 66 </head>
@@ -74,8 +109,147 @@ @@ -74,8 +109,147 @@
74 北京惟鑫航达科技有限公司 109 北京惟鑫航达科技有限公司
75 </div> 110 </div>
76 </div> 111 </div>
  112 + <div class="item">
  113 + <!--头部图片-->
  114 + <div class="item_top">
  115 + <img src="images/12.png">
  116 + </div>
  117 + <!--下划线-->
  118 + <div class="item_underline"></div>
  119 + <!--底部公司-->
  120 + <div class="item_bottom">
  121 + 北京惟鑫航达科技有限公司
  122 + </div>
  123 + </div>
  124 + <div class="item">
  125 + <!--头部图片-->
  126 + <div class="item_top">
  127 + <img src="images/12.png">
  128 + </div>
  129 + <!--下划线-->
  130 + <div class="item_underline"></div>
  131 + <!--底部公司-->
  132 + <div class="item_bottom">
  133 + 北京惟鑫航达科技有限公司
  134 + </div>
  135 + </div>
  136 + <div class="item">
  137 + <!--头部图片-->
  138 + <div class="item_top">
  139 + <img src="images/12.png">
  140 + </div>
  141 + <!--下划线-->
  142 + <div class="item_underline"></div>
  143 + <!--底部公司-->
  144 + <div class="item_bottom">
  145 + 北京惟鑫航达科技有限公司
  146 + </div>
  147 + </div>
  148 + <div class="item">
  149 + <!--头部图片-->
  150 + <div class="item_top">
  151 + <img src="images/12.png">
  152 + </div>
  153 + <!--下划线-->
  154 + <div class="item_underline"></div>
  155 + <!--底部公司-->
  156 + <div class="item_bottom">
  157 + 北京惟鑫航达科技有限公司
  158 + </div>
  159 + </div>
  160 + <div class="item">
  161 + <!--头部图片-->
  162 + <div class="item_top">
  163 + <img src="images/12.png">
  164 + </div>
  165 + <!--下划线-->
  166 + <div class="item_underline"></div>
  167 + <!--底部公司-->
  168 + <div class="item_bottom">
  169 + 北京惟鑫航达科技有限公司
  170 + </div>
  171 + </div>
  172 + <div class="item">
  173 + <!--头部图片-->
  174 + <div class="item_top">
  175 + <img src="images/12.png">
  176 + </div>
  177 + <!--下划线-->
  178 + <div class="item_underline"></div>
  179 + <!--底部公司-->
  180 + <div class="item_bottom">
  181 + 北京惟鑫航达科技有限公司
  182 + </div>
  183 + </div>
  184 + <div class="item">
  185 + <!--头部图片-->
  186 + <div class="item_top">
  187 + <img src="images/12.png">
  188 + </div>
  189 + <!--下划线-->
  190 + <div class="item_underline"></div>
  191 + <!--底部公司-->
  192 + <div class="item_bottom">
  193 + 北京惟鑫航达科技有限公司
  194 + </div>
  195 + </div>
  196 + <div class="item">
  197 + <!--头部图片-->
  198 + <div class="item_top">
  199 + <img src="images/12.png">
  200 + </div>
  201 + <!--下划线-->
  202 + <div class="item_underline"></div>
  203 + <!--底部公司-->
  204 + <div class="item_bottom">
  205 + 北京惟鑫航达科技有限公司
  206 + </div>
  207 + </div>
  208 + <div class="item">
  209 + <!--头部图片-->
  210 + <div class="item_top">
  211 + <img src="images/12.png">
  212 + </div>
  213 + <!--下划线-->
  214 + <div class="item_underline"></div>
  215 + <!--底部公司-->
  216 + <div class="item_bottom">
  217 + 北京惟鑫航达科技有限公司
  218 + </div>
  219 + </div>
  220 + <div class="item">
  221 + <!--头部图片-->
  222 + <div class="item_top">
  223 + <img src="images/12.png">
  224 + </div>
  225 + <!--下划线-->
  226 + <div class="item_underline"></div>
  227 + <!--底部公司-->
  228 + <div class="item_bottom">
  229 + 北京惟鑫航达科技有限公司
  230 + </div>
  231 + </div>
  232 + <div class="item">
  233 + <!--头部图片-->
  234 + <div class="item_top">
  235 + <img src="images/12.png">
  236 + </div>
  237 + <!--下划线-->
  238 + <div class="item_underline"></div>
  239 + <!--底部公司-->
  240 + <div class="item_bottom">
  241 + 北京惟鑫航达科技有限公司
  242 + </div>
  243 + </div>
  244 + </div>
77 245
78 </div> 246 </div>
  247 +
  248 + <!--分页功能-->
  249 + <div class="func_page">
  250 + <div class="pageTest">
  251 + <!--<div class="first"></div>-->
  252 + </div>
79 </div> 253 </div>
80 254
81 255
@@ -121,95 +295,108 @@ @@ -121,95 +295,108 @@
121 295
122 </body> 296 </body>
123 <script src="js/dropload.min.js"></script> 297 <script src="js/dropload.min.js"></script>
124 - 298 +<script src="js/page.js"></script>
125 <script> 299 <script>
126 300
  301 + //分页功能
  302 + $('.pageTest').page({
  303 + leng: 3,//分页总数
  304 + activeClass: 'activP' , //active 类样式定义
127 305
  306 + firstPage: '首页',//
  307 + lastPage: '末页',
  308 + prv: '上一页',
  309 + next: '下一页',
128 310
129 - //下拉加载功能  
130 - $(document).ready(function () {  
131 -  
132 -  
133 - // 页数  
134 - var page = 2;  
135 - // 每次循环展示10个  
136 - var size = 1;  
137 - $('.items_box').dropload({  
138 - scrollArea : window,  
139 - domUp : {  
140 - domClass : 'dropload-up',  
141 - domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',  
142 - domUpdate : '<div class="dropload-update">↑释放更新</div>',  
143 - domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'  
144 - },  
145 - domDown : {  
146 - domClass : 'dropload-down',  
147 - domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',  
148 - domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',  
149 - domNoData : '<div class="dropload-noData">暂无数据</div>'  
150 - },  
151 - loadDownFn : function(me){  
152 - page++;  
153 - // 拼接HTML  
154 - var result = '';  
155 - var s = "";  
156 - var show="";  
157 - var list_compressor="";  
158 - var list_answer="";  
159 - $.ajax({  
160 - type: 'GET',  
161 - url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,  
162 - dataType: 'json',  
163 - success: function(data){  
164 - console.log(data);  
165 - var arrLen = data.length;  
166 - if(arrLen > 0){  
167 - for(var i=0; i<arrLen; i++){  
168 - result +='<div class="item">\n' +  
169 - ' <!--头部图片-->\n' +  
170 - ' <div class="item_top">\n' +  
171 - ' <img src="images/12.png">\n' +  
172 - ' </div>\n' +  
173 - ' <!--下划线-->\n' +  
174 - ' <div class="item_underline"></div>\n' +  
175 - ' <!--底部公司-->\n' +  
176 - ' <div class="item_bottom">\n' +  
177 - ' 北京惟鑫航达科技有限公司\n' +  
178 - ' </div>\n' +  
179 - ' </div>'  
180 -  
181 -  
182 -  
183 -  
184 - }  
185 -  
186 - // 如果没有数据  
187 - }else{  
188 - // 锁定  
189 - me.lock();  
190 - // 无数据  
191 - me.noData(); 311 + clickBack:function(page){
  312 + console.log(page)
192 } 313 }
193 - // 为了测试,延迟1秒加载  
194 - setTimeout(function(){  
195 - // 插入数据到页面,放到最后面  
196 - $('.items').append(result);  
197 - // 每次数据插入,必须重置  
198 - me.resetload();  
199 - },500);  
200 - },  
201 - error: function(xhr, type){  
202 - alert('Ajax error!');  
203 - // 即使加载出错,也得重置  
204 - me.resetload();  
205 - }  
206 - });  
207 - },  
208 - threshold : 50  
209 - });  
210 -  
211 }) 314 })
212 315
  316 + //下拉加载功能
  317 + // $(document).ready(function () {
  318 + //
  319 + //
  320 + // // 页数
  321 + // var page = 2;
  322 + // // 每次循环展示10个
  323 + // var size = 1;
  324 + // $('.items_box').dropload({
  325 + // scrollArea : window,
  326 + // domUp : {
  327 + // domClass : 'dropload-up',
  328 + // domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  329 + // domUpdate : '<div class="dropload-update">↑释放更新</div>',
  330 + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  331 + // },
  332 + // domDown : {
  333 + // domClass : 'dropload-down',
  334 + // domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  335 + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  336 + // domNoData : '<div class="dropload-noData">暂无数据</div>'
  337 + // },
  338 + // loadDownFn : function(me){
  339 + // page++;
  340 + // // 拼接HTML
  341 + // var result = '';
  342 + // var s = "";
  343 + // var show="";
  344 + // var list_compressor="";
  345 + // var list_answer="";
  346 + // $.ajax({
  347 + // type: 'GET',
  348 + // url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  349 + // dataType: 'json',
  350 + // success: function(data){
  351 + // console.log(data);
  352 + // var arrLen = data.length;
  353 + // if(arrLen > 0){
  354 + // for(var i=0; i<arrLen; i++){
  355 + // result +='<div class="item">\n' +
  356 + // ' <!--头部图片-->\n' +
  357 + // ' <div class="item_top">\n' +
  358 + // ' <img src="images/12.png">\n' +
  359 + // ' </div>\n' +
  360 + // ' <!--下划线-->\n' +
  361 + // ' <div class="item_underline"></div>\n' +
  362 + // ' <!--底部公司-->\n' +
  363 + // ' <div class="item_bottom">\n' +
  364 + // ' 北京惟鑫航达科技有限公司\n' +
  365 + // ' </div>\n' +
  366 + // ' </div>'
  367 + //
  368 + //
  369 + //
  370 + //
  371 + // }
  372 + //
  373 + // // 如果没有数据
  374 + // }else{
  375 + // // 锁定
  376 + // me.lock();
  377 + // // 无数据
  378 + // me.noData();
  379 + // }
  380 + // // 为了测试,延迟1秒加载
  381 + // setTimeout(function(){
  382 + // // 插入数据到页面,放到最后面
  383 + // $('.items').append(result);
  384 + // // 每次数据插入,必须重置
  385 + // me.resetload();
  386 + // },500);
  387 + // },
  388 + // error: function(xhr, type){
  389 + // alert('Ajax error!');
  390 + // // 即使加载出错,也得重置
  391 + // me.resetload();
  392 + // }
  393 + // });
  394 + // },
  395 + // threshold : 50
  396 + // });
  397 + //
  398 + // })
  399 +
213 </script> 400 </script>
214 401
215 </html> 402 </html>