作者 小范

航空物流公共信息服务平台界面优化

@@ -24,18 +24,17 @@ module.exports = { @@ -24,18 +24,17 @@ module.exports = {
24 }, 24 },
25 dev: { 25 dev: {
26 env: require('./dev.env'), 26 env: require('./dev.env'),
27 - port: 12022, 27 + port: 12024,
28 autoOpenBrowser: true, 28 autoOpenBrowser: true,
29 assetsSubDirectory: 'static', 29 assetsSubDirectory: 'static',
30 assetsPublicPath: '/', 30 assetsPublicPath: '/',
31 proxyTable: { 31 proxyTable: {
32 '/api':{ 32 '/api':{
33 - target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http  
34 - // target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http  
35 - // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http 33 + target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http
  34 + // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
36 changeOrigin: true, 35 changeOrigin: true,
37 pathRewrite: { 36 pathRewrite: {
38 - '^/api/': '/', //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可 37 + '^/api/': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
39 } 38 }
40 } 39 }
41 }, 40 },
@@ -143,7 +143,7 @@ let routes = [ @@ -143,7 +143,7 @@ let routes = [
143 name: '订舱系统', 143 name: '订舱系统',
144 iconCls: 'el-icon-delete-location', 144 iconCls: 'el-icon-delete-location',
145 children: [ 145 children: [
146 - { path: '/booking', component: booking, name: '在线订舱' }, 146 + // { path: '/booking', component: booking, name: '在线订舱' },
147 { path: '/order', component: order, name: '订舱信息' }, 147 { path: '/order', component: order, name: '订舱信息' },
148 { path: '/airlift', component: airlift, name: '空运专线' }, 148 { path: '/airlift', component: airlift, name: '空运专线' },
149 ] 149 ]
@@ -5,13 +5,14 @@ @@ -5,13 +5,14 @@
5 {{collapsed?'':sysName}} 5 {{collapsed?'':sysName}}
6 </el-col> 6 </el-col>
7 <el-col :span="10"> 7 <el-col :span="10">
8 - <div class="tools" @click.prevent="collapse">  
9 - <i class="fa fa-align-justify"></i> 8 + <div class="tools" @click.prevent="collapse" style="width: 380px">
  9 + <i class="fa "></i>
10 </div> 10 </div>
  11 +<!-- 标签i的图标 fa-align-justify-->
11 </el-col> 12 </el-col>
12 <el-col :span="4" class="userinfo"> 13 <el-col :span="4" class="userinfo">
13 - <el-dropdown trigger="hover">  
14 - <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span> 14 + <el-dropdown trigger="hover" >
  15 + <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img :src="this.sysUserAvatar"/></span>
15 <el-dropdown-menu slot="dropdown"> 16 <el-dropdown-menu slot="dropdown">
16 <el-dropdown-item>我的消息</el-dropdown-item> 17 <el-dropdown-item>我的消息</el-dropdown-item>
17 <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item> 18 <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
@@ -43,7 +44,14 @@ @@ -43,7 +44,14 @@
43 <el-col :span="24" class="main"> 44 <el-col :span="24" class="main">
44 <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> 45 <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
45 <!--导航菜单--> 46 <!--导航菜单-->
46 - <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed" style="min-width: 230px"> 47 + <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen"
  48 + @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed"
  49 + style="width: 380px;height: 100%">
  50 +<!-- ;overflow: scroll-->
  51 + <div align="center" style="background-color: #2b2f3a">
  52 + <img src="./logo1.png">
  53 + <h1 style="color:white;display: inline-block">航空物流公共信息服务平台</h1>
  54 + </div>
47 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> 55 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
48 <el-submenu :index="index+''" v-if="!item.leaf"> 56 <el-submenu :index="index+''" v-if="!item.leaf">
49 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> 57 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@@ -134,7 +142,7 @@ @@ -134,7 +142,7 @@
134 } 142 }
135 }; 143 };
136 return { 144 return {
137 - sysName:'代理人申报平台', 145 + sysName:'',
138 collapsed:false, 146 collapsed:false,
139 sysUserName: '', 147 sysUserName: '',
140 sysUserId:'', 148 sysUserId:'',
@@ -303,11 +311,12 @@ @@ -303,11 +311,12 @@
303 color:#fff; 311 color:#fff;
304 .userinfo { 312 .userinfo {
305 text-align: right; 313 text-align: right;
306 - padding-right: 35px; 314 + padding-right: 125px;
  315 + padding-top: 71px;
307 float: right; 316 float: right;
308 .userinfo-inner { 317 .userinfo-inner {
309 cursor: pointer; 318 cursor: pointer;
310 - color:#fff; 319 + color:rgb(180,150,121);
311 img { 320 img {
312 width: 40px; 321 width: 40px;
313 height: 40px; 322 height: 40px;
@@ -347,6 +356,11 @@ @@ -347,6 +356,11 @@
347 height: 60px; 356 height: 60px;
348 line-height: 60px; 357 line-height: 60px;
349 cursor: pointer; 358 cursor: pointer;
  359 +
  360 + /*padding-left: 180px;*/
  361 + /*padding-top: 60px;*/
  362 + /*color: rgb(111,130,148);*/
  363 +
350 } 364 }
351 } 365 }
352 .main { 366 .main {
@@ -360,7 +374,7 @@ @@ -360,7 +374,7 @@
360 flex:0 0 230px; 374 flex:0 0 230px;
361 width: 230px; 375 width: 230px;
362 overflow-y: scroll; 376 overflow-y: scroll;
363 - background: #606060; 377 + background: rgb(38,56,76);
364 // position: absolute; 378 // position: absolute;
365 // top: 0px; 379 // top: 0px;
366 // bottom: 0px; 380 // bottom: 0px;
@@ -385,7 +399,8 @@ @@ -385,7 +399,8 @@
385 width: 60px; 399 width: 60px;
386 } 400 }
387 .menu-expanded{ 401 .menu-expanded{
388 - flex:0 0 230px; 402 + /*底层滚动框宽度*/
  403 + flex:0 0 380px;
389 width: 230px; 404 width: 230px;
390 } 405 }
391 .menu-expanded ul{ 406 .menu-expanded ul{
1 <template> 1 <template>
2 <el-row id="me"> 2 <el-row id="me">
3 - <el-col :span="24" id="menu" > 3 + <el-col :span="20" id="menu" >
4 <ul> 4 <ul>
5 - <li><a href="" class="drop">政府监管服务</a>  
6 - <div class="dropdown_1column">  
7 - <ul class="simple">  
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>  
13 - </ul>  
14 - </div></li>  
15 - <li><a href="" class="drop">综合查询</a>  
16 - <div class="dropdown_1column">  
17 - <ul class="simple">  
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 style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>  
21 - <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>  
22 - </ul>  
23 - </div></li>  
24 <li> <a href="" class="drop">企业公共服务</a> 5 <li> <a href="" class="drop">企业公共服务</a>
25 <div class="dropdown_1column"> 6 <div class="dropdown_1column">
26 <ul class="simple"> 7 <ul class="simple">
@@ -47,7 +28,25 @@ @@ -47,7 +28,25 @@
47 </ul> 28 </ul>
48 </div> 29 </div>
49 </li> 30 </li>
50 - 31 + <li><a href="" class="drop">综合查询</a>
  32 + <div class="dropdown_1column">
  33 + <ul class="simple">
  34 + <li><a href="http://8.131.245.248:8083/zz-sso">企业实时查询服务</a></li>
  35 + <li><a href="http://8.131.245.248:8083/zz-sso">企业综合查询服务</a></li>
  36 + <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>
  37 + <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>
  38 + </ul>
  39 + </div></li>
  40 + <li><a href="" class="drop">政府监管服务</a>
  41 + <div class="dropdown_1column">
  42 + <ul class="simple">
  43 + <li><a href="http://8.131.245.248:9004/">货物监管辅助管理</a></li>
  44 + <li><a href="http://8.131.245.248:9005/">卡口辅助管理</a></li>
  45 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
  46 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
  47 + <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
  48 + </ul>
  49 + </div></li>
51 </ul> 50 </ul>
52 </el-col> 51 </el-col>
53 </el-row> 52 </el-row>
@@ -65,12 +64,12 @@ @@ -65,12 +64,12 @@
65 li{ 64 li{
66 list-style-type: none; 65 list-style-type: none;
67 } 66 }
68 - a{font-size: 13px;} 67 + a{font-size: 14px;}
69 68
70 /*菜单栏底层div*/ 69 /*菜单栏底层div*/
71 #menu,#menu2 { 70 #menu,#menu2 {
72 height: 50px; 71 height: 50px;
73 - border-bottom: 3px solid rgb(111,130,148); 72 + /*border-bottom: 3px solid rgb(111,130,148);*/
74 position:relative; 73 position:relative;
75 z-index: 999; 74 z-index: 999;
76 } 75 }