webfront / zhenwei · 提交

转到一个项目

作者 乔爽
提交 4e0c7b05a56c7a30f27673ca13e78e922c657d8e 1 个父辈 62c666d7

update

内嵌 并排对比
正在显示 18 个修改的文件 包含 3448 行增加 和 28 行删除
  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/cgdj.css">
  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 + .bottom{
  22 + width: 100%;
  23 + }
  24 + </style>
  25 +</head>
  26 +<body>
  27 +<div class="container">
  28 + <!--头部信息-->
  29 + <div class="head">
  30 + <!--左图标-->
  31 + <div class="iconfont icon-zuo">
  32 +
  33 + </div>
  34 + <!--参展申请-->
  35 + <div class="head_new">
  36 + 参观登记
  37 + </div>
  38 + <!--右菜单-->
  39 + <div>
  40 +
  41 + </div>
  42 +
  43 + </div>
  44 + <!--头部图片-->
  45 + <div class="head_pic">
  46 + <img src="images/888.png">
  47 + </div>
  48 + <!--顶部文字-->
  49 + <div class="top">
  50 + 请预留您的参展信息，组委会稍后跟您联系
  51 + </div>
  52 + <!--中部信息-->
  53 + <div class="mid">
  54 + <!--个人信息-->
  55 + <div class="mid_item">
  56 + <!--左边-->
  57 + <div class="mid_item_left">
  58 + 个人信息<span class="color_red">*</span>:
  59 + </div>
  60 + <!--右边-->
  61 + <div class="mid_item_right contact">
  62 + <p class="contact_way">
  63 + <span>
  64 + 您的姓名<span class="color_red">*</span>
  65 + </span>
  66 + <input class="contact_way_input" type="text" >
  67 + </p>
  68 + <p class="contact_way">
  69 + <span>
  70 + 您的职务<span class="color_red">*</span>
  71 + </span>
  72 + <input class="contact_way_input" type="text" >
  73 + </p>
  74 + <p class="contact_way">
  75 + <span>
  76 + 办公电话
  77 + </span>
  78 + <input class="contact_way_input" type="text" >
  79 + </p>
  80 + <p class="contact_way">
  81 + <span>
  82 + 联系QQ
  83 + </span>
  84 + <input class="contact_way_input" type="text" >
  85 + </p>
  86 + <p class="contact_way">
  87 + <span>
  88 + 手机号<span class="color_red">*</span>
  89 + </span>
  90 + <input class="contact_way_input" type="text" >
  91 + </p>
  92 + <p class="contact_way">
  93 + <span>
  94 + 公司名称<span class="color_red">*</span>
  95 + </span>
  96 + <input class="contact_way_input" type="text" >
  97 + </p>
  98 + <div class="contact_way">
  99 + <span>
  100 + 公司地址<span class="color_red">*</span>
  101 + </span>
  102 + <!--三级联动样式设置-->
  103 + <div data-toggle="distpicker">
  104 + <div class="contact_way_select">
  105 + <!--省-->
  106 + <div class="province_box form-group">
  107 + <select class="select_item form-control" id="province2" data-province="请选择省" >
  108 +
  109 + </select>
  110 + <!--下角标-->
  111 + </div>
  112 + <!--市-->
  113 + <div class="province_box form-group">
  114 + <select class="select_item from-control" id="city2 " data-city=" 请选择市 ">
  115 +
  116 + </select>
  117 + </div>
  118 + <!--区-->
  119 + <div class="province_box form-group">
  120 + <select class="select_item from-control" id="district2" data-district="请选择区">
  121 +
  122 + </select>
  123 + </div>
  124 + </div>
  125 + </div>
  126 + </div>
  127 + <p class="contact_way">
  128 + <span>
  129 + 详细地址<span class="color_red">*</span>
  130 + </span>
  131 + <input class="contact_way_input" type="text" >
  132 + </p>
  133 +
  134 +
  135 + </div>
  136 + </div>
  137 +
  138 + <!--参观调查-->
  139 + <div class="mid_item">
  140 + <!--左边-->
  141 + <div class="mid_item_left">
  142 + 参观调查<span class="color_red">*</span>:
  143 + </div>
  144 +
  145 +
  146 + </div>
  147 +
  148 + <!--1.行业类别-->
  149 + <div class="mid_item category">
  150 + <!--左边-->
  151 + <div class="mid_item_left">
  152 + 1.贵公司所属的行业类别(可多选)
  153 + </div>
  154 + <!--右边-->
  155 + <div class="mid_item_right exhibition_area">
  156 + <p class="mid_item_right_input exhibition_area_small">
  157 + <input type="checkbox">
  158 + 模具加工及模具零配件
  159 + </p>
  160 + <p class="mid_item_right_input exhibition_area_small">
  161 + <input type="checkbox">
  162 + 家具及木工行业
  163 + </p>
  164 + <p class="mid_item_right_input exhibition_area_small">
  165 + <input type="checkbox">
  166 + 自动化机器人
  167 + </p>
  168 + <p class="mid_item_right_input exhibition_area_small">
  169 + <input type="checkbox">
  170 + 机床、数控设备、通用器械
  171 +
  172 + </p>
  173 +
  174 + <p class="mid_item_right_input exhibition_area_small">
  175 + <input type="checkbox">
  176 + 产品
  177 + </p>
  178 + <p class="mid_item_right_input exhibition_area_small">
  179 + <input type="checkbox">
  180 + 刀具、工具、材料
  181 + </p>
  182 + <p class="mid_item_right_input exhibition_area_small">
  183 + <input type="checkbox">
  184 + 金属制品
  185 + </p>
  186 + <p class="mid_item_right_input exhibition_area_small">
  187 + <input type="checkbox">
  188 + 医疗器械
  189 +
  190 + </p>
  191 +
  192 + <p class="mid_item_right_input exhibition_area_small">
  193 + <input type="checkbox">
  194 + 汽车及零部件制造
  195 + </p>
  196 + <p class="mid_item_right_input exhibition_area_small">
  197 + <input type="checkbox">
  198 + 家电及厨卫
  199 + </p>
  200 + <p class="mid_item_right_input exhibition_area_small bottom">
  201 + <input type="checkbox">
  202 + 计算机、通信、消费类电子产品(含手机、只能穿戴、办公室设备及安防产品等)
  203 + </p>
  204 +
  205 +
  206 +
  207 + </div>
  208 + </div>
  209 +
  210 + <!--2.此行目的-->
  211 + <div class="mid_item category">
  212 + <!--左边-->
  213 + <div class="mid_item_left">
  214 + 2、您此行的目的（可多选）
  215 + </div>
  216 + <!--右边-->
  217 + <div class="mid_item_right exhibition_area">
  218 + <p class="mid_item_right_input exhibition_area_small">
  219 + <input type="checkbox">
  220 + 了解市场概况,寻找新技术、新产品
  221 + </p>
  222 + <p class="mid_item_right_input exhibition_area_small">
  223 + <input type="checkbox">
  224 + 拜访客户
  225 + </p>
  226 + <p class="mid_item_right_input exhibition_area_small">
  227 + <input type="checkbox">
  228 + 采购/下订单
  229 + </p>
  230 + <p class="mid_item_right_input exhibition_area_small">
  231 + <input type="checkbox">
  232 + 参加会议活动
  233 +
  234 + </p>
  235 +
  236 + <p class="mid_item_right_input exhibition_area_small">
  237 + <input type="checkbox">
  238 + 评估是否参展
  239 + </p>
  240 + <p class="mid_item_right_input exhibition_area_small">
  241 + <input type="checkbox">
  242 + 开发新的供应商
  243 + </p>
  244 + <p class="mid_item_right_input exhibition_area_small">
  245 + <input type="checkbox">
  246 + 其他
  247 + <input class="exhibition_area_input" type="text">
  248 + </p>
  249 +
  250 +
  251 +
  252 +
  253 +
  254 + </div>
  255 + </div>
  256 +
  257 + <!--3.感兴趣的展品-->
  258 + <div class="mid_item category">
  259 + <!--左边-->
  260 + <div class="mid_item_left">
  261 + 3、您感兴趣的展品（可多选）
  262 + </div>
  263 + <!--右边-->
  264 + <div class="mid_item_right exhibition_area">
  265 + <p class="mid_item_right_input exhibition_area_small">
  266 + <input type="checkbox">
  267 + 金属切削床
  268 + </p>
  269 + <p class="mid_item_right_input exhibition_area_small">
  270 + <input type="checkbox">
  271 + 数字化测量
  272 + </p>
  273 + <p class="mid_item_right_input exhibition_area_small">
  274 + <input type="checkbox">
  275 + 钣金机床
  276 + </p>
  277 + <p class="mid_item_right_input exhibition_area_small">
  278 + <input type="checkbox">
  279 + 3D打印及软件
  280 +
  281 + </p>
  282 +
  283 + <p class="mid_item_right_input exhibition_area_small">
  284 + <input type="checkbox">
  285 + 冲床、冲压及钣金自动化
  286 + </p>
  287 + <p class="mid_item_right_input exhibition_area_small">
  288 + <input type="checkbox">
  289 + 工控系统及传动
  290 + </p>
  291 + <p class="mid_item_right_input exhibition_area_small">
  292 + <input type="checkbox">
  293 + 精密机械零件
  294 + </p>
  295 + <p class="mid_item_right_input exhibition_area_small">
  296 + <input type="checkbox">
  297 + 机器人及应用
  298 +
  299 + </p>
  300 +
  301 + <p class="mid_item_right_input exhibition_area_small">
  302 + <input type="checkbox">
  303 + 特殊钢及材料
  304 + </p>
  305 + <p class="mid_item_right_input exhibition_area_small">
  306 + <input type="checkbox">
  307 + 刀具工具及硬质合金
  308 + </p>
  309 + <p class="mid_item_right_input exhibition_area_small bottom">
  310 + <input type="checkbox">
  311 + 模具及金属制品
  312 + </p>
  313 +
  314 +
  315 +
  316 + </div>
  317 + </div>
  318 +
  319 + <!--4.得知展会-->
  320 + <div class="mid_item category">
  321 + <!--左边-->
  322 + <div class="mid_item_left">
  323 + 4、您如何得知我们的展会（可多选）
  324 + </div>
  325 + <!--右边-->
  326 + <div class="mid_item_right exhibition_area">
  327 + <p class="mid_item_right_input exhibition_area_small">
  328 + <input type="checkbox">
  329 + 主办方的邀请函
  330 + </p>
  331 + <p class="mid_item_right_input exhibition_area_small">
  332 + <input type="checkbox">
  333 + 网站/搜索引擎
  334 + </p>
  335 + <p class="mid_item_right_input exhibition_area_small">
  336 + <input type="checkbox">
  337 + 参展商的邀请涵
  338 + </p>
  339 + <p class="mid_item_right_input exhibition_area_small">
  340 + <input type="checkbox">
  341 + 微博/微信
  342 +
  343 + </p>
  344 +
  345 + <p class="mid_item_right_input exhibition_area_small">
  346 + <input type="checkbox">
  347 + 多年参观
  348 + </p>
  349 + <p class="mid_item_right_input exhibition_area_small">
  350 + <input type="checkbox">
  351 + 朋友/同事/同行推荐
  352 + </p>
  353 + <p class="mid_item_right_input exhibition_area_small">
  354 + <input type="checkbox">
  355 + 报纸/杂志广告
  356 + </p>
  357 + <p class="mid_item_right_input exhibition_area_small">
  358 + <input type="checkbox">
  359 + 其他
  360 + <input class="exhibition_area_input" type="text">
  361 + </p>
  362 +
  363 +
  364 +
  365 +
  366 +
  367 + </div>
  368 + </div>
  369 +
  370 +
  371 +
  372 +
  373 +
  374 + <!--确认提交-->
  375 + <div class="mid_sub">
  376 + 确认提交
  377 + </div>
  378 +
  379 +
  380 +
  381 + </div>
  382 + <!--底部菜单-->
  383 + <div class="bottom_menu">
  384 + <div class="bottom_menu_index">
  385 + <!--上图标-->
  386 + <div class="iconfont icon-zhuye2"></div>
  387 + <!--下文字-->
  388 + <div class="bottom_menu_index_text">
  389 + 首页
  390 + </div>
  391 + </div>
  392 + <div class="bottom_menu_index">
  393 + <!--上图标-->
  394 + <div class="iconfont icon-dianhua-copy"></div>
  395 + <!--下文字-->
  396 + <div class="bottom_menu_index_text">
  397 + 电话咨询
  398 + </div>
  399 + </div>
  400 + <div class="bottom_menu_index">
  401 + <!--上图标-->
  402 + <div class="iconfont icon-user-address"></div>
  403 + <!--下文字-->
  404 + <div class="bottom_menu_index_text">
  405 + 网上展厅
  406 + </div>
  407 + </div>
  408 + <div class="bottom_menu_index">
  409 + <!--上图标-->
  410 + <div class="iconfont icon-gerenzhongxin"></div>
  411 + <!--下文字-->
  412 + <div class="bottom_menu_index_text">
  413 + 个人中心
  414 + </div>
  415 + </div>
  416 + </div>
  417 +</div>
  418 +
  419 +<script src="js/jquery.min.js"></script>
  420 +<script src="js/distpicker.data.js"></script>
  421 +<script src="js/distpicker.js"></script>
  422 +</body>
  423 +</html>
  1 +body{
  2 + background-color: #F4F5F9;
  3 +}
  4 +*{
  5 + margin: 0;
  6 + padding: 0;
  7 +}
  8 +input{
  9 + border: none;
  10 + outline: none;
  11 +}
  12 +.container{
  13 + width: 7.5rem;
  14 + line-height: 1;
  15 + display: flex;
  16 + flex-flow: column;
  17 + align-items: center;
  18 +}
  19 +.head{
  20 + width: 7.5rem;
  21 + height: 0.88rem;
  22 + background:rgba(201,201,201,1);
  23 + position: fixed;
  24 + top: 0;
  25 + left: 0;
  26 + z-index: 999;
  27 + display: flex;
  28 + align-items: center;
  29 + justify-content: space-between;
  30 + box-sizing: border-box;
  31 + padding: 0 0.2rem;
  32 +}
  33 +.head_new{
  34 + font-size: 0.3rem;
  35 + color: rgba(68,68,68,1);
  36 + font-weight: bold;
  37 +
  38 +}
  39 +.head_pic{
  40 + margin-top: 0.88rem;
  41 + width: 7.5rem;
  42 + height: 2.18rem;
  43 + background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8));
  44 + display: flex;
  45 +}
  46 +.head_pic img{
  47 + width: 100%;
  48 + height: 100%;
  49 +}
  50 +.top{
  51 + margin-top: 0.19rem;
  52 + width: 7.5rem;
  53 + text-align: center;
  54 + font-size: 0.22rem;
  55 + color: #777777;
  56 +}
  57 +/*中部*/
  58 +.mid{
  59 + display: flex;
  60 + flex-flow: column;
  61 + margin-bottom: 0.88rem;
  62 +}
  63 +.mid_item{
  64 + margin-top: 0.31rem;
  65 + width: 6.64rem;
  66 + display: flex;
  67 + /*align-items: center;*/
  68 +}
  69 +.mid_item_left{
  70 + font-size: 0.24rem;
  71 +}
  72 +.color_red{
  73 + color: #EA474B;
  74 +}
  75 +.mid_item_right{
  76 + display: flex;
  77 + flex: 1;
  78 + margin-left: 0.3rem;
  79 + justify-content: start;
  80 +}
  81 +.mid_item_right_wid{
  82 + width: 5.1rem;
  83 +}
  84 +.mid_item_right input{
  85 + border-bottom: 1px solid #959595;
  86 + background: transparent;
  87 +}
  88 +/*展位要求*/
  89 +.mid_item_right_input{
  90 + font-size: 0.22rem;
  91 + color: #1c1b1b;
  92 + display: flex;
  93 +}
  94 +/*数量输入框*/
  95 +.mid_item_right_input_number{
  96 + width: 0.27rem;
  97 + border-bottom: 1px solid red;
  98 +
  99 +}
  100 +/*展区要求*/
  101 +.exhibition_area{
  102 + display: flex;
  103 + flex-wrap: wrap;
  104 + /*margin-top: -0.2rem;*/
  105 +}
  106 +.exhibition_area_small{
  107 + width: 3rem;
  108 + margin-top: 0.2rem;
  109 +}
  110 +.exhibition_area_input{
  111 + width: 1.6rem;
  112 +}
  113 +/*展品信息*/
  114 +.information{
  115 + flex-flow: column;
  116 +}
  117 +
  118 +.information_short{
  119 + display: flex;
  120 + margin-top: 0.3rem;
  121 +}
  122 +.mid_item_right_text{
  123 + font-size: 0.22rem;
  124 +}
  125 +.exhibits_information{
  126 + width: 3.74rem;
  127 + margin-left: 0.08rem;
  128 +}
  129 +.information_short:first-child{
  130 + margin-top: 0;
  131 +}
  132 +/*新品发布*/
  133 +.new_goods{
  134 + display: flex;
  135 + flex: 1;
  136 + justify-content: normal;
  137 +}
  138 +.new_goods>p{
  139 + margin-left: 0.4rem;
  140 +}
  141 +.new_goods>p:first-child{
  142 + margin-left: 0;
  143 +}
  144 +.mid_sub{
  145 + width: 6.78rem;
  146 + height: 0.75rem;
  147 + line-height: 0.75rem;
  148 + background:rgba(234,71,75,1);
  149 + border:1px solid rgba(149,149,149,1);
  150 + border-radius: 0.08rem;
  151 + margin-top: 0.31rem;
  152 + margin-bottom: 0.19rem;
  153 +
  154 + font-size: 0.3rem;
  155 + color: #fff;
  156 + text-align: center;
  157 +
  158 +}
  159 +/*联系方式*/
  160 +.contact{
  161 + display: flex;
  162 + flex-flow: column;
  163 + margin-top: 0.5rem;
  164 + margin-left: 0;
  165 +}
  166 +.contact_way{
  167 + width: 4.8rem;
  168 + font-size: 0.22rem;
  169 + color: #1c1b1b;
  170 + /*margin-left: 0.5rem;*/
  171 + margin-top: 0.39rem;
  172 + display: flex;
  173 + justify-content: space-between;
  174 +}
  175 +.contact_way:first-child{
  176 + margin-top: 0;
  177 +}
  178 +.contact_way input{
  179 +
  180 +}
  181 +/*公司地址*/
  182 +.contact_way_select{
  183 + width: 3.38rem;
  184 + border-bottom: 1px solid #959595 ;
  185 + display: flex;
  186 + justify-content: space-between;
  187 +}
  188 +.province_box{
  189 +
  190 +}
  191 +.select_item{
  192 + width: 1rem;
  193 +}
  194 +/*行业类别*/
  195 +.category{
  196 + display: flex;
  197 + flex-flow: column;
  198 +}
  199 +
  200 +
  201 +/*底部菜单栏*/
  202 +.bottom_menu{
  203 + width: 7.5rem;
  204 + height: 0.88rem;
  205 + display: flex;
  206 + align-items: center;
  207 + justify-content: space-around;
  208 + background-color: #ffffff;
  209 + position: fixed;
  210 + bottom: 0;
  211 +}
  212 +.bottom_menu_index{
  213 + display: flex;
  214 + flex-flow: column;
  215 + align-items: center;
  216 + color: #666666;
  217 +}
  218 +.bottom_menu_index_text{
  219 + font-size: 0.22rem;
  220 + color: #666666;
  221 +}
