朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 27afadf5ecd6bf10dbcb8bca700d3baa3df1cdae 1 个父辈 6c634c48

首页界面及导航栏更新

内嵌 并排对比
正在显示 7 个修改的文件 包含 352 行增加 和 32 行删除
@@ -24,7 +24,7 @@ module.exports = { @@ -24,7 +24,7 @@ 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: '/',
此 diff 太大无法显示。
  1 +<template>
  2 + <div style="width: 100%">
  3 + <Assembly></Assembly>
  4 +
  5 +
  6 + <el-tabs v-model="activeIndex"
  7 + v-if="openTab.length"
  8 + type="card"
  9 + :closable = "tabCloseable"
  10 + @tab-click='tabClick'
  11 + @tab-remove="tabRemove"
  12 + style="width: 100%;margin-top: 18px;height: 50px">
  13 + <el-tab-pane
  14 + v-for="(item, index) in this.$store.state.openTab"
  15 + :key="item.name"
  16 + :label="item.name"
  17 + :name="item.route">
  18 + </el-tab-pane>
  19 + <section class="content-container">
  20 + <div class="grid-content bg-purple-light">
  21 + <el-col :span="24" class="content-wrapper">
  22 + <transition name="fade" mode="out-in">
  23 + <router-view></router-view>
  24 + </transition>
  25 + </el-col>
  26 + </div>
  27 + </section>
  28 + </el-tabs>
  29 + </div>
  30 +</template>
  31 +
  32 +<script>
  33 + import Assembly from "@/views/bus/Assembly";
  34 +
  35 + export default {
  36 + name: 'TabMenu',
  37 + components: { Assembly },
  38 +
  39 + data() {
  40 + return {
  41 + tabCloseable: true
  42 + }
  43 + },
  44 + methods: {
  45 + initTab(){
  46 + // 刷新时以当前路由做为tab加入tabs
  47 + // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
  48 + // 当当前路由是首页时，添加首页到store，并设置激活状态
  49 + if (this.$route.path !== '/' && this.$route.path !== '/main') {
  50 + // console.log('1');
  51 + this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
  52 + this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
  53 + this.$store.commit('set_active_index', this.$route.path);
  54 + } else {
  55 + // console.log('2');
  56 + this.$store.commit('add_tabs', {route: '/main', name: '首页'});
  57 + this.$store.commit('set_active_index', '/main');
  58 + this.$router.push('/main');
  59 + }
  60 + },
  61 + tabClick(tab){
  62 + // console.log("tab",tab);
  63 + // console.log('active',this.$store.state.activeIndex);
  64 + this.$router.push({path: this.$store.state.activeIndex});
  65 + },
  66 + tabRemove(targetName){
  67 + // console.log("tabRemove",targetName);
  68 + //首页不删
  69 + if(targetName == '/main'){
  70 + return
  71 + }
  72 + this.$store.commit('delete_tabs', targetName);
  73 + if (this.$store.state.activeIndex === targetName) {
  74 + // 设置当前激活的路由
  75 + if (this.$store.state.openTab && this.$store.state.openTab.length >=1) {
  76 + // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
  77 + this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
  78 + this.$router.push({path: this.$store.state.activeIndex});
  79 + } else {
  80 + this.$router.push({path: '/main'});
  81 + }
  82 +
  83 +
  84 + }
  85 + },
  86 + },
  87 + mounted() {
  88 + this.initTab();
  89 + },
  90 + watch:{
  91 + '$route'(to,from){
  92 + //判断路由是否已经打开
  93 + //已经打开的 ，将其置为active
  94 + //未打开的，将其放入队列里
  95 + let flag = false;
  96 + for(let item of this.$store.state.openTab){
  97 + // console.log("item.name",item.name)
  98 + // console.log("t0.name",to.name)
  99 +
  100 + if(item.name === to.name){
  101 + // console.log('to.path',to.path);
  102 + this.$store.commit('set_active_index',to.path)
  103 + flag = true;
  104 + break;
  105 + }
  106 + }
  107 +
  108 + if(!flag){
  109 + // console.log('to.path',to.path);
  110 + this.$store.commit('add_tabs', {route: to.path, name: to.name});
  111 + this.$store.commit('set_active_index', to.path);
  112 + }
  113 +
  114 + },
  115 + openTab(){
  116 + this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
  117 + }
  118 + },
  119 + computed:{
  120 + openTab:{
  121 + get: function () {
  122 + return this.$store.state.openTab;
  123 + },
  124 + set:function (value) {
  125 + this.$store.commit('set_tabs', {value});
  126 + // console.log("opebTab监视:value = "+ value);
  127 + }
  128 +
  129 + },
  130 + activeIndex:{
  131 + get:function () {
  132 + return this.$store.state.activeIndex;
  133 + },
  134 + set:function (value) {
  135 + this.$store.commit('set_active_index', value);
  136 + }
  137 +
  138 + }
  139 + }
  140 + }
  141 +</script>
  142 +
  143 +<style>
  144 + /*底层背景色*/
  145 + .el-tabs__nav-scroll{
  146 + background-color: rgb(239,243,246);
  147 + }
  148 + /*首个内部边框*/
  149 + .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
  150 + border: 1px solid rgba(80,109,130,.64);
  151 + }
  152 + /*其他内部边框*/
  153 + .el-tabs--card>.el-tabs__header .el-tabs__item{
  154 + border: 1px solid rgba(80,109,130,.64);
  155 + }
  156 + /*外部大边框取消表格样式*/
  157 + .el-tabs--card>.el-tabs__header .el-tabs__nav{
  158 + border: 0px;
  159 + }
  160 + /*黑框及内字体样式*/
  161 + .el-tabs__item{
  162 + color:#495060;
  163 + height: 26px;
  164 + border: 1px solid rgba(80,109,130,.64);
  165 + margin: 4px 3px;
  166 + line-height: 26px;
  167 + border-radius: 5px 5px 0 0;
  168 + background-color: #fff;
  169 + font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  170 + }
  171 + /* 选中的黑框的样式*/
  172 + .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  173 + border-bottom: 1px solid rgba(80,109,130,.64);
  174 + border-radius: 5px 5px 0 0;
  175 + background-color: #398af1;
  176 + color: #fff;
  177 + border-color: #398af1;
  178 + }
  179 + .el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
  180 + content: "";
  181 + background: #fff;
  182 + display: inline-block;
  183 + width: 8px;
  184 + height: 8px;
  185 + border-radius: 50%;
  186 + margin-right: 8px;
  187 + }
  188 +</style>
  189 +
