小动画

This commit is contained in:
TimSpan 2025-05-14 16:17:01 +08:00
parent 3f5098167c
commit 660be19d5e
3 changed files with 371 additions and 94 deletions

7
package-lock.json generated
View File

@ -19,6 +19,7 @@
"jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21",
"naive-ui": "^2.41.0",
"odometer": "^0.4.8",
"pinia": "^3.0.1",
"pinia-plugin-persistedstate": "^4.2.0",
"sass": "^1.85.1",
@ -3793,6 +3794,12 @@
"node": "^14.16.0 || >=16.10.0"
}
},
"node_modules/odometer": {
"version": "0.4.8",
"resolved": "https://registry.npmmirror.com/odometer/-/odometer-0.4.8.tgz",
"integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg==",
"license": "MIT"
},
"node_modules/ohash": {
"version": "2.0.11",
"resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",

View File

@ -23,6 +23,7 @@
"jsencrypt": "^3.3.2",
"lodash-es": "^4.17.21",
"naive-ui": "^2.41.0",
"odometer": "^0.4.8",
"pinia": "^3.0.1",
"pinia-plugin-persistedstate": "^4.2.0",
"sass": "^1.85.1",

View File

@ -7,15 +7,25 @@
<span class="homeSpan">2024-11-25</span>
</blockquote>
<span>系统菜单调整通知</span>
<span>为了更方便功能查找使用从新编排了菜单位置基础信息相关的页面都在顶部基础信息</span>
<span>
为了更方便功能查找使用从新编排了菜单位置基础信息相关的页面都在顶部基础信息
</span>
</div>
<div class="home2Item">
<blockquote class="public">
<div class="header-wrapper">
<span>供应商</span>
<div class="fold-button" @click="toggleFold">
<div
class="fold-button"
@click="toggleFold"
>
<span>{{ isFold ? "展开" : "收起" }}</span>
<Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
<Icon
name="LineMdPerson"
:style="{
transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)',
}"
></Icon>
</div>
</div>
</blockquote>
@ -24,22 +34,43 @@
<div class="fold-content">
<!-- 这里放具体内容 -->
<div class="fold-content_item">
<div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
<div
class="fold-content_item_index"
v-for="(item, index) in foldContentItemIndex"
:key="index"
>
<div class="fold-content_item_index_top">
<div class="content">{{ item.titleName }}</div>
<span>{{ item.video }}</span>
</div>
<div class="intermediate" v-for="items in item.intermediate" :key="items.key">
<div
class="intermediate"
v-for="items in item.intermediate"
:key="items.key"
>
<span style="width: 50px">{{ items.name }}</span>
<span style="width: 50px">{{ items.digital }}</span>
<span style="width: 50px">{{ items.mechanism }}</span>
<span style="width: 50px">{{ items.digitalKey }}</span>
</div>
<hr />
<div style="display: flex;align-items: center;justify-content: space-between">
<div style="display: flex;">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div style="display: flex">
<div class="risk">{{ item.risk }}</div>
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">
<div
style="
font-weight: bold;
color: #009688 !important;
margin-left: 10px;
line-height: 18px;
"
>
{{ item.score }}
</div>
</div>
@ -49,7 +80,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
@ -57,93 +87,199 @@
<div class="home4Item">
<div class="home4ItemIndex">
<div class="home4ItemIndexItem">
<blockquote class="public" style="margin-top: 10px">
<blockquote
class="public"
style="margin-top: 10px"
>
<div class="header-wrapper">
<span>用户数据</span>
</div>
</blockquote>
<div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">总数</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">总数</div>
<div style="font-size: 20px">15452</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666"> 日活跃量</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">
日活跃量
</div>
<div style="font-size: 20px">6666</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">用户</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">用户</div>
<div style="font-size: 20px">524</div>
</div>
</div>
</div>
<div class="home4ItemIndexItem">
<blockquote class="public" style="margin-top: 10px">
<blockquote
class="public"
style="margin-top: 10px"
>
<div class="header-wrapper">
<span>每日消息</span>
</div>
</blockquote>
<div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">今日发送</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">
今日发送
</div>
<div style="font-size: 20px">0</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666"> 接受率</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">接受率</div>
<div style="font-size: 20px">20%</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
<div style="background-color: #F7F7F7;color: #666">查看率</div>
<div style="font-size: 20px;color: #FFB800 !important">30%</div>
<div
style="
display: flex;
justify-content: space-between;
padding: 12px 15px;
line-height: 20px;
"
>
<div style="background-color: #f7f7f7; color: #666">查看率</div>
<div style="font-size: 20px; color: #ffb800 !important">
30%
</div>
</div>
</div>
</div>
</div>
<div class="home4Item2Index">
<blockquote class="public" style="margin-top: 10px">
<blockquote
class="public"
style="margin-top: 10px"
>
<div class="header-wrapper">
<span>客户点评</span>
</div>
</blockquote>
<div style="display: flex; justify-content: space-between">
<div class="home4Item2IndexITem">
<span style="margin-left: 20px;background-color: #F7F7F7; color: #666">好评率</span>
<span
style="
margin-left: 20px;
background-color: #f7f7f7;
color: #666;
"
>
好评率
</span>
<div style="display: flex">
<div style="width: 33%; text-align: center; margin-top: 19px">
<span>口味</span>
<div style="color: #FFB800;font-size: 18px">54.64%</div>
<div style="color: #ffb800; font-size: 18px">54.64%</div>
</div>
<div style="width: 33%; text-align: center; margin-top: 19px">
<span>卫生</span>
<div style="color: #FFB800;font-size: 18px">54.64%</div>
<div style="color: #ffb800; font-size: 18px">54.64%</div>
</div>
<div style="width: 33%; text-align: center; margin-top: 19px">
<span>态度</span>
<div style="color: #FFB800;font-size: 18px">67.92%</div>
<div style="color: #ffb800; font-size: 18px">67.92%</div>
</div>
</div>
</div>
<div class="home4Item2IndexITem">
<span style="margin-left: 20px;background-color: #F7F7F7; color: #666">综合TOP3</span>
<span
style="
margin-left: 20px;
background-color: #f7f7f7;
color: #666;
"
>
综合TOP3
</span>
<div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"></div>
style="
display: flex;
align-items: center;
justify-content: space-around;
line-height: 10px;
padding: 5px 0;
"
>
<div>
<img
style="width: 20px; height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"
/>
</div>
<div>技术部</div>
<div>68.91%</div>
</div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"></div>
style="
display: flex;
align-items: center;
justify-content: space-around;
line-height: 10px;
padding: 5px 0;
"
>
<div>
<img
style="width: 20px; height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"
/>
</div>
<div>技术部</div>
<div>68.91%</div>
</div>
<div
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
<div><img style="width: 20px;height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"></div>
style="
display: flex;
align-items: center;
justify-content: space-around;
line-height: 10px;
padding: 5px 0;
"
>
<div>
<img
style="width: 20px; height: 20px"
src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"
/>
</div>
<div>技术部</div>
<div>68.91%</div>
</div>
@ -155,7 +291,10 @@
</div>
<div style="width: 25%">
<div class="home3Item">
<blockquote class="public" style="margin-left: 0">
<blockquote
class="public"
style="margin-left: 0"
>
<div class="header-wrapper">
<span>快捷入口</span>
</div>
@ -184,9 +323,11 @@
</div>
</div>
<div class="home5Item">
<blockquote class="public" style="margin-left: 0">
<blockquote
class="public"
style="margin-left: 0"
>
<div class="header-wrapper">
<span>系统事项</span>
</div>
@ -194,21 +335,58 @@
<div class="home5ItemIndex">
<div class="home5ItemIndexEachItem">
<div>未处理</div>
<i style="font-size: 20px;color:red"> 458 </i>
<div
ref="odometerEl"
style="font-size: 20px; color: red"
></div>
<!-- <i style="font-size: 20px; color: red">458</i> -->
</div>
<div class="home5ItemIndexEachItem">
<div>已处理</div>
<i style="font-size: 20px"> 12 </i>
<div
style="font-size: 20px"
ref="odometerEl2"
></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import "odometer/themes/odometer-theme-default.css";
// @ts-ignore
import Odometer from "odometer";
const odometerEl = ref(null);
const odometerEl2 = ref(null);
const targetNumber = 458;
const targetNumber2 = 12;
onMounted(() => {
const od = new Odometer({
el: odometerEl.value,
value: 0,
format: "(,ddd)", //
duration: 2000,
});
setTimeout(() => {
od.update(targetNumber);
}, 100);
const od2 = new Odometer({
el: odometerEl2.value,
value: 0,
format: "(,ddd)", //
duration: 2000,
});
setTimeout(() => {
od2.update(targetNumber2);
}, 100);
});
const isFold = ref(true);
const toggleFold = () => {
isFold.value = !isFold.value;
@ -218,67 +396,157 @@
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
{
key: 1,
name: "环境监测",
digital: "0 / 0",
mechanism: "留样柜",
digitalKey: "1 / 1",
},
{
key: 2,
name: "晨检机",
digital: "1 / 1",
mechanism: "点评机",
digitalKey: "0 / 0",
},
{
key: 3,
name: "资质",
digital: "19",
mechanism: "健康证",
digitalKey: "94",
},
],
risk: "低风险",
score: "100",
ranking: "排名",
num: 1
num: 1,
},
{
titleName: "某某中学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
{
key: 1,
name: "环境监测",
digital: "0 / 0",
mechanism: "留样柜",
digitalKey: "1 / 1",
},
{
key: 2,
name: "晨检机",
digital: "1 / 1",
mechanism: "点评机",
digitalKey: "0 / 0",
},
{
key: 3,
name: "资质",
digital: "19",
mechanism: "健康证",
digitalKey: "94",
},
],
risk: "低风险",
score: "95",
ranking: "排名",
num: 2
num: 2,
},
{
titleName: "某某幼儿园",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
{
key: 1,
name: "环境监测",
digital: "0 / 0",
mechanism: "留样柜",
digitalKey: "1 / 1",
},
{
key: 2,
name: "晨检机",
digital: "1 / 1",
mechanism: "点评机",
digitalKey: "0 / 0",
},
{
key: 3,
name: "资质",
digital: "19",
mechanism: "健康证",
digitalKey: "94",
},
],
risk: "低风险",
score: "80",
ranking: "排名",
num: 3
num: 3,
},
{
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
{
key: 1,
name: "环境监测",
digital: "0 / 0",
mechanism: "留样柜",
digitalKey: "1 / 1",
},
{
key: 2,
name: "晨检机",
digital: "1 / 1",
mechanism: "点评机",
digitalKey: "0 / 0",
},
{
key: 3,
name: "资质",
digital: "19",
mechanism: "健康证",
digitalKey: "94",
},
],
risk: "低风险",
score: "90",
ranking: "排名",
num: 4
num: 4,
},
{
titleName: "某某小学",
video: "屏幕",
intermediate: [
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
{
key: 1,
name: "环境监测",
digital: "0 / 0",
mechanism: "留样柜",
digitalKey: "1 / 1",
},
{
key: 2,
name: "晨检机",
digital: "1 / 1",
mechanism: "点评机",
digitalKey: "0 / 0",
},
{
key: 3,
name: "资质",
digital: "19",
mechanism: "健康证",
digitalKey: "94",
},
],
risk: "低风险",
score: "100",
ranking: "排名",
num: 5
}
num: 5,
},
]);
</script>
<style scoped lang="scss">
@ -287,20 +555,21 @@
justify-content: space-between;
//align-items: center;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
.homeItem {
width: 100%;
background: var(--bg-color);
margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 10px 15px;
color: var(--text-color);
.homeItemIndex {
margin-bottom: 10px;
line-height: 1.6;
border-left: 5px solid #5FB878;
border-left: 5px solid #5fb878;
border-radius: 0 2px 2px 0;
padding-left: 10px;
@ -309,9 +578,9 @@
padding: 0 6px;
font-size: 12px;
text-align: center;
background-color: #FF5722;
background-color: #ff5722;
color: #fff;
border-radius: 2px
border-radius: 2px;
}
}
}
@ -320,7 +589,7 @@
width: 100%;
background: var(--bg-color);
margin-bottom: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 10px 15px;
color: var(--text-color);
@ -397,7 +666,7 @@
border: none !important;
border-bottom: 1px solid var(--border-bottom) !important;
clear: both;
background: 0 0
background: 0 0;
}
.risk {
@ -459,7 +728,7 @@
margin-bottom: 15px;
border-radius: 2px;
background: var(--bg-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 10px 15px;
height: 25%;
color: var(--text-color);
@ -473,13 +742,13 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background-color: #F7F7F7;
background-color: #f7f7f7;
border-radius: 4px;
height: 50px;
width: 30%;
color: #666;
margin-right: 10px;
margin-bottom: 10px
margin-bottom: 10px;
}
}
}
@ -488,7 +757,7 @@
margin-bottom: 15px;
border-radius: 2px;
background: var(--bg-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 10px 15px;
height: 10%;
color: var(--text-color);
@ -501,13 +770,13 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background-color: #F7F7F7;
background-color: #f7f7f7;
border-radius: 4px;
height: 50px;
width: 45%;
color: #666;
margin-right: 10px;
margin-bottom: 10px
margin-bottom: 10px;
}
}
}
@ -515,7 +784,7 @@
.public {
margin-bottom: 10px;
border-left: 5px solid #5FB878;
border-left: 5px solid #5fb878;
border-radius: 0 2px 2px 0;
padding-left: 10px;
height: 18px;