作者 xudada

首页tab优化

1 <template> 1 <template>
2 <el-row id="me"> 2 <el-row id="me">
3 - <el-col :span="12"> 1&nbsp;</el-col>  
4 - <el-col :span="12" id="menu"> 3 + <el-col :span="24" id="menu" >
5 <ul> 4 <ul>
6 - <li> <a href="" class="drop">企业公共服务</a> 5 + <li><a href="" class="drop">政府监管服务</a>
7 <div class="dropdown_1column"> 6 <div class="dropdown_1column">
8 <ul class="simple"> 7 <ul class="simple">
9 - <li><a href="">货主服务</a></li>  
10 - <li><a href="">代理人服务</a></li>  
11 - <li><a href="">航空公司服务</a></li>  
12 - <li><a href="">卡车运输服务</a></li>  
13 - <li><a href="">报关服务</a></li> 8 + <li><a href="http://8.131.245.248:9004/">货物监管辅助管理</a></li>
  9 + <li><a href="http://8.131.245.248:9005/">卡口辅助管理</a></li>
  10 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
  11 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
  12 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
14 </ul> 13 </ul>
15 - </div>  
16 - </li>  
17 - <li><a href="" class="drop">增值服务</a> 14 + </div></li>
  15 + <li><a href="" class="drop">综合查询</a>
18 <div class="dropdown_1column"> 16 <div class="dropdown_1column">
19 <ul class="simple"> 17 <ul class="simple">
20 - <li><a href="">在线物流交易</a></li>  
21 - <li><a href="">航空货运操作管理</a></li>  
22 - <li><a href="">智能通关服务</a></li>  
23 - <li><a href="">智慧组板服务</a></li>  
24 - <li><a href="">物流金融服务</a></li> 18 + <li><a href="http://8.131.245.248:8083/zz-sso">企业实时查询服务</a></li>
  19 + <li><a href="http://8.131.245.248:8083/zz-sso">企业综合查询服务</a></li>
  20 + <li><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>
  21 + <li><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>
25 </ul> 22 </ul>
26 - </div>  
27 - </li>  
28 - <li><a href="" class="drop">综合查询</a> 23 + </div></li>
  24 + <li> <a href="" class="drop">企业公共服务</a>
29 <div class="dropdown_1column"> 25 <div class="dropdown_1column">
30 <ul class="simple"> 26 <ul class="simple">
31 - <li><a href="">实时查询服务</a></li>  
32 - <li><a href="">综合查询服务</a></li> 27 + <li><a href="http://8.131.245.248:8083/tb-agent/">舱单申报服务</a> </li>
  28 + <li><a href="http://8.131.245.248:9001/">奖励申请服务</a> </li>
  29 + <li><a href="http://8.131.245.248:8083/zz-bs">卡口服务</a> </li>
  30 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>
  31 + <li><a href="http://8.131.245.248:8002/home">报关服务</a></li>
  32 + <li><a href="http://8.131.245.248:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>
  33 + <li><a href="http://8.131.245.248:8083/portal/enterpriseService">更多</a></li>
33 </ul> 34 </ul>
34 - </div></li>  
35 - <li><a href="" class="drop">政府监管服务</a> 35 + </div>
  36 + </li>
  37 + <li><a href="" class="drop">增值服务</a>
36 <div class="dropdown_1column"> 38 <div class="dropdown_1column">
37 <ul class="simple"> 39 <ul class="simple">
38 - <li><a href="">货物监管辅助管理</a></li>  
39 - <li><a href="">卡口辅助管理</a></li>  
40 - <li><a href="">安检信息服务</a></li>  
41 - <li><a href="">特种货物监管</a></li>  
42 - <li><a href="">企业信用监管</a></li> 40 + <li><a href="http://8.131.245.248:8083/portal/bookingIndex">在线订舱服务</a></li>
  41 + <li><a href="http://8.131.245.248:9003/index/bookList">在线约车服务</a> </li>
  42 + <li><a href="http://8.131.245.248:8083/portal/market">物流服务市场</a> </li>
  43 + <li><a href="http://8.131.245.248:8083/zz-awb-operate/">航空货运操作管理</a> </li>
  44 + <li><a href="http://8.131.245.248:8002/home">智能通关服务</a></li>
  45 + <li><a href="http://8.131.245.248:8083/zz-uld/">智慧组板服务</a></li>
  46 + <li><a href="http://8.131.245.248:8083/zz-lf/dashboard/index">物流金融服务</a></li>
