Skip to content

M
mmc-stl-vue2
提交 49d69e55 作者: 温凯
操作

fix:健康管理列表需做自适应展示页面，需调整样式

上级 5ae30047
正在显示 包含 104 行增加 和 178 行删除
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/health/index.vue
...@@ -11,17 +11,8 @@ ...@@ -11,17 +11,8 @@
<div class="nset_control_box_area"> <div class="nset_control_box_area">
<div class="wrj"> <div class="wrj">
<div class="w97 h110 item" v-if="healthData.BAT"> <div class="w97 h110 item" v-if="healthData.BAT">
<img <img src="./assets/images/info.png" alt @click="infoDetail('智能电池', 'BAT')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('智能电池', 'BAT', true)" />
alt
@click="infoDetail('智能电池','BAT')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('智能电池','BAT',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/cell.png" /> <img src="./assets/images/cell.png" />
<span class="dib">智能电池</span> <span class="dib">智能电池</span>
...@@ -33,17 +24,8 @@ ...@@ -33,17 +24,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.RTK"> <div class="w97 h110 item cp" v-if="healthData.RTK">
<img <img src="./assets/images/info.png" alt @click="infoDetail('RTK', 'RTK')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('RTK', 'RTK', true)" />
alt
@click="infoDetail('RTK','RTK')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('RTK','RTK',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/rtk.png" /> <img src="./assets/images/rtk.png" />
<span class="dib">RTK</span> <span class="dib">RTK</span>
...@@ -55,17 +37,8 @@ ...@@ -55,17 +37,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.GPS"> <div class="w97 h110 item cp" v-if="healthData.GPS">
<img <img src="./assets/images/info.png" alt @click="infoDetail('GPS', 'GPS')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('GPS', 'GPS', true)" />
alt
@click="infoDetail('GPS','GPS')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('GPS','GPS',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/gps.png" /> <img src="./assets/images/gps.png" />
<span class="dib">GPS</span> <span class="dib">GPS</span>
...@@ -77,17 +50,8 @@ ...@@ -77,17 +50,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.OBS"> <div class="w97 h110 item cp" v-if="healthData.OBS">
<img <img src="./assets/images/info.png" alt @click="infoDetail('避障', 'OBS')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('避障', 'OBS', true)" />
alt
@click="infoDetail('避障','OBS')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('避障','OBS',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/obstacles.png" /> <img src="./assets/images/obstacles.png" />
...@@ -100,17 +64,8 @@ ...@@ -100,17 +64,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.VPN"> <div class="w97 h110 item cp" v-if="healthData.VPN">
<img <img src="./assets/images/info.png" alt @click="infoDetail('公网', 'VPN')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('公网', 'VPN', true)" />
alt
@click="infoDetail('公网','VPN')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('公网','VPN',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/public.png" /> <img src="./assets/images/public.png" />
<span class="dib">公网</span> <span class="dib">公网</span>
...@@ -122,17 +77,8 @@ ...@@ -122,17 +77,8 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.SPE"> <div class="w97 h110 item cp" v-if="healthData.SPE">
<img <img src="./assets/images/info.png" alt @click="infoDetail('专网', 'SPE')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('专网', 'SPE', true)" />
alt
@click="infoDetail('专网','SPE')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('专网','SPE',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/pr.png" /> <img src="./assets/images/pr.png" />
<span class="dib">专网</span> <span class="dib">专网</span>
...@@ -144,69 +90,36 @@ ...@@ -144,69 +90,36 @@
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.CHUTE"> <div class="w97 h110 item cp" v-if="healthData.CHUTE">
<img <img src="./assets/images/info.png" alt @click="infoDetail('降落伞', 'CHUTE')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('降落伞', 'CHUTE', true)" />
alt
@click="infoDetail('降落伞','CHUTE')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('降落伞','CHUTE',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/san.png" /> <img src="./assets/images/san.png" />
<span class="dib">降落伞</span> <span class="dib">降落伞</span>
</div> </div>
<div <div class="notice" v-if="
class="notice" healthData.CHUTE && healthData.CHUTE.warningLevel != 'NORMAL'
v-if=" ">
healthData.CHUTE && healthData.CHUTE.warningLevel != 'NORMAL'
"
>
<div v-if="healthData.CHUTE.title.length <= 6">{{ healthData.CHUTE.title }}</div> <div v-if="healthData.CHUTE.title.length <= 6">{{ healthData.CHUTE.title }}</div>
<marquee v-else direction="left">{{ healthData.CHUTE.title }}</marquee> <marquee v-else direction="left">{{ healthData.CHUTE.title }}</marquee>
</div> </div>
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.SPEAK"> <div class="w97 h110 item cp" v-if="healthData.SPEAK">
<img <img src="./assets/images/info.png" alt @click="infoDetail('喊话器', 'SPEAK')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('喊话器', 'SPEAK', true)" />
alt
@click="infoDetail('喊话器','SPEAK')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('喊话器','SPEAK',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/speak.png" /> <img src="./assets/images/speak.png" />
<span class="dib">喊话器</span> <span class="dib">喊话器</span>
</div> </div>
<div <div class="notice" v-if="healthData.SPEAK && healthData.SPEAK.warningLevel != 'NORMAL'">
class="notice"
v-if="healthData.SPEAK && healthData.SPEAK.warningLevel != 'NORMAL'"
>
<div v-if="healthData.SPEAK.title.length <= 6">{{ healthData.SPEAK.title }}</div> <div v-if="healthData.SPEAK.title.length <= 6">{{ healthData.SPEAK.title }}</div>
<marquee v-else direction="left">{{ healthData.SPEAK.title }}</marquee> <marquee v-else direction="left">{{ healthData.SPEAK.title }}</marquee>
</div> </div>
<div class="type" v-else>正常</div> <div class="type" v-else>正常</div>
</div> </div>
<div class="w97 h110 item cp" v-if="healthData.NX"> <div class="w97 h110 item cp" v-if="healthData.NX">
<img <img src="./assets/images/info.png" alt @click="infoDetail('NX', 'NX')" style="cursor: pointer;" />
src="./assets/images/info.png" <div class="iconfont icon-chuli" style="color: #ffe417;" @click="infoDetail('NX', 'NX', true)" />
alt
@click="infoDetail('NX','NX')"
style="cursor: pointer;"
/>
<div
class="iconfont icon-chuli"
style="color: #ffe417;"
@click="infoDetail('NX','NX',true)"
/>
<div class="content"> <div class="content">
<img src="./assets/images/nx.png" /> <img src="./assets/images/nx.png" />
<span class="dib">NX</span> <span class="dib">NX</span>
...@@ -230,7 +143,7 @@ ...@@ -230,7 +143,7 @@
</div> </div>
<div class="nest_info"> <div class="nest_info">
<!-- <div class="btn" @click="getInfoList">异常记录</div> --> <!-- <div class="btn" @click="getInfoList">异常记录</div> -->
<div class="bat" v-if="infoName == '智能电池' "> <div class="bat" v-if="infoName == '智能电池'">
<div class="batteryList mt16" v-for="item in batteryList" :key="item.id"> <div class="batteryList mt16" v-for="item in batteryList" :key="item.id">
<div class="head"> <div class="head">
<div class="line"></div> <div class="line"></div>
...@@ -269,47 +182,45 @@ ...@@ -269,47 +182,45 @@
<div class="rtk" v-else-if="infoName == 'RTK'"> <div class="rtk" v-else-if="infoName == 'RTK'">
<div class="item"> <div class="item">
<div class="title">FIX状态：</div> <div class="title">FIX状态：</div>
<div class="ingps">{{healthData.RTK&&healthData.RTK.title||'暂无'}}</div> <div class="ingps">{{ healthData.RTK && healthData.RTK.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">搜星数：</div> <div class="title">搜星数：</div>
<div class="inrtk">{{uavRealTimeData.rtk&&uavRealTimeData.rtk.satelliteCount}}</div> <div class="inrtk">{{ uavRealTimeData.rtk && uavRealTimeData.rtk.satelliteCount }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">定位精度：</div> <div class="title">定位精度：</div>
<div class="inrtk">{{uavRealTimeData.rtk&&uavRealTimeData.rtk.levelDivisor}}</div> <div class="inrtk">{{ uavRealTimeData.rtk && uavRealTimeData.rtk.levelDivisor }}</div>
</div> </div>
</div> </div>
<div class="gps" v-else-if="infoName == 'GPS'"> <div class="gps" v-else-if="infoName == 'GPS'">
<div class="item"> <div class="item">
<div class="title">FIX状态：</div> <div class="title">FIX状态：</div>
<div class="ingps">{{healthData.GPS&&healthData.GPS.title||'暂无'}}</div> <div class="ingps">{{ healthData.GPS && healthData.GPS.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">搜星数：</div> <div class="title">搜星数：</div>
<div class="ingps">{{uavRealTimeData.gps&&uavRealTimeData.gps.satelliteCount||'暂无'}}</div> <div class="ingps">{{ uavRealTimeData.gps && uavRealTimeData.gps.satelliteCount || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">定位精度：</div> <div class="title">定位精度：</div>
<div class="ingps">{{uavRealTimeData.gps&&uavRealTimeData.gps.levelDivisor||'暂无'}}</div> <div class="ingps">{{ uavRealTimeData.gps && uavRealTimeData.gps.levelDivisor || '暂无' }}</div>
</div> </div>
</div> </div>
<div class="public" v-else-if="infoName == '专网'"> <div class="public" v-else-if="infoName == '专网'">
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">专网信号质量：</div> <div class="title">专网信号质量：</div>
<div class="inpublic">{{healthData.SPE&&healthData.SPE.title||'暂无'}}</div> <div class="inpublic">{{ healthData.SPE && healthData.SPE.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.SPE && warningLevel[healthData.SPE.warningLevel].color }">
class="inpublic" {{ healthData.SPE && warningLevel[healthData.SPE.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.SPE&&warningLevel[healthData.SPE.warningLevel].color}"
>{{healthData.SPE&&warningLevel[healthData.SPE.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpublic">{{healthData.SPE&&healthData.SPE.description||'暂无'}}</div> <div class="inpublic">{{ healthData.SPE && healthData.SPE.description || '暂无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -318,18 +229,16 @@ ...@@ -318,18 +229,16 @@
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">公网信号质量：</div> <div class="title">公网信号质量：</div>
<div class="inpublic">{{healthData.VPN&&healthData.VPN.title||'暂无'}}</div> <div class="inpublic">{{ healthData.VPN && healthData.VPN.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.VPN && warningLevel[healthData.VPN.warningLevel].color }">
class="inpublic" {{ healthData.VPN && warningLevel[healthData.VPN.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.VPN&&warningLevel[healthData.VPN.warningLevel].color}"
>{{healthData.VPN&&warningLevel[healthData.VPN.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpublic">{{healthData.VPN&&healthData.VPN.description||'暂 无'}}</div> <div class="inpublic">{{ healthData.VPN && healthData.VPN.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -337,26 +246,22 @@ ...@@ -337,26 +246,22 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">避障状态：</div> <div class="title">避障状态：</div>
<div class="inpublic">{{healthData.OBS &&healthData.OBS.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.OBS && healthData.OBS.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.OBS && warningLevel[healthData.OBS.warningLevel].color }">
class="inpublic" {{ healthData.OBS && warningLevel[healthData.OBS.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.OBS&&warningLevel[healthData.OBS.warningLevel].color}"
>{{healthData.OBS&&warningLevel[healthData.OBS.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">是否触发：</div> <div class="title">是否触发：</div>
<div <div class="inpublic">{{ uavRealTimeData.obstacles && uavRealTimeData.obstacles.enable ? '触发避障' : '未触发' }}</div>
class="inpublic"
>{{uavRealTimeData.obstacles&&uavRealTimeData.obstacles.enable? '触发避障':'未触发'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.OBS&&healthData.OBS.description||'暂 无'}}</div> <div class="inpr">{{ healthData.OBS && healthData.OBS.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -364,20 +269,19 @@ ...@@ -364,20 +269,19 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">状态：</div> <div class="title">状态：</div>
<div class="inpublic">{{healthData.CHUTE&&healthData.CHUTE.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.CHUTE && healthData.CHUTE.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic"
class="inpublic" :style="{ 'color': healthData.CHUTE && warningLevel[healthData.CHUTE.warningLevel].color }">
:style="{'color':healthData.CHUTE&&warningLevel[healthData.CHUTE.warningLevel].color}" {{ healthData.CHUTE && warningLevel[healthData.CHUTE.warningLevel].title || '暂无' }}</div>
>{{healthData.CHUTE&&warningLevel[healthData.CHUTE.warningLevel].title||'暂无'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.CHUTE&&healthData.CHUTE.description||'暂 无'}}</div> <div class="inpr">{{ healthData.CHUTE && healthData.CHUTE.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -385,38 +289,35 @@ ...@@ -385,38 +289,35 @@
<div class="pu"> <div class="pu">
<div class="item"> <div class="item">
<div class="title">状态：</div> <div class="title">状态：</div>
<div class="inpublic">{{healthData.SPEAK&&healthData.SPEAK.title||'暂 无'}}</div> <div class="inpublic">{{ healthData.SPEAK && healthData.SPEAK.title || '暂 无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic"
class="inpublic" :style="{ 'color': healthData.SPEAK && warningLevel[healthData.SPEAK.warningLevel].color }">
:style="{'color':healthData.SPEAK&&warningLevel[healthData.SPEAK.warningLevel].color}" {{ healthData.SPEAK && warningLevel[healthData.SPEAK.warningLevel].title || '暂无' }}</div>
>{{healthData.SPEAK&&warningLevel[healthData.SPEAK.warningLevel].title||'暂无'}}</div>
</div> </div>
</div> </div>
<div class="pr"> <div class="pr">
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inpr">{{healthData.SPEAK&&healthData.SPEAK.description||'暂 无'}}</div> <div class="inpr">{{ healthData.SPEAK && healthData.SPEAK.description || '暂 无' }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="rtk" v-else-if="infoName == 'NX'"> <div class="rtk" v-else-if="infoName == 'NX'">
<div class="item"> <div class="item">
<div class="title">NX状态：</div> <div class="title">NX状态：</div>
<div class="ingps">{{healthData.NX&&healthData.NX.title||'暂无'}}</div> <div class="ingps">{{ healthData.NX && healthData.NX.title || '暂无' }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">消息类型：</div> <div class="title">消息类型：</div>
<div <div class="inpublic" :style="{ 'color': healthData.NX && warningLevel[healthData.NX.warningLevel].color }">
class="inpublic" {{ healthData.NX && warningLevel[healthData.NX.warningLevel].title || '暂无' }}</div>
:style="{'color':healthData.NX&&warningLevel[healthData.NX.warningLevel].color}"
>{{healthData.NX&&warningLevel[healthData.NX.warningLevel].title||'暂无'}}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="title">描述：</div> <div class="title">描述：</div>
<div class="inrtk">{{healthData.NX&&healthData.NX.description||'暂无'}}</div> <div class="inrtk">{{ healthData.NX && healthData.NX.description || '暂无' }}</div>
</div> </div>
</div> </div>
<Logs v-else :type="type"></Logs> <Logs v-else :type="type"></Logs>
...@@ -512,7 +413,7 @@ export default { ...@@ -512,7 +413,7 @@ export default {
message: {}, message: {},
}; };
}, },
beforeDestroy() {}, beforeDestroy() { },
methods: { methods: {
// flag 为true 代表展示异常信息 // flag 为true 代表展示异常信息
infoDetail(name, val, flag) { infoDetail(name, val, flag) {
...@@ -524,7 +425,7 @@ export default { ...@@ -524,7 +425,7 @@ export default {
this.infoShow = false; this.infoShow = false;
this.infoName = ""; this.infoName = "";
}, },
async addMessage() {}, async addMessage() { },
}, },
mounted() { mounted() {
console.log(this.healthData, "healthData"); console.log(this.healthData, "healthData");
...@@ -564,14 +465,12 @@ export default { ...@@ -564,14 +465,12 @@ export default {
color: #14faff; color: #14faff;
line-height: 26px; line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2); text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient( background: linear-gradient(135deg,
135deg, #e3aa77 0%,
#e3aa77 0%, #f5cda9 38%,
#f5cda9 38%, #f9ecd3 58%,
#f9ecd3 58%, #fcdbb1 79%,
#fcdbb1 79%, #edb07a 100%);
#edb07a 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
...@@ -591,10 +490,9 @@ export default { ...@@ -591,10 +490,9 @@ export default {
height: 258px; height: 258px;
overflow: auto; overflow: auto;
display: flex; display: flex;
// justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 16px; justify-content: space-around;
gap: 16px; margin-top: 10px;
.item { .item {
position: relative; position: relative;
...@@ -605,17 +503,21 @@ export default { ...@@ -605,17 +503,21 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 97px; flex: 0 0 calc(33.33% - 32px);
/* 32px是左右padding的总和 */
height: 110px; height: 110px;
&:hover { &:hover {
background: url("./assets/images/checkbg.png") no-repeat; background: url("./assets/images/checkbg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
> img {
>img {
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 3px; top: 3px;
} }
.content { .content {
width: 100%; width: 100%;
height: 82px; height: 82px;
...@@ -624,8 +526,9 @@ export default { ...@@ -624,8 +526,9 @@ export default {
justify-content: end; justify-content: end;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
img {
} img {}
.dib { .dib {
margin-top: 6px; margin-top: 6px;
font-size: 12px; font-size: 12px;
...@@ -634,6 +537,7 @@ export default { ...@@ -634,6 +537,7 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
.type { .type {
width: calc(100% - 2px); width: calc(100% - 2px);
text-align: center; text-align: center;
...@@ -646,6 +550,7 @@ export default { ...@@ -646,6 +550,7 @@ export default {
color: #36e81a; color: #36e81a;
border-radius: 0 0 4.5px 4.5px; border-radius: 0 0 4.5px 4.5px;
} }
.notice { .notice {
width: calc(100% - 2px); width: calc(100% - 2px);
text-align: center; text-align: center;
...@@ -658,10 +563,12 @@ export default { ...@@ -658,10 +563,12 @@ export default {
color: #fff; color: #fff;
border-radius: 0 0 4.5px 4.5px; border-radius: 0 0 4.5px 4.5px;
} }
.iconfont { .iconfont {
margin-top: 8px; margin-top: 8px;
} }
} }
.item:nth-of-type(4n) { .item:nth-of-type(4n) {
margin-right: 0; margin-right: 0;
} }
...@@ -673,8 +580,10 @@ export default { ...@@ -673,8 +580,10 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.nest_info { .nest_info {
padding: 16px; padding: 16px;
.btn { .btn {
width: 80px; width: 80px;
height: 28px; height: 28px;
...@@ -686,18 +595,22 @@ export default { ...@@ -686,18 +595,22 @@ export default {
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
} }
.bat { .bat {
.batteryList { .batteryList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.head { .head {
display: flex; display: flex;
.line { .line {
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #ffd800; background: #ffd800;
border-radius: 2px; border-radius: 2px;
} }
.name { .name {
margin-left: 4px; margin-left: 4px;
font-size: 16px; font-size: 16px;
...@@ -705,19 +618,23 @@ export default { ...@@ -705,19 +618,23 @@ export default {
color: #fff; color: #fff;
} }
} }
.center { .center {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: start; justify-content: start;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.indo { .indo {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -727,21 +644,25 @@ export default { ...@@ -727,21 +644,25 @@ export default {
} }
} }
} }
.rtk, .rtk,
.gps { .gps {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.ingps, .ingps,
.inrtk { .inrtk {
font-size: 16px; font-size: 16px;
...@@ -750,24 +671,29 @@ export default { ...@@ -750,24 +671,29 @@ export default {
} }
} }
} }
.public { .public {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.pu, .pu,
.pr { .pr {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item { .item {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
.title { .title {
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.inpublic, .inpublic,
.inpr { .inpr {
font-size: 16px; font-size: 16px;
...@@ -778,6 +704,7 @@ export default { ...@@ -778,6 +704,7 @@ export default {
} }
} }
} }
.list { .list {
position: fixed; position: fixed;
top: calc(50% + 90px); top: calc(50% + 90px);
...@@ -788,16 +715,15 @@ export default { ...@@ -788,16 +715,15 @@ export default {
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(26, 92, 246, 0.5); border: 1px solid rgba(26, 92, 246, 0.5);
backdrop-filter: blur(1px); backdrop-filter: blur(1px);
.nset_control_box_header { .nset_control_box_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 32px; height: 32px;
background: linear-gradient( background: linear-gradient(180deg,
180deg, #9198ff 0%,
#9198ff 0%, rgba(45, 81, 153, 0.45) 40%,
rgba(45, 81, 153, 0.45) 40%, #05091a 100%);
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff; box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
border: 1px solid #427dff; border: 1px solid #427dff;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论