1 <template> 1 <template>
2 <el-row class="container darkmenu" style="margin-top: 0px;"> 2 <el-row class="container darkmenu" style="margin-top: 0px;">
3 - <el-col :span="24" class="header"> 3 + <el-col :span="24" class="header" style="background-position: center">
4 <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'"> 4 <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
5 {{collapsed?'':sysName}} 5 {{collapsed?'':sysName}}
6 </el-col> 6 </el-col>
@@ -69,23 +69,9 @@ @@ -69,23 +69,9 @@
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </aside> 71 </aside>
72 -<section class="content-container">  
73 - <div class="grid-content bg-purple-light">  
74 - <el-col :span="24" class="breadcrumb-container">  
75 - <strong class="title">{{$route.name}}</strong>  
76 - <el-breadcrumb separator="/" class="breadcrumb-inner">  
77 - <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">  
78 - {{ item.name }}  
79 - </el-breadcrumb-item>  
80 - </el-breadcrumb>  
81 - </el-col>  
82 - <el-col :span="24" class="content-wrapper">  
83 - <transition name="fade" mode="out-in">  
84 - <router-view :key="$route.path +$route.query.t"></router-view>  
85 - </transition>  
86 - </el-col>  
87 - </div>  
88 -</section> 72 +
  73 +<TabMenu></TabMenu>
  74 +
89 </el-col> 75 </el-col>
90 </el-row> 76 </el-row>
91 </template> 77 </template>
@@ -94,6 +80,8 @@ @@ -94,6 +80,8 @@
94 import rt from '../routes' 80 import rt from '../routes'
95 import { editPass,resetToken} from '../api/user'; 81 import { editPass,resetToken} from '../api/user';
96 import ElFormItem from "element-ui/packages/form/src/form-item"; 82 import ElFormItem from "element-ui/packages/form/src/form-item";
  83 + import TabMenu from "@/components/TabMenu"
  84 +