@@ -5,6 +5,10 @@ body{ @@ -5,6 +5,10 @@ body{
5 margin: 0; 5 margin: 0;
6 padding: 0; 6 padding: 0;
7 } 7 }
  8 +input{
  9 + border: none;
  10 + outline: none;
  11 +}
8 .container{ 12 .container{
9 width: 7.5rem; 13 width: 7.5rem;
10 line-height: 1; 14 line-height: 1;
@@ -14,11 +18,32 @@ body{ @@ -14,11 +18,32 @@ body{
14 } 18 }
15 .head{ 19 .head{
16 width: 7.5rem; 20 width: 7.5rem;
  21 + height: 0.88rem;
  22 + background:rgba(201,201,201,1);
  23 + position: fixed;
  24 + top: 0;
  25 + left: 0;
  26 + z-index: 999;
  27 + display: flex;
  28 + align-items: center;
  29 + justify-content: space-between;
  30 + box-sizing: border-box;
  31 + padding: 0 0.2rem;
  32 +}
  33 +.head_new{
  34 + font-size: 0.3rem;
  35 + color: rgba(68,68,68,1);
  36 + font-weight: bold;
  37 +
  38 +}
  39 +.head_pic{
  40 + margin-top: 0.88rem;
  41 + width: 7.5rem;
17 height: 2.18rem; 42 height: 2.18rem;
18 background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8)); 43 background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8));
19 display: flex; 44 display: flex;
20 } 45 }
21 -.head img{ 46 +.head_pic img{
22 width: 100%; 47 width: 100%;
23 height: 100%; 48 height: 100%;
24 } 49 }
@@ -29,33 +54,130 @@ body{ @@ -29,33 +54,130 @@ body{
29 font-size: 0.22rem; 54 font-size: 0.22rem;
30 color: #777777; 55 color: #777777;
31 } 56 }
  57 + /*中部*/
