webfront / zhenwei · 提交

转到一个项目

作者 乔爽
提交 8505c0b009c1e468809e0ce5c06478896c5a501c 1 个父辈 4e0c7b05

update

内嵌 并排对比
正在显示 17 个修改的文件 包含 1743 行增加 和 209 行删除
  1 +body{
  2 + background-color: #F4F5F9;
  3 +}
  4 +*{
  5 + margin: 0;
  6 + padding: 0;
  7 +}
  8 +.container{
  9 + width: 7.5rem;
  10 + line-height: 1;
  11 + display: flex;
  12 + flex-flow: column;
  13 + align-items: center;
  14 +}
  15 +.head{
  16 + width: 7.5rem;
  17 + height: 4.91rem;
  18 + display: flex;
  19 + background: url("../images/18.png");
  20 + background-size: cover;
  21 + position: relative;
  22 +}
  23 +.head_pic{
  24 + width: 1.45rem;
  25 + height: 1.45rem;
  26 + background:rgba(244,245,249,1);
  27 + border: 0.04rem solid rgba(255,255,255,1);
  28 + border-radius:50%;
  29 + position: absolute;
  30 + bottom: -0.8rem;
  31 + left: 3.02rem;
  32 +}
  33 +.head_pic img{
  34 + width: 100%;
  35 + height: 100%;
  36 + border-radius:50%;
  37 +}
  38 +.mid{
  39 + width: 5rem;
  40 + margin-top: 1.12rem;
  41 + display: flex;
  42 + justify-content: space-between;
  43 +}
  44 +.mid_item{
  45 + width: 2rem;
  46 + font-size: 0.3rem;
  47 + font-family:MicrosoftYaHei;
  48 + font-weight:400;
  49 + color:rgba(102,102,102,1);
  50 + line-height:32px;
  51 + position: relative;
  52 + display: flex;
  53 + justify-content: center;
  54 +
  55 +}
  56 +.item_color{
  57 + color: red;
  58 + /*background:linear-gradient(-85deg,rgba(110,15,119,1) 0%, rgba(3,24,165,1) 100%);*/
  59 + /*-webkit-background-clip:text;*/
  60 + /*-webkit-text-fill-color:transparent;*/
  61 +}
  62 +.item_color:before{
  63 +
  64 + content: "";
  65 + width: 1.52rem;
  66 + height: 0.02rem;
  67 + background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1));
  68 + /*-webkit-background-clip:text;*/
  69 + /*-webkit-text-fill-color:transparent;*/
  70 + position: absolute;
  71 + bottom: 0;
  72 +
  73 +}
  74 +.bottom{
  75 + margin-top: 0.6rem;
  76 + display: flex;
  77 +}
  78 +.bottom_item{
  79 + width: 6.16rem;
  80 + height: 0.9rem;
  81 + border:1px solid rgba(112,112,112,1);
  82 + border-radius: 0.08rem;
  83 + display: flex;
  84 +}
  1 +body{
  2 + background-color: #F4F5F9;
  3 +}
  4 +*{
  5 + margin: 0;
  6 + padding: 0;
  7 +}
  8 +.container{
  9 + width: 7.5rem;
  10 + line-height: 1;
  11 + display: flex;
  12 + flex-flow: column;
  13 + align-items: center;
  14 +}
  15 +.head{
  16 + width: 7.5rem;
  17 + height: 4.91rem;
  18 + /*background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8));*/
  19 + background: url("../images/18.png");
  20 + background-size: cover;
  21 + display: flex;
  22 + flex-flow: column;
  23 + align-items: center;
  24 +}
  25 +.head_box{
  26 + width: 100%;
  27 + display: flex;
  28 + justify-content: space-between;
  29 + margin-top: 0.83rem;
  30 + -webkit-box-sizing: border-box;
  31 + -moz-box-sizing: border-box;
  32 + box-sizing: border-box;
  33 + padding: 0.2rem;
  34 +}
  35 +.head_t{
  36 + display: flex;
  37 +}
  38 +.head_t_left{
  39 + width: 1.88rem;
  40 + height: 0.45rem;
  41 + border:1px solid rgba(181,181,181,1);
  42 + border-radius: 0.23rem;
  43 + display: flex;
  44 + justify-content: space-between;
  45 + align-items: center;
  46 +}
  47 +.head_t_left input{
  48 + width: 1rem;
  49 + outline: none;
  50 + border: none;
  51 + background-color: transparent;
  52 + box-sizing: border-box;
  53 + padding: 0.1rem;
  54 +}
  55 +.head_t_left_search{
  56 + width: 0.8rem;
  57 + height: 0.45rem;
  58 + background:rgba(149,149,149,1);
  59 + border:1px solid rgba(191,191,191,1);
  60 + border-radius: 0.23rem;
  61 + display: flex;
  62 + align-items: center;
  63 + justify-content: center;
  64 +}
  65 +.head_portrait{
  66 + width: 1.45rem;
  67 + height: 1.45rem;
  68 + display: flex;
  69 + border: 0.04rem solid rgba(255,255,255,1);
  70 + border-radius: 50%;
  71 + background-color: #ffffff;
  72 +}
  73 +.head_portrait img{
  74 + width: 100%;
  75 + height: 100%;
  76 + border-radius: 50%;
  77 +}
  78 +.head_name{
  79 + font-size: 0.3rem;
  80 + font-family:MicrosoftYaHei;
  81 + font-weight:400;
  82 + color:rgba(255,255,255,1);
  83 + line-height: 0.8rem;
  84 +}
  85 +.head_search{
  86 + width: 4.48rem;
  87 + height: 0.45rem;
  88 + border:1px solid rgba(181,181,181,1);
  89 + border-radius: 0.23rem;
  90 + display: flex;
  91 + align-items: center;
  92 + justify-content: space-between;
  93 +}
  94 +.head_search input{
  95 + width: 3.2rem;
  96 + outline: none;
  97 + border: none;
  98 + -webkit-box-sizing: border-box;
  99 + -moz-box-sizing: border-box;
  100 + box-sizing: border-box;
  101 + padding: 0.1rem;
  102 + background-color: transparent;
  103 + color: #ffffff;
  104 +}
  105 +.head_search_button{
  106 + width: 1.2rem;
  107 + height: 0.45rem;
  108 + background:rgba(149,149,149,1);
  109 + border:1px solid rgba(191,191,191,1);
  110 + border-radius: 0.23rem;
  111 +
  112 +
  113 + font-size: 0.24rem;
  114 + font-family:MicrosoftYaHei;
  115 + font-weight:400;
  116 + color:rgba(255,255,255,1);
  117 + line-height:42px;
  118 + display: flex;
  119 + align-items: center;
  120 + justify-content: center;
  121 +}
  122 +
  123 +
  124 +.menu{
  125 + width: 6.86rem;
  126 + display: flex;
  127 + flex-wrap: wrap;
  128 + justify-content: space-between;
  129 +}
  130 +.menu_top{
  131 + width: 6.86rem;
  132 + display: flex;
  133 + justify-content: space-around;
  134 +}
  135 +.menu_bottom{
  136 + width: 6.86rem;
  137 + display: flex;
  138 + justify-content: space-around;
  139 +}
  140 +.menu_item{
  141 + margin-top: 0.22rem;
  142 + display: flex;
  143 + flex-flow: column;
  144 + align-items: center;
  145 +}
  146 +.menu_item_top{
  147 + width: 0.7rem;
  148 + height: 0.7rem;
  149 + background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1));
  150 + border-radius:50%;
  151 +}
  152 +.menu_item_bottom{
  153 + margin-top: 0.1rem;
  154 + font-size: 0.26rem;
  155 + font-family:MicrosoftYaHei;
  156 + font-weight:400;
  157 + color:rgba(51,51,51,1);
  158 +}
  159 +.middle{
  160 + width: 7.5rem;
  161 + 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;
  165 + display: flex;
  166 +}
  167 +.middle img{
  168 + width: 100%;
  169 + height: 100%;
  170 +}
  171 +.new{
  172 + width: 1.56rem;
  173 + font-size: 0.27rem;
  174 + display: flex;
  175 + align-items: center;
  176 + margin-top: 0.1rem;
  177 +
  178 +
  179 +}
  180 +.new_text{
  181 +
  182 +}
  183 +.new_underline{
  184 + width: 1.56rem;
  185 + height:2px;
  186 + background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1));
  187 + margin-top: 0.2rem;
  188 +}
  189 +.bottom{
  190 + display: flex;
  191 + margin-top: 0.03rem;
  192 + width: 7.5rem;
  193 + justify-content: space-between;
  194 + margin-bottom: 0.88rem;
  195 +}
  196 +.bottom_left{
  197 + width: 3.56rem;
  198 + margin-left: 0.4rem;
  199 +}
  200 +.bottom_left_top{
  201 + margin-top: 0.2rem;
  202 + height: 0.4rem;
  203 + line-height: 0.4rem;
  204 + font-size: 0.26rem;
  205 + color: #333333;
  206 + box-sizing: border-box;
  207 + text-overflow: ellipsis;
  208 + display: -webkit-box;
  209 + -webkit-box-orient: vertical;
  210 + -webkit-line-clamp: 1;
  211 + overflow: hidden;
  212 +}
  213 +.bottom_left_bottom{
  214 + height: 1.04rem;
  215 + line-height: 0.36rem;
  216 + font-size: 0.22rem;
  217 + color: #666666;
  218 + box-sizing: border-box;
  219 + text-overflow: ellipsis;
  220 + display: -webkit-box;
  221 + -webkit-box-orient: vertical;
  222 + -webkit-line-clamp: 3;
  223 + overflow: hidden;
  224 + margin-top: 0.1rem;
  225 +}
  226 +.bottom_right{
  227 + width: 3.26rem;
  228 + height: 3.77rem;
  229 + display: flex;
  230 +}
  231 +.bottom_right img{
  232 + width: 100%;
  233 + height: 100%;
  234 +}
  235 +/*底部菜单栏*/
  236 +.bottom_menu{
  237 + width: 7.5rem;
  238 + height: 0.88rem;
  239 + display: flex;
  240 + align-items: center;
  241 + justify-content: space-around;
  242 + background-color: #ffffff;
  243 + position: fixed;
  244 + bottom: 0;
  245 +}
  246 +.bottom_menu_index{
  247 + display: flex;
  248 + flex-flow: column;
  249 + align-items: center;
  250 + color: #666666;
  251 +}
  252 +.bottom_menu_index_text{
  253 + font-size: 0.22rem;
  254 + color: #666666;
  255 +}
  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 +/*顶部菜单*/
  38 +.top{
  39 + width: 6rem;
  40 + display: flex;
  41 + justify-content: space-between;
  42 + margin-top: 0.88rem;
  43 +}
  44 +.top_item{
  45 + font-size: 0.24rem;
  46 + font-family:SourceHanSansCN-Regular;
  47 + font-weight:400;
  48 + line-height: 0.6rem;
  49 + position: relative;
  50 + display: flex;
  51 + justify-content: center;
  52 +}
  53 +.top_color{
  54 + color: #EA474B;
  55 +}
  56 +.top_color:before{
  57 + content: "";
  58 + width: 1rem;
  59 + height: 0.02rem;
  60 + background-color: #EA474B;
  61 + position: absolute;
  62 + bottom: 0;
  63 +}
  64 +
  65 +
  66 +/***********交通信息***********/
  67 +.traffic_box{
  68 + margin-bottom: 1rem;
  69 +}
  70 +.traffic{
  71 + width: 6.6rem;
  72 + display: flex;
  73 + flex-wrap: wrap;
  74 + justify-content: space-between;
  75 + /*margin-bottom: 1rem;*/
  76 +}
  77 +.traffic_limit{
  78 + font-size: 0.28rem;
  79 + font-family:SourceHanSansCN-Regular;
  80 + font-weight:400;
  81 + color:rgba(51,51,51,1);
  82 + line-height: 1.23rem;
  83 +}
  84 +.traffic_title{
  85 + font-size: 0.2rem;
  86 + text-align: center;
  87 +}
  88 +/*百度地图*/
  89 +.search_box{
  90 + display: flex;
  91 + flex-flow: column;
  92 + align-items: center;
  93 + justify-content: center;
  94 +}
  95 +.traffic_search{
  96 + width: 4.48rem;
  97 + height: 0.45rem;
  98 + border:1px solid rgba(149,149,149,1);
  99 + border-radius: 0.23rem;
  100 + display: flex;
  101 + z-index: 999;
  102 + justify-content: space-between;
  103 + align-items: center;
  104 +}
  105 +.traffic_search input{
  106 + width: 2.8rem;
  107 + height: 0.4rem;
  108 + margin-left: 0.3rem;
  109 + outline: none;
  110 + border: none;
  111 + background-color: transparent;
  112 +}
  113 +.traffic_search input::placeholder{
  114 + color: #999999;
  115 +}
  116 +.traffic_search_bottom{
  117 + width: 1.2rem;
  118 + height: 0.45rem;
  119 +
  120 + background:rgba(149,149,149,1);
  121 + border:1px solid rgba(149,149,149,1);
  122 + border-radius: 0.23rem;
  123 + display: flex;
  124 + align-items: center;
  125 + justify-content: center;
  126 +}
  127 +/*地图大小*/
  128 +.traffic_map{
  129 + margin-top: 0.21rem;
  130 + width: 6.32rem;
  131 + height: 4.07rem;
  132 + background-color: #497CBC;
  133 +}
  134 +
  135 +/***********酒店住宿***********/
  136 +.hotel{
  137 + margin-bottom: 1rem;
  138 +}
  139 +.item{
  140 + width: 7.3rem;
  141 + height: 2rem;
  142 + display: flex;
  143 + background:rgba(255,255,255,1);
  144 + box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22);
  145 + margin-top: 0.1rem;
  146 + position: relative;
  147 +}
  148 +.item:first-child{
  149 + margin-top: 0.21rem;
  150 +}
  151 +
  152 +.item_left{
  153 + width: 1.8rem;
  154 + height: 1.75rem;
  155 + display: flex;
  156 + border-radius: 0.1rem;
  157 + margin: 0.13rem 0 0.13rem 0.1rem;
  158 +}
  159 +.item_left img{
  160 + width: 100%;
  161 + height: 100%;
  162 + border-radius: 0.1rem;
  163 +}
  164 +.item_mid{
  165 + width: 4rem;
  166 + height: 1.6rem;
  167 + display: flex;
  168 + flex-flow: column;
  169 + margin: 0.2rem;
  170 +}
  171 +.item_mid_big{
  172 + height: 1rem;
  173 + font-size: 0.3rem;
  174 + font-weight: bold;
  175 + line-height: 0.42rem;
  176 + box-sizing: border-box;
  177 + text-overflow: ellipsis;
  178 + display: -webkit-box;
  179 + -webkit-box-orient: vertical;
  180 + -webkit-line-clamp: 2;
  181 + overflow: hidden;
  182 +}
  183 +.item_mid_small{
  184 + height: 0.9rem;
  185 + font-size: 0.22rem;
  186 + color: #333333;
  187 + line-height: 0.38rem;
  188 +
  189 + box-sizing: border-box;
  190 + text-overflow: ellipsis;
  191 + display: -webkit-box;
  192 + -webkit-box-orient: vertical;
  193 + -webkit-line-clamp: 2;
  194 + overflow: hidden;
  195 + margin-top: 0.1rem;
  196 +}
  197 +.item_mid_small_item{
  198 + display: flex;
  199 +}
  200 +.item_mid_small_item_s{
  201 + margin-left: 0.1rem;
  202 + box-sizing: border-box;
  203 + text-overflow: ellipsis;
  204 + display: -webkit-box;
  205 + -webkit-box-orient: vertical;
  206 + -webkit-line-clamp: 1;
  207 + overflow: hidden;
  208 +}
  209 +.item_right{
  210 + width: 0.9rem;
  211 + height: 2rem;
  212 + background: #EA474B;
  213 + border-radius: 0.02rem;
  214 + position: absolute;
  215 + right: 0;
  216 +
  217 +
  218 + font-size: 0.22rem;
  219 + font-family:MicrosoftYaHei;
  220 + font-weight:400;
  221 + color:rgba(255,255,255,1);
  222 + line-height: 0.38rem;
  223 + display: flex;
  224 + flex-flow: column;
  225 + align-items: center;
  226 + justify-content: center;
  227 +}
  228 +.color_gray{
  229 + background-color: #e5e5e5;
  230 +}
  231 +
  232 +/***********周边美食***********/
  233 +.cate{
  234 + margin-bottom: 1rem;
  235 +}
  236 +/***********天津旅游***********/
  237 +.travel{
  238 + margin-bottom: 1rem;
  239 +}
  240 +
  241 +/*天数图片*/
  242 +.day_item{
  243 + width: 3.06rem;
  244 + height: 2.2rem;
  245 + border-radius: 0.12rem;
  246 + display: flex;
  247 + margin-top: 0.31rem;
  248 + position: relative;
  249 +}
  250 +.day_item img{
  251 + width: 100%;
  252 + height: 100%;
  253 + border-radius: 0.12rem;
  254 +}
  255 +.day_item_circle{
  256 + width: 0.32rem;
  257 + height: 0.32rem;
  258 + background-color: #c9c9c9;
  259 + position: absolute;
  260 + bottom: -0.16rem;
  261 + right: -0.2rem;
  262 + border: 1px solid #ffffff;
  263 + border-radius: 50%;
  264 + display: flex;
  265 + align-items: center;
  266 + justify-content: center;
  267 +}
  268 +.box{
  269 + position: relative;
  270 +}
  271 +.mask{
  272 + width: 7.5rem;
  273 + height: 13.22rem;
  274 + background:rgba(0,0,0,0.7);
  275 + border-radius: 0.12rem;
  276 + position: absolute;
  277 + top: 1.76rem;
  278 + display: flex;
  279 + justify-content: center;
  280 +}
  281 +.mask_pic{
  282 + width: 7.1rem;
  283 + height: 4.72rem;
  284 + display: flex;
  285 + border-radius: 0.12rem;
  286 + margin-top:1.4rem;
  287 + position: relative;
  288 +}
  289 +.mask_pic img{
  290 + width: 100%;
  291 + height: 100%;
  292 + -webkit-border-radius: 0.12rem;
  293 + -moz-border-radius: 0.12rem;
  294 + border-radius: 0.12rem;
  295 +}
  296 +.mask_pic_circle{
  297 + width: 0.42rem;
  298 + height: 0.42rem;
  299 + position: absolute;
  300 + right: -0.16rem;
  301 + top: -0.16rem;
  302 + border-radius: 50%;
  303 + border: 1px solid #ffffff;
  304 + display: flex;
  305 + align-items: center;
  306 + justify-content: center;
  307 +}
  308 +
  309 +/*底部菜单栏*/
  310 +.bottom_menu{
  311 + width: 7.5rem;
  312 + height: 0.88rem;
  313 + display: flex;
  314 + align-items: center;
  315 + justify-content: space-around;
  316 + background-color: #ffffff;
  317 + position: fixed;
  318 + bottom: 0;
  319 +}
  320 +.bottom_menu_index{
  321 + display: flex;
  322 + flex-flow: column;
  323 + align-items: center;
  324 + color: #666666;
  325 +}
  326 +.bottom_menu_index_text{
  327 + font-size: 0.22rem;
  328 + color: #666666;
  329 +}
