小动画
This commit is contained in:
parent
3f5098167c
commit
660be19d5e
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -7,39 +7,70 @@
|
|||
<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>
|
||||
<!-- 折叠内容区域 -->
|
||||
<div :style="{height:isFold?'420px':'600px'}">
|
||||
<div :style="{ height: isFold ? '420px' : '600px' }">
|
||||
<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">
|
||||
<div class="home4ItemIndexItem">
|
||||
<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 class="home4Item2Index" >
|
||||
<blockquote class="public" style="margin-top: 10px">
|
||||
</div>
|
||||
<div class="home4Item2Index">
|
||||
<blockquote
|
||||
class="public"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="header-wrapper">
|
||||
<span>客户点评</span>
|
||||
</div>
|
||||
</blockquote>
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -163,30 +302,32 @@
|
|||
<div class="home3ItemIndex">
|
||||
<div class="home3ItemIndexEachItem">
|
||||
<div>基础信息管理</div>
|
||||
<i style="font-size: 20px"> > </i>
|
||||
<i style="font-size: 20px">></i>
|
||||
</div>
|
||||
<div class="home3ItemIndexEachItem">
|
||||
<div>设备台账</div>
|
||||
<i style="font-size: 20px"> > </i>
|
||||
<i style="font-size: 20px">></i>
|
||||
</div>
|
||||
<div class="home3ItemIndexEachItem">
|
||||
<div>设备状态</div>
|
||||
<i style="font-size: 20px"> > </i>
|
||||
<i style="font-size: 20px">></i>
|
||||
</div>
|
||||
<div class="home3ItemIndexEachItem">
|
||||
<div>营养食安</div>
|
||||
<i style="font-size: 20px"> > </i>
|
||||
<i style="font-size: 20px">></i>
|
||||
</div>
|
||||
<div class="home3ItemIndexEachItem">
|
||||
<div>数据分析 </div>
|
||||
<i style="font-size: 20px"> > </i>
|
||||
<div>数据分析</div>
|
||||
<i style="font-size: 20px">></i>
|
||||
</div>
|
||||
</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,22 +742,22 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home5Item{
|
||||
.home5Item {
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue