Skip to content

E
energyai_vue
Commit 46ed3c31 authored by xiexingan's avatar xiexingan
Browse files
Options

样式

parent 042b70f6
Hide whitespace changes
Inline Side-by-side
Showing with 391 additions and 365 deletions
src/assets/style/public.scss
View file @ 46ed3c31
...@@ -129,6 +129,9 @@ $el-bg-color-4: #F2F6FC; ...@@ -129,6 +129,9 @@ $el-bg-color-4: #F2F6FC;
} }
// ~~~
.margin-lr-20 { .margin-lr-20 {
margin: 0 20px; margin: 0 20px;
} }
...@@ -145,4 +148,8 @@ $el-bg-color-4: #F2F6FC; ...@@ -145,4 +148,8 @@ $el-bg-color-4: #F2F6FC;
.color-green { .color-green {
color: #4ECB74; color: #4ECB74;
} }
\ No newline at end of file // 首页菜单选中
.theme-d2 .d2-theme-container .d2-theme-container-aside .d2-layout-header-aside-menu-side>.el-menu> .el-menu-item:first-child{
background: transparent ;
}
src/assets/style/theme/d2/setting.scss
View file @ 46ed3c31
...@@ -50,16 +50,19 @@ $theme-header-item-background-color-active: transparent; ...@@ -50,16 +50,19 @@ $theme-header-item-background-color-active: transparent;
// 侧边栏上的文字颜色 // 侧边栏上的文字颜色
$theme-aside-item-color: $color-text-normal; $theme-aside-item-color: $color-text-normal;
$theme-aside-item-background-color: transparent; // $theme-aside-item-background-color: transparent;
$theme-aside-item-background-color: #F2FAFF;
// 侧边栏上的项目在 hover 时 // 侧边栏上的项目在 hover 时
$theme-aside-item-color-hover: #2f74ff; $theme-aside-item-color-hover: rgba(#fff,1);
$theme-aside-item-background-color-hover: rgba(#FFF, .5); $theme-aside-item-background-color-hover: rgba(#21ACFC, .9);
// 侧边栏上的项目在 focus 时 // 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #2f74ff; $theme-aside-item-color-focus: #21ACFC;
$theme-aside-item-background-color-focus: rgba(#FFF, .5); $theme-aside-item-background-color-focus: rgba(#FFF, .5);
// 侧边栏上的项目在 active 时 // 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #2f74ff; $theme-aside-item-color-active: #fff;
$theme-aside-item-background-color-active: rgba(#FFF, .5); // $theme-aside-item-background-color-active: rgba(#FFF, .5);
$theme-aside-item-background-color-active: #21ACFC;
// 侧边栏菜单为空的时候显示的元素 // 侧边栏菜单为空的时候显示的元素
$theme-aside-menu-empty-icon-color: $color-text-normal; $theme-aside-menu-empty-icon-color: $color-text-normal;
......
src/assets/style/theme/theme.scss
View file @ 46ed3c31
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
} }
&:hover { &:hover {
color: $theme-aside-item-color-hover; color: $theme-aside-item-color-hover;
background: $theme-aside-item-background-color-hover; background: $theme-aside-item-background-color-hover !important;
i { i {
color: $theme-aside-item-color-hover; color: $theme-aside-item-color-hover;
} }
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
} }
&.is-active { &.is-active {
color: $theme-aside-item-color-active; color: $theme-aside-item-color-active;
background: $theme-aside-item-background-color-active; background: $theme-aside-item-background-color-active !important;
i { i {
color: $theme-aside-item-color-active; color: $theme-aside-item-color-active;
} }
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
.el-submenu { .el-submenu {
.el-submenu__title { .el-submenu__title {
color: $theme-aside-item-color; color: $theme-aside-item-color;
background: $theme-aside-item-background-color; background:$theme-aside-item-color-active;
i { i {
color: $theme-aside-item-color; color: $theme-aside-item-color;
} }
......
src/layout/header-aside/components/header-user/index.vue
View file @ 46ed3c31
<template> <template>
<div > <div>
<div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;"> <div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;">
<div class="user-info"> <img src="../../imgs/user.png" alt="">
<span class="item" style='margin-top:2px;'>{{info.userName}}</span> <div class="user-info">
<span class="item">{{info.name}}</span> <span class="item" style='margin-top:2px;'>{{info.userName}}</span>
</div> <span class="item">{{info.name}}</span>
</div>
<img src="../../imgs/user.png" alt=""> </div>
</div>
<!-- <span class="btn-text">你好， {{info.name}}</span> <!-- <span class="btn-text">你好， {{info.name}}</span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="editPasword"> <el-dropdown-item @click.native="editPasword">
...@@ -19,27 +19,25 @@ ...@@ -19,27 +19,25 @@
注销 注销
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> --> </el-dropdown-menu> -->
<el-dialog title="修改密码" <el-dialog title="修改密码" :visible.sync="editPaswDialog" @close="closeEditPasw" width="50%">
:visible.sync="editPaswDialog" @close="closeEditPasw"
width="50%">
<div slot='title' class="title-bold"> <div slot='title' class="title-bold">
<span>修改密码</span> <span>修改密码</span>
</div> </div>
<el-form :model="editPasForm" :rules="fromrule" ref="editPasRef"> <el-form :model="editPasForm" :rules="fromrule" ref="editPasRef">
<el-form-item label="用户名" :label-width="formLabelWidth"> <el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="editPasForm.username" disabled></el-input> <el-input v-model="editPasForm.username" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth" > <el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth">
<el-input v-model="editPasForm.oldpsw" autocomplete="off" type='password' placeholder='请输入原密码' @input='e => editPasForm.oldpsw = inputMe(e)'></el-input> <el-input v-model="editPasForm.oldpsw" autocomplete="off" type='password' placeholder='请输入原密码' @input='e => editPasForm.oldpsw = inputMe(e)'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth" > <el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth">
<el-input v-model="editPasForm.newpas" autocomplete="off" type='password' placeholder='请输入新密码' @input='e => editPasForm.newpas = inputMe(e)'></el-input> <el-input v-model="editPasForm.newpas" autocomplete="off" type='password' placeholder='请输入新密码' @input='e => editPasForm.newpas = inputMe(e)'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth" > <el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth">
<el-input v-model="editPasForm.pwd" autocomplete="off" type='password' placeholder='请再次输入新密码' @input='e => editPasForm.pwd = inputMe(e)'></el-input> <el-input v-model="editPasForm.pwd" autocomplete="off" type='password' placeholder='请再次输入新密码' @input='e => editPasForm.pwd = inputMe(e)'></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" align='center'> <div slot="footer" align='center'>
<el-button type="primary" @click="cancel" size="medium">取 消</el-button> <el-button type="primary" @click="cancel" size="medium">取 消</el-button>
<el-button type="primary" @click="saveEditPas" size="medium">确 定</el-button> <el-button type="primary" @click="saveEditPas" size="medium">确 定</el-button>
</div> </div>
...@@ -78,12 +76,15 @@ export default { ...@@ -78,12 +76,15 @@ export default {
}, },
fromrule: { fromrule: {
newpas: [ newpas: [
{ validator: validatePassword, trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 50 个字符', trigger: 'blur' } {
min: 1,
max: 30,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
}
], ],
pwd: [ pwd: [{ validator: validateComfirmPassword, trigger: 'blur' }]
{ validator: validateComfirmPassword, trigger: 'blur' }
]
} }
} }
}, },
...@@ -91,18 +92,14 @@ export default { ...@@ -91,18 +92,14 @@ export default {
this.editPasForm.username = this.info.name this.editPasForm.username = this.info.name
}, },
computed: { computed: {
...mapState('d2admin/user', [ ...mapState('d2admin/user', ['info'])
'info'
])
}, },
methods: { methods: {
...mapActions('d2admin/account', [ ...mapActions('d2admin/account', ['logout']),
'logout'
]),
/** /**
* @description 登出 * @description 登出
*/ */
logOff () { logOff() {
this.logout({ this.logout({
vm: this, vm: this,
confirm: true confirm: true
...@@ -118,7 +115,7 @@ export default { ...@@ -118,7 +115,7 @@ export default {
}) })
}, },
saveEditPas() { saveEditPas() {
this.$refs.editPasRef.validate(valid => { this.$refs.editPasRef.validate((valid) => {
if (valid) { if (valid) {
this.$http({ this.$http({
url: this.$http.adornUrl('/sys/user/password'), url: this.$http.adornUrl('/sys/user/password'),
...@@ -146,7 +143,7 @@ export default { ...@@ -146,7 +143,7 @@ export default {
}) })
}, },
closeEditPasw() { closeEditPasw() {
this.editPaswDialog = false this.editPaswDialog = false
}, },
cancel() { cancel() {
this.$confirm('确认取消?', '修改密码', { this.$confirm('确认取消?', '修改密码', {
...@@ -155,7 +152,7 @@ export default { ...@@ -155,7 +152,7 @@ export default {
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
this.editPaswDialog = false this.editPaswDialog = false
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
...@@ -168,29 +165,31 @@ export default { ...@@ -168,29 +165,31 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-warp{ .user-warp {
.user-info {
.user-info{ width: 93px;
width: 84px;
height: 36px; height: 36px;
background: url(../../imgs/subwayBg.png); border: 1px solid;
background-size: 100% 100%; border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
text-align:center; border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transform: translateX(-19px);
text-align: center;
text-indent: 10px;
opacity: 0; opacity: 0;
float: right; float: right;
z-index: -3; z-index: -3;
margin-right:-84px; margin-right:-84px;
transition:all .3s ease; transition: all 0.3s ease;
-webkit-transition: all .3s ease; -webkit-transition: all 0.3s ease;
.item{ .item {
display: block; display: block;
padding-right:10px;
font-size: 12px; font-size: 12px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }
} }
.user-warp:hover .user-info{ .user-warp:hover .user-info{
opacity: 1; opacity: 1;
...@@ -198,5 +197,4 @@ export default { ...@@ -198,5 +197,4 @@ export default {
z-index: 1; z-index: 1;
} }
</style> </style>
src/layout/header-aside/imgs/logo2x.png
View replaced file @ 042b70f6 View file @ 46ed3c31
src/layout/header-aside/imgs/logo2x.png

31.2 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png

8.89 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
  • 2-up
  • Swipe
  • Onion skin
src/layout/header-aside/layout.vue
View file @ 46ed3c31
<template> <template>
<div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{ grayMode: grayActive }"> <div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{ grayMode: grayActive }">
<!-- 半透明遮罩 --> <!-- 半透明遮罩 -->
<div class="d2-layout-header-aside-mask"></div> <div class="d2-layout-header-aside-mask"></div>
<!-- 主体内容 --> <!-- 主体内容 -->
<div class="d2-layout-header-aside-content" flex="dir:top"> <div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 --> <!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0" flex> <div class="d2-theme-header" flex-box="0" flex>
<div class="logo-group" :style="{width: asideWidth}" flex-box="0"> <div class="logo-group" :style="{width: asideWidth}" flex-box="0">
<img src="./imgs/logo2x.png"> <img src="./imgs/train.png">
</div> <img src="./imgs/logo2x.png">
<div style='width:100%;'> </div>
<div flex-box="1"></div> <div style='width:100%;'>
<!-- 顶栏右侧 --> <div flex-box="1"></div>
<div class="d2-header-right"> <!-- 顶栏右侧 -->
<div class="time-container"> <div class="d2-header-right">
<div class="current-time">{{ time | formatDate }}</div> <div class="time-container">
<div class="current-date">{{ time | formatDate2 }}</div> <div class="current-time">{{ time | formatDate }}</div>
</div> <div class="current-date">{{ time | formatDate2 }}</div>
<div class="subway-container"> </div>
<div class="subway-info"> <div class="weather-container">
<span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> <div class="user-img">室内</div>
</div> <div class="weather-info">
<div class="user-img"><img src="./imgs/subway.png" /></div> <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
</div> <span>温度 20℃</span>
<d2-header-theme /> <span>湿度 60%</span>
<el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger"> </div>
</div>
<div class="weather-container">
<div class="user-img">室外</div>
<div class="weather-info">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
<span>温度 20℃</span>
<span>湿度 60%</span>
</div>
</div>
<!-- <d2-header-theme /> -->
<!-- <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
<div title="报警中心" style="cursor: pointer" @click="toAlarms"> <div title="报警中心" style="cursor: pointer" @click="toAlarms">
<img src="./imgs/msg.png" /> <img src="./imgs/msg.png" />
</div> </div>
</el-badge> </el-badge> -->
<d2-header-user /> <d2-header-user />
<div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff"> <div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
<img src="./imgs/out.png" /> <img src="./imgs/out.png" />
</div>
</div>
</div>
</div> </div>
<!-- 下面 主体 --> </div>
<div class="d2-theme-container" flex-box="1" flex> </div>
<!-- 主体 侧边栏 --> </div>
<div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{ <!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{
width:asideWidth, width:asideWidth,
opacity: this.searchActive ? 0.5 : 1 opacity: this.searchActive ? 0.5 : 1
}"> }">
<d2-menu-side /> <d2-menu-side />
</div> </div>
<!-- 主体 --> <!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex> <div class="d2-theme-container-main" flex-box="1" flex>
<!-- 内容 --> <!-- 内容 -->
<transition name="fade-scale"> <transition name="fade-scale">
<div class="d2-theme-container-main-layer" flex="dir:top"> <div class="d2-theme-container-main-layer" flex="dir:top">
<!-- 页面 --> <!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1" > <div class="d2-theme-container-main-body" flex-box="1">
<!-- <bim></bim> --> <!-- <bim></bim> -->
<keep-alive :include="keepAlive"> <keep-alive :include="keepAlive">
<router-view /> <router-view />
</keep-alive> </keep-alive>
</div> </div>
</div>
</transition>
</div>
</div>
<div style="z-index:9999!important;user-select:none;" class="mfooter">
Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</div> </div>
</transition>
</div> </div>
</div>
<div style="z-index:9999!important;user-select:none;" class="mfooter">
Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -74,245 +85,257 @@ import { mapState, mapGetters, mapActions } from 'vuex' ...@@ -74,245 +85,257 @@ import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search' import mixinSearch from './mixins/search'
export default { export default {
name: 'd2-layout-header-aside', name: 'd2-layout-header-aside',
mixins: [mixinSearch], mixins: [mixinSearch],
components: { components: {
'd2-menu-side': () => import('./components/menu-side'), 'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'), 'd2-menu-header': () => import('./components/menu-header'),
'd2-header-theme': () => import('./components/header-theme'), 'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user') 'd2-header-user': () => import('./components/header-user')
},
data() { },
return { data() {
drawer: false, return {
// [侧边栏宽度] 正常状态 drawer: false,
asideWidth: '256px', // [侧边栏宽度] 正常状态
// [侧边栏宽度] 折叠状态 asideWidth: '256px',
asideWidthCollapse: '65px', // [侧边栏宽度] 折叠状态
time: new Date(), asideWidthCollapse: '65px',
timer: null, time: new Date(),
logTimeout: null, timer: null,
countNum: 0, logTimeout: null,
station: '' countNum: 0,
} station: ''
}
},
mounted() {
this.getStation()
this.getDate()
this.countNum = this.size
},
filters: {
formatDate: function (value) {
let date = new Date(value)
let h = date.getHours()
h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return ` ${h}:${m}:${s}`
}, },
mounted() { formatDate2: function (value) {
this.getStation() let date = new Date(value)
this.getDate() let y = date.getFullYear()
this.countNum = this.size let MM = date.getMonth() + 1
MM = MM < 10 ? '0' + MM : MM
let d = date.getDate()
d = d < 10 ? '0' + d : d
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
// return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} `
}
},
computed: {
...mapState('d2admin', {
keepAlive: (state) => state.page.keepAlive,
grayActive: (state) => state.gray.active,
transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse
}),
...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting'
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
}
}
},
watch: {
size(val) {
this.countNum = val
}
},
methods: {
...mapActions('d2admin/menu', ['asideCollapseToggle']),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside() {
console.log(111111)
this.asideCollapseToggle()
}, },
filters: { ...mapActions('d2admin/account', ['logout']),
formatDate: function (value) { /**
let date = new Date(value) * @description 登出
let h = date.getHours() */
h = h < 10 ? '0' + h : h logOff() {
let m = date.getMinutes() this.logout({
m = m < 10 ? '0' + m : m vm: this,
let s = date.getSeconds() confirm: true
s = s < 10 ? '0' + s : s })
return ` ${h}:${m}:${s}`
},
formatDate2: function (value) {
let date = new Date(value)
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? '0' + MM : MM
let d = date.getDate()
d = d < 10 ? '0' + d : d
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
// return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} `
}
}, },
getDate() {
computed: { let _this = this
...mapState('d2admin', { this.timer = setInterval(() => {
keepAlive: (state) => state.page.keepAlive, _this.time = new Date()
grayActive: (state) => state.gray.active, }, 1000)
transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse
}),
...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting'
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
}
}
}, },
watch: { // out() {
size(val) { // this.$router.push('/')
this.countNum = val // },
toAlarms() {
this.header.forEach((res) => {
if (res.path === '/alarms') {
this.$router.push({ path: res.list[0].path })
} }
})
}, },
methods: { //读取站点名称
...mapActions('d2admin/menu', ['asideCollapseToggle']), getStation() {
/** this.station = JSON.parse(localStorage.getItem('sysSystem')).name
* 接收点击切换侧边栏的按钮 if (!this.station || this.station == 'undefined') {
*/ setTimeout(this.getStation, 3000)
handleToggleAside() { }
console.log(111111)
this.asideCollapseToggle()
},
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true
})
},
getDate() {
let _this = this
this.timer = setInterval(() => {
_this.time = new Date()
}, 1000)
},
// out() {
// this.$router.push('/')
// },
toAlarms() {
this.header.forEach((res) => {
if (res.path === '/alarms') {
this.$router.push({ path: res.list[0].path })
}
})
},
//读取站点名称
getStation() {
this.station = JSON.parse(localStorage.getItem('sysSystem')).name
if (!this.station || this.station == 'undefined') {
setTimeout(this.getStation, 3000)
}
}
} }
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.lineFeed { .lineFeed {
line-height: 36px; line-height: 36px;
padding-top: 0px !important; padding-top: 0px !important;
} }
.time-container { .time-container {
width: 93px; width: 93px;
text-align: right; text-align: center;
// border:1px solid red; // border:1px solid red;
padding: 2px; padding: 2px;
.current-time { .current-time {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.current-date { .current-date {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }
.msg-img { .msg-img {
margin-right: 10px; margin-right: 10px;
img { img {
width: 37px; width: 37px;
height: 36px; height: 37px;
vertical-align: middle; vertical-align: middle;
} }
} }
.subway-container { .weather-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 10px;
.user-img { .user-img {
img { width: 37px;
width: 37px; height: 36px;
height: 36px; line-height: 37px;
vertical-align: middle; text-align: center;
} font-size: 14px;
color: #A0A8B4;
border: 1px solid #A0A8B4;
border-radius: 50%;
img {
width: 37px;
height: 36px;
vertical-align: middle;
} }
}
.subway-info { .weather-info {
width: 84px; width: 90px;
height: 36px; height: 36px;
background: url(./imgs/subwayBg.png); border:1px solid;
background-size: 100% 100%; border-color: #A0A8B4 #A0A8B4 #A0A8B4 transparent;
transform: translateX(12px); border-top-right-radius: 5px;
text-align: right; border-bottom-right-radius: 5px;
span { transform: translateX(-19px);
display: inline-block; span {
height: 36px; display: inline-block;
padding-top: 2px; text-indent: 25px;
padding-right: 16px; font-size: 12px;
font-size: 12px; font-family: Microsoft YaHei;
font-family: Microsoft YaHei; font-weight: 400;
font-weight: 400; color: rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.75);
}
} }
}
} }
.drop-down img { .drop-down img {
transform: translateX(-15px); transform: translateX(-15px);
} }
.d2-theme-header { .d2-theme-header {
height: 90px !important; height: 90px !important;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative !important; position: relative !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
background-image: url(./imgs/d2menu2x.png); background-image: url(./imgs/d2menu2x.png);
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
// 菜单 // 菜单
.menu-header { .menu-header {
width: 100%; width: 100%;
height: 90px; height: 90px;
} }
//container //container
.d2-theme-container { .d2-theme-container {
transform: translateY(60px); transform: translateY(60px);
} }
// 注册主题 // 注册主题
@import "~@/assets/style/theme/register.scss"; @import "~@/assets/style/theme/register.scss";
// 左上角logo // 左上角logo
.d2-layout-header-aside-group .d2-layout-header-aside-group
.d2-layout-header-aside-content .d2-layout-header-aside-content
.d2-theme-header .d2-theme-header
.logo-group .logo-group {
img { height: 36px;
height: 40px; width: 300px;
padding: 0 20px 0 10px; display: flex;
width: 300px; img {
vertical-align: middle; padding-left: 20px;
height: 36px;
&:last-child {
padding-left: 10px;
}
}
} }
.mfooter { .mfooter {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
</style> </style>
src/pages/analysis/fault/index.vue
View file @ 46ed3c31
<template lang='pug'> <template lang='pug'>
card-warp(title="故障报警分析") card-warp(title="故障报警分析" height='45px' showBackground)
div(slot="right")
span 时间范围：
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
div(slot="content") div(slot="content")
el-form(:inline='true' size="mini" )
el-form-item(label='时间范围：')
el-date-picker(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
.echartsWarp(width="100%", flex) .echartsWarp(width="100%", flex)
//- div //- div
//- .title 设备故障统计 //- .title 设备故障统计
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 260px); height: calc(100vh - 280px);
> div { > div {
width: 47%; width: 47%;
// height: calc(90% / 2); // height: calc(90% / 2);
......
src/pages/analysis/indoor/index.vue
View file @ 46ed3c31
<template lang="pug"> <template lang="pug">
card-warp(title="室内气象分析" height='45px' ) card-warp(title="室内气象分析" height='45px' showBackground)
div(slot="right") div(slot="right")
//- span 时间范围： //- span 时间范围：
//- el-date-picker.margin-lr-20( //- el-date-picker.margin-lr-20(
......
src/pages/analysis/outdoor/index.vue
View file @ 46ed3c31
<template lang="pug"> <template lang="pug">
card-warp(title="室外气象分析" height='45px' ) card-warp(title="室外气象分析" height='45px' showBackground)
div(slot="right") div(slot="right")
router-link.margin-lr-20(:to="{name:'kb-indoor'}") //- router-link.margin-lr-20(:to="{name:'kb-indoor'}")
el-button(size='mini' type='primary') 图形 / 列表 //- el-button(size='mini' type='primary') 图形 / 列表
div(slot="content", style="height: 90%") div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick") el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
el-tab-pane(label="候车室区域", name="1") el-tab-pane(label="候车室区域", name="1")
......
src/pages/kb/indoor/index.vue
View file @ 46ed3c31
...@@ -14,18 +14,18 @@ card-warp(title="室内气象数据" height='45px' showBackground ) ...@@ -14,18 +14,18 @@ card-warp(title="室内气象数据" height='45px' showBackground )
el-button(type='primary' size='mini') 查询 el-button(type='primary' size='mini') 查询
.data-warp .data-warp
div.data-item div.data-item
p.type 温度 div.type 温度
p.color-blue div.color-blue
span.num 37 span.num 37
span.unit ℃ span.unit ℃
div.data-item div.data-item
p.type 湿度 div.type 湿度
p.color-cyan div.color-cyan
span.num 25 span.num 25
span.unit %RH span.unit %RH
div.data-item() div.data-item()
p.type CO2 div.type CO2
p.color-green div.color-green
span.num 17 span.num 17
span.unit PPM span.unit PPM
el-table(size="mini" :data='dataList' stripe v-loading='dataListLoading' style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }") el-table(size="mini" :data='dataList' stripe v-loading='dataListLoading' style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
...@@ -113,21 +113,19 @@ components: { ...@@ -113,21 +113,19 @@ components: {
border: 1px solid #ECECEC; border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{ .type{
height: 19px;
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 60px; padding-top: 38px;
} }
.num{ .num{
height: 28px;
font-size: 36px; font-size: 36px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 600; font-weight: 600;
color: #21ACFC; color: #21ACFC;
line-height: 60px; padding-top: 12px;
} }
.unit{ .unit{
height: 15px; height: 15px;
......
src/pages/kb/outdoor/index.vue
View file @ 46ed3c31
...@@ -12,9 +12,9 @@ card-warp(title="室外气象数据" height='45px' showBackground ) ...@@ -12,9 +12,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
el-button(type='primary' size='mini') 查询 el-button(type='primary' size='mini') 查询
.data-warp .data-warp
div.data-item(v-for='item in typeList') div.data-item(v-for='item in typeList')
p.type {{item.type}} div.type {{item.type}}
p.color-blue div.color-blue
span.num mock span.num sss
span.unit 11 span.unit 11
div.clearfix div.clearfix
el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表 el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
...@@ -149,28 +149,25 @@ export default { ...@@ -149,28 +149,25 @@ export default {
border: 1px solid #ECECEC; border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{ .type{
height: 19px;
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 60px; padding-top: 38px;
} }
.num{ .num{
height: 28px; font-size: 36px;
font-size: 36px; font-family: PingFang SC;
font-family: PingFang SC; font-weight: 600;
font-weight: 600; color: #21ACFC;
color: #21ACFC; // padding-top: 26px;
line-height: 60px; }
} .unit{
.unit{ font-size: 18px;
height: 15px; font-family: Microsoft YaHei;
font-size: 18px; font-weight: 400;
font-family: Microsoft YaHei; }
font-weight: 400;
}
} }
} }
.echartsWarp { .echartsWarp {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment