Skip to content

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

调整

parent 2f21b1be
Show whitespace changes
Inline Side-by-side
Showing with 64 additions and 110 deletions
src/layout/header-aside/layout.vue
View file @ 75f3d0fa
<template> <template>
<div <div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{ grayMode: grayActive }">
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" flex-box="0" style="margin-left:30px"> <div class="logo-group" :style="{width: asideWidth}" flex-box="0">
<img src="./imgs/train.png" style="width:50px;height:50px" /> <img src="./imgs/train.png">
<img src="./imgs/energy_text.png" /> <img src="./imgs/logo2x.png">
</div> </div>
<div style="width: 100%"> <div style='width:100%;'>
<div flex-box="1"></div> <div flex-box="1"></div>
<!-- 顶栏右侧 --> <!-- 顶栏右侧 -->
<div class="d2-header-right"> <div class="d2-header-right">
<div <div class="time-container">
class="time-container"
style="padding-right: 26px; text-align: unset"
>
<div class="current-time">{{ time | formatDate }}</div> <div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div> <div class="current-date">{{ time | formatDate2 }}</div>
</div> </div>
<div class="subway-container" style="margin-right:43px"> <div class="weather-container">
<div class="subway-info" style="transform: rotate(180deg)"> <div class="user-img">室内</div>
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{ <div class="weather-info">
station <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
}}</span> --> <span>温度 20℃</span>
<span>湿度 60%</span>
</div> </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>
<div <div class="weather-container">
style=" <div class="user-img">室外</div>
font-size: 12px; <div class="weather-info">
color: #fff; <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
position: relative; <span>温度 20℃</span>
left: -8px; <span>湿度 60%</span>
"
>
<div>温度:20℃</div>
<div>湿度:60%</div>
</div> </div>
</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> </div>
<div class="subway-container" > </el-badge> -->
<div class="subway-info" style="transform: rotate(180deg)"> <d2-header-user />
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{ <div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
station <img src="./imgs/out.png" />
}}</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>
</div> </div>
</div> </div>
</div> </div>
...@@ -103,15 +50,10 @@ ...@@ -103,15 +50,10 @@
<!-- 下面 主体 --> <!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex> <div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 --> <!-- 主体 侧边栏 -->
<div <div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{
flex-box="0" width:asideWidth,
ref="aside" opacity: this.searchActive ? 0.5 : 1
class="d2-theme-container-aside" }">
:style="{
width: asideWidth,
opacity: this.searchActive ? 0.5 : 1,
}"
>
<d2-menu-side /> <d2-menu-side />
</div> </div>
<!-- 主体 --> <!-- 主体 -->
...@@ -130,7 +72,7 @@ ...@@ -130,7 +72,7 @@
</transition> </transition>
</div> </div>
</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 Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX 电话：86-028-689XXXX 传真：86-028-6893XXXX
</div> </div>
...@@ -150,6 +92,7 @@ export default { ...@@ -150,6 +92,7 @@ export default {
'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() { data() {
return { return {
...@@ -279,8 +222,8 @@ export default { ...@@ -279,8 +222,8 @@ export default {
} }
.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;
...@@ -298,17 +241,24 @@ export default { ...@@ -298,17 +241,24 @@ export default {
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 {
width: 37px;
height: 36px;
line-height: 37px;
text-align: center;
font-size: 14px;
color: #A0A8B4;
border: 1px solid #A0A8B4;
border-radius: 50%;
img { img {
width: 37px; width: 37px;
height: 36px; height: 36px;
...@@ -316,18 +266,17 @@ export default { ...@@ -316,18 +266,17 @@ export default {
} }
} }
.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;
transform: translateX(-19px);
span { span {
display: inline-block; display: inline-block;
height: 36px; text-indent: 25px;
padding-top: 2px;
padding-right: 16px;
font-size: 12px; font-size: 12px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
...@@ -367,12 +316,17 @@ export default { ...@@ -367,12 +316,17 @@ export default {
.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;
padding: 0 20px 0 10px;
width: 300px; width: 300px;
vertical-align: middle; display: flex;
img {
padding-left: 20px;
height: 36px;
&:last-child {
padding-left: 10px;
}
}
} }
.mfooter { .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