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 15:07:11 +08:00
parent d650dedcb6
commit 552c6888e5
1 changed files with 186 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,7 +109,7 @@
</div>
<div class="right">
<div class="appPdDv-title">网格信息</div>
<div class="right-item">
<div class="right-item top-wrapper">
<div class="title">"星"网格</div>
<div class="item-wrapper">
<div class="item-top__item">
@@ -130,33 +130,33 @@
</div>
</div>
</div>
<div class="right-item">
<div class="right-item middle-wrapper">
<div class="title">居民群统计</div>
<div class="item-table">
<div class="item-table__header">
<span>居民群</span>
<span>群主</span>
<span>群人数</span>
<span style="width: 110px">居民群</span>
<span style="flex: 1; text-align: center;">群主</span>
<span style="width: 60px; text-align: right;">群人数</span>
</div>
<div class="item-table__body">
<div class="item-table__item" v-for="(item, index) in 4" :key="index">
<span>XX网格居民群</span>
<span>王磊</span>
<span>150</span>
<span style="width: 110px">XX网格居民群</span>
<span style="flex: 1; text-align: center;">王磊</span>
<span style="width: 60px; text-align: right;">150</span>
</div>
</div>
</div>
</div>
<div class="right-item">
<div class="right-item bottom-wrapper">
<div class="title">积分排行</div>
<div class="item-wrapper">
<div class="tab">
<h2 :class="[rightIndex === '0' ? 'active' : '']">累计积分榜</h2>
<h2 :class="[rightIndex === '1' ? 'active' : '']">上周积分榜</h2>
<div :class="[rightIndex === 0 ? 'active' : '']">累计积分榜</div>
<div :class="[rightIndex === 1 ? 'active' : '']">上周积分榜</div>
</div>
<div class="tab-content">
<div class="tab-item" v-for="(item, index) in 5" :key="index">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
<div class="middel">
<div class="top">
<h2>王磊</h2>
@@ -355,9 +355,183 @@
position: relative;
width: 360px;
height: 100%;
padding: 36px 12px 12px;
box-shadow: inset 0px 0px 5px 0px #D5E6FF;
border-radius: 8px;
border: 1px solid #030D1C;
.top-wrapper {
margin-bottom: 23px;
.item-wrapper {
display: flex;
align-items: center;
.item-top__item {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex: 1;
margin-right: 8px;
width: 78px;
height: 66px;
border-radius: 4px;
border: 1px solid #23A0AC;
h2 {
margin-bottom: 4px;
color: #fff;
font-size: 20px;
}
p {
color: #2AF0F8;
font-size: 12px;
}
&:last-child {
margin-right: 0;
}
}
}
}
.middle-wrapper {
margin-bottom: 23px;
.item-table {
.item-table__header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 24px;
color: #82C5FF;
font-size: 14px;
background: rgba(35,160,172,0.2000);
}
.item-table__body {
.item-table__item {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 24px;
color: #fff;
font-size: 14px;
background: rgba(35,160,172,0.2000);
&:nth-of-type(2n - 1) {
background: transparent;
}
}
}
}
}
.bottom-wrapper {
.tab {
display: flex;
align-items: center;
height: 32px;
margin-bottom: 15px;
border: 1px solid #0E6EB5;
div {
flex: 1;
line-height: 32px;
text-align: center;
color: #fff;
font-size: 14px;
cursor: pointer;
user-select: none;
&.active {
background: #0F93B8;
}
}
}
.tab-content {
.tab-item {
display: flex;
align-items: center;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.left {
width: 22px;
height: 24px;
line-height: 24px;
text-align: center;
color: #fff;
font-size: 14px;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon3.png);
background-size: 100% 100%;
&.left0 {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon1.png);
background-size: 100% 100%;
}
&.left1 {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon2.png);
background-size: 100% 100%;
}
}
i {
position: relative;
color: #fff;
font-size: 12px;
font-style: normal;
transform: translateY(50%);
}
.middel {
width: 250px;
margin: 0 8px;
p {
width: 100%;
height: 8px;
background: linear-gradient(270deg, #51BF34 0%, #257718 100%);
border: 1px solid;
border-image: linear-gradient(270deg, rgba(96, 255, 99, 1), rgba(13, 156, 17, 1)) 1 1;
}
.top {
display: flex;
align-items: center;
margin-bottom: 4px;
h2 {
margin-right: 4px;
color: #FFFFFF;
font-size: 14px;
}
span {
width: 48px;
height: 20px;
line-height: 20px;
text-align: center;
color: #2AF0F8;
font-size: 12px;
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%);
border: 1px solid;
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1;
}
}
}
}
}
}
}
}
</style>