32 .mid{ 58 .mid{
33 - width: 6.6rem;  
34 display: flex; 59 display: flex;
35 flex-flow: column; 60 flex-flow: column;
  61 + margin-bottom: 0.88rem;
36 } 62 }
37 .mid_item{ 63 .mid_item{
38 - width: 100%; 64 + margin-top: 0.31rem;
  65 + width: 6.64rem;
  66 + display: flex;
  67 + /*align-items: center;*/
  68 +}
  69 +.mid_item_left{
39 font-size: 0.24rem; 70 font-size: 0.24rem;
40 - margin-top: 0.3rem; 71 +}
  72 +.color_red{
  73 + color: #EA474B;
  74 +}
  75 +.mid_item_right{
41 display: flex; 76 display: flex;
  77 + flex: 1;
  78 + margin-left: 0.3rem;
42 justify-content: space-between; 79 justify-content: space-between;
43 } 80 }
44 -.mid_item_icon{  
45 - color: #ea474b; 81 +.mid_item_right_wid{
  82 + width: 5.1rem;
46 } 83 }
47 -.mid_item_input{  
48 - border-bottom: 1px solid #959595dd; 84 +.mid_item_right input{
  85 + border-bottom: 1px solid #959595;
  86 + background: transparent;
49 } 87 }
50 -.mid_item_input input{  
51 - width: 5rem;  
52 - outline: none;  
53 - border: none;  
54 - /*background-color: transparent;*/ 88 + /*展位要求*/
  89 +.mid_item_right_input{
  90 + font-size: 0.22rem;
  91 + color: #1c1b1b;
  92 + display: flex;
  93 +}
  94 + /*数量输入框*/
  95 +.mid_item_right_input_number{
  96 + width: 0.27rem;
  97 + border-bottom: 1px solid red;
  98 +
  99 +}
  100 + /*展区要求*/
  101 +.exhibition_area{
  102 + display: flex;
  103 + flex-wrap: wrap;
  104 + margin-top: -0.2rem;
  105 +}
  106 +.exhibition_area_small{
  107 + width: 2.45rem;
  108 + margin-top: 0.2rem;
  109 +}
  110 +.exhibition_area_input{
  111 + width: 1.6rem;
  112 +}
  113 + /*展品信息*/
  114 +.information{
  115 + flex-flow: column;
  116 +}
  117 +
  118 +.information_short{
  119 + display: flex;
  120 + margin-top: 0.3rem;
  121 +}
  122 +.mid_item_right_text{
  123 + font-size: 0.22rem;
  124 +}
  125 +.exhibits_information{
  126 + width: 3.74rem;
  127 + margin-left: 0.08rem;
  128 +}
  129 +.information_short:first-child{
  130 + margin-top: 0;
  131 +}
  132 + /*新品发布*/
  133 +.new_goods{
  134 + display: flex;
  135 + flex: 1;
  136 + justify-content: normal;
  137 +}
  138 +.new_goods>p{
  139 + margin-left: 0.4rem;
  140 +}
  141 +.new_goods>p:first-child{
  142 + margin-left: 0;
  143 +}
  144 +.mid_sub{
  145 + width: 6.78rem;
  146 + height: 0.75rem;
  147 + line-height: 0.75rem;
  148 + background:rgba(234,71,75,1);
  149 + border:1px solid rgba(149,149,149,1);
  150 + border-radius: 0.08rem;
  151 + margin-top: 0.31rem;
  152 + margin-bottom: 0.19rem;
  153 +
55 font-size: 0.3rem; 154 font-size: 0.3rem;
  155 + color: #fff;
  156 + text-align: center;
  157 +
  158 +}
  159 + /*联系方式*/
  160 +.contact{
  161 + display: flex;
  162 + flex-flow: column;
  163 +}
  164 +.contact_way{
  165 + width: 4.3rem;
  166 + font-size: 0.22rem;
  167 + color: #1c1b1b;
  168 + margin-left: 0.5rem;
  169 + margin-top: 0.39rem;
  170 + display: flex;
  171 + justify-content: space-between;
  172 +}
  173 +.contact_way:first-child{
  174 + margin-top: 0;
  175 +}
  176 +.contact_way input{
  177 +
56 } 178 }
57 179
58 -/*底部菜单栏*/ 180 + /*底部菜单栏*/
59 .bottom_menu{ 181 .bottom_menu{
60 width: 7.5rem; 182 width: 7.5rem;
61 height: 0.88rem; 183 height: 0.88rem;
@@ -88,6 +88,7 @@ body{ @@ -88,6 +88,7 @@ body{
88 margin-top: 0.03rem; 88 margin-top: 0.03rem;
89 width: 7.5rem; 89 width: 7.5rem;
90 justify-content: space-between; 90 justify-content: space-between;
  91 + margin-bottom: 0.88rem;
91 } 92 }
92 .bottom_left{ 93 .bottom_left{
93 width: 3.56rem; 94 width: 3.56rem;
  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 + margin-top: 0.3rem;
  50 + display: flex;
  51 + flex-flow: column;
  52 +}
  53 +.title_big{
  54 +
  55 + font-size: 0.34rem;
  56 + font-family:SourceHanSansCN-Bold;
  57 + font-weight:bold;
  58 + color:rgba(37,87,170,1);
  59 + line-height: 0.5rem;
  60 + text-shadow: 0.01rem 0.01rem 0.01rem rgba(0, 0, 0, 0.22);
  61 +
  62 + background:linear-gradient(90deg,rgba(43,74,148,1) 0%, rgba(21,138,188,1) 100%);
  63 + -webkit-background-clip:text;
  64 + -webkit-text-fill-color:transparent;
  65 +}
  66 +.title_small{
  67 +
  68 + font-size: 0.18rem;
  69 + font-family:MicrosoftYaHei;
  70 + font-weight:400;
  71 + color:rgba(102,102,102,1);
  72 + line-height: 0.5rem;
  73 + display: flex;
  74 + align-items: center;
  75 + justify-content: space-between;
  76 +}
  77 +
  78 +.top{
  79 + width: 6.72rem;
  80 + display: flex;
  81 + background-color: #D9DEE8;
  82 + border-radius: 0.13rem;
  83 + margin-top: 0.38rem;
  84 +}
  85 +.top_text{
  86 + font-size: 0.22rem;
  87 + line-height: 0.46rem;
  88 + margin: 0.23rem 0.12rem ;
  89 + color: #2B4B94;
  90 +}
  91 +.mid{
  92 + width: 6.47rem;
  93 + display: flex;
  94 + flex-flow: column;
  95 +}
  96 +.mid_text{
  97 + margin-top: 0.3rem;
  98 + font-size: 0.22rem;
  99 + line-height: 0.46rem;
  100 +}
  101 +.mid_text:last-child{
  102 + margin-bottom: 0.42rem;
  103 +}
  104 +/*标题*/
  105 +.mid_title{
  106 + font-size: 0.24rem;
  107 + line-height: 0.46rem;
  108 + font-weight: bold;
  109 + color: #497CBC;
  110 + margin-top: 0.3rem;
  111 +}
  112 +/*底部图片*/
  113 +.bottom{
  114 + width: 6.17rem;
  115 + height: 3.21rem;
  116 + display: flex;
  117 + margin-bottom: 1.17rem;
  118 +}
  119 +.bottom img{
  120 + width: 100%;
  121 + height: 100%;
  122 +}
  123 +
  124 +/*底部菜单栏*/
  125 +.bottom_menu{
  126 + width: 7.5rem;
  127 + height: 0.88rem;
  128 + display: flex;
  129 + align-items: center;
  130 + justify-content: space-around;
  131 + background-color: #ffffff;
  132 + position: fixed;
  133 + bottom: 0;
  134 +}
  135 +.bottom_menu_index{
  136 + display: flex;
  137 + flex-flow: column;
  138 + align-items: center;
  139 + color: #666666;
  140 +}
  141 +.bottom_menu_index_text{
  142 + font-size: 0.22rem;
  143 + color: #666666;
  144 +}
  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: 1.4rem;
  59 + height: 0.02rem;
  60 + background-color: #EA474B;
  61 + position: absolute;
  62 + bottom: 0;
  63 +}
  64 +
  65 +
  66 +/***********交通信息***********/
  67 +.traffic{
  68 + width: 6.86rem;
  69 +}
  70 +.traffic_limit{
  71 + font-size: 0.28rem;
  72 + font-family:SourceHanSansCN-Regular;
  73 + font-weight:400;
  74 + color:rgba(51,51,51,1);
  75 + line-height: 1.23rem;
  76 +}
  77 +.traffic_title{
  78 + font-size: 0.2rem;
  79 + text-align: center;
  80 +}
  81 +/*百度地图*/
  82 +.search_box{
  83 + display: flex;
  84 + flex-flow: column;
  85 + align-items: center;
  86 + justify-content: center;
  87 +}
  88 +.traffic_search{
  89 + width: 4.48rem;
  90 + height: 0.45rem;
  91 + border:1px solid rgba(149,149,149,1);
  92 + border-radius: 0.23rem;
  93 + display: flex;
  94 + z-index: 999;
  95 + justify-content: space-between;
  96 + align-items: center;
  97 +}
  98 +.traffic_search input{
  99 + width: 2.8rem;
  100 + height: 0.4rem;
  101 + margin-left: 0.3rem;
  102 + outline: none;
  103 + border: none;
  104 + background-color: transparent;
  105 +}
  106 +.traffic_search input::placeholder{
  107 + color: #999999;
  108 +}
  109 +.traffic_search_bottom{
  110 + width: 1.2rem;
  111 + height: 0.45rem;
  112 +
  113 + background:rgba(149,149,149,1);
  114 + border:1px solid rgba(149,149,149,1);
  115 + border-radius: 0.23rem;
  116 + display: flex;
  117 + align-items: center;
  118 + justify-content: center;
  119 +}
  120 +/*地图大小*/
  121 +.traffic_map{
  122 + margin-top: 0.21rem;
  123 + width: 6.32rem;
  124 + height: 4.07rem;
  125 + background-color: #497CBC;
  126 +}
  127 +
  128 +/***********酒店住宿***********/
  129 +.hotel{
  130 + margin-bottom: 1rem;
  131 +}
  132 +.item{
  133 + width: 7.3rem;
  134 + height: 2rem;
  135 + display: flex;
  136 + background:rgba(255,255,255,1);
  137 + box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22);
  138 + margin-top: 0.1rem;
  139 + position: relative;
  140 +}
  141 +.item:first-child{
  142 + margin-top: 0.21rem;
  143 +}
  144 +
  145 +.item_left{
  146 + width: 1.8rem;
  147 + height: 1.75rem;
  148 + display: flex;
  149 + border-radius: 0.1rem;
  150 + margin: 0.13rem 0 0.13rem 0.1rem;
  151 +}
  152 +.item_left img{
  153 + width: 100%;
  154 + height: 100%;
  155 + border-radius: 0.1rem;
  156 +}
  157 +.item_mid{
  158 + width: 4rem;
  159 + height: 1.6rem;
  160 + display: flex;
  161 + flex-flow: column;
  162 + margin: 0.2rem;
  163 +}
  164 +.item_mid_big{
  165 + height: 1rem;
  166 + font-size: 0.3rem;
  167 + font-weight: bold;
  168 + line-height: 0.42rem;
  169 + box-sizing: border-box;
  170 + text-overflow: ellipsis;
  171 + display: -webkit-box;
  172 + -webkit-box-orient: vertical;
  173 + -webkit-line-clamp: 2;
  174 + overflow: hidden;
  175 +}
  176 +.item_mid_small{
  177 + height: 0.9rem;
  178 + font-size: 0.22rem;
  179 + color: #333333;
  180 + line-height: 0.38rem;
  181 +
  182 + box-sizing: border-box;
  183 + text-overflow: ellipsis;
  184 + display: -webkit-box;
  185 + -webkit-box-orient: vertical;
  186 + -webkit-line-clamp: 2;
  187 + overflow: hidden;
  188 + margin-top: 0.1rem;
  189 +}
  190 +.item_mid_small_item{
  191 + display: flex;
  192 +}
  193 +.item_mid_small_item_s{
  194 + margin-left: 0.1rem;
  195 + box-sizing: border-box;
  196 + text-overflow: ellipsis;
  197 + display: -webkit-box;
  198 + -webkit-box-orient: vertical;
  199 + -webkit-line-clamp: 1;
  200 + overflow: hidden;
  201 +}
  202 +.item_right{
  203 + width: 0.9rem;
  204 + height: 2rem;
  205 + background: #EA474B;
  206 + border-radius: 0.02rem;
  207 + position: absolute;
  208 + right: 0;
  209 +
  210 +
  211 + font-size: 0.22rem;
  212 + font-family:MicrosoftYaHei;
  213 + font-weight:400;
  214 + color:rgba(255,255,255,1);
  215 + line-height: 0.38rem;
  216 + display: flex;
  217 + flex-flow: column;
  218 + align-items: center;
  219 + justify-content: center;
  220 +}
  221 +.color_gray{
  222 + background-color: #e5e5e5;
  223 +}
  224 +
  225 +/***********周边美食***********/
  226 +.cate{
  227 + margin-bottom: 1rem;
  228 +}
  229 +/***********天津旅游***********/
  230 +.travel{
  231 + margin-bottom: 1rem;
  232 +}
  233 +
  234 +/*底部菜单栏*/
  235 +.bottom_menu{
  236 + width: 7.5rem;
  237 + height: 0.88rem;
  238 + display: flex;
  239 + align-items: center;
  240 + justify-content: space-around;
  241 + background-color: #ffffff;
  242 + position: fixed;
  243 + bottom: 0;
  244 +}
  245 +.bottom_menu_index{
  246 + display: flex;
  247 + flex-flow: column;
  248 + align-items: center;
  249 + color: #666666;
  250 +}
  251 +.bottom_menu_index_text{
  252 + font-size: 0.22rem;
  253 + color: #666666;
  254 +}
  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 +}
  40 +.item{
  41 + width: 7.3rem;
  42 + height: 2rem;
  43 + display: flex;
  44 + background:rgba(255,255,255,1);
  45 + box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22);
  46 + margin-top: 0.1rem;
  47 + position: relative;
  48 +}
  49 +.item:first-child{
  50 + margin-top: 0.21rem;
  51 +}
  52 +
  53 +.item_left{
  54 + width: 1.8rem;
  55 + height: 1.75rem;
  56 + display: flex;
  57 + border-radius: 0.1rem;
  58 + margin: 0.13rem 0 0.13rem 0.1rem;
  59 +}
  60 +.item_left img{
  61 + width: 100%;
  62 + height: 100%;
  63 + border-radius: 0.1rem;
  64 +}
  65 +.item_mid{
  66 + width: 4rem;
  67 + height: 1.6rem;
  68 + display: flex;
  69 + flex-flow: column;
  70 + margin: 0.2rem;
  71 +}
  72 +.item_mid_big{
  73 + height: 1rem;
  74 + font-size: 0.3rem;
  75 + font-weight: bold;
  76 + line-height: 0.42rem;
  77 + box-sizing: border-box;
  78 + text-overflow: ellipsis;
  79 + display: -webkit-box;
  80 + -webkit-box-orient: vertical;
  81 + -webkit-line-clamp: 2;
  82 + overflow: hidden;
  83 +}
  84 +.item_mid_small{
  85 + height: 0.9rem;
  86 + font-size: 0.22rem;
  87 + color: #333333;
  88 + line-height: 0.38rem;
  89 +
  90 + box-sizing: border-box;
  91 + text-overflow: ellipsis;
  92 + display: -webkit-box;
  93 + -webkit-box-orient: vertical;
  94 + -webkit-line-clamp: 2;
  95 + overflow: hidden;
  96 + margin-top: 0.1rem;
  97 +}
  98 +.item_right{
  99 + width: 0.9rem;
  100 + height: 2rem;
  101 + background: #EA474B;
  102 + border-radius: 0.02rem;
  103 + position: absolute;
  104 + right: 0;
  105 +
  106 +
  107 + font-size: 0.22rem;
  108 + font-family:MicrosoftYaHei;
  109 + font-weight:400;
  110 + color:rgba(255,255,255,1);
  111 + line-height: 0.38rem;
  112 + display: flex;
  113 + flex-flow: column;
  114 + align-items: center;
  115 + justify-content: center;
  116 +}
  117 +.color_gray{
  118 + background-color: #e5e5e5;
  119 +}
  120 +
  121 +/*底部菜单栏*/
  122 +.bottom_menu{
  123 + width: 7.5rem;
  124 + height: 0.88rem;
  125 + display: flex;
  126 + align-items: center;
  127 + justify-content: space-around;
  128 + background-color: #ffffff;
  129 + position: fixed;
  130 + bottom: 0;
  131 +}
  132 +.bottom_menu_index{
  133 + display: flex;
  134 + flex-flow: column;
  135 + align-items: center;
  136 + color: #666666;
  137 +}
  138 +.bottom_menu_index_text{
  139 + font-size: 0.22rem;
  140 + color: #666666;
  141 +}
  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: 7.5rem;
  40 + height: 2.18rem;
  41 + display: flex;
  42 + margin-top: 0.88rem;
  43 +}
  44 +.top img{
  45 + width: 100%;
  46 + height: 100%;
  47 +}
  48 +
  49 +/*搜索框*/
  50 +.traffic_search{
  51 + width: 4.48rem;
  52 + height: 0.45rem;
  53 + border:1px solid rgba(149,149,149,1);
  54 + border-radius: 0.23rem;
  55 + display: flex;
  56 + z-index: 999;
  57 + justify-content: space-between;
  58 + align-items: center;
  59 + margin-top: 0.43rem;
  60 +}
  61 +.traffic_search input{
  62 + width: 2.8rem;
  63 + height: 0.4rem;
  64 + margin-left: 0.3rem;
  65 + outline: none;
  66 + border: none;
  67 + background-color: transparent;
  68 +}
  69 +.traffic_search input::placeholder{
  70 + color: #999999;
  71 +}
  72 +.traffic_search_bottom{
  73 + width: 1.2rem;
  74 + height: 0.45rem;
  75 +
  76 + background:rgba(149,149,149,1);
  77 + border:1px solid rgba(149,149,149,1);
  78 + border-radius: 0.23rem;
  79 + display: flex;
  80 + align-items: center;
  81 + justify-content: center;
  82 +}
  83 +
  84 +/*展商列表*/
  85 +.items{
  86 + margin-top: 0.2rem;
  87 + display: flex;
  88 + flex-wrap: wrap;
  89 + margin-bottom: 1rem;
  90 +}
  91 +.item{
  92 + width: 2.23rem;
  93 + height: 1.68rem;
  94 + background:rgba(255,255,255,1);
  95 + box-shadow:0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.22);
  96 +
  97 + margin: 0.21rem 0 0 0.2rem;
  98 +}
  99 +.item_top{
  100 + width: 2.23rem;
  101 + height: 1.03rem;
  102 +}
  103 +.item_top img{
  104 + width: 100%;
  105 + height: 100%;
  106 +}
  107 +.item_underline{
  108 + width: 2.23rem;
  109 + height: 0.02rem;
  110 + background:rgba(244,245,249,1);
  111 + box-shadow:0 0.01rem 0 0 rgba(211,214,227,0.9);
  112 +}
  113 +.item_bottom{
  114 + font-size: 0.14rem;
  115 + font-family:MicrosoftYaHei;
  116 + font-weight:400;
  117 + color:rgba(51,51,51,1);
  118 + text-align: center;
  119 + line-height: 0.3rem;
  120 +
  121 + box-sizing: border-box;
  122 + text-overflow: ellipsis;
  123 + display: -webkit-box;
  124 + -webkit-box-orient: vertical;
  125 + -webkit-line-clamp: 2;
  126 + overflow: hidden;
  127 +
  128 +}
  129 +
  130 +/*底部菜单栏*/
  131 +.bottom_menu{
  132 + width: 7.5rem;
  133 + height: 0.88rem;
  134 + display: flex;
  135 + align-items: center;
  136 + justify-content: space-around;
  137 + background-color: #ffffff;
  138 + position: fixed;
  139 + bottom: 0;
  140 +}
  141 +.bottom_menu_index{
  142 + display: flex;
  143 + flex-flow: column;
  144 + align-items: center;
  145 + color: #666666;
  146 +}
  147 +.bottom_menu_index_text{
  148 + font-size: 0.22rem;
  149 + color: #666666;
  150 +}
