Skip to content

E
energyai_vue
Commit 75f3d0fa authored by xiexingan's avatar xiexingan
Browse files
Options

调整

parent 2f21b1be
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 110 deletions
src/layout/header-aside/layout.vue
View file @ 75f3d0fa
<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-content" flex="dir:top">
<!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0" flex>
<div class="logo-group" flex-box="0" style="margin-left:30px">
<img src="./imgs/train.png" style="width:50px;height:50px" />
<img src="./imgs/energy_text.png" />
<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%">
<div style='width:100%;'>
<div flex-box="1"></div>
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<div
class="time-container"
style="padding-right: 26px; text-align: unset"
>
<div class="time-container">
<div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div>
</div>
<div class="subway-container" style="margin-right:43px">
<div class="subway-info" style="transform: rotate(180deg)">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
station
}}</span> -->
</div>
<div style="display: flex; position: absolute">
<div
style="
background: #fff;
position: relative;
top: -1px;
left: -17px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
"
>
室内
</div>
<div
style="
font-size: 12px;
color: #fff;
position: relative;
left: -8px;
"
>
<div>温度:20℃</div>
<div>湿度:60%</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>
<div class="subway-container" >
<div class="subway-info" style="transform: rotate(180deg)">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
station
}}</span> -->
</div>
<div style="display: flex; position: absolute">
<div
style="
background: #fff;
position: relative;
top: -1px;
left: -17px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
"
>
室外
</div>
<div
style="
font-size: 12px;
color: #fff;
position: relative;
left: -8px;
"
>
<div>晴:20℃</div>
<div>湿度:60%</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">
<img src="./imgs/msg.png" />
</div>
</el-badge> -->
<d2-header-user />
<div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
<img src="./imgs/out.png" />
</div>
</div>
</div>
</div>
<!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div
flex-box="0"
ref="aside"
class="d2-theme-container-aside"
:style="{
width: asideWidth,
opacity: this.searchActive ? 0.5 : 1,
}"
>
<div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{
width:asideWidth,
opacity: this.searchActive ? 0.5 : 1
}">
<d2-menu-side />
</div>
<!-- 主体 -->
......@@ -130,7 +72,7 @@
</transition>
</div>
</div>
<div style="z-index: 9999 !important; user-select: none" class="mfooter">
<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>
......@@ -150,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 {
......@@ -279,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;
......@@ -298,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;
......@@ -316,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;
......@@ -367,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 {
......
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