Skip to content

G
gassafety-progress
Commit 9d3ad6ed authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

bigwindow页面的样式调整完毕

parent de0e9e68
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1083 additions and 33 deletions
gassafetyprogress-web/src/components/bigWindow/rightBarZ.vue 0 → 100644
View file @ 9d3ad6ed
This diff is collapsed.
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 9d3ad6ed
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:44:17 * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-23 17:04:59 * @LastEditTime: 2022-08-24 11:23:42
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue * @FilePath: /test/hello-world/src/views/Home.vue
...@@ -54,7 +54,12 @@ ...@@ -54,7 +54,12 @@
</div> </div>
<!-- 设备按钮 --> <!-- 设备按钮 -->
<div class="typelist-div"> <div
:class="{
'typelist-div': windowInnerWidth > 1100,
'typelist-divZ': windowInnerWidth < 1100,
}"
>
<div <div
class="list" class="list"
v-for="(item, index) in arr" v-for="(item, index) in arr"
...@@ -79,20 +84,26 @@ ...@@ -79,20 +84,26 @@
</div> </div>
<!-- 头部 --> <!-- 头部 -->
<div class="banner-test"> <div class="banner-test" :style="{height:windowInnerWidth>1100?'85px':'70px'}">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> --> <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img src="@/assets/mapinages/tb.png" alt="" /> <img src="@/assets/mapinages/tb.png" alt="" />
</div> </div>
<!-- 左边 --> <!-- 左边 -->
<div class="leftbar" :style="{width:windowInnerWidth>1024?'470px':'300px'}"> <div
<leftBar v-if="windowInnerWidth>1024" ref="mychild2"></leftBar> class="leftbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<leftBar v-if="windowInnerWidth > 1024" ref="mychild2"></leftBar>
<leftBarZ v-else ref="mychild2"></leftBarZ> <leftBarZ v-else ref="mychild2"></leftBarZ>
</div> </div>
<!-- 右边 --> <!-- 右边 -->
<div class="rightbar"> <div
<rightBar ref="mychild"></rightBar> class="rightbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<rightBar v-if="windowInnerWidth > 1024" ref="mychild"></rightBar>
<rightBarZ v-else ref="mychild"></rightBarZ>
</div> </div>
<!-- 左上角天气 --> <!-- 左上角天气 -->
...@@ -183,12 +194,14 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue"; ...@@ -183,12 +194,14 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
import leftBar from "@/components/bigWindow/leftBar.vue"; import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue"; import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue"; import rightBar from "@/components/bigWindow/rightBar.vue";
import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
export default { export default {
name: "Home", name: "Home",
components: { components: {
leftBar, leftBar,
leftBarZ, leftBarZ,
rightBar, rightBar,
rightBarZ,
// Center, // Center,
UserCenter, UserCenter,
OtherCenter, OtherCenter,
...@@ -272,7 +285,7 @@ export default { ...@@ -272,7 +285,7 @@ export default {
// 报警轮询timer // 报警轮询timer
alarmTimer: null, alarmTimer: null,
windowInnerWidth:0, windowInnerWidth: 0,
}; };
}, },
...@@ -598,15 +611,17 @@ export default { ...@@ -598,15 +611,17 @@ export default {
overflow: hidden; overflow: hidden;
height: calc(100vh - 85px); height: calc(100vh - 85px);
position: fixed; position: fixed;
top: 10%; top: 85px;
left: 0; left: 0;
background: #112238; background: #112238;
} }
.rightbar { .rightbar {
width: 470px; width: 470px;
height: 90%; height: calc(100vh - 85px);
position: fixed; position: fixed;
top: 10%; top: 85px;
right: 0; right: 0;
background: #112238; background: #112238;
} }
...@@ -698,28 +713,59 @@ export default { ...@@ -698,28 +713,59 @@ export default {
top: 0; top: 0;
margin-top: 120px; margin-top: 120px;
right: 470px; right: 470px;
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 15px;
padding: 5px 7px;
cursor: pointer;
line-height: 26px;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 14px;
}
.list img {
width: 22px;
}
} }
.list { .typelist-divZ {
width: 400px;
// height: 30px;
z-index: 9999; z-index: 9999;
float: left; position: fixed;
margin-left: 15px; top: 85px;
color: #fff; left: 50%;
line-height: auto; margin-left: -200px;
text-align: center; .list {
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%); z-index: 9999;
box-shadow: inset 0px 1px 2px 1px #125c9b; float: left;
font-size: 15px; margin-left: 15px;
padding: 5px 7px; color: #fff;
cursor: pointer; line-height: auto;
line-height: 26px; text-align: center;
} background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
.list.active { font-size: 10px;
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%); padding: 5px 7px;
box-shadow: inset 0px 1px 2px 1px #125c9b; cursor: pointer;
font-size: 14px; margin-bottom: 5px;
} // line-height: 30px;
.list img { }
width: 22px; .list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
}
.list img {
width: 15px;
}
} }
</style> </style>
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