@@ -2,18 +2,44 @@ @@ -2,18 +2,44 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>首页</title> 5 + <title>参展申请</title>
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/czsq.css"> 10 <link rel="stylesheet" type="text/css" href="css/czsq.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/888.png"> 43 <img src="images/888.png">
18 </div> 44 </div>
19 <!--顶部文字--> 45 <!--顶部文字-->
@@ -24,22 +50,211 @@ @@ -24,22 +50,211 @@
24 <div class="mid"> 50 <div class="mid">
25 <!--企业名称--> 51 <!--企业名称-->
26 <div class="mid_item"> 52 <div class="mid_item">
27 - <p class="mid_item_name">企业名称  
28 - <span class="mid_item_icon">*</span> :  
29 - </p>  
30 - <div class="mid_item_input">  
31 - <input> 53 + <!--左边-->
  54 + <div class="mid_item_left">
  55 + 企业名称<span class="color_red">*</span>:
  56 + </div>
  57 + <!--右边-->
  58 + <div class="mid_item_right">
  59 + <input class="mid_item_right_wid" type="text" value="" name="">
  60 + </div>
  61 + </div>
  62 + <!--展位要求-->
  63 + <div class="mid_item">
  64 + <!--左边-->
  65 + <div class="mid_item_left">
  66 + 展位要求<span class="color_red">*</span>:
  67 + </div>
  68 + <!--右边-->
  69 + <div class="mid_item_right">
  70 + <p class="mid_item_right_input">
  71 + <input type="checkbox">
  72 + 特装展位
  73 + </p>
  74 + <p class="mid_item_right_input">
  75 + <input type="checkbox">
  76 + 标准展位
  77 + <!--数量框-->
  78 + <input class="mid_item_right_input_number">
  79 + 个
  80 + </p>
  81 + <p class="mid_item_right_input">
  82 + <input type="checkbox">
  83 + 空地
  84 + <!--数量框-->
  85 + <input class="mid_item_right_input_number">
  86 + m²
  87 + </p>
32 </div> 88 </div>
33 </div> 89 </div>
34 - <!--展位--> 90 + <!--展区要求-->
35 <div class="mid_item"> 91 <div class="mid_item">
36 - <p class="mid_item_name">展位要求  
37 - <span class="mid_item_icon">*</span> :  
38 - </p>  
39 - <div class="mid_item_booth">  
40 - <p><input type="checkbox" name="" value="">特装展位</p> 92 + <!--左边-->
  93 + <div class="mid_item_left">
  94 + 展区要求<span class="color_red">*</span>:
  95 + </div>
  96 + <!--右边-->
  97 + <div class="mid_item_right exhibition_area">
  98 + <p class="mid_item_right_input exhibition_area_small">
  99 + <input type="checkbox">
  100 + 特装展位
  101 + </p>
  102 + <p class="mid_item_right_input exhibition_area_small">
  103 + <input type="checkbox">
  104 + 机器人展示区
  105 + </p>
  106 + <p class="mid_item_right_input exhibition_area_small">
  107 + <input type="checkbox">
  108 + 激光加工区
  109 + </p>
  110 + <p class="mid_item_right_input exhibition_area_small">
  111 + <input type="checkbox">
  112 + 智能制造区
  113 + </p>
  114 +
  115 + <p class="mid_item_right_input exhibition_area_small">
  116 + <input type="checkbox">
  117 + 汽车装备展区
  118 + </p>
  119 + <p class="mid_item_right_input exhibition_area_small">
  120 + <input type="checkbox">
  121 + 巩固额装配及自动化展区
  122 + </p>
  123 + <p class="mid_item_right_input exhibition_area_small">
  124 + <input type="checkbox">
  125 + 零部件展区
  126 + </p>
  127 + <p class="mid_item_right_input exhibition_area_small">
  128 + <input type="checkbox">
  129 + 其他
  130 + <input class="exhibition_area_input" type="text">
  131 + </p>
  132 +
  133 +
