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-09-08 09:03:35 +08:00
parent 85caf086b7
commit ec379e6b72
1 changed files with 40 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
project/dv/apps/AppXyDv.vue
View File

@@ -171,34 +171,18 @@
</div> </div>
</div> </div>
<div class="right-item bottom-wrapper"> <div class="right-item bottom-wrapper">
<div class="title">积分排行</div> <div class="title">警务群统计</div>
<div class="item-wrapper"> <div class="item-table">
<div class="tab"> <div class="item-table__header">
<div :class="[rightIndex === 0 ? 'active' : '']" @click="rightIndex = 0">累计积分榜</div> <span style="width: 110px">居民群</span>
<div :class="[rightIndex === 1 ? 'active' : '']" @click="rightIndex = 1">上周积分榜</div> <span style="flex: 1; text-align: center;">群主</span>
<span style="width: 60px; text-align: right;">群人数</span>
</div> </div>
<div class="tab-content"> <div class="item-table__body">
<div class="tab-item" v-for="(item, index) in pointList" :key="index" v-show="rightIndex === 0"> <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
<div class="left" :class="'left'+ index">{{ index + 1 }}</div> <span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
<div class="middel"> <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
<div class="top"> <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
<h2>{{ item.userName }}</h2>
<!-- <span v-if="index === 0">网格长</span> -->
</div>
<p></p>
</div>
<i>{{ item.userIntegral }}</i>
</div>
<div class="tab-item" v-for="(item, index) in rankList" :key="index" v-show="rightIndex === 1">
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
<div class="middel">
<div class="top">
<h2>{{ item.userName }}</h2>
<!-- <span v-if="index === 0">网格长</span> -->
</div>
<p></p>
</div>
<i>{{ item.changeIntegral }}</i>
</div> </div>
</div> </div>
</div> </div>
@@ -229,7 +213,6 @@
data () { data () {
return { return {
leftIndex: 0, leftIndex: 0,
rightIndex: 0,
dlIndex: 0, dlIndex: 0,
qlIndex: 0, qlIndex: 0,
currGirdName: '', currGirdName: '',
@@ -241,9 +224,7 @@
groupNumber: {}, groupNumber: {},
replyPercentage: {}, replyPercentage: {},
groupChatNumber: {}, groupChatNumber: {},
dynamicList: [], dynamicList: []
rankList: [],
pointList: []
} }
}, },
@@ -1120,9 +1101,6 @@
} }
} }
.middle-wrapper {
margin-bottom: 23px;
.item-table { .item-table {
position: relative; position: relative;
height: 240px; height: 240px;
@@ -1194,106 +1172,46 @@
} }
} }
} }
.middle-wrapper {
margin-bottom: 23px;
} }
.bottom-wrapper { .bottom-wrapper {
.tab { .item-table {
display: flex; .item-table__header {
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 {
height: 230px;
overflow-y: auto;
.tab-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; justify-content: space-between;
height: 40px;
padding: 0 24px;
color: #82C5FF;
font-size: 14px;
background: rgba(35,160,172,0.2000);
}
&:last-child { .item-table__body {
margin-bottom: 0; height: 280px;
} overflow-y: overlay;
.left { .item-table__item {
width: 22px; display: flex;
height: 24px; align-items: center;
line-height: 24px; justify-content: space-between;
text-align: center; height: 40px;
padding: 0 24px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon3.png); background: rgba(35,160,172,0.2000);
background-size: 100% 100%;
&.left0 { &:nth-of-type(2n - 1) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon1.png); background: transparent;
background-size: 100% 100%;
} }
&.left1 { span {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon2.png); white-space: nowrap;
background-size: 100% 100%; overflow: hidden;
} text-overflow: ellipsis;
}
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;
}
} }
} }
} }