97 export default { 85 export default {
98 86
99 provide() { 87 provide() {
@@ -101,7 +89,7 @@ @@ -101,7 +89,7 @@
101 reload: this.reload 89 reload: this.reload
102 } 90 }
103 }, 91 },
104 - components: {ElFormItem}, 92 + components: {ElFormItem,TabMenu},
105 data() { 93 data() {
106 var validatePass = (rule, value, callback) => { 94 var validatePass = (rule, value, callback) => {
107 if (!value) { 95 if (!value) {
@@ -309,9 +297,9 @@ @@ -309,9 +297,9 @@
309 bottom: 0px; 297 bottom: 0px;
310 width: 100%; 298 width: 100%;
311 .header { 299 .header {
312 - height: 60px;  
313 - line-height: 60px;  
314 - background: $color-primary url("/static/images/air-banner.png"); 300 + height: 70px;
  301 + line-height: 70px;
  302 + background: $color-primary url("/static/images/banner.png");
315 color:#fff; 303 color:#fff;
316 .userinfo { 304 .userinfo {
317 text-align: right; 305 text-align: right;
@@ -365,7 +353,7 @@ @@ -365,7 +353,7 @@
365 display: flex; 353 display: flex;
366 // background: #324057; 354 // background: #324057;
367 position: absolute; 355 position: absolute;
368 - top: 60px; 356 + top: 70px;
369 bottom: 0px; 357 bottom: 0px;
370 overflow: hidden; 358 overflow: hidden;
371 aside { 359 aside {
@@ -474,4 +462,4 @@ @@ -474,4 +462,4 @@
474 } 462 }
475 } 463 }
476 } 464 }
477 -</style>  
  465 +</style>
  1 +<template>
  2 + <el-row id="me">
  3 + <el-col :span="24" id="menu" >
  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>
  25 + <div class="dropdown_1column">
  26 + <ul class="simple">
  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>
  34 + </ul>
  35 + </div>
  36 + </li>
  37 + <li><a href="" class="drop">增值服务</a>
  38 + <div class="dropdown_1column">
  39 + <ul class="simple">
  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>
  47 + </ul>
  48 + </div>
  49 + </li>
  50 +
  51 + </ul>
  52 + </el-col>
  53 + </el-row>
  54 +
  55 +</template>
  56 +
  57 +<script>
  58 + export default {
  59 + name: "NaBar"
  60 + }
  61 +</script>
  62 +
  63 +<style scoped>
  64 + /*去除序列点*/
  65 + li{
  66 + list-style-type: none;
  67 + }
  68 + a{font-size: 13px;}
  69 +
  70 + /*菜单栏底层div*/
  71 + #menu,#menu2 {
  72 + height: 50px;
  73 + border-bottom: 3px solid rgb(111,130,148);
  74 + position:relative;
  75 + z-index: 999;
  76 + }
  77 + /*一级菜单栏样式*/
  78 + #menu li{
  79 + float: right;
  80 + width: 120px;
  81 + height: 50px;
  82 + text-align: center;
  83 + /*position:relative;*/
  84 + border:none;
  85 + }
  86 + /*一级菜单栏字体*/
  87 + #menu li a {
  88 + font-size:13px;
  89 + display:block;
  90 + /*outline:0;*/
  91 + /*删除下划线*/
  92 + text-decoration:none;
  93 + }
  94 + /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
  95 + #menu li:hover .dropdown_1column {
  96 + right: 2px;
  97 + left: auto;
  98 + top:45px;
  99 + font-size:13px;
  100 + color:#ffffff;
  101 + }
  102 + /*二级菜单栏样式*/
  103 + .dropdown_1column{
  104 + position: absolute;
  105 + left: -999em;
  106 + background: rgb(14,119,238);
  107 + display: table;
  108 + text-align: center;
  109 + }
  110 + /*鼠标移至二级菜单栏颜色改变*/
  111 + #menu li:hover div li:hover{background-color: rgb(18,170,255)}
  112 + /*二级菜单栏样式*/
  113 + #menu li ul li {
  114 + font-size:13px;
  115 + line-height:45px;
  116 + }
  117 +
  118 +</style>
  119 +
@@ -12,12 +12,12 @@ @@ -12,12 +12,12 @@
12 </el-col> 12 </el-col>
13 </el-row> 13 </el-row>
14 <el-row type="flex" class="row-bg" justify="center"> 14 <el-row type="flex" class="row-bg" justify="center">
15 - <el-col :span="4" > 15 + <el-col :span="5" >
16 <el-input placeholder="必填" v-model="flightno"> 16 <el-input placeholder="必填" v-model="flightno">
17 <template slot="prepend">航班号</template> 17 <template slot="prepend">航班号</template>
18 </el-input> 18 </el-input>
19 </el-col> 19 </el-col>
20 - <el-col :span="4" style="margin-left: 20px"> 20 + <el-col :span="5" style="margin-left: 20px">
21 <el-date-picker 21 <el-date-picker
22 v-model="flight.flightdate" 22 v-model="flight.flightdate"
23 type="date" 23 type="date"
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 placeholder="选择日期"> 25 placeholder="选择日期">
26 </el-date-picker> 26 </el-date-picker>
27 </el-col> 27 </el-col>
28 - <el-col :span="4" style="margin-left: 55px"> 28 + <el-col :span="5" style="margin-left: 55px">
29 <el-select 29 <el-select
30 :remote-method="remoteMethodAirport" 30 :remote-method="remoteMethodAirport"
31 :loading="listLoading" 31 :loading="listLoading"
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 </el-option> 45 </el-option>
46 </el-select> 46 </el-select>
47 </el-col> 47 </el-col>
48 - <el-col :span="4" style="margin-left: 20px"> 48 + <el-col :span="5" style="margin-left: 20px">
49 <el-select 49 <el-select
50 :remote-method="remoteMethodAirport" 50 :remote-method="remoteMethodAirport"
51 :loading="listLoading" 51 :loading="listLoading"
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 <el-row> 74 <el-row>
75 <el-col :span="4" :offset="10"> 75 <el-col :span="4" :offset="10">
76 <div class="grid-content"> 76 <div class="grid-content">
77 - <el-button type="primary" @click="nstep">下一步</el-button> 77 + <el-button type="primary" size="medium" style="width: 100px" @click="nstep">下一步</el-button>
78 </div> 78 </div>
79 </el-col> 79 </el-col>
80 </el-row> 80 </el-row>
@@ -7,11 +7,35 @@ Vue.use(Vuex) @@ -7,11 +7,35 @@ Vue.use(Vuex)
7 7
8 // 应用初始状态 8 // 应用初始状态
9 const state = { 9 const state = {
10 - count: 10 10 + count: 10,
  11 + openTab:[],//所有打开的路由
  12 + activeIndex: '/main' //激活状态
11 } 13 }
12 14
13 // 定义所需的 mutations 15 // 定义所需的 mutations
14 const mutations = { 16 const mutations = {
  17 + // 添加tabs
  18 + add_tabs (state, data) {
  19 + this.state.openTab.push(data);
  20 + },
  21 + set_tabs(state,value){
  22 + this.state.openTab= value;
  23 + },
  24 + // 删除tabs
  25 + delete_tabs (state, route) {
  26 + let index = 0;
  27 + for (let option of state.openTab) {
  28 + if (option.route === route) {
  29 + break;
  30 + }
  31 + index++;
  32 + }
  33 + this.state.openTab.splice(index, 1);
  34 + },
  35 + // 设置当前激活的tab
  36 + set_active_index (state, index) {
  37 + this.state.activeIndex = index;
  38 + },
15 INCREMENT(state) { 39 INCREMENT(state) {
16 state.count++ 40 state.count++
17 }, 41 },
@@ -26,4 +50,4 @@ export default new Vuex.Store({ @@ -26,4 +50,4 @@ export default new Vuex.Store({
26 getters, 50 getters,
27 state, 51 state,
28 mutations 52 mutations
29 -})  
  53 +})