代码优化
This commit is contained in:
parent
67eb5113e6
commit
9797d3d1ba
|
|
@ -2,7 +2,9 @@
|
|||
<div class="count-title">
|
||||
<p>
|
||||
{{ sonTitle }}
|
||||
<dv-decoration-6 style="width: 40%; height: 20px" />
|
||||
</p>
|
||||
|
||||
<div class="count-flop" :key="compKey">
|
||||
<div
|
||||
:class="item != ',' ? 'count-flop-box' : 'count-flop-point'"
|
||||
|
|
@ -73,20 +75,24 @@ export default {
|
|||
src: url('../../assets/css/DS-Digital/DS-DIGI-1.ttf');
|
||||
}
|
||||
.count-title {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: #1fd1ff;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
line-height: 21px;
|
||||
// margin-left: 31px;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.count-flop {
|
||||
display: inline-block;
|
||||
/* 可更改 */
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 30px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 48px;
|
||||
color: #4898f1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
@ -102,8 +108,8 @@ export default {
|
|||
}
|
||||
|
||||
.count-flop-box {
|
||||
width: 38px;
|
||||
height: 45px;
|
||||
width: 49px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/number_box.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
|
|
@ -130,7 +136,7 @@ export default {
|
|||
width: 100%;
|
||||
animation-fill-mode: forwards !important;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-size: 48px;
|
||||
font-family: electronicFont;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="count-title">
|
||||
<p>{{ sonTitle }}</p>
|
||||
<p>
|
||||
{{ sonTitle }}
|
||||
|
||||
<dv-decoration-3 style="width: 40%; height: 20px" />
|
||||
</p>
|
||||
<div class="count-flop" :key="compKey">
|
||||
<div
|
||||
:class="item != ',' ? 'count-flop-box' : 'count-flop-point'"
|
||||
|
|
@ -78,19 +82,24 @@ export default {
|
|||
src: url('../../assets/css/DS-Digital/DS-DIGI-1.ttf');
|
||||
}
|
||||
.count-title {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: #f7b500;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
line-height: 21px;
|
||||
// margin-left: 31px;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.count-flop {
|
||||
display: inline-block;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 30px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 48px;
|
||||
color: #4898f1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
@ -112,8 +121,8 @@ export default {
|
|||
box-shadow: inset 0 0 0.6rem #69b1ff;
|
||||
border: 2px solid #66bef4;
|
||||
margin: 0.15vw; */
|
||||
width: 38px;
|
||||
height: 45px;
|
||||
width: 49px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/number_box_two.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
|
|
@ -140,7 +149,7 @@ export default {
|
|||
width: 100%;
|
||||
animation-fill-mode: forwards !important;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-size: 48px;
|
||||
font-family: electronicFont;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CountFlopOne from './countFlopOne.vue'
|
||||
import CountFlopOne from './countFlopOne1.vue'
|
||||
import { getMaterialReqDataApi } from '../../api/screen'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CountFlopTwo from './countFlopTwo.vue'
|
||||
import CountFlopTwo from './countFlopTwo1.vue'
|
||||
import { getMaterialReturnDataApi } from '../../api/screen'
|
||||
export default {
|
||||
name: 'accessRatePage',
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export default {
|
|||
// title: points[i].typeModelName, // 信息窗口标题
|
||||
// }
|
||||
// const mapHtml = `<div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码:</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程:${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码:${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:在用/电量/${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置:</span></div>`
|
||||
const mapHtml = `<div class='my-info-window'><h3 class='my-info-window-title'>${points[i].typeModelName}</h3><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码:</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程:${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码:${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:在用/ 电量${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置:</span></div></div></div>`
|
||||
const mapHtml = `<div class='my-info-window'><h3 class='my-info-window-title'>${points[i].typeModelName}</h3><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码:</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程:${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码:${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态:在用/ 电量${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置:${points[i].iotLocationVo.address}</span></div></div></div>`
|
||||
let infoWindow = new BMapGL.InfoWindow(mapHtml) // 创建信息窗口对象
|
||||
// marker.openInfoWindow(infoWindow) // 打开信息窗口
|
||||
// 可以绑定点击事件打开信息窗口
|
||||
|
|
|
|||
|
|
@ -248,6 +248,8 @@ export default {
|
|||
border-right: 1px dashed #0098ee;
|
||||
color: #fff;
|
||||
background-color: #030c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
|
|
@ -305,10 +307,12 @@ export default {
|
|||
|
||||
.device-list {
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -463,4 +467,22 @@ export default {
|
|||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
*::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
//定义滑块 内阴影+圆角
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.3);
|
||||
}
|
||||
|
||||
//定义滚动条轨道 内阴影+圆角
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue