Skip to content

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

样式

parent 042b70f6
Show 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;
}
// ~~~
.margin-lr-20 {
margin: 0 20px;
}
......@@ -146,3 +149,7 @@ $el-bg-color-4: #F2F6FC;
color: #4ECB74;
}
// 首页菜单选中
.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;
// 侧边栏上的文字颜色
$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 时
$theme-aside-item-color-hover: #2f74ff;
$theme-aside-item-background-color-hover: rgba(#FFF, .5);
$theme-aside-item-color-hover: rgba(#fff,1);
$theme-aside-item-background-color-hover: rgba(#21ACFC, .9);
// 侧边栏上的项目在 focus 时
$theme-aside-item-color-focus: #2f74ff;
$theme-aside-item-color-focus: #21ACFC;
$theme-aside-item-background-color-focus: rgba(#FFF, .5);
// 侧边栏上的项目在 active 时
$theme-aside-item-color-active: #2f74ff;
$theme-aside-item-background-color-active: rgba(#FFF, .5);
$theme-aside-item-color-active: #fff;
// $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;
......
src/assets/style/theme/theme.scss
View file @ 46ed3c31
......@@ -206,7 +206,7 @@
}
&:hover {
color: $theme-aside-item-color-hover;
background: $theme-aside-item-background-color-hover;
background: $theme-aside-item-background-color-hover !important;
i {
color: $theme-aside-item-color-hover;
}
......@@ -220,7 +220,7 @@
}
&.is-active {
color: $theme-aside-item-color-active;
background: $theme-aside-item-background-color-active;
background: $theme-aside-item-background-color-active !important;
i {
color: $theme-aside-item-color-active;
}
......@@ -230,7 +230,7 @@
.el-submenu {
.el-submenu__title {
color: $theme-aside-item-color;
background: $theme-aside-item-background-color;
background:$theme-aside-item-color-active;
i {
color: $theme-aside-item-color;
}
......
src/layout/header-aside/components/header-user/index.vue
View file @ 46ed3c31
<template>
<div >
<div>
<div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;">
<img src="../../imgs/user.png" alt="">
<div class="user-info">
<span class="item" style='margin-top:2px;'>{{info.userName}}</span>
<span class="item">{{info.name}}</span>
</div>
<img src="../../imgs/user.png" alt="">
</div>
<!-- <span class="btn-text">你好， {{info.name}}</span>
<el-dropdown-menu slot="dropdown">
......@@ -19,9 +19,7 @@
注销
</el-dropdown-item>
</el-dropdown-menu> -->
<el-dialog title="修改密码"
:visible.sync="editPaswDialog" @close="closeEditPasw"
width="50%">
<el-dialog title="修改密码" :visible.sync="editPaswDialog" @close="closeEditPasw" width="50%">
<div slot='title' class="title-bold">
<span>修改密码</span>
</div>
......@@ -29,13 +27,13 @@
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="editPasForm.username" disabled></el-input>
</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-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-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-form-item>
</el-form>
......@@ -79,11 +77,14 @@ export default {
fromrule: {
newpas: [
{ validator: validatePassword, trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 50 个字符', trigger: 'blur' }
{
min: 1,
max: 30,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
}
],
pwd: [
{ validator: validateComfirmPassword, trigger: 'blur' }
]
pwd: [{ validator: validateComfirmPassword, trigger: 'blur' }]
}
}
},
......@@ -91,18 +92,14 @@ export default {
this.editPasForm.username = this.info.name
},
computed: {
...mapState('d2admin/user', [
'info'
])
...mapState('d2admin/user', ['info'])
},
methods: {
...mapActions('d2admin/account', [
'logout'
]),
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff () {
logOff() {
this.logout({
vm: this,
confirm: true
......@@ -118,7 +115,7 @@ export default {
})
},
saveEditPas() {
this.$refs.editPasRef.validate(valid => {
this.$refs.editPasRef.validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('/sys/user/password'),
......@@ -168,29 +165,31 @@ export default {
}
</script>
<style lang="scss" scoped>
.user-warp{
.user-info{
width: 84px;
.user-warp {
.user-info {
width: 93px;
height: 36px;
background: url(../../imgs/subwayBg.png);
background-size: 100% 100%;
text-align:center;
border: 1px solid;
border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transform: translateX(-19px);
text-align: center;
text-indent: 10px;
opacity: 0;
float: right;
z-index: -3;
margin-right:-84px;
transition:all .3s ease;
-webkit-transition: all .3s ease;
.item{
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
.item {
display: block;
padding-right:10px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
}
}
}
}
.user-warp:hover .user-info{
opacity: 1;
......@@ -198,5 +197,4 @@ export default {
z-index: 1;
}
</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
......@@ -7,6 +7,7 @@
<!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0" flex>
<div class="logo-group" :style="{width: asideWidth}" flex-box="0">
<img src="./imgs/train.png">
<img src="./imgs/logo2x.png">
</div>
<div style='width:100%;'>
......@@ -17,18 +18,28 @@
<div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div>
</div>
<div class="subway-container">
<div class="subway-info">
<span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span>
<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 class="user-img"><img src="./imgs/subway.png" /></div>
</div>
<d2-header-theme />
<el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
<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">
<img src="./imgs/msg.png" />
</div>
</el-badge>
</el-badge> -->
<d2-header-user />
<div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
<img src="./imgs/out.png" />
......@@ -51,7 +62,7 @@
<transition name="fade-scale">
<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> -->
<keep-alive :include="keepAlive">
<router-view />
......@@ -81,6 +92,7 @@ export default {
'd2-menu-header': () => import('./components/menu-header'),
'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user')
},
data() {
return {
......@@ -210,8 +222,8 @@ export default {
}
.time-container {
width: 93px;
text-align: right;
// border:1px solid red;
text-align: center;
// border:1px solid red;
padding: 2px;
.current-time {
font-size: 18px;
......@@ -229,17 +241,24 @@ export default {
margin-right: 10px;
img {
width: 37px;
height: 36px;
height: 37px;
vertical-align: middle;
}
}
.subway-container {
.weather-container {
display: flex;
align-items: center;
margin-right: 10px;
.user-img {
width: 37px;
height: 36px;
line-height: 37px;
text-align: center;
font-size: 14px;
color: #A0A8B4;
border: 1px solid #A0A8B4;
border-radius: 50%;
img {
width: 37px;
height: 36px;
......@@ -247,18 +266,17 @@ export default {
}
}
.subway-info {
width: 84px;
.weather-info {
width: 90px;
height: 36px;
background: url(./imgs/subwayBg.png);
background-size: 100% 100%;
transform: translateX(12px);
text-align: right;
border:1px solid;
border-color: #A0A8B4 #A0A8B4 #A0A8B4 transparent;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transform: translateX(-19px);
span {
display: inline-block;
height: 36px;
padding-top: 2px;
padding-right: 16px;
text-indent: 25px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
......@@ -298,12 +316,17 @@ export default {
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-header
.logo-group
img {
height: 40px;
padding: 0 20px 0 10px;
.logo-group {
height: 36px;
width: 300px;
vertical-align: middle;
display: flex;
img {
padding-left: 20px;
height: 36px;
&:last-child {
padding-left: 10px;
}
}
}
.mfooter {
......
src/pages/analysis/fault/index.vue
View file @ 46ed3c31
<template lang='pug'>
card-warp(title="故障报警分析")
div(slot="right")
span 时间范围：
el-date-picker.margin-lr-20(
card-warp(title="故障报警分析" height='45px' showBackground)
div(slot="content")
el-form(:inline='true' size="mini" )
el-form-item(label='时间范围：')
el-date-picker(
size='mini'
v-model="dateValue",
type="daterange",
......@@ -14,7 +15,6 @@ card-warp(title="故障报警分析")
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
div(slot="content")
.echartsWarp(width="100%", flex)
//- div
//- .title 设备故障统计
......@@ -98,7 +98,7 @@ export default {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 260px);
height: calc(100vh - 280px);
> div {
width: 47%;
// height: calc(90% / 2);
......
src/pages/analysis/indoor/index.vue
View file @ 46ed3c31
<template lang="pug">
card-warp(title="室内气象分析" height='45px' )
card-warp(title="室内气象分析" height='45px' showBackground)
div(slot="right")
//- span 时间范围：
//- el-date-picker.margin-lr-20(
......
src/pages/analysis/outdoor/index.vue
View file @ 46ed3c31
<template lang="pug">
card-warp(title="室外气象分析" height='45px' )
card-warp(title="室外气象分析" height='45px' showBackground)
div(slot="right")
router-link.margin-lr-20(:to="{name:'kb-indoor'}")
el-button(size='mini' type='primary') 图形 / 列表
//- router-link.margin-lr-20(:to="{name:'kb-indoor'}")
//- el-button(size='mini' type='primary') 图形 / 列表
div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
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 )
el-button(type='primary' size='mini') 查询
.data-warp
div.data-item
p.type 温度
p.color-blue
div.type 温度
div.color-blue
span.num 37
span.unit ℃
div.data-item
p.type 湿度
p.color-cyan
div.type 湿度
div.color-cyan
span.num 25
span.unit %RH
div.data-item()
p.type CO2
p.color-green
div.type CO2
div.color-green
span.num 17
span.unit PPM
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: {
border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{
height: 19px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 60px;
padding-top: 38px;
}
.num{
height: 28px;
font-size: 36px;
font-family: PingFang SC;
font-weight: 600;
color: #21ACFC;
line-height: 60px;
padding-top: 12px;
}
.unit{
height: 15px;
......
src/pages/kb/outdoor/index.vue
View file @ 46ed3c31
......@@ -12,9 +12,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
el-button(type='primary' size='mini') 查询
.data-warp
div.data-item(v-for='item in typeList')
p.type {{item.type}}
p.color-blue
span.num mock
div.type {{item.type}}
div.color-blue
span.num sss
span.unit 11
div.clearfix
el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
......@@ -149,24 +149,21 @@ export default {
border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{
height: 19px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 60px;
padding-top: 38px;
}
.num{
height: 28px;
font-size: 36px;
font-family: PingFang SC;
font-weight: 600;
color: #21ACFC;
line-height: 60px;
// padding-top: 26px;
}
.unit{
height: 15px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
......
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