41 </div> 134 </div>
42 </div> 135 </div>
  136 + <!--展品信息-->
  137 + <div class="mid_item">
  138 + <!--左边-->
  139 + <div class="mid_item_left">
  140 + 展品信息: &nbsp;
  141 +
  142 + </div>
  143 + <!--右边-->
  144 + <div class="mid_item_right information">
  145 + <div class="information_short">
  146 + <span class="mid_item_right_text">展品名称</span>
  147 + <input class="exhibits_information" type="text" value="" name="">
  148 + </div>
  149 + <div class="information_short">
  150 + <span class="mid_item_right_text">应用行业</span>
  151 + <input class="exhibits_information" type="text" value="" name="">
  152 + </div>
  153 + </div>
  154 + </div>
  155 + <!--新品发布-->
  156 + <div class="mid_item">
  157 + <!--左边-->
  158 + <div class="mid_item_left">
  159 + 企业名称:&nbsp;
  160 + </div>
  161 + <!--右边-->
  162 + <div class="mid_item_right new_goods">
  163 + <p class="mid_item_right_input ">
  164 + <input type="checkbox">
  165 + 有
  166 + </p>
  167 + <p class="mid_item_right_input ">
  168 + <input type="checkbox">
  169 + 无
  170 + </p>
  171 + </div>
  172 + </div>
  173 + <!--同期论坛-->
  174 + <div class="mid_item">
  175 + <!--左边-->
  176 + <div class="mid_item_left">
  177 + 同期活动/论坛:
  178 + </div>
  179 + <!--右边-->
  180 + <div class="mid_item_right new_goods">
  181 + <p class="mid_item_right_input ">
  182 + <input type="checkbox">
  183 + 有
  184 + </p>
  185 + <p class="mid_item_right_input ">
  186 + <input type="checkbox">
  187 + 无
  188 + </p>
  189 + </div>
  190 + </div>
  191 + <!--现场投放广告-->
  192 + <div class="mid_item">
  193 + <!--左边-->
  194 + <div class="mid_item_left">
  195 + 现场投放广告:
  196 + </div>
  197 + <!--右边-->
  198 + <div class="mid_item_right new_goods">
  199 + <p class="mid_item_right_input ">
  200 + <input type="checkbox">
  201 + 有
  202 + </p>
  203 + <p class="mid_item_right_input ">
  204 + <input type="checkbox">
  205 + 无
  206 + </p>
  207 + </div>
  208 + </div>
  209 + <!--联系方式-->
  210 + <div class="mid_item">
  211 + <!--左边-->
  212 + <div class="mid_item_left">
  213 + 联系方式<span class="color_red">*</span>:
  214 + </div>
  215 + <!--右边-->
  216 + <div class="mid_item_right contact">
  217 + <p class="contact_way">
  218 + <span>
  219 + 联系人<span class="color_red">*</span>
  220 + </span>
  221 + <input class="contact_way_input" type="text" >
  222 + </p>
  223 + <p class="contact_way">
  224 + <span>
  225 + 手机号<span class="color_red">*</span>
  226 + </span>
  227 + <input class="contact_way_input" type="text" >
  228 + </p>
  229 + <p class="contact_way">
  230 + <span>
  231 + 邮箱
  232 + </span>
  233 + <input class="contact_way_input" type="text" >
  234 + </p>
  235 + <p class="contact_way">
  236 + <span>
  237 + 座机
  238 + </span>
  239 + <input class="contact_way_input" type="text" >
  240 + </p>
  241 + <p class="contact_way">
  242 + <span>
  243 + 公司
  244 + </span>
  245 + <input class="contact_way_input" type="text" >
  246 + </p>
  247 +
  248 +
  249 + </div>
  250 + </div>
  251 +
  252 + <!--确认提交-->
  253 + <div class="mid_sub">
  254 + 确认提交
  255 + </div>
  256 +
  257 +
