<template>
|
<div class="home">
|
<div class="home-bg"></div>
|
<div class="home-c">
|
<div class="point">
|
<div class="point-address"></div>
|
<div class="point-message">
|
<div class="video-box">
|
<el-icon><VideoPlay /></el-icon>
|
</div>
|
<div class="info-box">
|
<div class="info-t">水电站流量监测点</div>
|
<div class="info-sw">水位：<span>500</span>m</div>
|
<div class="info-ls">流速：<span>15</span>m/s</div>
|
<div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
|
<div class="info-ljll">
|
累计流量：
|
<el-select
|
v-model="selectll"
|
class="m-2"
|
placeholder="Select"
|
size="small"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="(item, idx) in liuliangOptions"
|
:key="idx"
|
:label="item.label"
|
:value="idx"
|
/>
|
</el-select>
|
<span>{{ liuliangOptions[selectll].value }}</span>m/s
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
|
import {ref} from "vue";
|
|
const selectll = ref(0)
|
|
const liuliangOptions = [
|
{ label: '总计流量', value: 500 },
|
{ label: '日累计流量', value: 1000 },
|
{ label: '周累计流量', value: 10000 },
|
{ label: '月累计流量', value: 300000 },
|
{ label: '年累计流量', value: 3600000 },
|
]
|
|
</script>
|
|
|
<style scoped lang="scss">
|
.home{
|
height: 100%;
|
.home-bg{
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
background: url("@/assets/images/map-bg.png") no-repeat;
|
background-size: 100% 100%;
|
z-index: 11;
|
}
|
.home-c{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
z-index: 20;
|
.point{
|
position: absolute;
|
left: 58%;
|
top: 30%;
|
.point-address{
|
width: 35px;
|
height: 40px;
|
background: url("@/assets/images/point.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.point-message{
|
width: 600px;
|
height: 200px;
|
background: url("@/assets/images/messageInfo-box.png") no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
left: -600px;
|
top: -100px;
|
padding: 30px 50px 30px 30px;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
.video-box{
|
flex-shrink: 0;
|
width: 200px;
|
height: 138px;
|
line-height: 138px;
|
text-align: center;
|
font-size: 38px;
|
background: #cccb40;
|
}
|
.info-box{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.info-t{
|
font-size: 20px;
|
}
|
.info-ljll{
|
display: flex;
|
align-items: center;
|
:deep(.el-select){
|
width: 100px !important;
|
.el-select__wrapper{
|
color: #fff;
|
background: transparent;
|
.el-select__selected-item{
|
color: #fff;
|
}
|
.el-select__suffix .el-icon{
|
color: #fff;
|
}
|
&:hover{
|
box-shadow: none;
|
}
|
}
|
}
|
}
|
span{
|
display: inline-block;
|
padding: 0 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
