代码优化

This commit is contained in:
BianLzhaoMin 2024-08-27 09:24:59 +08:00
parent 67eb5113e6
commit 9797d3d1ba
6 changed files with 57 additions and 20 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -39,7 +39,7 @@
</template>
<script>
import CountFlopOne from './countFlopOne.vue'
import CountFlopOne from './countFlopOne1.vue'
import { getMaterialReqDataApi } from '../../api/screen'
export default {

View File

@ -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',

View File

@ -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) //
//

View File

@ -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>