43 </ul> 47 </ul>
44 - </div></li> 48 + </div>
  49 + </li>
45 50
46 </ul> 51 </ul>
47 </el-col> 52 </el-col>
@@ -60,21 +65,21 @@ @@ -60,21 +65,21 @@
60 li{ 65 li{
61 list-style-type: none; 66 list-style-type: none;
62 } 67 }
  68 + a{font-size: 13px;}
63 #me{ 69 #me{
64 - height: 100px; 70 + height: 75px;
65 } 71 }
66 /*菜单栏底层div*/ 72 /*菜单栏底层div*/
67 - #menu {  
68 - width: 1000px; 73 + #menu,#menu2 {
69 height: 50px; 74 height: 50px;
70 border-bottom: 3px solid rgb(111,130,148); 75 border-bottom: 3px solid rgb(111,130,148);
71 position:relative; 76 position:relative;
72 - 77 + z-index: 999;
73 } 78 }
74 /*一级菜单栏样式*/ 79 /*一级菜单栏样式*/
75 #menu li{ 80 #menu li{
76 - float: left;  
77 - width: 130px; 81 + float: right;
  82 + width: 160px;
78 height: 50px; 83 height: 50px;
79 text-align: center; 84 text-align: center;
80 /*position:relative;*/ 85 /*position:relative;*/
@@ -82,7 +87,7 @@ @@ -82,7 +87,7 @@
82 } 87 }
83 /*一级菜单栏字体*/ 88 /*一级菜单栏字体*/
84 #menu li a { 89 #menu li a {
85 - font-size:17px; 90 + font-size:13px;
86 display:block; 91 display:block;
87 /*outline:0;*/ 92 /*outline:0;*/
88 /*删除下划线*/ 93 /*删除下划线*/
@@ -90,12 +95,13 @@ @@ -90,12 +95,13 @@
90 } 95 }
91 /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/ 96 /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
92 #menu li:hover .dropdown_1column { 97 #menu li:hover .dropdown_1column {
93 - left:0px; 98 + left:250px;
  99 + right: 0px;
94 top:45px; 100 top:45px;
95 float: left; 101 float: left;
96 display:inline-block; 102 display:inline-block;
97 - width: 720px;  
98 - font-size:17px; 103 + width: auto;
  104 + font-size:13px;
99 color:#ffffff; 105 color:#ffffff;
100 } 106 }
101 /*二级菜单栏样式*/ 107 /*二级菜单栏样式*/
@@ -104,14 +110,13 @@ @@ -104,14 +110,13 @@
104 left: -999em; 110 left: -999em;
105 /*text-align: center;*/ 111 /*text-align: center;*/
106 background: rgb(14,119,238); 112 background: rgb(14,119,238);
107 - width: 160px;  
108 } 113 }
109 /*鼠标移至二级菜单栏颜色改变*/ 114 /*鼠标移至二级菜单栏颜色改变*/
110 #menu li:hover div li:hover{background-color: rgb(18,170,255)} 115 #menu li:hover div li:hover{background-color: rgb(18,170,255)}
111 /*二级菜单栏样式*/ 116 /*二级菜单栏样式*/
112 #menu li ul li { 117 #menu li ul li {
113 - font-size:17px;  
114 - float:left; 118 + font-size:13px;
  119 + float:right;
115 line-height:50px; 120 line-height:50px;
116 } 121 }
117 122