作者 乔爽

update

@@ -34,6 +34,8 @@ body{ @@ -34,6 +34,8 @@ body{
34 font-weight: bold; 34 font-weight: bold;
35 35
36 } 36 }
  37 +
  38 +
37 .items{ 39 .items{
38 margin-top: 0.88rem; 40 margin-top: 0.88rem;
39 margin-bottom: 1rem; 41 margin-bottom: 1rem;
@@ -141,3 +143,35 @@ body{ @@ -141,3 +143,35 @@ body{
141 font-size: 0.22rem; 143 font-size: 0.22rem;
142 color: #666666; 144 color: #666666;
143 } 145 }
  146 +
  147 +
  148 +/*菜单栏目*/
  149 +.head_menu{
  150 + width: 1.9rem;
  151 + display: flex;
  152 + flex-flow: column;
  153 + background-color: #F4F5F9;
  154 + position: relative;
  155 +}
  156 +.head_menu_item{
  157 + width: 1.9rem;
  158 + height: 0.55rem;
  159 + line-height: 0.55rem;
  160 + display: flex;
  161 + align-items: center;
  162 + position: relative;
  163 + color: #333333;
  164 +}
  165 +/*下划线*/
  166 +.head_menu_item:before{
  167 + content: "";
  168 + width: 1.9rem;
  169 + height: 1px;
  170 + position: absolute;
  171 + bottom: 0;
  172 + background-color: #CED5D5;
  173 +}
  174 +.head_menu_item_text{
  175 + font-size: 0.16rem;
  176 + margin-left: 0.1rem;
  177 +}
@@ -127,7 +127,7 @@ body{ @@ -127,7 +127,7 @@ body{
127 127
128 } 128 }
129 .func_page{ 129 .func_page{
130 - width: 4.5rem; 130 + width: 7.5rem;
131 display: flex; 131 display: flex;
132 margin-bottom: 1.3rem; 132 margin-bottom: 1.3rem;
133 } 133 }
@@ -10,6 +10,10 @@ @@ -10,6 +10,10 @@
10 <link rel="stylesheet" type="text/css" href="css/index.css"> 10 <link rel="stylesheet" type="text/css" href="css/index.css">
11 <script src="js/base.js"></script> 11 <script src="js/base.js"></script>
12 <style> 12 <style>
  13 +
  14 + .iconfont{
  15 + font-size: 0.4rem;
  16 + }
13 .icon-diqiu{ 17 .icon-diqiu{
14 font-size: 0.35rem; 18 font-size: 0.35rem;
15 } 19 }
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 8
9 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css"> 9 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_hcei2fa3b4q.css">
10 <link rel="stylesheet" type="text/css" href="css/xwbd.css"> 10 <link rel="stylesheet" type="text/css" href="css/xwbd.css">
11 <link rel="stylesheet" type="text/css" href="css/dropload.css"> 11 <link rel="stylesheet" type="text/css" href="css/dropload.css">
12 <script src="js/base.js"></script> 12 <script src="js/base.js"></script>
@@ -19,6 +19,24 @@ @@ -19,6 +19,24 @@
19 .icon-iconfont-edu12{ 19 .icon-iconfont-edu12{
20 color: #959595; 20 color: #959595;
21 font-size: 0.5rem; 21 font-size: 0.5rem;
  22 + position: relative;
  23 + }
  24 + .icon-shangsanjiao{
  25 + height: 0.5rem;
  26 + font-size: 0.6rem;
  27 + margin-left: 1.2rem;
  28 + position: absolute;
  29 + top: -0.4rem;
  30 + color: #F4F5F9;
  31 + }
  32 + .margin_lef{
  33 + margin-left: 0.2rem;
  34 + }
  35 + .menu{
  36 + /*display: flex;*/
  37 + position: absolute;
  38 + top: 0.8rem;
  39 + left: -1.4rem;
22 } 40 }
23 </style> 41 </style>
24 </head> 42 </head>
@@ -36,7 +54,96 @@ @@ -36,7 +54,96 @@
36 </div> 54 </div>
37 <!--右菜单--> 55 <!--右菜单-->
38 <div class="iconfont icon-iconfont-edu12"> 56 <div class="iconfont icon-iconfont-edu12">
  57 + <!--菜单栏功能-->
  58 + <div class="menu">
39 59
  60 + <!--菜单列表-->
  61 + <div class="head_menu">
  62 + <!--箭头-->
  63 + <div class="iconfont icon-shangsanjiao"></div>
  64 + <!--菜单-->
  65 + <div class="head_menu_item">
  66 + <!--图标-->
  67 + <div class="iconfont icon-zhuye2 margin_lef"></div>
  68 + <!--文字-->
  69 + <div class="head_menu_item_text">
  70 + 首页
  71 + </div>
  72 + </div>
  73 + <div class="head_menu_item">
  74 + <!--图标-->
  75 + <div class="iconfont icon-fangzi margin_lef"></div>
  76 + <!--文字-->
  77 + <div class="head_menu_item_text">
  78 + 关于展品
  79 + </div>
  80 + </div>
  81 + <div class="head_menu_item">
  82 + <!--图标-->
  83 + <div class="iconfont icon-fangkuai margin_lef"></div>
  84 + <!--文字-->
  85 + <div class="head_menu_item_text">
  86 + 展品范围
  87 + </div>
  88 + </div>
  89 + <div class="head_menu_item">
  90 + <!--图标-->
  91 + <div class="iconfont icon-diqiu1 margin_lef"></div>
  92 + <!--文字-->
  93 + <div class="head_menu_item_text">
  94 + 展商名录
  95 + </div>
  96 + </div>
  97 + <div class="head_menu_item">
  98 + <!--图标-->
  99 + <div class="iconfont icon-zuanshi margin_lef"></div>
  100 + <!--文字-->
  101 + <div class="head_menu_item_text">
  102 + 参展申请
  103 + </div>
  104 + </div>
  105 + <div class="head_menu_item">
  106 + <!--图标-->
  107 + <div class="iconfont icon-lanzi margin_lef"></div>
  108 + <!--文字-->
  109 + <div class="head_menu_item_text">
  110 + 观众名录
  111 + </div>
  112 + </div>
  113 + <div class="head_menu_item">
  114 + <!--图标-->
  115 + <div class="iconfont icon-gouwuche1 margin_lef"></div>
  116 + <!--文字-->
  117 + <div class="head_menu_item_text">
  118 + 参观登记
  119 + </div>
  120 + </div>
  121 + <div class="head_menu_item">
  122 + <!--图标-->
  123 + <div class="iconfont icon-luyin margin_lef"></div>
  124 + <!--文字-->
  125 + <div class="head_menu_item_text">
  126 + 论坛活动
  127 + </div>
  128 + </div>
  129 + <div class="head_menu_item">
  130 + <!--图标-->
  131 + <div class="iconfont icon-ic_language_px margin_lef"></div>
  132 + <!--文字-->
  133 + <div class="head_menu_item_text">
  134 + 新闻报道
  135 + </div>
  136 + </div>
  137 + <div class="head_menu_item">
  138 + <!--图标-->
  139 + <div class="iconfont icon-shuben margin_lef"></div>
  140 + <!--文字-->
  141 + <div class="head_menu_item_text">
  142 + 商旅服务
  143 + </div>
  144 + </div>
  145 + </div>
  146 + </div>
40 </div> 147 </div>
41 148
42 </div> 149 </div>
@@ -29,9 +29,10 @@ @@ -29,9 +29,10 @@
29 margin-bottom: 0.4rem; 29 margin-bottom: 0.4rem;
30 } 30 }
31 .pageTest{ 31 .pageTest{
32 - width: 4.5rem;  
33 - height: 0.5rem; 32 + /*width: ;*/
  33 + width: 7.5rem;
34 display: flex; 34 display: flex;
  35 + justify-content: center;
35 } 36 }
36 .activP{ 37 .activP{
37 background-color: #367fa9!important; 38 background-color: #367fa9!important;
@@ -48,8 +49,8 @@ @@ -48,8 +49,8 @@
48 border: none; 49 border: none;
49 } 50 }
50 .pagingUl li{ 51 .pagingUl li{
51 - width: 0.5rem;  
52 - height: 0.5rem; 52 + width: 0.45rem;
  53 + height: 0.4rem;
53 display: flex; 54 display: flex;
54 } 55 }
55 .pagingUl li a{ 56 .pagingUl li a{
@@ -57,10 +58,10 @@ @@ -57,10 +58,10 @@
57 background-color: transparent; 58 background-color: transparent;
58 } 59 }
59 .prv{ 60 .prv{
60 - margin-left: 0.2rem; 61 + margin-left: 0.1rem;
61 } 62 }
62 .last{ 63 .last{
63 - margin-left: 0.2rem; 64 + margin-left: 0.1rem;
64 } 65 }
65 </style> 66 </style>
66 </head> 67 </head>
@@ -300,7 +301,7 @@ @@ -300,7 +301,7 @@
300 301
301 //分页功能 302 //分页功能
302 $('.pageTest').page({ 303 $('.pageTest').page({
303 - leng: 3,//分页总数 304 + leng: 8,//分页总数
304 activeClass: 'activP' , //active 类样式定义 305 activeClass: 'activP' , //active 类样式定义
305 306
306 firstPage: '首页',// 307 firstPage: '首页',//