mt-ck-00a/mt-ck-wms-ui
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
朱文强
2022-06-29 13:31:49 +08:00
parent 47895cfcf5
commit 8d0c0feb72
27 changed files with 428 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/layout/components/AppMain.vue
View File

@@ -1,3 +1,10 @@
<!--
* @Author: zwq
* @Date: 2021-09-18 16:09:08
* @LastEditors: zwq
* @LastEditTime: 2022-06-29 10:02:58
* @Description:
-->
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
@@ -24,26 +31,26 @@ export default {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
/* 64= navbar 64 */
min-height: calc(100vh - 64px);
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header+.app-main {
padding-top: 50px;
padding-bottom: 50px;
padding-top: 64px;
// padding-bottom: 64px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
/* 84 = navbar + tags-view = 64 + 34 */
min-height: calc(100vh - 31px);
}
.fixed-header+.app-main {
padding-top: 84px;
padding-top: 96px;
}
}
</style>

24
src/layout/components/Footerbar.vue
View File

@@ -1,8 +1,8 @@
<!--
* @Author: your name
* @Date: 2021-01-27 10:07:42
* @LastEditTime: 2021-03-02 10:11:08
* @LastEditors: gtz
* @LastEditTime: 2022-06-29 10:03:35
* @LastEditors: zwq
* @Description: In User Settings Edit
* @FilePath: \mt-bus-fe\src\layout\components\FooterBar.vue
-->
@@ -24,14 +24,18 @@ export default {
<style lang="scss">
.footerbar{
position: fixed;
bottom: 0;
// position: fixed;
// bottom: 0;
width: 100%;
height: 50px;
line-height: 50px;
text-indent: 2em;
background: #fff;
z-index: 999;
box-shadow: 2px -2px 2px rgba($color: #000000, $alpha: .1);
height: 20px;
// line-height: 50px;
// text-indent: 2em;
// background: #fff;
// z-index: 999;
// box-shadow: 2px -2px 2px rgba($color: #000000, $alpha: .1);
text-align: center;
font-size: 12px;
color: #C7C7C7;
margin: 5px 0;
}
</style>

201
src/layout/components/Navbar.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="navbar">
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
<hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<div v-if="showTitle" style="font-size: 20px; float: left; font-weight: bold; padding-left: 20px; color: #606266">
<img src="../../assets/img/cnbm.png" style="width: 1.6em; height: 1.6em; position: relative; top: .4em" alt="">
<div v-if="showTitle" style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px">
<img src="../../assets/img/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt="">
{{ 'title' | i18nFilter }}
</div>
@@ -11,35 +11,68 @@
<div class="right-menu">
<!-- <div v-if="showhome" class="right-menu-back" @click="toHome">
<svg-icon class="item-icon" icon-class="home" />
<div v-if="showhome" class="right-menu-back" @click="toHome">
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
{{ 'navbar.homepage' | i18nFilter }}
</div> -->
</div>
<el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
<el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
</el-badge>
</el-dropdown>
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'countdown' : 'countdown2'" />
{{ formatTime }}
</div>
<template>
<lang-select class="right-menu-item hover-effect" />
<lang-select :style="showTitle ? 'color: #fff' : ''" class="right-menu-item hover-effect" :is-show="showTitle" />
</template>
<div v-if="showhome" class="right-menu-back">
<a href="Lodap.zip"><i class="el-icon-download" /></a>
<a href="Lodap.zip"><svg-icon style="width: 24px; height: 24px; vertical-align: -7px" icon-class="download" /></a>
</div>
<!-- <div class="right-menu-back">
<i class="el-icon-alarm-clock" />
{{ formatTime }}
<!-- <div class="right-menu-back" style="color: #fff" @click="$router.push({name: 'VisualCreate'})">
可视化配置
</div> -->
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<!-- <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
<svg-icon class="item-icon" icon-class="ntp" />
{{ showDay }}
{{ showTime }}
</div> -->
<el-dropdown :style="showTitle ? 'color: #fff' : 'color: #000'" class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="require('@/assets/img/head.png')" class="user-avatar">
<!-- <div class="avatar-username">{{ username }}</div> -->
<div class="avatar-username" :title="username">{{ username }}</div>
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length>0?roles[0]:'' }}</div>
<!-- <i class="el-icon-caret-bottom" /> -->
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/profile/index">
<el-dropdown-item>
<svg-icon class="item-icon" icon-class="user" />
{{ 'navbar.profile' | i18nFilter }}
</el-dropdown-item>
</router-link>
<el-dropdown-item @click.native="toHome">
<svg-icon class="item-icon" icon-class="help" />
{{ 'navbar.help' | i18nFilter }}
</el-dropdown-item>
<el-dropdown-item @click.native="logout">
<svg-icon class="item-icon" icon-class="logout" />
{{ 'navbar.logOut' | i18nFilter }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <div class="right-menu-back">
<el-tooltip class="item" effect="dark" placement="top">
<div slot="content">
{{ 'navbar.copyright' | i18nFilter }}<br>
{{ 'navbar.versionNum' | i18nFilter }}：v3.0
</div>
<el-button type="text">
<svg-icon icon-class="black-info" />
</el-button>
</el-tooltip>
</div> -->
<!-- <div class="right-menu-back" @click="toHome">
<svg-icon class="item-icon" icon-class="help" />
{{ 'navbar.help' | i18nFilter }}
@@ -49,6 +82,13 @@
<svg-icon class="item-icon" icon-class="logout" />
{{ 'navbar.logOut' | i18nFilter }}
</div> -->
<div :style="showTitle ? 'borderColor: #fff' : 'borderColor: #979797'" class="right-menu-back verticalBar" />
<div :style="showTitle ? 'color: #fff' : 'color: red'" class="right-menu-back">
<el-tooltip class="item" effect="dark" placement="bottom-end">
<div slot="content">{{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }} <br>{{ 'copyright.version' | i18nFilter }}：3.0</div>
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'introduce' : 'introduce2'" />
</el-tooltip>
</div>
</div>
</div>
</template>
@@ -56,12 +96,15 @@
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
// import { getAlarmNum, getEqAlarmNum, getMESAlarmNum } from '@/api/team-manage/team'
// import { downLoadTime } from '@/api/user'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import moment from 'moment'
let logoutInterval = null
const timeInterval = null
export default {
components: {
@@ -86,8 +129,16 @@ export default {
data() {
return {
logoutTime: 1800000,
alarmList: [],
blurTime: null
alarmNum: 0,
eqAlarmNum: 0,
MESAlarmNum: 0,
blurTime: null,
time: 30,
showTime: '',
showDay: '',
m: '',
s: '',
h: ''
}
},
computed: {
@@ -95,7 +146,8 @@ export default {
'sidebar',
'avatar',
'username',
'choicepart'
'choicepart',
'roles'
]),
formatTime() {
return moment(this.logoutTime - 28800000).format('HH:mm:ss')
@@ -106,21 +158,31 @@ export default {
if (val <= 0) {
this.logout()
}
},
$route: function() {
this.getAlarm()
}
},
created() {
// this.getTime()
},
mounted() {
this.getAlarm()
logoutInterval = setInterval(() => {
this.logoutTime -= 1000
}, 1000)
addEventListener('click', this.logoutTimeReset)
addEventListener('keydown', this.logoutTimeReset)
addEventListener('visibilitychange', this.visibilitychangeListener)
},
destroyed() {
clearInterval(logoutInterval)
clearInterval(timeInterval)
removeEventListener('click', this.logoutTimeReset)
removeEventListener('keydown', this.logoutTimeReset)
removeEventListener('visibilitychange', this.visibilitychangeListener)
},
methods: {
// 浏览器失去焦点
winBlur() {
this.blurTime = new Date()
clearInterval(logoutInterval)
@@ -138,7 +200,7 @@ export default {
},
// 重置退出时间
logoutTimeReset() {
this.logoutTime = 1800000
this.logoutTime = this.time * 60000
},
visibilitychangeListener() {
if (document.hidden) {
@@ -169,21 +231,47 @@ export default {
async toHome() {
this.$store.dispatch('app/setChoicepart')
this.$router.push('/')
},
getAlarm() {
// getAlarmNum().then(response => {
// if (response.data) {
// this.alarmNum = response.data.alarmNum
// } else {
// this.alarmNum = 0
// }
// })
// getEqAlarmNum().then(response => {
// if (response.data) {
// this.eqAlarmNum = response.data.alarmNum
// } else {
// this.eqAlarmNum = 0
// }
// })
// getMESAlarmNum().then(response => {
// if (response.data) {
// this.MESAlarmNum = response.data.alarmNum
// } else {
// this.MESAlarmNum = 0
// }
// })
}
}
}
</script>
<style lang="scss" scoped>
.time-menu {
display: inline-block;
}
.navbar {
height: 50px;
height: 48px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {
line-height: 46px;
line-height: 48px;
height: 100%;
float: left;
cursor: pointer;
@@ -207,7 +295,7 @@ export default {
.right-menu {
float: right;
height: 100%;
line-height: 50px;
line-height: 48px;
position: relative;
&:focus {
outline: none;
@@ -220,7 +308,6 @@ export default {
padding: 0 8px;
text-align: center;
cursor: pointer;
color: #606266;
}
.right-menu-item {
@@ -240,27 +327,52 @@ export default {
}
}
}
.verticalBar {
height: 32px;
width: 0;
opacity: 0.49;
padding: 0;
border-right: 1px solid #fff;
position: relative;
top: -8px;
}
.avatar-container {
margin-right: 20px;
.avatar-wrapper {
margin-top: 5px;
padding-top: 9px;
position: relative;
width: 140px;
height: 48px;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
width: 32px;
height: 32px;
border-radius: 16px;
}
.avatar-username {
display: inline-block;
position: relative;
top: -14px;
width: 80px;
text-align: center;
position: absolute;
font-size: 14px;
right: 13px;
top: 3px;
line-height: 25px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.avatar-roles{
width: 80px;
text-align: center;
position: absolute;
font-size: 14px;
top: 20px;
right: 13px;
line-height: 25px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0.64;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
@@ -272,4 +384,19 @@ export default {
}
}
}
.dropdown-badge {
background: #ff4949;
color: #fff;
line-height: 16px;
border-radius: 8px;
padding: 0 8px;
float: right;
margin-left: 5px;
position: relative;
top: 7px;
}
.navbar-alarmbox {
text-align: center;
cursor: pointer;
}
</style>

28
src/layout/components/Sidebar/Logo.vue
View File

@@ -1,9 +1,9 @@
<!--
* @Author: gtz
* @Date: 2021-01-27 10:07:42
* @LastEditors: gtz
* @LastEditTime: 2021-03-12 17:07:14
* @Description: file content
* @Author: zwq
* @Date: 2022-05-12 13:49:54
* @LastEditors: zwq
* @LastEditTime: 2022-06-29 10:04:49
* @Description:
-->
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
@@ -14,7 +14,7 @@
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo">
<h1 :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
<h3 :style="{fontSize}" class="sidebar-title">{{ title }} </h3>
</router-link>
</transition>
</div>
@@ -58,9 +58,9 @@ export default {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
height: 48px;
line-height: 48px;
background: #001529;
padding-left: 10px;
overflow: hidden;
@@ -69,8 +69,8 @@ export default {
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
width: 36px;
height: 36px;
vertical-align: middle;
margin-right: 12px;
}
@@ -79,13 +79,13 @@ export default {
display: inline-block;
margin: 0;
color: #fff;
width: 240px;
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-weight: 500;
line-height: 50px;
font-size: 14px;
font-size: 12px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}

6
src/layout/components/Sidebar/index.vue
View File

@@ -1,14 +1,14 @@
<!--
* @Author: your name
* @Date: 2021-01-27 10:07:42
* @LastEditTime: 2021-12-22 16:06:25
* @LastEditTime: 2022-06-29 10:13:09
* @LastEditors: zwq
* @Description: In User Settings Edit
* @FilePath: \mt-bus-fe\src\layout\components\Sidebar\index.vue
-->
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :font-size="language === 'en' ? '16px' : '12px'" :title="'title' | i18nFilter" :collapse="isCollapse" />
<div :class="{'has-logo':showLogo}" style="padding-bottom: 48px">
<logo v-if="showLogo" font-size="16px" :title="'title' | i18nFilter" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"

74
src/layout/components/TagsView/index.vue
View File

@@ -45,8 +45,8 @@ export default {
return this.$store.state.tagsView.visitedViews
},
routes() {
return this.$store.state.permission.routes
// return []
// return this.$store.state.permission.routes
return []
}
},
watch: {
@@ -201,45 +201,50 @@ export default {
<style lang="scss" scoped>
.tags-view-container {
height: 34px;
height: 40px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
// border-bottom: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
height: 24px;
line-height: 24px;
border: 1px solid #F4F4F4;
color: rgba(0, 0, 0, 0.45);
background: #F4F4F4;
border-radius: 4px;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
margin-top: 8px;
&:first-of-type {
margin-left: 15px;
margin-left: 32px;
}
&:last-of-type {
margin-right: 15px;
}
&:hover {
color: rgba(89, 89, 89, 1);
background: #EFEFEF;
}
&.active {
background-color: #42b983;
background-color: #3E8EF7;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
border-color: #3E8EF7;
// &::before {//选中的tags前面的小白点
// content: '';
// background: #fff;
// display: inline-block;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// position: relative;
// margin-right: 2px;
// }
}
}
}
@@ -254,7 +259,7 @@ export default {
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
// box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
@@ -279,15 +284,16 @@ export default {
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
vertical-align: -1px;
// &:before {
// transform: scale(.6);
// display: inline-block;
// vertical-align: -3px;
// }
// &:hover {
// background-color: #b4bccc;
// color: #fff;
// }
}
}
}

15
src/layout/index.vue
View File

@@ -8,17 +8,17 @@
<tags-view v-if="needTagsView" />
</div>
<app-main />
<right-panel v-if="showSettings">
<!-- 右下角设置按钮 -->
<!-- <right-panel v-if="showSettings">
<settings />
</right-panel>
</right-panel> -->
<footerbar />
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView, Footerbar } from './components'
import { AppMain, Navbar, Sidebar, TagsView, Footerbar } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
@@ -27,8 +27,8 @@ export default {
components: {
AppMain,
Navbar,
RightPanel,
Settings,
// RightPanel,
// Settings,
Sidebar,
TagsView,
Footerbar
@@ -66,8 +66,9 @@ export default {
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
// height: 100%;
width: 100%;
background-color: #F2F4F9;
&.mobile.openSidebar {
position: fixed;