From b0a100049a8b54463519c53c06c6a10e64de95ab Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 29 二月 2024 16:49:04 +0800
Subject: [PATCH] feat:点击查看图片
---
src/views/index/left-top.vue | 92 ++++++++++++++++++++++++++++++++++-----------
1 files changed, 69 insertions(+), 23 deletions(-)
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
index 5ada865..b512a12 100644
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@@ -28,27 +28,55 @@
<ul class="user_Overview flex">
<li class="user_Overview-item" style="color: #00fdfa">
<div class="user_Overview_nums allnum">
- <CountUp :endVal="state.totalNum" :duration="duration" />
+ <div class="user_Overview_nums_img" style="background-color: #FCEC0A">
+ <img src="@/assets/img/bbiao.png" />
+ </div>
+ <div class="user_Overview_nums_img_p">
+ <p>{{state.totalNum}}</p>
+ <p>姣掑搧婊ョ敤</p>
+ </div>
+<!-- <CountUp :endVal="state.totalNum" :duration="duration" />-->
</div>
- <p>鎬昏澶囨暟</p>
+<!-- <p>鎬昏澶囨暟1</p>-->
</li>
<li class="user_Overview-item" style="color: #07f7a8">
<div class="user_Overview_nums online">
- <CountUp :endVal="state.onlineNum" :duration="duration" />
+ <div class="user_Overview_nums_img" style="background-color: #FA743C">
+ <img src="@/assets/img/bbiao.png" />
+ </div>
+ <div class="user_Overview_nums_img_p">
+ <p>{{state.onlineNum}}</p>
+ <p>姣掑搧婊ョ敤</p>
+ </div>
+<!-- <CountUp :endVal="state.onlineNum" :duration="duration" />-->
</div>
- <p>鍦ㄧ嚎鏁�</p>
+<!-- <p>鍦ㄧ嚎鏁�</p>-->
</li>
<li class="user_Overview-item" style="color: #e3b337">
<div class="user_Overview_nums offline">
- <CountUp :endVal="state.offlineNum" :duration="duration" />
+ <div class="user_Overview_nums_img" style="background-color: #EA7DFE">
+ <img src="@/assets/img/bbiao.png" />
+ </div>
+ <div class="user_Overview_nums_img_p">
+ <p>{{state.offlineNum}}</p>
+ <p>姣掑搧婊ョ敤</p>
+ </div>
+<!-- <CountUp :endVal="state.offlineNum" :duration="duration" />-->
</div>
- <p>鎺夌嚎鏁�</p>
+<!-- <p>鎺夌嚎鏁�</p>-->
</li>
<li class="user_Overview-item" style="color: #f5023d">
<div class="user_Overview_nums laramnum">
- <CountUp :endVal="state.alarmNum" :duration="duration" />
+ <div class="user_Overview_nums_img" style="background-color: #1B75FF">
+ <img src="@/assets/img/bbiao.png" />
+ </div>
+ <div class="user_Overview_nums_img_p">
+ <p>{{state.alarmNum}}</p>
+ <p>姣掑搧婊ョ敤</p>
+ </div>
+<!-- <CountUp :endVal="state.alarmNum" :duration="duration" />-->
</div>
- <p>鍛婅娆℃暟</p>
+<!-- <p>鍛婅娆℃暟</p>-->
</li>
</ul>
</template>
@@ -70,10 +98,13 @@
}
.user_Overview_nums {
- width: 100px;
- height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //width: auto;
+ //height: 100px;
text-align: center;
- line-height: 100px;
+ //line-height: 100px;
font-size: 22px;
margin: 50px auto 30px;
background-size: cover;
@@ -93,29 +124,44 @@
animation: rotating 14s linear infinite;
}
}
+ .user_Overview_nums_img{
+ background-color: floralwhite;
+ padding: 6px;
+ border-radius: 8px;
+ width: 100px;
+ }
+ .user_Overview_nums_img_p{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: flex-start;
+ height: 90px;
+ margin-left: 10px;
+ }
.allnum {
- &::before {
- background-image: url("@/assets/img/left_top_lan.png");
- }
+ //background-image: url("@/assets/img/bbiao.png");
+ //&::before {
+ // background-image: url("@/assets/img/left_top_lan.png");
+ //}
}
.online {
- &::before {
- background-image: url("@/assets/img/left_top_lv.png");
- }
+ //&::before {
+ // background-image: url("@/assets/img/left_top_lv.png");
+ //}
}
.offline {
- &::before {
- background-image: url("@/assets/img/left_top_huang.png");
- }
+ //&::before {
+ // background-image: url("@/assets/img/left_top_huang.png");
+ //}
}
.laramnum {
- &::before {
- background-image: url("@/assets/img/left_top_hong.png");
- }
+ //&::before {
+ // background-image: url("@/assets/img/left_top_hong.png");
+ //}
}
}
}
--
Gitblit v1.8.0