kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏

Browse Source
This commit is contained in:
yanran200730
2022-07-21 17:20:02 +08:00
parent 5e5e0d9b57
commit 73080b55f8
2 changed files with 136 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
project/dv/apps/AppPdDv.vue
View File

@@ -10,7 +10,7 @@
<div class="tab-content__item" v-show="leftIndex === 0"> <div class="tab-content__item" v-show="leftIndex === 0">
<div class="item"> <div class="item">
<div class="title">居民好友统计</div> <div class="title">居民好友统计</div>
<div class="item-top"> <div class="item-top jmhy">
<div class="item-top__item"> <div class="item-top__item">
<h2>居民好友</h2> <h2>居民好友</h2>
<div class="bottom"> <div class="bottom">
@@ -37,7 +37,7 @@
</div> </div>
<div class="item"> <div class="item">
<div class="title">居民群统计</div> <div class="title">居民群统计</div>
<div class="item-top"> <div class="item-top jmq">
<div class="item-top__item"> <div class="item-top__item">
<h2>居民群</h2> <h2>居民群</h2>
<div class="bottom"> <div class="bottom">
@@ -92,8 +92,8 @@
<div class="title">消息回复率</div> <div class="title">消息回复率</div>
<div class="item-top DonutChart-wrapper"> <div class="item-top DonutChart-wrapper">
<DonutChart v-if="leftIndex === 1" :ratio="100" text="昨日"></DonutChart> <DonutChart v-if="leftIndex === 1" :ratio="100" text="昨日"></DonutChart>
<DonutChart v-if="leftIndex === 1" :ratio="40" text="近7天"></DonutChart> <DonutChart v-if="leftIndex === 1" :ratio="25" text="近7天"></DonutChart>
<DonutChart v-if="leftIndex === 1" :ratio="70" text="近1个月"></DonutChart> <DonutChart v-if="leftIndex === 1" :ratio="50" text="近1个月"></DonutChart>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
@@ -475,6 +475,136 @@
} }
} }
.jmhy {
display: flex;
align-items: center;
justify-content: space-between;
.item-top__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 107px;
height: 52px;
line-height: 1;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.png);
background-size: 100% 100%;
h2 {
margin-bottom: 4px;
color: #2AB7D1;
font-size: 12px;
}
&:nth-of-type(2) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm2.png);
background-size: 100% 100%;
h2 {
color: #5ADA92;
}
}
&:nth-of-type(3) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
background-size: 100% 100%;
h2 {
color: #FF5655;
}
}
.bottom {
display: flex;
align-items: center;
span {
margin-right: 2px;
font-size: 14px;
color: #fff;
font-weight: bold;
font-style: oblique;
}
img {
position: relative;
top: 2px;
}
}
}
}
.jmq {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.item-top__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 78px;
height: 52px;
line-height: 1;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.png);
background-size: 100% 100%;
h2 {
margin-bottom: 4px;
color: #2AB7D1;
font-size: 12px;
}
&:nth-of-type(2) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq2.png);
background-size: 100% 100%;
h2 {
color: #2AB7D1;
}
}
&:nth-of-type(3) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
background-size: 100% 100%;
h2 {
color: #5ADA92;
}
}
&:nth-of-type(4) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
background-size: 100% 100%;
h2 {
color: #FF5655;
}
}
.bottom {
display: flex;
align-items: center;
span {
margin-right: 2px;
font-size: 14px;
color: #fff;
font-weight: bold;
font-style: oblique;
}
img {
position: relative;
top: 2px;
}
}
}
}
.chart1 { .chart1 {
margin: 10px 0 18px; margin: 10px 0 18px;
} }

3
project/dv/apps/DonutChart.vue
View File

@@ -119,7 +119,8 @@
margin-bottom: 8px; margin-bottom: 8px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #CEE1FF; color: #fff;
font-style: oblique;
} }
i { i {