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 | 166 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 157 insertions(+), 9 deletions(-)
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
index ea4f238..b512a12 100644
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@@ -1,20 +1,168 @@
<script setup lang="ts">
-import { ref } from "vue";
+import { reactive, ref } from "vue";
import { currentGET } from "@/api";
-currentGET("leftTop").then((res) => {
- console.log(res);
+import CountUp from "@/components/count-up";
+const duration = ref(2);
+const state = reactive({
+ alarmNum: 759,
+ offlineNum: 44,
+ onlineNum: 654,
+ totalNum: 698,
});
+
+const getData = () => {
+ currentGET("leftTop").then((res) => {
+ console.log(res);
+ if (res.success) {
+ state.alarmNum = res.data.alarmNum;
+ state.offlineNum = res.data.offlineNum;
+ state.onlineNum = res.data.onlineNum;
+ state.totalNum = res.data.totalNum;
+ }
+ });
+};
+getData();
</script>
<template>
- <div class="left-top">
-
- </div>
+ <ul class="user_Overview flex">
+ <li class="user_Overview-item" style="color: #00fdfa">
+ <div class="user_Overview_nums allnum">
+ <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>鎬昏澶囨暟1</p>-->
+ </li>
+ <li class="user_Overview-item" style="color: #07f7a8">
+ <div class="user_Overview_nums online">
+ <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>-->
+ </li>
+ <li class="user_Overview-item" style="color: #e3b337">
+ <div class="user_Overview_nums offline">
+ <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>-->
+ </li>
+ <li class="user_Overview-item" style="color: #f5023d">
+ <div class="user_Overview_nums laramnum">
+ <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>-->
+ </li>
+ </ul>
</template>
<style scoped lang="scss">
-.left-top{
- width: 100%;
- height: 100%;
+.left-top {
+ width: 100%;
+ height: 100%;
+}
+
+.user_Overview {
+ li {
+ flex: 1;
+
+ p {
+ text-align: center;
+ height: 16px;
+ font-size: 16px;
+ }
+
+ .user_Overview_nums {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //width: auto;
+ //height: 100px;
+ text-align: center;
+ //line-height: 100px;
+ font-size: 22px;
+ margin: 50px auto 30px;
+ background-size: cover;
+ background-position: center center;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &.bgdonghua::before {
+ 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 {
+ //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");
+ //}
+ }
+
+ .offline {
+ //&::before {
+ // background-image: url("@/assets/img/left_top_huang.png");
+ //}
+ }
+
+ .laramnum {
+ //&::before {
+ // background-image: url("@/assets/img/left_top_hong.png");
+ //}
+ }
+ }
}
</style>
--
Gitblit v1.8.0