@@ -36,6 +36,8 @@ body{ @@ -36,6 +36,8 @@ body{
36 } 36 }
37 .items{ 37 .items{
38 margin-top: 0.88rem; 38 margin-top: 0.88rem;
  39 + margin-bottom: 1rem;
  40 +
39 } 41 }
40 .item{ 42 .item{
41 width: 7.3rem; 43 width: 7.3rem;
@@ -53,7 +53,7 @@ body{ @@ -53,7 +53,7 @@ body{
53 border:1px solid rgba(149,149,149,1); 53 border:1px solid rgba(149,149,149,1);
54 border-radius: 0.23rem; 54 border-radius: 0.23rem;
55 display: flex; 55 display: flex;
56 - z-index: 999; 56 +
57 justify-content: space-between; 57 justify-content: space-between;
58 align-items: center; 58 align-items: center;
59 margin-top: 0.43rem; 59 margin-top: 0.43rem;
@@ -86,7 +86,7 @@ body{ @@ -86,7 +86,7 @@ body{
86 margin-top: 0.2rem; 86 margin-top: 0.2rem;
87 display: flex; 87 display: flex;
88 flex-wrap: wrap; 88 flex-wrap: wrap;
89 - margin-bottom: 1rem; 89 + /*margin-bottom: 1rem;*/
90 } 90 }
91 .item{ 91 .item{
92 width: 2.23rem; 92 width: 2.23rem;
  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 +.head_pic{
  38 + width: 7.5rem;
  39 + height: 2.18rem;
  40 + display: flex;
  41 + margin-top: 0.88rem;
  42 +}
  43 +.head_pic img{
  44 + width: 100%;
  45 + height: 100%;
  46 +}
  47 +/*标题*/
  48 +.title{
  49 + width: 6.47rem;
  50 + margin-top: 0.3rem;
  51 + display: flex;
  52 + flex-flow: column;
  53 +}
  54 +.title_big{
  55 +
  56 + font-size: 0.34rem;
  57 + font-family:SourceHanSansCN-Bold;
  58 + font-weight:bold;
  59 + color:rgba(37,87,170,1);
  60 + line-height: 0.5rem;
  61 + text-shadow: 0.01rem 0.01rem 0.01rem rgba(0, 0, 0, 0.22);
  62 +
  63 + background:linear-gradient(90deg,rgba(43,74,148,1) 0%, rgba(21,138,188,1) 100%);
  64 + -webkit-background-clip:text;
  65 + -webkit-text-fill-color:transparent;
  66 +}
  67 +.title_small{
  68 +
  69 + font-size: 0.18rem;
  70 + font-family:MicrosoftYaHei;
  71 + font-weight:400;
  72 + color:rgba(102,102,102,1);
  73 + line-height: 0.5rem;
  74 + display: flex;
  75 + align-items: center;
  76 + justify-content: space-between;
  77 +}
  78 +
  79 +
  80 +.mid{
  81 + width: 6.5rem;
  82 + display: flex;
  83 + flex-flow: column;
  84 +}
  85 +.mid_text{
  86 + margin-top: 0.3rem;
  87 + margin-bottom: 0.2rem;
  88 + font-size: 0.22rem;
  89 + line-height: 0.46rem;
  90 +}
  91 +.mid_text:last-child{
  92 + margin-bottom: 0.42rem;
  93 +}
  94 +.mid_pic{
  95 + display: flex;
  96 + justify-content: space-between;
  97 +}
  98 +.mid_pic_item{
  99 + width: 3.04rem;
  100 + height: 1.83rem;
  101 + display: flex;
  102 +
  103 +}
  104 +.mid_pic_item img{
  105 + width: 100%;
  106 + height: 100%;
  107 +}
  108 +.mid_pic_big{
  109 + width: 6.45rem;
  110 + height: 6.7rem;
  111 + display: flex;
  112 +}
  113 +.mid_pic_big img{
  114 + width: 100%;
  115 + height: 100%;
  116 +}
  117 +.mid_pic_bottom{
  118 + width: 6.5rem;
  119 + height: 7.25rem;
  120 + display: flex;
  121 + background-color: #497CBC;
  122 + margin-bottom: 1rem;
  123 +}
  124 +.mid_pic_bottom img{
  125 + width: 100%;
  126 + height: 100%;
  127 +}
  128 +
  129 +/*底部菜单栏*/
  130 +.bottom_menu{
  131 + width: 7.5rem;
  132 + height: 0.88rem;
  133 + display: flex;
  134 + align-items: center;
  135 + justify-content: space-around;
  136 + background-color: #ffffff;
  137 + position: fixed;
  138 + bottom: 0;
  139 +}
  140 +.bottom_menu_index{
  141 + display: flex;
  142 + flex-flow: column;
  143 + align-items: center;
  144 + color: #666666;
  145 +}
  146 +.bottom_menu_index_text{
  147 + font-size: 0.22rem;
  148 + color: #666666;
  149 +}
  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_4jilbt7s27s.css">
  10 + <link rel="stylesheet" type="text/css" href="css/login.css">
  11 + <script src="js/base.js"></script>
  12 +
  13 +</head>
  14 +<body>
  15 +<div class="container">
  16 + <!--头部-->
  17 + <div class="head">
  18 +
  19 + <!--头像图片-->
  20 + <div class="head_pic">
  21 + <img src="images/16.png">
  22 + </div>
  23 + </div>
  24 + <!--登录注册-->
  25 + <div class="mid">
  26 + <div class="mid_item item_color">
  27 + 账号登录
  28 + </div>
  29 + <div class="mid_item">
  30 + 立即注册
  31 + </div>
  32 +
  33 + </div>
  34 + <!--输入框-->
  35 + <div class="bottom">
  36 + <div class="bottom_item">
  37 + <div class="iconfont"></div>
  38 + <input type="text" placeholder="请输入手机号">
  39 + </div>
  40 + </div>
  41 +
  42 +</div>
  43 +
  44 +
  45 +</body>
  46 +</html>
  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_4jilbt7s27s.css">
  10 + <link rel="stylesheet" type="text/css" href="css/personal_center.css">
  11 + <script src="js/base.js"></script>
  12 + <style>
  13 + .icon-fangdajing{
  14 + color: #fff;
  15 + }
  16 + .icon-iconfont-edu12{
  17 + font-size: 0.5rem;
  18 + color: #959595;
  19 + }
  20 + </style>
  21 +</head>
  22 +<body>
  23 +<div class="container">
  24 + <!--头部-->
  25 + <div class="head">
  26 + <div class="head_box">
  27 + <!--左部分-->
  28 + <div class="head_t">
  29 + <!--搜索框-->
  30 + <div class="head_t_left">
  31 + <input type="text">
  32 + <div class="head_t_left_search">
  33 + <div class="iconfont icon-fangdajing"></div>
  34 + </div>
  35 + </div>
  36 + <!--菜单栏-->
  37 + <div class="head_t_right">
  38 +
  39 + </div>
  40 + </div>
  41 + <!--右部分-->
  42 + <div class="head_r">
  43 + <div class="iconfont icon-iconfont-edu12"></div>
  44 + </div>
  45 + </div>
  46 + <!--头像-->
  47 + <div class="head_portrait">
  48 + <img src="images/16.png">
  49 + </div>
  50 + <!--欢迎-->
  51 + <div class="head_name">
  52 + 欢迎您，15122508271用户
  53 +
  54 + </div>
  55 + <!--搜索框-->
  56 + <div class="head_search">
  57 + <input type="text" placeholder="EDM/电子展报">
  58 + <div class="head_search_button">
  59 + 订阅
  60 + </div>
  61 + </div>
  62 + </div>
  63 + <!--菜单-->
  64 + <div class="menu">
  65 + <div class="menu_top">
  66 + <!--关于展会-->
  67 + <div class="menu_item">
  68 + <div class="menu_item_top">
  69 + <img src="">
  70 + </div>
  71 + <div class="menu_item_bottom">
  72 + 关于展会
  73 + </div>
  74 + </div>
  75 + <!--关于展会-->
  76 + <div class="menu_item">
  77 + <div class="menu_item_top">
  78 + <img src="">
  79 + </div>
  80 + <div class="menu_item_bottom">
  81 + 关于展会
  82 + </div>
  83 + </div>
  84 + <!--关于展会-->
  85 + <div class="menu_item">
  86 + <div class="menu_item_top">
  87 + <img src="">
  88 + </div>
  89 + <div class="menu_item_bottom">
  90 + 关于展会
  91 + </div>
  92 + </div>
  93 + <!--关于展会-->
  94 + <div class="menu_item">
  95 + <div class="menu_item_top">
  96 + <img src="">
  97 + </div>
  98 + <div class="menu_item_bottom">
  99 + 关于展会
  100 + </div>
  101 + </div>
  102 + </div>
  103 + <div class="menu_bottom">
  104 + <!--关于展会-->
  105 + <div class="menu_item">
  106 + <div class="menu_item_top">
  107 + <img src="">
  108 + </div>
  109 + <div class="menu_item_bottom">
  110 + 关于展会
  111 + </div>
  112 + </div>
  113 + <!--关于展会-->
  114 + <div class="menu_item">
  115 + <div class="menu_item_top">
  116 + <img src="">
  117 + </div>
  118 + <div class="menu_item_bottom">
  119 + 关于展会
  120 + </div>
  121 + </div>
  122 + <!--关于展会-->
  123 + <div class="menu_item">
  124 + <div class="menu_item_top">
  125 + <img src="">
  126 + </div>
  127 + <div class="menu_item_bottom">
  128 + 关于展会
  129 + </div>
  130 + </div>
  131 + <!--关于展会-->
  132 + <div class="menu_item">
  133 + <div class="menu_item_top">
  134 + <img src="">
  135 + </div>
  136 + <div class="menu_item_bottom">
  137 + 关于展会
  138 + </div>
  139 + </div>
  140 + </div>
  141 + </div>
  142 + <!--中部图片-->
  143 + <div class="middle">
  144 + <img src="">
  145 + </div>
  146 + <!--最新咨询-->
  147 + <div class="new">
  148 + <div class="iconfont icon-diqiu"></div>
  149 + <div class="new_text">最新咨询</div>
  150 + </div>
  151 + <!--下划线-->
  152 + <div class="new_underline"></div>
  153 + <!--底部内容-->
  154 + <div class="bottom">
  155 + <!--底部左边-->
  156 + <div class="bottom_left">
  157 + <div class="bottom_left_top">
  158 + 汽车“轻量化”已成为汽车产汽车“轻量化”已成为汽车产
  159 + </div>
  160 + <div class="bottom_left_bottom">
  161 + 近年来，我国清洁能源持续扩容，清洁低碳安全高效的能源体系正加快构建。党的十八大以来
  162 + 近年来，我国清洁能源持续扩容，清洁低碳安全高效的能源体系正加快构建。党的十八大以来
  163 + </div>
  164 +
  165 + <div class="bottom_left_top">
  166 + 汽车“轻量化”已成为汽车产汽车“轻量化”已成为汽车产
  167 + </div>
  168 + <div class="bottom_left_bottom">
  169 + 近年来，我国清洁能源持续扩容，清洁低碳安全高效的能源体系正加快构建。党的十八大以来
  170 + 近年来，我国清洁能源持续扩容，清洁低碳安全高效的能源体系正加快构建。党的十八大以来
  171 + </div>
  172 + </div>
  173 + <div class="bottom_right">
  174 + <img src="images/2_pic.png">
  175 + </div>
  176 + </div>
  177 +
  178 + <!--底部菜单-->
  179 + <div class="bottom_menu">
  180 + <div class="bottom_menu_index">
  181 + <!--上图标-->
  182 + <div class="iconfont icon-zhuye2"></div>
  183 + <!--下文字-->
  184 + <div class="bottom_menu_index_text">
  185 + 首页
  186 + </div>
  187 + </div>
  188 + <div class="bottom_menu_index">
  189 + <!--上图标-->
  190 + <div class="iconfont icon-dianhua-copy"></div>
  191 + <!--下文字-->
  192 + <div class="bottom_menu_index_text">
  193 + 电话咨询
  194 + </div>
  195 + </div>
  196 + <div class="bottom_menu_index">
  197 + <!--上图标-->
  198 + <div class="iconfont icon-user-address"></div>
  199 + <!--下文字-->
  200 + <div class="bottom_menu_index_text">
  201 + 网上展厅
  202 + </div>
  203 + </div>
  204 + <div class="bottom_menu_index">
  205 + <!--上图标-->
  206 + <div class="iconfont icon-gerenzhongxin"></div>
  207 + <!--下文字-->
  208 + <div class="bottom_menu_index_text">
  209 + 个人中心
  210 + </div>
  211 + </div>
  212 + </div>
  213 +</div>
  214 +
  215 +
  216 +</body>
  217 +</html>
  1 +
  2 +<!DOCTYPE html>
  3 +<html lang="en">
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <title>网上展厅</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  8 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9 +
  10 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_4jilbt7s27s.css">
  11 + <link rel="stylesheet" type="text/css" href="css/wszt.css">
  12 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  13 +
  14 +
  15 + <script src="js/base.js"></script>
  16 + <script src="js/jquery.min.js"></script>
  17 + <style>
  18 + .icon-zuo{
  19 + color: #959595;
  20 + font-size: 0.38rem;
  21 + }
  22 + .icon-iconfont-edu12{
  23 + color: #959595;
  24 + font-size: 0.5rem;
  25 + }
  26 + table{
  27 + margin-top: 0.1rem;
  28 + border: 1px solid #ffffff;
  29 + }
  30 + th{
  31 + width: 2rem;
  32 + height: 1rem;
  33 + font-size: 0.2rem;
  34 + background-color: #4C79B2;
  35 + list-style: none;
  36 + color: #fff;
  37 + }
  38 + td{
  39 + width: 1.6rem;
  40 + height: 1rem;
  41 + font-size: 0.2rem;
  42 + background-color: #CED5D5;
  43 + text-align: center;
  44 + }
  45 + .icon-fangdajing{
  46 + color: #ffffff;
  47 + }
  48 + .addr{
  49 + font-size: 0.2rem;
  50 + }
  51 + .phone{
  52 + font-size: 0.2rem;
  53 + }
  54 + /*引入百度地图*/
  55 + #allmap,.BMap_mask {
  56 + height: 100%;
  57 + width: 100%;
  58 + overflow: hidden;
  59 + }
  60 + .icon-iconjia{
  61 + color: #ffffff;
  62 + font-size: 0.2rem;
  63 + }
  64 + .icon-dacha{
  65 + color: #ffffff;
  66 + font-size: 0.16rem;
  67 + }
  68 +
  69 + </style>
  70 +</head>
  71 +<body>
  72 +<div class="container">
  73 + <!--头部信息-->
  74 + <div class="head">
  75 + <!--左图标-->
  76 + <div class="iconfont icon-zuo">
  77 +
  78 + </div>
  79 + <!--内容详情-->
  80 + <div class="head_new">
  81 + 网上展厅
  82 + </div>
  83 + <!--右菜单-->
  84 + <div class="iconfont icon-iconfont-edu12">
  85 +
  86 + </div>
  87 +
  88 + </div>
  89 +
  90 +
  91 + <!--顶部菜单-->
  92 + <div class="top">
  93 + <div class="top_item top_color">
  94 + 第四天
  95 + </div>
  96 + <div class="top_item ">
  97 + 第三天
  98 + </div>
  99 + <div class="top_item ">
  100 + 第二天
  101 + </div>
  102 + <div class="top_item ">
  103 + 第一天
  104 + </div>
  105 + </div>
  106 + <!--图片列表-->
  107 + <div class="box">
  108 + <!------------ 第四天 ------------->
  109 + <div class="traffic_box day_4" style="display: block;">
  110 + <div class="traffic day_4_traffic" >
  111 + <div class="day_item">
  112 + <img src="images/16.png">
  113 + <div class="day_item_circle">
  114 + <div class="iconfont icon-iconjia"></div>
  115 + </div>
  116 + </div>
  117 +
  118 +
  119 +
  120 + </div>
  121 + </div>
  122 +
  123 + <!------------ 第三天 ------------->
  124 + <div class="traffic_box day_3" style="display: none;">
  125 + <div class="traffic day_3_traffic" >
  126 + <div class="day_item">
  127 + <img src="images/16.png">
  128 + <div class="day_item_circle">
  129 + <div class="iconfont icon-iconjia"></div>
  130 + </div>
  131 + </div>
  132 + <div class="day_item">
  133 + <img src="images/16.png">
  134 + <div class="day_item_circle">
  135 + <div class="iconfont icon-iconjia"></div>
  136 + </div>
  137 + </div>
  138 + <div class="day_item">
  139 + <img src="images/16.png">
  140 + <div class="day_item_circle">
  141 + <div class="iconfont icon-iconjia"></div>
  142 + </div>
  143 + </div>
  144 +
  145 + </div>
  146 + </div>
  147 +
  148 + <!------------ 第二天 ------------->
  149 + <div class="traffic_box day_2" style="display: none;">
  150 + <div class="traffic day_2_traffic" >
  151 + <div class="day_item">
  152 + <img src="images/16.png">
  153 + <div class="day_item_circle">
  154 + <div class="iconfont icon-iconjia"></div>
  155 + </div>
  156 + </div>
  157 + <div class="day_item">
  158 + <img src="images/16.png">
  159 + <div class="day_item_circle">
  160 + <div class="iconfont icon-iconjia"></div>
  161 + </div>
  162 + </div>
  163 +
  164 + </div>
  165 + </div>
  166 +
  167 + <!------------ 第一天 ------------->
  168 + <div class="traffic_box day_1" style="display: none;">
  169 + <div class="traffic day_1_traffic" >
  170 + <div class="day_item">
  171 + <img src="images/16.png">
  172 + <div class="day_item_circle">
  173 + <div class="iconfont icon-iconjia"></div>
  174 + </div>
  175 + </div>
  176 +
  177 + </div>
  178 + </div>
  179 +
  180 +
  181 + </div>
  182 +
  183 + <!--图片蒙层-->
  184 + <div class="mask">
  185 + <div class="mask_pic">
  186 + <img src="images/17.png">
  187 + <div class="mask_pic_circle">
  188 + <div class="iconfont icon-dacha"></div>
  189 + </div>
  190 + </div>
  191 + </div>
  192 +
  193 +
  194 +
  195 +
  196 +
  197 + <!--底部菜单-->
  198 + <div class="bottom_menu">
  199 + <div class="bottom_menu_index">
  200 + <!--上图标-->
  201 + <div class="iconfont icon-zhuye2"></div>
  202 + <!--下文字-->
  203 + <div class="bottom_menu_index_text">
  204 + 首页
  205 + </div>
  206 + </div>
  207 + <div class="bottom_menu_index">
  208 + <!--上图标-->
  209 + <div class="iconfont icon-dianhua-copy"></div>
  210 + <!--下文字-->
  211 + <div class="bottom_menu_index_text">
  212 + 电话咨询
  213 + </div>
  214 + </div>
  215 + <div class="bottom_menu_index">
  216 + <!--上图标-->
  217 + <div class="iconfont icon-user-address"></div>
  218 + <!--下文字-->
  219 + <div class="bottom_menu_index_text">
  220 + 网上展厅
  221 + </div>
  222 + </div>
  223 + <div class="bottom_menu_index">
  224 + <!--上图标-->
  225 + <div class="iconfont icon-gerenzhongxin"></div>
  226 + <!--下文字-->
  227 + <div class="bottom_menu_index_text">
  228 + 个人中心
  229 + </div>
  230 + </div>
  231 + </div>
  232 +
  233 +</div>
  234 +
  235 +<script src="js/dropload.min.js"></script>
  236 +<script>
  237 +
  238 +
  239 +
  240 + //颜色切换
  241 + $('.top_item').click(function () {
  242 + var index = $(this).index()
  243 + $(this).addClass("top_color").siblings(".top_item").removeClass("top_color")
  244 +
  245 + })
  246 + //内容切换
  247 + $(".top_item").click(function () {
  248 + $(".top_item").eq($(".box>.traffic_box").index()).addClass("on").siblings().removeClass("on");
  249 + $(".box>.traffic_box").hide().eq($(this).index()).show();
  250 + })
  251 +
  252 +
  253 +
  254 + // 下拉菜单
  255 + $(document).ready(function () {
  256 +
  257 +
  258 + //-------------第四天---------------
  259 + var page4 = 0;
  260 + // 每次循环展示10个
  261 + var size4 = 6 ;
  262 + $('.day_4').dropload({
  263 + scrollArea : window,
  264 + domUp : {
  265 + domClass : 'dropload-up',
  266 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  267 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  268 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  269 + },
  270 + domDown : {
  271 + domClass : 'dropload-down',
  272 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  273 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  274 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  275 + },
  276 + loadDownFn : function(me){
  277 + page4++;
  278 + // 拼接HTML
  279 + var result = '';
  280 + var s = "";
  281 + var show="";
  282 + var list_compressor="";
  283 + var list_answer="";
  284 + $.ajax({
  285 + type: 'GET',
  286 + url: 'http://ons.me/tools/dropload/json.php?page='+page4+'&size='+size4,
  287 + dataType: 'json',
  288 + success: function(data){
  289 + console.log(data);
  290 + var arrLen = data.length;
  291 + if(arrLen > 0){
  292 + for(var i=0; i<arrLen; i++){
  293 + result +='<div class="day_item">\n' +
  294 + ' <img src="images/16.png">\n' +
  295 + ' <div class="day_item_circle">\n' +
  296 + ' <div class="iconfont icon-iconjia"></div>\n' +
  297 + ' </div>\n' +
  298 + ' </div>'
  299 +
  300 + }
  301 +
  302 + // 如果没有数据
  303 + }else{
  304 + // 锁定
  305 + me.lock();
  306 + // 无数据
  307 + me.noData();
  308 + }
  309 + // 为了测试，延迟1秒加载
  310 + setTimeout(function(){
  311 + // 插入数据到页面，放到最后面
  312 + $('.day_4_traffic').append(result);
  313 + // 每次数据插入，必须重置
  314 + me.resetload();
  315 + },500);
  316 + },
  317 + error: function(xhr, type){
  318 + alert('Ajax error!');
  319 + // 即使加载出错，也得重置
  320 + me.resetload();
  321 + }
  322 + });
  323 + },
  324 + threshold : 50
  325 + });
  326 +
  327 +
  328 +
  329 + })
  330 +</script>
  331 +</body>
  332 +</html>
@@ -24,6 +24,9 @@ @@ -24,6 +24,9 @@
24 .icon-fangdajing{ 24 .icon-fangdajing{
25 color: #ffffff; 25 color: #ffffff;
26 } 26 }
  27 + .items_box{
  28 + margin-bottom: 1rem;
  29 + }
27 </style> 30 </style>
28 </head> 31 </head>
29 <body> 32 <body>
@@ -57,215 +60,21 @@ @@ -57,215 +60,21 @@
57 </div> 60 </div>
58 61
59 <!--展商列表--> 62 <!--展商列表-->
60 - <div class="items">  
61 - <div class="item">  
62 - <!--头部图片-->  
63 - <div class="item_top">  
64 - <img src="images/12.png">  
65 - </div>  
66 - <!--下划线-->  
67 - <div class="item_underline"></div>  
68 - <!--底部公司-->  
69 - <div class="item_bottom">  
70 - 北京惟鑫航达科技有限公司  
71 -  
72 - </div>  
73 - </div>  
74 - <div class="item">  
75 - <!--头部图片-->  
76 - <div class="item_top">  
77 - <img src="images/12.png">  
78 - </div>  
79 - <!--下划线-->  
80 - <div class="item_underline"></div>  
81 - <!--底部公司-->  
82 - <div class="item_bottom">  
83 - 北京惟鑫航达科技有限公司  
84 -  
85 - </div>  
86 - </div>  
87 - <div class="item">  
88 - <!--头部图片-->  
89 - <div class="item_top">  
90 - <img src="images/12.png">  
91 - </div>  
92 - <!--下划线-->  
93 - <div class="item_underline"></div>  
94 - <!--底部公司-->  
95 - <div class="item_bottom">  
96 - 北京惟鑫航达科技有限公司  
97 -  
98 - </div>  
99 - </div>  
100 - <div class="item">  
101 - <!--头部图片-->  
102 - <div class="item_top">  
103 - <img src="images/12.png">  
104 - </div>  
105 - <!--下划线-->  
106 - <div class="item_underline"></div>  
107 - <!--底部公司-->  
108 - <div class="item_bottom">  
109 - 北京惟鑫航达科技有限公司  
110 -  
111 - </div>  
112 - </div>  
113 - <div class="item">  
114 - <!--头部图片-->  
115 - <div class="item_top">  
116 - <img src="images/12.png">  
117 - </div>  
118 - <!--下划线-->  
119 - <div class="item_underline"></div>  
120 - <!--底部公司-->  
121 - <div class="item_bottom">  
122 - 北京惟鑫航达科技有限公司  
123 -  
124 - </div>  
125 - </div>  
126 - <div class="item">  
127 - <!--头部图片-->  
128 - <div class="item_top">  
129 - <img src="images/12.png">  
130 - </div>  
131 - <!--下划线-->  
132 - <div class="item_underline"></div>  
133 - <!--底部公司-->  
134 - <div class="item_bottom">  
135 - 北京惟鑫航达科技有限公司  
136 -  
137 - </div>  
138 - </div>  
139 - <div class="item">  
140 - <!--头部图片-->  
141 - <div class="item_top">  
142 - <img src="images/12.png">  
143 - </div>  
144 - <!--下划线-->  
145 - <div class="item_underline"></div>  
146 - <!--底部公司-->  
147 - <div class="item_bottom">  
148 - 北京惟鑫航达科技有限公司  
149 -  
150 - </div>  
151 - </div>  
152 - <div class="item">  
153 - <!--头部图片-->  
154 - <div class="item_top">  
155 - <img src="images/12.png"> 63 + <div class="items_box">
  64 + <div class="items">
  65 + <div class="item">
  66 + <!--头部图片-->
  67 + <div class="item_top">
  68 + <img src="images/12.png">
  69 + </div>
  70 + <!--下划线-->
  71 + <div class="item_underline"></div>
  72 + <!--底部公司-->
  73 + <div class="item_bottom">
  74 + 北京惟鑫航达科技有限公司
  75 + </div>
156 </div> 76 </div>
157 - <!--下划线-->  
158 - <div class="item_underline"></div>  
159 - <!--底部公司-->  
160 - <div class="item_bottom">  
161 - 北京惟鑫航达科技有限公司  
162 77
163 - </div>  
164 - </div>  
165 - <div class="item">  
166 - <!--头部图片-->  
167 - <div class="item_top">  
168 - <img src="images/12.png">  
169 - </div>  
170 - <!--下划线-->  
171 - <div class="item_underline"></div>  
172 - <!--底部公司-->  
173 - <div class="item_bottom">  
174 - 北京惟鑫航达科技有限公司  
175 -  
176 - </div>  
177 - </div>  
178 - <div class="item">  
179 - <!--头部图片-->  
180 - <div class="item_top">  
181 - <img src="images/12.png">  
182 - </div>  
183 - <!--下划线-->  
184 - <div class="item_underline"></div>  
185 - <!--底部公司-->  
186 - <div class="item_bottom">  
187 - 北京惟鑫航达科技有限公司  
188 -  
189 - </div>  
190 - </div>  
191 - <div class="item">  
192 - <!--头部图片-->  
193 - <div class="item_top">  
194 - <img src="images/12.png">  
195 - </div>  
196 - <!--下划线-->  
197 - <div class="item_underline"></div>  
198 - <!--底部公司-->  
199 - <div class="item_bottom">  
200 - 北京惟鑫航达科技有限公司  
201 -  
202 - </div>  
203 - </div>  
204 - <div class="item">  
205 - <!--头部图片-->  
206 - <div class="item_top">  
207 - <img src="images/12.png">  
208 - </div>  
209 - <!--下划线-->  
210 - <div class="item_underline"></div>  
211 - <!--底部公司-->  
212 - <div class="item_bottom">  
213 - 北京惟鑫航达科技有限公司  
214 -  
215 - </div>  
216 - </div>  
217 -  
218 - <div class="item">  
219 - <!--头部图片-->  
220 - <div class="item_top">  
221 - <img src="images/12.png">  
222 - </div>  
223 - <!--下划线-->  
224 - <div class="item_underline"></div>  
225 - <!--底部公司-->  
226 - <div class="item_bottom">  
227 - 北京惟鑫航达科技有限公司  
228 -  
229 - </div>  
230 - </div>  
231 - <div class="item">  
232 - <!--头部图片-->  
233 - <div class="item_top">  
234 - <img src="images/12.png">  
235 - </div>  
236 - <!--下划线-->  
237 - <div class="item_underline"></div>  
238 - <!--底部公司-->  
239 - <div class="item_bottom">  
240 - 北京惟鑫航达科技有限公司  
241 -  
242 - </div>  
243 - </div>  
244 - <div class="item">  
245 - <!--头部图片-->  
246 - <div class="item_top">  
247 - <img src="images/12.png">  
248 - </div>  
249 - <!--下划线-->  
250 - <div class="item_underline"></div>  
251 - <!--底部公司-->  
252 - <div class="item_bottom">  
253 - 北京惟鑫航达科技有限公司  
254 -  
255 - </div>  
256 - </div>  
257 - <div class="item">  
258 - <!--头部图片-->  
259 - <div class="item_top">  
260 - <img src="images/12.png">  
261 - </div>  
262 - <!--下划线-->  
263 - <div class="item_underline"></div>  
264 - <!--底部公司-->  
265 - <div class="item_bottom">  
266 - 北京惟鑫航达科技有限公司  
267 -  
268 - </div>  
269 </div> 78 </div>
270 </div> 79 </div>
271 80
@@ -315,6 +124,91 @@ @@ -315,6 +124,91 @@
315 124
316 <script> 125 <script>
317 126
  127 +
  128 +
  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();
  192 + }
  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 + })
318 212
319 </script> 213 </script>
320 214
  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/zsxx.css">
  11 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  12 + <script src="js/base.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>
  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 + <div class="head_pic">
  45 + <img src="images/13.png">
  46 + </div>
  47 + <!--标题-->
  48 + <div class="title">
  49 + <div class="title_big">
  50 + 北京惟鑫航达科技有限公司<br>
  51 + N6馆 C46
  52 + </div>
  53 + <!--<div class="title_small">-->
  54 + <!--<p>更新时间：<span>2018-12-18</span></p>-->
  55 + <!--<p>点击量: <span>18</span></p>-->
  56 + <!--<p>来源:<span>天津汽车装备展</span></p>-->
  57 + <!--</div>-->
  58 + </div>
  59 +
  60 + <!--中部内容-->
  61 + <div class="mid">
  62 + <div class="mid_text">
  63 + &nbsp;&nbsp;&nbsp;&nbsp;北京惟鑫航达科技有限公司是国家力敏传感器的专业研发生产企业。专注于测力称重载荷传感器、动、静态扭矩传感器、张力传感器、压力传感器、变送器、仪器仪表、测控系统、项目集成等方面产品的研发、生产、销售服务的高新技术企业。
  64 + <br>
  65 + &nbsp;&nbsp;&nbsp;&nbsp;主导产品
  66 + </div>
  67 + <!--2张图片 304*183-->
  68 + <div class="mid_pic">
  69 + <div class="mid_pic_item">
  70 + <img src="images/14.png">
  71 + </div>
  72 + <div class="mid_pic_item">
  73 + <img src="images/14.png">
  74 + </div>
  75 + </div>
  76 + <div class="mid_text">
  77 + &nbsp;&nbsp;&nbsp;&nbsp;HT-4系列轮辐式测力（疲劳）测力称重传感器：
  78 + <br>
  79 + &nbsp;&nbsp;&nbsp;&nbsp;该系列轮辐传感器性能稳定，精度高，稳定性好，量程从50kg-1000t，适用于静态动态（疲劳）的拉压力试验系统。可根据需要设计为双通道传感器、一路数据采集、一路同时在线检测。可用于各种工业自动化控制生产线中，也可用于各种拉压力试验设备（试验机）中。
  80 + </div>
  81 + <!--1张图片 645*670-->
  82 + <div class="mid_pic">
  83 + <div class="mid_pic_big">
  84 + <img src="images/15.png">
  85 + </div>
  86 + </div>
  87 + <div class="mid_text">
  88 + &nbsp;&nbsp;&nbsp;&nbsp;MC系列多份力传感器：
  89 + <br>
  90 + &nbsp;&nbsp;&nbsp;&nbsp;适用于发动机、车架、机翼机械臂的多方向应变力系统测试，用于研究不同纵向力或侧向力对垂直力变化的影响，在几何空间上应力分布，确定被测物体在多自由度的载荷情况，得到设备纵倾和抗侧倾特性。
  91 + <br>
  92 + &nbsp;&nbsp;&nbsp;&nbsp;公司凭借先进的技术和自主工艺创新研发的产品，质量可靠，性能稳定，远远优于同行业产品。除服务于军品研制生产外，广泛开展民用市场。产品广泛用于航空、航天、冶金、石油、化工、电力、建材、铁路、交通、能源、工程机械等行业。在国内自动化系统方面有一定建树，为国家重大科研项目做出过突出贡献。
  93 + <br>
  94 + &nbsp;&nbsp;&nbsp;&nbsp;在工业4.0以及中国制造2025的背景下，传感器信息化产业不断走向数字化、无线化、动态化、信息化，惟鑫航达科技有限公司顺势而为，其产品全面覆盖从基层的感知层（传感+仪表），到中间的网络层（通讯模块），再到上层的应用层（服务器+手机/电脑客户端），旨在为客户提供一整套的完整解决方案。公司正沿着“国际化、科技化、多元化、集团化、服务化”的发展战略，依托本公司多年来的传感器生产经验和规模化的生产基地，为建设国际一流的传感信息公司而努力迈进！
  95 +
  96 + </div>
  97 + <!--1张图片 649*725-->
  98 + <div class="mid_pic">
  99 + <div class="mid_pic_bottom">
  100 + <img src="#">
  101 + </div>
  102 + </div>
  103 +
  104 +
  105 +
  106 +
  107 +
  108 + </div>
  109 +
  110 +
  111 +
  112 + <!--底部菜单-->
  113 + <div class="bottom_menu">
  114 + <div class="bottom_menu_index">
  115 + <!--上图标-->
  116 + <div class="iconfont icon-zhuye2"></div>
  117 + <!--下文字-->
  118 + <div class="bottom_menu_index_text">
  119 + 首页
  120 + </div>
  121 + </div>
  122 + <div class="bottom_menu_index">
  123 + <!--上图标-->
  124 + <div class="iconfont icon-dianhua-copy"></div>
  125 + <!--下文字-->
  126 + <div class="bottom_menu_index_text">
  127 + 电话咨询
  128 + </div>
  129 + </div>
  130 + <div class="bottom_menu_index">
  131 + <!--上图标-->
  132 + <div class="iconfont icon-user-address"></div>
  133 + <!--下文字-->
  134 + <div class="bottom_menu_index_text">
  135 + 网上展厅
  136 + </div>
  137 + </div>
  138 + <div class="bottom_menu_index">
  139 + <!--上图标-->
  140 + <div class="iconfont icon-gerenzhongxin"></div>
  141 + <!--下文字-->
  142 + <div class="bottom_menu_index_text">
  143 + 个人中心
  144 + </div>
  145 + </div>
  146 + </div>
  147 +
  148 +</div>
  149 +<script src="js/dropload.min.js"></script>
  150 +
  151 +<script>
  152 + // // 页数
  153 + // var page = 0;
  154 + // // 每页展示10个
  155 + // var size = 3;
  156 + // $('.mid').dropload({
  157 + // scrollArea : window,
  158 + // domUp : {
  159 + // domClass : 'dropload-up',
  160 + // domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  161 + // domUpdate : '<div class="dropload-update">↑释放更新</div>',
  162 + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  163 + // },
  164 + // domDown : {
  165 + // domClass : 'dropload-down',
  166 + // domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  167 + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  168 + // domNoData : '<div class="dropload-noData">暂无数据</div>'
  169 + // },
  170 + // loadDownFn : function(me){
  171 + // page++;
  172 + // // 拼接HTML
  173 + // var result = '';
  174 + // var s = "";
  175 + // var show="";
  176 + // var list_compressor="";
  177 + // var list_answer="";
  178 + // $.ajax({
  179 + // type: 'GET',
  180 + // url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  181 + // dataType: 'json',
  182 + // success: function(data){
  183 + // console.log(data);
  184 + // var arrLen = data.length;
  185 + // if(arrLen > 0){
  186 + // for(var i=0; i<arrLen; i++){
  187 + // result +='<div class="mid_title">\n' +
  188 + // ' 导览1——工业自动化与IT\n' +
  189 + // ' </div>\n' +
  190 + // ' <!--文章-->\n' +
  191 + // ' <div class="mid_text">\n' +
  192 + // ' &nbsp;&nbsp;&nbsp;&nbsp;展会期间，训练有素的向导带领观众在展馆内开展八种不同主题的导览活动。最多25名观众可同时参与一次导览活动，进入特定的主题展区了解最新的创新成果和展会亮点。对观众而言，主题导览是快速、综合、全面了解天津汽车装备展相关信息的最佳途径。每次导览活动，向导带领观众前往6至8个精选展商展台，由展商做十分钟的展示。这里，我们所指的“展示”并非泛泛空谈；而是展商对其特定产品、服务或解决方案进行全面而生动的讲解和展示。我们深知高效的展商演示是实现独特、优质导览体验不可或缺的因素，并藉此让观众对导览活动更为满意。\n' +
  193 + // ' <br> &nbsp;&nbsp;&nbsp;&nbsp;“产业集成——连接与协作”，2018天津汽车装备展的主题表明：产业集成已跨越实验阶段，开始使我们获益。会带来哪些增值效益？如何有效配置合作机器人、数字双胞胎和预见性维护？在2018天津汽车装备展上，您将找到这些问题的答案。\n' +
  194 + // ' </div>'
  195 + //
  196 + //
  197 + //
  198 + //
  199 + // }
  200 + // // 如果没有数据
  201 + // }else{
  202 + // // 锁定
  203 + // me.lock();
  204 + // // 无数据
  205 + // me.noData();
  206 + // }
  207 + // // 为了测试，延迟1秒加载
  208 + // setTimeout(function(){
  209 + // // 插入数据到页面，放到最后面
  210 + // $('.mid_box').append(result);
  211 + // // 每次数据插入，必须重置
  212 + // me.resetload();
  213 + // },500);
  214 + // },
  215 + // error: function(xhr, type){
  216 + // alert('Ajax error!');
  217 + // // 即使加载出错，也得重置
  218 + // me.resetload();
  219 + // }
  220 + // });
  221 + // },
  222 + // threshold : 50
  223 + // });
  224 +</script>
  225 +</body>
  226 +</html>