43 258
44 </div> 259 </div>
45 <!--底部菜单--> 260 <!--底部菜单-->
此 diff 太大无法显示。
  1 +/*!
  2 + * Distpicker v1.0.4
  3 + * https://github.com/fengyuanchen/distpicker
  4 + *
  5 + * Copyright (c) 2014-2016 Fengyuan Chen
  6 + * Released under the MIT license
  7 + *
  8 + * Date: 2016-06-01T15:05:52.606Z
  9 + */
  10 +
  11 +(function (factory) {
  12 + if (typeof define === 'function' && define.amd) {
  13 + // AMD. Register as anonymous module.
  14 + define(['jquery', 'ChineseDistricts'], factory);
  15 + } else if (typeof exports === 'object') {
  16 + // Node / CommonJS
  17 + factory(require('jquery'), require('ChineseDistricts'));
  18 + } else {
  19 + // Browser globals.
  20 + factory(jQuery, ChineseDistricts);
  21 + }
  22 +})(function ($, ChineseDistricts) {
  23 +
  24 + 'use strict';
  25 +
  26 + if (typeof ChineseDistricts === 'undefined') {
  27 + throw new Error('The file "distpicker.data.js" must be included first!');
  28 + }
  29 +
  30 + var NAMESPACE = 'distpicker';
  31 + var EVENT_CHANGE = 'change.' + NAMESPACE;
  32 + var PROVINCE = 'province';
  33 + var CIRY = 'city';
  34 + var DISTRICT = 'district';
  35 +
  36 + function Distpicker(element, options) {
  37 + this.$element = $(element);
  38 + this.options = $.extend({}, Distpicker.DEFAULTS, $.isPlainObject(options) && options);
  39 + this.placeholders = $.extend({}, Distpicker.DEFAULTS);
  40 + this.active = false;
  41 + this.init();
  42 + }
  43 +
  44 + Distpicker.prototype = {
  45 + constructor: Distpicker,
  46 +
  47 + init: function () {
  48 + var options = this.options;
  49 + var $select = this.$element.find('select');
  50 + var length = $select.length;
  51 + var data = {};
  52 +
  53 + $select.each(function () {
  54 + $.extend(data, $(this).data());
  55 + });
  56 +
  57 + $.each([PROVINCE, CIRY, DISTRICT], $.proxy(function (i, type) {
  58 + if (data[type]) {
  59 + options[type] = data[type];
  60 + this['$' + type] = $select.filter('[data-' + type + ']');
  61 + } else {
  62 + this['$' + type] = length > i ? $select.eq(i) : null;
  63 + }
  64 + }, this));
  65 +
  66 + this.bind();
  67 +
  68 + // Reset all the selects (after event binding)
  69 + this.reset();
  70 +
  71 + this.active = true;
  72 + },
  73 +
  74 + bind: function () {
  75 + if (this.$province) {
  76 + this.$province.on(EVENT_CHANGE, (this._changeProvince = $.proxy(function () {
  77 + this.output(CIRY);
  78 + this.output(DISTRICT);
  79 + }, this)));
  80 + }
  81 +
  82 + if (this.$city) {
  83 + this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () {
  84 + this.output(DISTRICT);
  85 + }, this)));
  86 + }
  87 + },
  88 +
  89 + unbind: function () {
  90 + if (this.$province) {
  91 + this.$province.off(EVENT_CHANGE, this._changeProvince);
  92 + }
  93 +
  94 + if (this.$city) {
  95 + this.$city.off(EVENT_CHANGE, this._changeCity);
  96 + }
  97 + },
  98 +
  99 + output: function (type) {
  100 + var options = this.options;
  101 + var placeholders = this.placeholders;
  102 + var $select = this['$' + type];
  103 + var districts = {};
  104 + var data = [];
  105 + var code;
  106 + var matched;
  107 + var value;
  108 +
  109 + if (!$select || !$select.length) {
  110 + return;
  111 + }
  112 +
  113 + value = options[type];
  114 +
  115 + code = (
  116 + type === PROVINCE ? 86 :
  117 + type === CIRY ? this.$province && this.$province.find(':selected').data('code') :
  118 + type === DISTRICT ? this.$city && this.$city.find(':selected').data('code') : code
  119 + );
  120 +
  121 + districts = $.isNumeric(code) ? ChineseDistricts[code] : null;
  122 +
  123 + if ($.isPlainObject(districts)) {
  124 + $.each(districts, function (code, address) {
  125 + var selected = address === value;
  126 +
  127 + if (selected) {
  128 + matched = true;
  129 + }
  130 +
  131 + data.push({
  132 + code: code,
  133 + address: address,
  134 + selected: selected
  135 + });
  136 + });
  137 + }
  138 +
  139 + if (!matched) {
  140 + if (data.length && (options.autoSelect || options.autoselect)) {
  141 + data[0].selected = true;
  142 + }
  143 +
  144 + // Save the unmatched value as a placeholder at the first output
  145 + if (!this.active && value) {
  146 + placeholders[type] = value;
  147 + }
  148 + }
  149 +
  150 + // Add placeholder option
  151 + if (options.placeholder) {
  152 + data.unshift({
  153 + code: '',
  154 + address: placeholders[type],
  155 + selected: false
  156 + });
  157 + }
  158 +
  159 + $select.html(this.getList(data));
  160 + },
  161 +
  162 + getList: function (data) {
  163 + var list = [];
  164 +
  165 + $.each(data, function (i, n) {
  166 + list.push(
  167 + '<option' +
  168 + ' value="' + (n.address && n.code ? n.address : '') + '"' +
  169 + ' data-code="' + (n.code || '') + '"' +
  170 + (n.selected ? ' selected' : '') +
  171 + '>' +
  172 + (n.address || '') +
  173 + '</option>'
  174 + );
  175 + });
  176 +
  177 + return list.join('');
  178 + },
  179 +
  180 + reset: function (deep) {
  181 + if (!deep) {
  182 + this.output(PROVINCE);
  183 + this.output(CIRY);
  184 + this.output(DISTRICT);
  185 + } else if (this.$province) {
  186 + this.$province.find(':first').prop('selected', true).trigger(EVENT_CHANGE);
  187 + }
  188 + },
  189 +
  190 + destroy: function () {
  191 + this.unbind();
  192 + this.$element.removeData(NAMESPACE);
  193 + }
  194 + };
  195 +
  196 + Distpicker.DEFAULTS = {
  197 + autoSelect: true,
  198 + placeholder: true,
  199 + province: '—— 省 ——',
  200 + city: '—— 市 ——',
  201 + district: '—— 区 ——'
  202 + };
  203 +
  204 + Distpicker.setDefaults = function (options) {
  205 + $.extend(Distpicker.DEFAULTS, options);
  206 + };
  207 +
  208 + // Save the other distpicker
  209 + Distpicker.other = $.fn.distpicker;
  210 +
  211 + // Register as jQuery plugin
  212 + $.fn.distpicker = function (option) {
  213 + var args = [].slice.call(arguments, 1);
  214 +
  215 + return this.each(function () {
  216 + var $this = $(this);
  217 + var data = $this.data(NAMESPACE);
  218 + var options;
  219 + var fn;
  220 +
  221 + if (!data) {
  222 + if (/destroy/.test(option)) {
  223 + return;
  224 + }
  225 +
  226 + options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
  227 + $this.data(NAMESPACE, (data = new Distpicker(this, options)));
  228 + }
  229 +
  230 + if (typeof option === 'string' && $.isFunction(fn = data[option])) {
  231 + fn.apply(data, args);
  232 + }
  233 + });
  234 + };
  235 +
  236 + $.fn.distpicker.Constructor = Distpicker;
  237 + $.fn.distpicker.setDefaults = Distpicker.setDefaults;
  238 +
  239 + // No conflict
  240 + $.fn.distpicker.noConflict = function () {
  241 + $.fn.distpicker = Distpicker.other;
  242 + return this;
  243 + };
  244 +
  245 + $(function () {
  246 + $('[data-toggle="distpicker"]').distpicker();
  247 + });
  248 +});
  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/nrxq.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/666.png">
  46 + </div>
  47 + <!--标题-->
  48 + <div class="title">
  49 + <div class="title_big">智能时代"云"发展"新模式"驻占天津</div>
  50 + <div class="title_small">
  51 + <p>更新时间：<span>2018-12-18</span></p>
  52 + <p>点击量: <span>18</span></p>
  53 + <p>来源:<span>天津汽车装备展</span></p>
  54 + </div>
  55 + </div>
  56 + <!--顶部内容-->
  57 + <div class="top">
  58 +
  59 + <div class="top_text">
  60 + &nbsp;&nbsp;&nbsp;&nbsp;
  61 + 天津汽车装备展的主题导览是一项双赢的活动。对展商而言，这是宣传他们品牌和创新产品的保障；对于观众而言，这是充分利用展会现场宝贵时间的最佳方式。
  62 +
  63 +
  64 + </div>
  65 + </div>
  66 + <!--中部内容-->
  67 + <div class="mid">
  68 + <div class="mid_text">
  69 + &nbsp;&nbsp;&nbsp;&nbsp;展会期间，训练有素的向导带领观众在展馆内开展八种不同主题的导览活动。最多25名观众可同时参与一次导览活动，进入特定的主题展区了解最新的创新成果和展会亮点。对观众而言，主题导览是快速、综合、全面了解天津汽车装备展相关信息的最佳途径。每次导览活动，向导带领观众前往6至8个精选展商展台，由展商做十分钟的展示。这里，我们所指的“展示”并非泛泛空谈；而是展商对其特定产品、服务或解决方案进行全面而生动的讲解和展示。我们深知高效的展商演示是实现独特、优质导览体验不可或缺的因素，并藉此让观众对导览活动更为满意。
  70 + <br> &nbsp;&nbsp;&nbsp;&nbsp;“产业集成——连接与协作”，2018天津汽车装备展的主题表明：产业集成已跨越实验阶段，开始使我们获益。会带来哪些增值效益？如何有效配置合作机器人、数字双胞胎和预见性维护？在2018天津汽车装备展上，您将找到这些问题的答案。
  71 + </div>
  72 +
  73 + <div class="mid_box">
  74 + <!--标题-->
  75 + <div class="mid_title">
  76 + 导览1——工业自动化与IT
  77 + </div>
  78 + <!--文章-->
  79 + <div class="mid_text">
  80 + &nbsp;&nbsp;&nbsp;&nbsp;展会期间，训练有素的向导带领观众在展馆内开展八种不同主题的导览活动。最多25名观众可同时参与一次导览活动，进入特定的主题展区了解最新的创新成果和展会亮点。对观众而言，主题导览是快速、综合、全面了解天津汽车装备展相关信息的最佳途径。每次导览活动，向导带领观众前往6至8个精选展商展台，由展商做十分钟的展示。这里，我们所指的“展示”并非泛泛空谈；而是展商对其特定产品、服务或解决方案进行全面而生动的讲解和展示。我们深知高效的展商演示是实现独特、优质导览体验不可或缺的因素，并藉此让观众对导览活动更为满意。
  81 + <br> &nbsp;&nbsp;&nbsp;&nbsp;“产业集成——连接与协作”，2018天津汽车装备展的主题表明：产业集成已跨越实验阶段，开始使我们获益。会带来哪些增值效益？如何有效配置合作机器人、数字双胞胎和预见性维护？在2018天津汽车装备展上，您将找到这些问题的答案。
  82 + </div>
  83 + </div>
  84 +
  85 +
  86 +
  87 + </div>
  88 +
  89 + <!--底部图片-->
  90 + <div class="bottom">
  91 + <img src="images/777.png">
  92 + </div>
  93 +
  94 +
  95 + <!--底部菜单-->
  96 + <div class="bottom_menu">
  97 + <div class="bottom_menu_index">
  98 + <!--上图标-->
  99 + <div class="iconfont icon-zhuye2"></div>
  100 + <!--下文字-->
  101 + <div class="bottom_menu_index_text">
  102 + 首页
  103 + </div>
  104 + </div>
  105 + <div class="bottom_menu_index">
  106 + <!--上图标-->
  107 + <div class="iconfont icon-dianhua-copy"></div>
  108 + <!--下文字-->
  109 + <div class="bottom_menu_index_text">
  110 + 电话咨询
  111 + </div>
  112 + </div>
  113 + <div class="bottom_menu_index">
  114 + <!--上图标-->
  115 + <div class="iconfont icon-user-address"></div>
  116 + <!--下文字-->
  117 + <div class="bottom_menu_index_text">
  118 + 网上展厅
  119 + </div>
  120 + </div>
  121 + <div class="bottom_menu_index">
  122 + <!--上图标-->
  123 + <div class="iconfont icon-gerenzhongxin"></div>
  124 + <!--下文字-->
  125 + <div class="bottom_menu_index_text">
  126 + 个人中心
  127 + </div>
  128 + </div>
  129 + </div>
  130 +
  131 +</div>
  132 +<script src="js/dropload.min.js"></script>
  133 +
  134 +<script>
  135 + // 页数
  136 + var page = 0;
  137 + // 每页展示10个
  138 + var size = 3;
  139 + $('.mid').dropload({
  140 + scrollArea : window,
  141 + domUp : {
  142 + domClass : 'dropload-up',
  143 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  144 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  145 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  146 + },
  147 + domDown : {
  148 + domClass : 'dropload-down',
  149 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  150 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  151 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  152 + },
  153 + loadDownFn : function(me){
  154 + page++;
  155 + // 拼接HTML
  156 + var result = '';
  157 + var s = "";
  158 + var show="";
  159 + var list_compressor="";
  160 + var list_answer="";
  161 + $.ajax({
  162 + type: 'GET',
  163 + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  164 + dataType: 'json',
  165 + success: function(data){
  166 + console.log(data);
  167 + var arrLen = data.length;
  168 + if(arrLen > 0){
  169 + for(var i=0; i<arrLen; i++){
  170 + result +='<div class="mid_title">\n' +
  171 + ' 导览1——工业自动化与IT\n' +
  172 + ' </div>\n' +
  173 + ' <!--文章-->\n' +
  174 + ' <div class="mid_text">\n' +
  175 + ' &nbsp;&nbsp;&nbsp;&nbsp;展会期间，训练有素的向导带领观众在展馆内开展八种不同主题的导览活动。最多25名观众可同时参与一次导览活动，进入特定的主题展区了解最新的创新成果和展会亮点。对观众而言，主题导览是快速、综合、全面了解天津汽车装备展相关信息的最佳途径。每次导览活动，向导带领观众前往6至8个精选展商展台，由展商做十分钟的展示。这里，我们所指的“展示”并非泛泛空谈；而是展商对其特定产品、服务或解决方案进行全面而生动的讲解和展示。我们深知高效的展商演示是实现独特、优质导览体验不可或缺的因素，并藉此让观众对导览活动更为满意。\n' +
  176 + ' <br> &nbsp;&nbsp;&nbsp;&nbsp;“产业集成——连接与协作”，2018天津汽车装备展的主题表明：产业集成已跨越实验阶段，开始使我们获益。会带来哪些增值效益？如何有效配置合作机器人、数字双胞胎和预见性维护？在2018天津汽车装备展上，您将找到这些问题的答案。\n' +
  177 + ' </div>'
  178 +
  179 +
  180 +
  181 +
  182 + }
  183 + // 如果没有数据
  184 + }else{
  185 + // 锁定
  186 + me.lock();
  187 + // 无数据
  188 + me.noData();
  189 + }
  190 + // 为了测试，延迟1秒加载
  191 + setTimeout(function(){
  192 + // 插入数据到页面，放到最后面
  193 + $('.mid_box').append(result);
  194 + // 每次数据插入，必须重置
  195 + me.resetload();
  196 + },500);
  197 + },
  198 + error: function(xhr, type){
  199 + alert('Ajax error!');
  200 + // 即使加载出错，也得重置
  201 + me.resetload();
  202 + }
  203 + });
  204 + },
  205 + threshold : 50
  206 + });
  207 +</script>
  208 +</body>
  209 +</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_2is4wniwevg.css">
  10 + <link rel="stylesheet" type="text/css" href="css/slfw_2.css">
  11 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  12 + <link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/13/bmap.css">
  13 +
  14 + <script src="js/base.js"></script>
  15 + <script src="js/jquery.min.js"></script>
  16 + <style>
  17 + .icon-zuo{
  18 + color: #959595;
  19 + font-size: 0.38rem;
  20 + }
  21 + .icon-iconfont-edu12{
  22 + color: #959595;
  23 + font-size: 0.5rem;
  24 + }
  25 + table{
  26 + margin-top: 0.1rem;
  27 + border: 1px solid #ffffff;
  28 + }
  29 + th{
  30 + width: 2rem;
  31 + height: 1rem;
  32 + font-size: 0.2rem;
  33 + background-color: #4C79B2;
  34 + list-style: none;
  35 + color: #fff;
  36 + }
  37 + td{
  38 + width: 1.6rem;
  39 + height: 1rem;
  40 + font-size: 0.2rem;
  41 + background-color: #CED5D5;
  42 + text-align: center;
  43 + }
  44 + .icon-fangdajing{
  45 + color: #ffffff;
  46 + }
  47 + .addr{
  48 + font-size: 0.2rem;
  49 + }
  50 + .phone{
  51 + font-size: 0.2rem;
  52 + }
  53 + /*引入百度地图*/
  54 + #allmap,.BMap_mask {
  55 + height: 100%;
  56 + width: 100%;
  57 + overflow: hidden;
  58 + }
  59 + </style>
  60 +</head>
  61 +<body>
  62 +<div class="container">
  63 + <!--头部信息-->
  64 + <div class="head">
  65 + <!--左图标-->
  66 + <div class="iconfont icon-zuo">
  67 +
  68 + </div>
  69 + <!--内容详情-->
  70 + <div class="head_new">
  71 + 商旅服务
  72 + </div>
  73 + <!--右菜单-->
  74 + <div class="iconfont icon-iconfont-edu12">
  75 +
  76 + </div>
  77 +
  78 + </div>
  79 +
  80 +
  81 + <!--顶部菜单-->
  82 + <div class="top">
  83 + <div class="top_item top_color">
  84 + 交通信息
  85 + </div>
  86 + <div class="top_item ">
  87 + 酒店住宿
  88 + </div>
  89 + <div class="top_item ">
  90 + 周边美食
  91 + </div>
  92 + <div class="top_item ">
  93 + 天津旅游
  94 + </div>
  95 + </div>
  96 +
  97 + <div class="box">
  98 + <!------------ 交通信息 ------------->
  99 + <div class="item_a traffic" style="display: block;">
  100 + <!--限号查询-->
  101 + <div class="traffic_limit">
  102 + 【限号查询】
  103 + </div>
  104 + <!--标题-->
  105 + <div class="traffic_title">
  106 + 天津市本地车辆限号
  107 + </div>
  108 + <!--表单-->
  109 + <table >
  110 + <tr>
  111 + <th>日期</th>
  112 + <th>3月5日
  113 + (周二)
  114 + </th>
  115 + <th>3月5日(周二)</th>
  116 + <th>3月5日(周二)</th>
  117 + <th>3月5日(周二)</th>
  118 + <th>3月5日(周二)</th>
  119 + <th>3月5日(周二)</th>
  120 + <th>3月5日(周二)</th>
  121 + </tr>
  122 + <tr>
  123 + <td>限尾号</td>
  124 + <td>限号2/7</td>
  125 + <td>限号2/7</td>
  126 + <td>限号2/7</td>
  127 + <td>限号2/7</td>
  128 + <td>限号2/7</td>
  129 + <td>限号2/7</td>
  130 + <td>限号2/7</td>
  131 + </tr>
  132 + </table>
  133 +
  134 + <!--百度地图-->
  135 + <div class="traffic_limit">
  136 + 【百度地图】
  137 + </div>
  138 + <!--搜索框-->
  139 + <div class="search_box">
  140 + <div class="traffic_search">
  141 + <input type="text" placeholder="梅江会展中心">
  142 + <div class="traffic_search_bottom">
  143 + <div class="iconfont icon-fangdajing"></div>
  144 + </div>
  145 + </div>
  146 + <div class="traffic_map">
  147 + <div id="allmap"></div>
  148 + </div>
  149 + </div>
  150 +
  151 + <!--地图大小-->
  152 +
  153 +
  154 +
  155 + </div>
  156 +
  157 + <!------------ 酒店住宿 ------------->
  158 + <div class="item_a hotel" style="display: none;">
  159 + <div class="items_box" >
  160 + <div class="item">
  161 + <!--左边-->
  162 + <div class="item_left">
  163 + <img src="images/10.png">
  164 + </div>
  165 + <!--中部-->
  166 + <div class="item_mid">
  167 + <p class="item_mid_big">
  168 +
  169 + 住宿
  170 +
  171 + </p>
  172 + <div class="item_mid_small">
  173 + <!--地址-->
  174 + <div class="item_mid_small_item">
  175 + <div class="iconfont icon-user-address addr"></div>
  176 + <div class="item_mid_small_item_s">
  177 + 天津市西青区友谊南路团结大厦2号
  178 + 天津市西青区友谊南路团结大厦2号
  179 + </div>
  180 + </div>
  181 + <!--电话-->
  182 + <div class="item_mid_small_item">
  183 + <div class="iconfont icon-dianhua-copy phone"></div>
  184 + <div class="item_mid_small_item_s">
  185 + 022-12345678
  186 + </div>
  187 + </div>
  188 + </div>
  189 + </div>
  190 + <!--右边-->
  191 + <div class="item_right ">
  192 +
  193 + <p>12月</p>
  194 + <p>25日</p>
  195 + <p>星期二</p>
  196 + </div>
  197 + </div>
  198 + <div class="item">
  199 + <!--左边-->
  200 + <div class="item_left">
  201 + <img src="images/10.png">
  202 + </div>
  203 + <!--中部-->
  204 + <div class="item_mid">
  205 + <p class="item_mid_big">
  206 +
  207 + 住宿
  208 +
  209 + </p>
  210 + <div class="item_mid_small">
  211 + <!--地址-->
  212 + <div class="item_mid_small_item">
  213 + <div class="iconfont icon-user-address addr"></div>
  214 + <div class="item_mid_small_item_s">
  215 + 天津市西青区友谊南路团结大厦2号
  216 + 天津市西青区友谊南路团结大厦2号
  217 + </div>
  218 + </div>
  219 + <!--电话-->
  220 + <div class="item_mid_small_item">
  221 + <div class="iconfont icon-dianhua-copy phone"></div>
  222 + <div class="item_mid_small_item_s">
  223 + 022-12345678
  224 + </div>
  225 + </div>
  226 + </div>
  227 + </div>
  228 + <!--右边-->
  229 + <div class="item_right color_gray">
  230 +
  231 + <p>12月</p>
  232 + <p>25日</p>
  233 + <p>星期二</p>
  234 + </div>
  235 + </div>
  236 + </div>
  237 + </div>
  238 +
  239 + <!------------ 周边美食 ------------->
  240 + <div class="item_a cate" style="display: none;">
  241 + <div class="items_box2">
  242 + <div class="item">
  243 + <!--左边-->
  244 + <div class="item_left">
  245 + <img src="images/10.png">
  246 + </div>
  247 + <!--中部-->
  248 + <div class="item_mid">
  249 + <p class="item_mid_big">
  250 +
  251 + 美食美食
  252 +
  253 + </p>
  254 + <p class="item_mid_small">
  255 + 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  256 + </p>
  257 + </div>
  258 + <!--右边-->
  259 + <div class="item_right ">
  260 +
  261 + <p>12月</p>
  262 + <p>25日</p>
  263 + <p>星期二</p>
  264 + </div>
  265 + </div>
  266 + <div class="item">
  267 + <!--左边-->
  268 + <div class="item_left">
  269 + <img src="images/10.png">
  270 + </div>
  271 + <!--中部-->
  272 + <div class="item_mid">
  273 + <p class="item_mid_big">
  274 +
  275 + 美食
  276 +
  277 + </p>
  278 + <p class="item_mid_small">
  279 + 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  280 + </p>
  281 + </div>
  282 + <!--右边-->
  283 + <div class="item_right color_gray">
  284 +
  285 + <p>12月</p>
  286 + <p>25日</p>
  287 + <p>星期二</p>
  288 + </div>
  289 + </div>
  290 + </div>
  291 + </div>
  292 +
  293 + <!------------ 天津旅游 ------------->
  294 + <div class="item_a travel" style="display: none;">
  295 + <div class="items_box3">
  296 + <div class="item">
  297 + <!--左边-->
  298 + <div class="item_left">
  299 + <img src="images/10.png">
  300 + </div>
  301 + <!--中部-->
  302 + <div class="item_mid">
  303 + <p class="item_mid_big">
  304 +
  305 + 旅游
  306 +
  307 + </p>
  308 + <p class="item_mid_small">
  309 + 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  310 + </p>
  311 + </div>
  312 + <!--右边-->
  313 + <div class="item_right ">
  314 +
  315 + <p>12月</p>
  316 + <p>25日</p>
  317 + <p>星期二</p>
  318 + </div>
  319 + </div>
  320 + <div class="item">
  321 + <!--左边-->
  322 + <div class="item_left">
  323 + <img src="images/10.png">
  324 + </div>
  325 + <!--中部-->
  326 + <div class="item_mid">
  327 + <p class="item_mid_big">
  328 +
  329 + 旅游
  330 +
  331 + </p>
  332 + <p class="item_mid_small">
  333 + 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
  334 + </p>
  335 + </div>
  336 + <!--右边-->
  337 + <div class="item_right color_gray">
  338 +
  339 + <p>12月</p>
  340 + <p>25日</p>
  341 + <p>星期二</p>
  342 + </div>
  343 + </div>
  344 + </div>
  345 + </div>
  346 + </div>
  347 +
  348 +
  349 +
  350 +
  351 +
  352 +
  353 + <!--底部菜单-->
  354 + <div class="bottom_menu">
  355 + <div class="bottom_menu_index">
  356 + <!--上图标-->
  357 + <div class="iconfont icon-zhuye2"></div>
  358 + <!--下文字-->
  359 + <div class="bottom_menu_index_text">
  360 + 首页
  361 + </div>
  362 + </div>
  363 + <div class="bottom_menu_index">
  364 + <!--上图标-->
  365 + <div class="iconfont icon-dianhua-copy"></div>
  366 + <!--下文字-->
  367 + <div class="bottom_menu_index_text">
  368 + 电话咨询
  369 + </div>
  370 + </div>
  371 + <div class="bottom_menu_index">
  372 + <!--上图标-->
  373 + <div class="iconfont icon-user-address"></div>
  374 + <!--下文字-->
  375 + <div class="bottom_menu_index_text">
  376 + 网上展厅
  377 + </div>
  378 + </div>
  379 + <div class="bottom_menu_index">
  380 + <!--上图标-->
  381 + <div class="iconfont icon-gerenzhongxin"></div>
  382 + <!--下文字-->
  383 + <div class="bottom_menu_index_text">
  384 + 个人中心
  385 + </div>
  386 + </div>
  387 + </div>
  388 +
  389 +</div>
  390 +
  391 +<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=trLEKMVBCc6MKGemHlUXdyy2&s=1"></script>
  392 +<script src="js/dropload.min.js"></script>
  393 +<script>
  394 +
  395 + //调用百度地图
  396 + // 在指定容器创建地图实例并设置最大最小缩放级别
  397 + var map = new BMap.Map("allmap", {
  398 + minZoom: 3,
  399 + maxZoom: 25
  400 + });
  401 +
  402 + // 初始化地图，设置中心点和显示级别
  403 + map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);
  404 +
  405 + // 开启鼠标滚轮缩放功能，仅对PC上有效
  406 + map.enableScrollWheelZoom(true);
  407 +
  408 + // 将控件（平移缩放控件）添加到地图上
  409 + map.addControl(new BMap.NavigationControl());
  410 +
  411 + // 为地图增加点击事件，为input赋值
  412 + map.addEventListener("click", function(e) {
  413 + document.getElementById('lat').value = e.point.lat;
  414 + document.getElementById('lng').value = e.point.lng;
  415 +
  416 + });
  417 +
  418 + // 创建位置检索、周边检索和范围检索
  419 + var local = new BMap.LocalSearch(map, {
  420 + renderOptions: {
  421 + map: map
  422 + }
  423 + });
  424 +
  425 +
  426 + //颜色切换
  427 + $('.top_item').click(function () {
  428 + var index = $(this).index()
  429 + $(this).addClass("top_color").siblings(".top_item").removeClass("top_color")
  430 +
  431 + })
  432 + //内容切换
  433 + $(".top_item").click(function () {
  434 + $(".top_item").eq($(".box>.item_a").index()).addClass("on").siblings().removeClass("on");
  435 + $(".box>.item_a").hide().eq($(this).index()).show();
  436 + })
  437 +
  438 +
  439 +
  440 + //下拉菜单
  441 +$(document).ready(function () {
  442 +
  443 +
  444 + //-------------酒店循环---------------
  445 + var page = 0;
  446 + // 每次循环展示10个
  447 + var size = 6 ;
  448 + $('.hotel').dropload({
  449 + scrollArea : window,
  450 + domUp : {
  451 + domClass : 'dropload-up',
  452 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  453 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  454 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  455 + },
  456 + domDown : {
  457 + domClass : 'dropload-down',
  458 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  459 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  460 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  461 + },
  462 + loadDownFn : function(me){
  463 + page++;
  464 + // 拼接HTML
  465 + var result = '';
  466 + var s = "";
  467 + var show="";
  468 + var list_compressor="";
  469 + var list_answer="";
  470 + $.ajax({
  471 + type: 'GET',
  472 + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  473 + dataType: 'json',
  474 + success: function(data){
  475 + console.log(data);
  476 + var arrLen = data.length;
  477 + if(arrLen > 0){
  478 + for(var i=0; i<arrLen; i++){
  479 + result +='<div class="item">\n' +
  480 + ' <!--左边-->\n' +
  481 + ' <div class="item_left">\n' +
  482 + ' <img src="images/10.png">\n' +
  483 + ' </div>\n' +
  484 + ' <!--中部-->\n' +
  485 + ' <div class="item_mid">\n' +
  486 + ' <p class="item_mid_big">\n' +
  487 + '\n' +
  488 + ' 住宿\n' +
  489 + '\n' +
  490 + ' </p>\n' +
  491 + ' <div class="item_mid_small">\n' +
  492 + ' <!--地址-->\n' +
  493 + ' <div class="item_mid_small_item">\n' +
  494 + ' <div class="iconfont icon-user-address addr"></div>\n' +
  495 + ' <div class="item_mid_small_item_s">\n' +
  496 + ' 天津市西青区友谊南路团结大厦2号\n' +
  497 + ' 天津市西青区友谊南路团结大厦2号\n' +
  498 + ' </div>\n' +
  499 + ' </div>\n' +
  500 + ' <!--电话-->\n' +
  501 + ' <div class="item_mid_small_item">\n' +
  502 + ' <div class="iconfont icon-dianhua-copy phone"></div>\n' +
  503 + ' <div class="item_mid_small_item_s">\n' +
  504 + ' 022-12345678\n' +
  505 + ' </div>\n' +
  506 + ' </div>\n' +
  507 + ' </div>\n' +
  508 + ' </div>\n' +
  509 + ' <!--右边-->\n' +
  510 + ' <div class="item_right color_gray">\n' +
  511 + '\n' +
  512 + ' <p>12月</p>\n' +
  513 + ' <p>25日</p>\n' +
  514 + ' <p>星期二</p>\n' +
  515 + ' </div>\n' +
  516 + ' </div>'
  517 +
  518 +
  519 +
  520 +
  521 + }
  522 +
  523 + // 如果没有数据
  524 + }else{
  525 + // 锁定
  526 + me.lock();
  527 + // 无数据
  528 + me.noData();
  529 + }
  530 + // 为了测试，延迟1秒加载
  531 + setTimeout(function(){
  532 + // 插入数据到页面，放到最后面
  533 + $('.items_box').append(result);
  534 + // 每次数据插入，必须重置
  535 + me.resetload();
  536 + },500);
  537 + },
  538 + error: function(xhr, type){
  539 + alert('Ajax error!');
  540 + // 即使加载出错，也得重置
  541 + me.resetload();
  542 + }
  543 + });
  544 + },
  545 + threshold : 50
  546 + });
  547 +
  548 + //--------------美食循环---------------
  549 + var page2 = 0;
  550 + // 每次循环展示10个
  551 + var size2 = 1 ;
  552 + $('.cate').dropload({
  553 + scrollArea : window,
  554 + domUp : {
  555 + domClass : 'dropload-up',
  556 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  557 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  558 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  559 + },
  560 + domDown : {
  561 + domClass : 'dropload-down',
  562 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  563 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  564 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  565 + },
  566 + loadDownFn : function(me){
  567 + page2++;
  568 + // 拼接HTML
  569 + var result = '';
  570 + var s = "";
  571 + var show="";
  572 + var list_compressor="";
  573 + var list_answer="";
  574 + $.ajax({
  575 + type: 'GET',
  576 + url: 'http://ons.me/tools/dropload/json.php?page='+page2+'&size='+size2,
  577 + dataType: 'json',
  578 + success: function(data){
  579 + console.log(data);
  580 + var arrLen = data.length;
  581 + if(arrLen > 0){
  582 + for(var i=0; i<arrLen; i++){
  583 + result +='<div class="item">\n' +
  584 + ' <!--左边-->\n' +
  585 + ' <div class="item_left">\n' +
  586 + ' <img src="images/10.png">\n' +
  587 + ' </div>\n' +
  588 + ' <!--中部-->\n' +
  589 + ' <div class="item_mid">\n' +
  590 + ' <p class="item_mid_big">\n' +
  591 + '\n' +
  592 + ' 美食\n' +
  593 + '\n' +
  594 + ' </p>\n' +
  595 + ' <p class="item_mid_small">\n' +
  596 + ' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
  597 + ' </p>\n' +
  598 + ' </div>\n' +
  599 + ' <!--右边-->\n' +
  600 + ' <div class="item_right color_gray">\n' +
  601 + '\n' +
  602 + ' <p>12月</p>\n' +
  603 + ' <p>25日</p>\n' +
  604 + ' <p>星期二</p>\n' +
  605 + ' </div>\n' +
  606 + ' </div>'
  607 +
  608 +
  609 +
  610 +
  611 + }
  612 +
  613 + // 如果没有数据
  614 + }else{
  615 + // 锁定
  616 + me.lock();
  617 + // 无数据
  618 + me.noData();
  619 + }
  620 + // 为了测试，延迟1秒加载
  621 + setTimeout(function(){
  622 + // 插入数据到页面，放到最后面
  623 + $('.items_box2').append(result);
  624 + // 每次数据插入，必须重置
  625 + me.resetload();
  626 + },500);
  627 + },
  628 + error: function(xhr, type){
  629 + alert('Ajax error!');
  630 + // 即使加载出错，也得重置
  631 + me.resetload();
  632 + }
  633 + });
  634 + },
  635 + threshold : 50
  636 + });
  637 +
  638 + //--------------天津旅游---------------
  639 + var page3 = 0;
  640 + // 每次循环展示10个
  641 + var size3 = 6;
  642 + $('.travel').dropload({
  643 + scrollArea : window,
  644 + domUp : {
  645 + domClass : 'dropload-up',
  646 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  647 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  648 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  649 + },
  650 + domDown : {
  651 + domClass : 'dropload-down',
  652 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  653 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  654 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  655 + },
  656 + loadDownFn : function(me){
  657 + page3++;
  658 + // 拼接HTML
  659 + var result = '';
  660 + var s = "";
  661 + var show="";
  662 + var list_compressor="";
  663 + var list_answer="";
  664 + $.ajax({
  665 + type: 'GET',
  666 + url: 'http://ons.me/tools/dropload/json.php?page='+page3+'&size='+size3,
  667 + dataType: 'json',
  668 + success: function(data){
  669 + console.log(data);
  670 + var arrLen = data.length;
  671 + if(arrLen > 0){
  672 + for(var i=0; i<arrLen; i++){
  673 + result +='<div class="item">\n' +
  674 + ' <!--左边-->\n' +
  675 + ' <div class="item_left">\n' +
  676 + ' <img src="images/10.png">\n' +
  677 + ' </div>\n' +
  678 + ' <!--中部-->\n' +
  679 + ' <div class="item_mid">\n' +
  680 + ' <p class="item_mid_big">\n' +
  681 + '\n' +
  682 + ' 旅游\n' +
  683 + '\n' +
  684 + ' </p>\n' +
  685 + ' <p class="item_mid_small">\n' +
  686 + ' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
  687 + ' </p>\n' +
  688 + ' </div>\n' +
  689 + ' <!--右边-->\n' +
  690 + ' <div class="item_right color_gray">\n' +
  691 + '\n' +
  692 + ' <p>12月</p>\n' +
  693 + ' <p>25日</p>\n' +
  694 + ' <p>星期二</p>\n' +
  695 + ' </div>\n' +
  696 + ' </div>'
  697 +
  698 +
  699 +
  700 +
  701 + }
  702 +
  703 + // 如果没有数据
  704 + }else{
  705 + // 锁定
  706 + me.lock();
  707 + // 无数据
  708 + me.noData();
  709 + }
  710 + // 为了测试，延迟1秒加载
  711 + setTimeout(function(){
  712 + // 插入数据到页面，放到最后面
  713 + $('.items_box3').append(result);
  714 + // 每次数据插入，必须重置
  715 + me.resetload();
  716 + },500);
  717 + },
  718 + error: function(xhr, type){
  719 + alert('Ajax error!');
  720 + // 即使加载出错，也得重置
  721 + me.resetload();
  722 + }
  723 + });
  724 + },
  725 + threshold : 50
  726 + });
  727 +})
  728 +</script>
  729 +</body>
  730 +</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_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 + <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 + <!--条目信息-->
  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/dropload.min.js"></script>
  141 +
  142 +<script>
  143 + //菜单功能
  144 + $(document).ready(function () {
  145 +
  146 +
  147 + // 页数
  148 + var page = 1;
  149 + // 每次循环展示10个
  150 + var size = 10;
  151 + $('.items').dropload({
  152 + scrollArea : window,
  153 + domUp : {
  154 + domClass : 'dropload-up',
  155 + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
  156 + domUpdate : '<div class="dropload-update">↑释放更新</div>',
  157 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  158 + },
  159 + domDown : {
  160 + domClass : 'dropload-down',
  161 + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  162 + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  163 + domNoData : '<div class="dropload-noData">暂无数据</div>'
  164 + },
  165 + loadDownFn : function(me){
  166 + page++;
  167 + // 拼接HTML
  168 + var result = '';
  169 + var s = "";
  170 + var show="";
  171 + var list_compressor="";
  172 + var list_answer="";
  173 + $.ajax({
  174 + type: 'GET',
  175 + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  176 + dataType: 'json',
  177 + success: function(data){
  178 + console.log(data);
  179 + var arrLen = data.length;
  180 + if(arrLen > 0){
  181 + for(var i=0; i<arrLen; i++){
  182 + result +='<div class="item">\n' +
  183 + ' <!--左边-->\n' +
  184 + ' <div class="item_left">\n' +
  185 + ' <img src="images/10.png">\n' +
  186 + ' </div>\n' +
  187 + ' <!--中部-->\n' +
  188 + ' <div class="item_mid">\n' +
  189 + ' <p class="item_mid_big">\n' +
  190 + '\n' +
  191 + ' 智能时代"云"发展"新模式"驻\n' +
  192 + ' 占天津\n' +
  193 + '\n' +
  194 + ' </p>\n' +
  195 + ' <p class="item_mid_small">\n' +
  196 + ' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
  197 + ' </p>\n' +
  198 + ' </div>\n' +
  199 + ' <!--右边-->\n' +
  200 + ' <div class="item_right color_gray">\n' +
  201 + '\n' +
  202 + ' <p>12月</p>\n' +
  203 + ' <p>25日</p>\n' +
  204 + ' <p>星期二</p>\n' +
  205 + ' </div>\n' +
  206 + ' </div>'
  207 +
  208 +
  209 +
  210 +
  211 + }
  212 +
  213 + // 如果没有数据
  214 + }else{
  215 + // 锁定
  216 + me.lock();
  217 + // 无数据
  218 + me.noData();
  219 + }
  220 + // 为了测试，延迟1秒加载
  221 + setTimeout(function(){
  222 + // 插入数据到页面，放到最后面
  223 + $('.items_box').append(result);
  224 + // 每次数据插入，必须重置
  225 + me.resetload();
  226 + },500);
  227 + },
  228 + error: function(xhr, type){
  229 + alert('Ajax error!');
  230 + // 即使加载出错，也得重置
  231 + me.resetload();
  232 + }
  233 + });
  234 + },
  235 + threshold : 50
  236 + });
  237 +
  238 + })
  239 +</script>
  240 +
  241 +</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 +
  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">
  12 + <link rel="stylesheet" type="text/css" href="css/dropload.css">
  13 + <script src="js/base.js"></script>
  14 + <script src="js/jquery.min.js"></script>
  15 + <style>
  16 + .icon-zuo{
  17 + color: #959595;
  18 + font-size: 0.38rem;
  19 + }
  20 + .icon-iconfont-edu12{
  21 + color: #959595;
  22 + font-size: 0.5rem;
  23 + }
  24 + .icon-fangdajing{
  25 + color: #ffffff;
  26 + }
  27 + </style>
  28 +</head>
  29 +<body>
  30 +<div class="container">
  31 + <!--头部信息-->
  32 + <div class="head">
  33 + <!--左图标-->
  34 + <div class="iconfont icon-zuo">
  35 +
  36 + </div>
  37 + <!--新闻报道-->
  38 + <div class="head_new">
  39 + 展商名录
  40 + </div>
  41 + <!--右菜单-->
  42 + <div class="iconfont icon-iconfont-edu12">
  43 +
  44 + </div>
  45 +
  46 + </div>
  47 + <!--图片-->
  48 + <div class="top">
  49 + <img src="images/11.png">
  50 + </div>
  51 + <!--查询按钮-->
  52 + <div class="traffic_search">
  53 + <input type="text" placeholder="展商查询">
  54 + <div class="traffic_search_bottom">
  55 + <div class="iconfont icon-fangdajing"></div>
  56 + </div>
  57 + </div>
  58 +
  59 + <!--展商列表-->
  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">
  156 + </div>
  157 + <!--下划线-->
  158 + <div class="item_underline"></div>
  159 + <!--底部公司-->
  160 + <div class="item_bottom">
  161 + 北京惟鑫航达科技有限公司
  162 +
  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>
  270 + </div>
  271 +
  272 +
  273 +
  274 +
  275 + <!--底部菜单-->
  276 + <div class="bottom_menu">
  277 + <div class="bottom_menu_index">
  278 + <!--上图标-->
  279 + <div class="iconfont icon-zhuye2"></div>
  280 + <!--下文字-->
  281 + <div class="bottom_menu_index_text">
  282 + 首页
  283 + </div>
  284 + </div>
  285 + <div class="bottom_menu_index">
  286 + <!--上图标-->
  287 + <div class="iconfont icon-dianhua-copy"></div>
  288 + <!--下文字-->
  289 + <div class="bottom_menu_index_text">
  290 + 电话咨询
  291 + </div>
  292 + </div>
  293 + <div class="bottom_menu_index">
  294 + <!--上图标-->
  295 + <div class="iconfont icon-user-address"></div>
  296 + <!--下文字-->
  297 + <div class="bottom_menu_index_text">
  298 + 网上展厅
  299 + </div>
  300 + </div>
  301 + <div class="bottom_menu_index">
  302 + <!--上图标-->
  303 + <div class="iconfont icon-gerenzhongxin"></div>
  304 + <!--下文字-->
  305 + <div class="bottom_menu_index_text">
  306 + 个人中心
  307 + </div>
  308 + </div>
  309 + </div>
  310 +
  311 +</div>
  312 +
  313 +</body>
  314 +<script src="js/dropload.min.js"></script>
  315 +
  316 +<script>
  317 +
  318 +
  319 +</script>
  320 +
  321 +</html>