小动画
This commit is contained in:
parent
3f5098167c
commit
660be19d5e
|
|
@ -19,6 +19,7 @@
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"naive-ui": "^2.41.0",
|
"naive-ui": "^2.41.0",
|
||||||
|
"odometer": "^0.4.8",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"pinia-plugin-persistedstate": "^4.2.0",
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
"sass": "^1.85.1",
|
"sass": "^1.85.1",
|
||||||
|
|
@ -3793,6 +3794,12 @@
|
||||||
"node": "^14.16.0 || >=16.10.0"
|
"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": {
|
"node_modules/ohash": {
|
||||||
"version": "2.0.11",
|
"version": "2.0.11",
|
||||||
"resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
|
"resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"naive-ui": "^2.41.0",
|
"naive-ui": "^2.41.0",
|
||||||
|
"odometer": "^0.4.8",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"pinia-plugin-persistedstate": "^4.2.0",
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
"sass": "^1.85.1",
|
"sass": "^1.85.1",
|
||||||
|
|
|
||||||
|
|
@ -7,39 +7,70 @@
|
||||||
<span class="homeSpan">2024-11-25</span>
|
<span class="homeSpan">2024-11-25</span>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<span>【系统菜单调整通知】</span>
|
<span>【系统菜单调整通知】</span>
|
||||||
<span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
|
<span>
|
||||||
|
为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="home2Item">
|
<div class="home2Item">
|
||||||
<blockquote class="public">
|
<blockquote class="public">
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>供应商</span>
|
<span>供应商</span>
|
||||||
<div class="fold-button" @click="toggleFold">
|
<div
|
||||||
|
class="fold-button"
|
||||||
|
@click="toggleFold"
|
||||||
|
>
|
||||||
<span>{{ isFold ? "展开" : "收起" }}</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<!-- 折叠内容区域 -->
|
<!-- 折叠内容区域 -->
|
||||||
<div :style="{height:isFold?'420px':'600px'}">
|
<div :style="{ height: isFold ? '420px' : '600px' }">
|
||||||
<div class="fold-content">
|
<div class="fold-content">
|
||||||
<!-- 这里放具体内容 -->
|
<!-- 这里放具体内容 -->
|
||||||
<div class="fold-content_item">
|
<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="fold-content_item_index_top">
|
||||||
<div class="content">{{ item.titleName }}</div>
|
<div class="content">{{ item.titleName }}</div>
|
||||||
<span>{{ item.video }}</span>
|
<span>{{ item.video }}</span>
|
||||||
</div>
|
</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.name }}</span>
|
||||||
<span style="width: 50px">{{ items.digital }}</span>
|
<span style="width: 50px">{{ items.digital }}</span>
|
||||||
<span style="width: 50px">{{ items.mechanism }}</span>
|
<span style="width: 50px">{{ items.mechanism }}</span>
|
||||||
<span style="width: 50px">{{ items.digitalKey }}</span>
|
<span style="width: 50px">{{ items.digitalKey }}</span>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div style="display: flex;align-items: center;justify-content: space-between">
|
<div
|
||||||
<div style="display: flex;">
|
style="
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="display: flex">
|
||||||
<div class="risk">{{ item.risk }}</div>
|
<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 }}分
|
{{ item.score }}分
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -49,7 +80,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,93 +87,199 @@
|
||||||
<div class="home4Item">
|
<div class="home4Item">
|
||||||
<div class="home4ItemIndex">
|
<div class="home4ItemIndex">
|
||||||
<div class="home4ItemIndexItem">
|
<div class="home4ItemIndexItem">
|
||||||
<blockquote class="public" style="margin-top: 10px">
|
<blockquote
|
||||||
|
class="public"
|
||||||
|
style="margin-top: 10px"
|
||||||
|
>
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>用户数据</span>
|
<span>用户数据</span>
|
||||||
</div>
|
</div>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666">总数</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 style="font-size: 20px">15452</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666"> 日活跃量</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 style="font-size: 20px">6666</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666">用户</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 style="font-size: 20px">524</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home4ItemIndexItem" >
|
<div class="home4ItemIndexItem">
|
||||||
<blockquote class="public" style="margin-top: 10px">
|
<blockquote
|
||||||
|
class="public"
|
||||||
|
style="margin-top: 10px"
|
||||||
|
>
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>每日消息</span>
|
<span>每日消息</span>
|
||||||
</div>
|
</div>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666">今日发送</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 style="font-size: 20px">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666"> 接受率</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 style="font-size: 20px">20%</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
|
<div
|
||||||
<div style="background-color: #F7F7F7;color: #666">查看率</div>
|
style="
|
||||||
<div style="font-size: 20px;color: #FFB800 !important">30%</div>
|
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>
|
||||||
</div>
|
</div>
|
||||||
<div class="home4Item2Index" >
|
</div>
|
||||||
<blockquote class="public" style="margin-top: 10px">
|
<div class="home4Item2Index">
|
||||||
|
<blockquote
|
||||||
|
class="public"
|
||||||
|
style="margin-top: 10px"
|
||||||
|
>
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>客户点评</span>
|
<span>客户点评</span>
|
||||||
</div>
|
</div>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div style="display: flex;justify-content: space-between">
|
<div style="display: flex; justify-content: space-between">
|
||||||
<div class="home4Item2IndexITem">
|
<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="display: flex">
|
||||||
<div style="width: 33%;text-align: center;margin-top: 19px">
|
<div style="width: 33%; text-align: center; margin-top: 19px">
|
||||||
<span>口味</span>
|
<span>口味</span>
|
||||||
<div style="color: #FFB800;font-size: 18px">54.64%</div>
|
<div style="color: #ffb800; font-size: 18px">54.64%</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 33%;text-align: center;margin-top: 19px">
|
<div style="width: 33%; text-align: center; margin-top: 19px">
|
||||||
<span>卫生</span>
|
<span>卫生</span>
|
||||||
<div style="color: #FFB800;font-size: 18px">54.64%</div>
|
<div style="color: #ffb800; font-size: 18px">54.64%</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 33%;text-align: center;margin-top: 19px">
|
<div style="width: 33%; text-align: center; margin-top: 19px">
|
||||||
<span>态度</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="home4Item2IndexITem">
|
<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>
|
||||||
<div
|
<div
|
||||||
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
|
style="
|
||||||
<div><img style="width: 20px;height: 20px"
|
display: flex;
|
||||||
src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"></div>
|
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>技术部</div>
|
||||||
<div>68.91%</div>
|
<div>68.91%</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
|
style="
|
||||||
<div><img style="width: 20px;height: 20px"
|
display: flex;
|
||||||
src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"></div>
|
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>技术部</div>
|
||||||
<div>68.91%</div>
|
<div>68.91%</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
|
style="
|
||||||
<div><img style="width: 20px;height: 20px"
|
display: flex;
|
||||||
src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"></div>
|
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>技术部</div>
|
||||||
<div>68.91%</div>
|
<div>68.91%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -155,7 +291,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 25%">
|
<div style="width: 25%">
|
||||||
<div class="home3Item">
|
<div class="home3Item">
|
||||||
<blockquote class="public" style="margin-left: 0">
|
<blockquote
|
||||||
|
class="public"
|
||||||
|
style="margin-left: 0"
|
||||||
|
>
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>快捷入口</span>
|
<span>快捷入口</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -163,30 +302,32 @@
|
||||||
<div class="home3ItemIndex">
|
<div class="home3ItemIndex">
|
||||||
<div class="home3ItemIndexEachItem">
|
<div class="home3ItemIndexEachItem">
|
||||||
<div>基础信息管理</div>
|
<div>基础信息管理</div>
|
||||||
<i style="font-size: 20px"> > </i>
|
<i style="font-size: 20px">></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="home3ItemIndexEachItem">
|
<div class="home3ItemIndexEachItem">
|
||||||
<div>设备台账</div>
|
<div>设备台账</div>
|
||||||
<i style="font-size: 20px"> > </i>
|
<i style="font-size: 20px">></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="home3ItemIndexEachItem">
|
<div class="home3ItemIndexEachItem">
|
||||||
<div>设备状态</div>
|
<div>设备状态</div>
|
||||||
<i style="font-size: 20px"> > </i>
|
<i style="font-size: 20px">></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="home3ItemIndexEachItem">
|
<div class="home3ItemIndexEachItem">
|
||||||
<div>营养食安</div>
|
<div>营养食安</div>
|
||||||
<i style="font-size: 20px"> > </i>
|
<i style="font-size: 20px">></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="home3ItemIndexEachItem">
|
<div class="home3ItemIndexEachItem">
|
||||||
<div>数据分析 </div>
|
<div>数据分析</div>
|
||||||
<i style="font-size: 20px"> > </i>
|
<i style="font-size: 20px">></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="home5Item">
|
<div class="home5Item">
|
||||||
<blockquote class="public" style="margin-left: 0">
|
<blockquote
|
||||||
|
class="public"
|
||||||
|
style="margin-left: 0"
|
||||||
|
>
|
||||||
<div class="header-wrapper">
|
<div class="header-wrapper">
|
||||||
<span>系统事项</span>
|
<span>系统事项</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -194,21 +335,58 @@
|
||||||
<div class="home5ItemIndex">
|
<div class="home5ItemIndex">
|
||||||
<div class="home5ItemIndexEachItem">
|
<div class="home5ItemIndexEachItem">
|
||||||
<div>未处理</div>
|
<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>
|
||||||
<div class="home5ItemIndexEachItem">
|
<div class="home5ItemIndexEachItem">
|
||||||
<div>已处理</div>
|
<div>已处理</div>
|
||||||
<i style="font-size: 20px"> 12 </i>
|
<div
|
||||||
|
style="font-size: 20px"
|
||||||
|
ref="odometerEl2"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
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 isFold = ref(true);
|
||||||
const toggleFold = () => {
|
const toggleFold = () => {
|
||||||
isFold.value = !isFold.value;
|
isFold.value = !isFold.value;
|
||||||
|
|
@ -218,67 +396,157 @@
|
||||||
titleName: "某某小学",
|
titleName: "某某小学",
|
||||||
video: "屏幕",
|
video: "屏幕",
|
||||||
intermediate: [
|
intermediate: [
|
||||||
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
|
{
|
||||||
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
|
key: 1,
|
||||||
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
|
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: "低风险",
|
risk: "低风险",
|
||||||
score: "100",
|
score: "100",
|
||||||
ranking: "排名",
|
ranking: "排名",
|
||||||
num: 1
|
num: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleName: "某某中学",
|
titleName: "某某中学",
|
||||||
video: "屏幕",
|
video: "屏幕",
|
||||||
intermediate: [
|
intermediate: [
|
||||||
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
|
{
|
||||||
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
|
key: 1,
|
||||||
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
|
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: "低风险",
|
risk: "低风险",
|
||||||
score: "95",
|
score: "95",
|
||||||
ranking: "排名",
|
ranking: "排名",
|
||||||
num: 2
|
num: 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleName: "某某幼儿园",
|
titleName: "某某幼儿园",
|
||||||
video: "屏幕",
|
video: "屏幕",
|
||||||
intermediate: [
|
intermediate: [
|
||||||
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
|
{
|
||||||
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
|
key: 1,
|
||||||
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
|
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: "低风险",
|
risk: "低风险",
|
||||||
score: "80",
|
score: "80",
|
||||||
ranking: "排名",
|
ranking: "排名",
|
||||||
num: 3
|
num: 3,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleName: "某某小学",
|
titleName: "某某小学",
|
||||||
video: "屏幕",
|
video: "屏幕",
|
||||||
intermediate: [
|
intermediate: [
|
||||||
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
|
{
|
||||||
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
|
key: 1,
|
||||||
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
|
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: "低风险",
|
risk: "低风险",
|
||||||
score: "90",
|
score: "90",
|
||||||
ranking: "排名",
|
ranking: "排名",
|
||||||
num: 4
|
num: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleName: "某某小学",
|
titleName: "某某小学",
|
||||||
video: "屏幕",
|
video: "屏幕",
|
||||||
intermediate: [
|
intermediate: [
|
||||||
{ key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
|
{
|
||||||
{ key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
|
key: 1,
|
||||||
{ key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
|
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: "低风险",
|
risk: "低风险",
|
||||||
score: "100",
|
score: "100",
|
||||||
ranking: "排名",
|
ranking: "排名",
|
||||||
num: 5
|
num: 5,
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
@ -287,20 +555,21 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
//align-items: center;
|
//align-items: center;
|
||||||
font-size: 14px;
|
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 {
|
.homeItem {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
margin-bottom: 10px;
|
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;
|
padding: 10px 15px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
.homeItemIndex {
|
.homeItemIndex {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
border-left: 5px solid #5FB878;
|
border-left: 5px solid #5fb878;
|
||||||
border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
|
||||||
|
|
@ -309,9 +578,9 @@
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #FF5722;
|
background-color: #ff5722;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 2px
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -320,7 +589,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
margin-bottom: 10px;
|
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;
|
padding: 10px 15px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
|
|
@ -397,7 +666,7 @@
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-bottom: 1px solid var(--border-bottom) !important;
|
border-bottom: 1px solid var(--border-bottom) !important;
|
||||||
clear: both;
|
clear: both;
|
||||||
background: 0 0
|
background: 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.risk {
|
.risk {
|
||||||
|
|
@ -459,7 +728,7 @@
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: var(--bg-color);
|
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;
|
padding: 10px 15px;
|
||||||
height: 25%;
|
height: 25%;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
@ -473,22 +742,22 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
background-color: #F7F7F7;
|
background-color: #f7f7f7;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home5Item{
|
.home5Item {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: var(--bg-color);
|
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;
|
padding: 10px 15px;
|
||||||
height: 10%;
|
height: 10%;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
@ -501,13 +770,13 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
background-color: #F7F7F7;
|
background-color: #f7f7f7;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -515,7 +784,7 @@
|
||||||
|
|
||||||
.public {
|
.public {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-left: 5px solid #5FB878;
|
border-left: 5px solid #5fb878;
|
||||||
border-radius: 0 2px 2px 0;
|
border-radius: 0 2px 2px 0;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue