From 5300255dd40ac2ed67676da5568f0e4fd25a7078 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 13:33:46 +0800
Subject: [PATCH] fix:修改字体、图标、背景、阴影问题
---
src/views/daoAnOffice/left-top.vue | 138 ++++++++++++++++++++++++++++++----------------
1 files changed, 90 insertions(+), 48 deletions(-)
diff --git a/src/views/daoAnOffice/left-top.vue b/src/views/daoAnOffice/left-top.vue
index 36ce323..8a13151 100644
--- a/src/views/daoAnOffice/left-top.vue
+++ b/src/views/daoAnOffice/left-top.vue
@@ -26,68 +26,78 @@
<template>
<ul class="user_Overview flex">
- <li class="user_Overview-item" >
+ <li class="user_Overview-item">
<div class="user_Overview_nums allnum">
- <div class="user_Overview_nums_img" >
+ <div class="user_Overview_nums_img">
<img src="@/assets/img/sgjb.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_num">{{state.totalNum}}<span class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫� 28.1%</span></p>
- <p>浜ら�氫簨鏁呮帴鎶�</p>
+ <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ state.totalNum }}</span> <span
+ class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
+ 28.1%</span></p>
+ <p class="info-lable">浜ら�氫簨鏁呮帴鎶�</p>
</div>
-<!-- <CountUp :endVal="state.totalNum" :duration="duration" />-->
+ <!-- <CountUp :endVal="state.totalNum" :duration="duration" />-->
</div>
-<!-- <p>鎬昏澶囨暟1</p>-->
+ <!-- <p>鎬昏澶囨暟1</p>-->
</li>
- <li class="user_Overview-item" >
+ <li class="user_Overview-item">
<div class="user_Overview_nums online">
- <div class="user_Overview_nums_img" >
+ <div class="user_Overview_nums_img">
<img src="@/assets/img/la.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_numt">{{state.onlineNum}}<span class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫� 28.1%</span></p>
- <p>绔嬫</p>
+ <p class="user_Overview_nums_img_p_numt"><span class="info-num">{{ state.onlineNum }}</span><span
+ class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
+ 28.1%</span></p>
+ <p class="info-lable">绔嬫</p>
</div>
-<!-- <CountUp :endVal="state.onlineNum" :duration="duration" />-->
+ <!-- <CountUp :endVal="state.onlineNum" :duration="duration" />-->
</div>
-<!-- <p>鍦ㄧ嚎鏁�</p>-->
+ <!-- <p>鍦ㄧ嚎鏁�</p>-->
</li>
- <li class="user_Overview-item" >
+ <li class="user_Overview-item">
<div class="user_Overview_nums offline">
- <div class="user_Overview_nums_img" >
+ <div class="user_Overview_nums_img">
<img src="@/assets/img/ssrs.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_nums">{{state.offlineNum}}<span class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫� 28.1%</span></p>
- <p>鍙椾激浜烘暟</p>
+ <p class="user_Overview_nums_img_p_nums"><span class="info-num">{{ state.offlineNum }}</span><span
+ class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
+ 28.1%</span></p>
+ <p class="info-lable">鍙椾激浜烘暟</p>
</div>
-<!-- <CountUp :endVal="state.offlineNum" :duration="duration" />-->
+ <!-- <CountUp :endVal="state.offlineNum" :duration="duration" />-->
</div>
-<!-- <p>鎺夌嚎鏁�</p>-->
+ <!-- <p>鎺夌嚎鏁�</p>-->
</li>
- <li class="user_Overview-item" >
+ <li class="user_Overview-item">
<div class="user_Overview_nums laramnum">
- <div class="user_Overview_nums_img" >
+ <div class="user_Overview_nums_img">
<img src="@/assets/img/swrs.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_numf">{{state.alarmNum}}<span class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫� 28.1%</span></p>
- <p>姝讳骸浜烘暟</p>
+ <p class="user_Overview_nums_img_p_numf"><span class="info-num">{{ state.alarmNum }}</span><span
+ class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
+ 28.1%</span></p>
+ <p class="info-lable">姝讳骸浜烘暟</p>
</div>
-<!-- <CountUp :endVal="state.alarmNum" :duration="duration" />-->
+ <!-- <CountUp :endVal="state.alarmNum" :duration="duration" />-->
</div>
-<!-- <p>鍛婅娆℃暟</p>-->
+ <!-- <p>鍛婅娆℃暟</p>-->
</li>
</ul>
</template>
<style scoped lang="scss">
-.user_Overview-item{
- background-color: #11223A;
+.user_Overview-item {
+ background-color: rgba(17, 34, 58, 0.6);
+
}
+
.left-top {
width: 100%;
height: 100%;
@@ -99,10 +109,19 @@
margin: 0 20px;
padding: 15px 0;
border: 1px solid #29466A;
+
p {
text-align: left;
//height: 16px;
font-size: 16px;
+ }
+
+ &:first-of-type {
+ margin-left: 0;
+ }
+
+ &:last-of-type {
+ margin-right: 0;
}
.user_Overview_nums {
@@ -120,26 +139,28 @@
background-position: center center;
position: relative;
- &::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
+ // &::before {
+ // content: "";
+ // position: absolute;
+ // width: 100%;
+ // height: 100%;
+ // top: 0;
+ // left: 0;
+ // }
&.bgdonghua::before {
animation: rotating 14s linear infinite;
}
}
- .user_Overview_nums_img{
+
+ .user_Overview_nums_img {
//background-color: floralwhite;
//padding: 6px;
border-radius: 8px;
width: 72px;
}
- .user_Overview_nums_img_p{
+
+ .user_Overview_nums_img_p {
//display: flex;
flex-direction: column;
justify-content: space-around;
@@ -147,59 +168,72 @@
//height: 90px;
//line-height: 40px;
margin-left: 10px;
- .user_Overview_nums_img_p_numt{
+
+ .user_Overview_nums_img_p_numt {
color: #0071F8;
font-size: 25px;
font-weight: 800;
- .user_Overview_nums_img_p_num_nan{
+
+ .user_Overview_nums_img_p_num_nan {
font-size: 14px;
color: #fff;
}
- .user_Overview_nums_img_p_num_ss{
+
+ .user_Overview_nums_img_p_num_ss {
font-size: 14px;
color: #D44233;
}
}
- .user_Overview_nums_img_p_num{
+
+ .user_Overview_nums_img_p_num {
color: #F96FF8;
font-size: 25px;
font-weight: 800;
- .user_Overview_nums_img_p_num_nan{
+
+ .user_Overview_nums_img_p_num_nan {
font-size: 14px;
color: #fff;
}
- .user_Overview_nums_img_p_num_ss{
+
+ .user_Overview_nums_img_p_num_ss {
font-size: 14px;
color: #D44233;
}
}
- .user_Overview_nums_img_p_nums{
+
+ .user_Overview_nums_img_p_nums {
color: #FE3146;
font-size: 25px;
font-weight: 800;
- .user_Overview_nums_img_p_num_nan{
+
+ .user_Overview_nums_img_p_num_nan {
font-size: 14px;
color: #fff;
}
- .user_Overview_nums_img_p_num_ss{
+
+ .user_Overview_nums_img_p_num_ss {
font-size: 14px;
color: #D44233;
}
}
- .user_Overview_nums_img_p_numf{
+
+ .user_Overview_nums_img_p_numf {
color: #EA7039;
font-size: 25px;
font-weight: 800;
- .user_Overview_nums_img_p_num_nan{
+
+ .user_Overview_nums_img_p_num_nan {
font-size: 14px;
color: #fff;
}
- .user_Overview_nums_img_p_num_ss{
+
+ .user_Overview_nums_img_p_num_ss {
font-size: 14px;
color: #D44233;
}
}
}
+
.allnum {
//background-image: url("@/assets/img/bbiao.png");
//&::before {
@@ -226,4 +260,12 @@
}
}
}
+
+.info-num {
+ font-family: 'PangMenZhengDao';
+}
+.info-lable {
+ font-family: 'PingFang SC';
+}
+
</style>
--
Gitblit v1.8.0