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 13:58:28 +08:00
parent 2d53a8a31d
commit e85ef5ff6f
1 changed files with 275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
project/dv/apps/AppPdDv.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div class="AppPdDv">
<div class="left">
<div class="appPdDv-title">企微数据库</div>
<div class="tab">
<div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']">居民统计</div>
<div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']">会话统计</div>
</div>
<div class="tab-content">
<div class="tab-content__item">
<div class="item">
<div class="title">居民好友统计</div>
<div class="item-top">
<div class="item-top__item">
<h2>居民好友</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
<div class="item-top__item">
<h2>昨日新增</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
<div class="item-top__item">
<h2>昨日流失</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
</div>
<div class="chart1"></div>
</div>
<div class="item">
<div class="title">居民群统计</div>
<div class="item-top">
<div class="item-top__item">
<h2>居民群</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
<div class="item-top__item">
<h2>群成员</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
<div class="item-top__item">
<h2>昨日新增</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
<div class="item-top__item">
<h2>昨日流失</h2>
<div class="bottom">
<span>9</span>
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
</div>
</div>
</div>
<div class="chart2"></div>
</div>
<div class="item">
<div class="title">标签人群</div>
<div class="item-bottom">
<div class="item-bottom__item">
<h2>居民群</h2>
<span>245</span>
</div>
<div class="item-bottom__item">
<h2>群成员</h2>
<span>245</span>
</div>
<div class="item-bottom__item">
<h2>昨日新增</h2>
<span>245</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="middle">
<div class="top"></div>
<div class="bottom">
<div class="bottom-title">
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
<h2>网格动态</h2>
</div>
<div class="bottom-list">
<div class="item" v-for="(item, index) in 3" :key="index">
<i>07/19 09:45</i>
<span>书院社区-张三</span>
<em>添加居民"</em>
<p>蓝天白云</p>
<em>"为好友</em>
</div>
</div>
</div>
</div>
<div class="right">
<div class="appPdDv-title">网格信息</div>
<div class="right-item">
<div class="title">"星"网格</div>
<div class="item-wrapper">
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
</div>
<div class="item-top__item">
<h2>925</h2>
<p>微网格长</p>
</div>
</div>
</div>
<div class="right-item">
<div class="title">居民群统计</div>
<div class="item-table">
<div class="item-table__header">
<span>居民群</span>
<span>群主</span>
<span>群人数</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>
</div>
</div>
</div>
</div>
<div class="right-item">
<div class="title">积分排行</div>
<div class="item-wrapper">
<div class="tab">
<h2 :class="[rightIndex === '0' ? 'active' : '']">累计积分榜</h2>
<h2 :class="[rightIndex === '1' ? 'active' : '']">上周积分榜</h2>
</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="middel">
<div class="top">
<h2>王磊</h2>
<span>网格长</span>
</div>
<p></p>
</div>
<i>433</i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AppPdDv',
label: '微网实格',
data () {
return {
leftIndex: 0,
rightIndex: 0
}
}
}
</script>
<style lang="scss" scoped>
.AppPdDv {
display: flex;
height: 100%;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
background-size: 100% 100%;
* {
box-sizing: border-box;
}
.appPdDv-title {
position: absolute;
top: 0;
left: 10px;
z-index: 1;
width: 146px;
height: 40px;
line-height: 40px;
padding-left: 10px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
font-weight: bold;
transform: translateY(-50%);
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
background-size: 100% 100%;
}
.title {
width: 154px;
height: 42px;
padding: 4px 0 0 34px;
color: #fff;
font-size: 16px;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
background-size: 100% 100%;
}
& > .left {
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;
.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;
}
}
}
}
& > .middle {
flex: 1;
height: 100%;
margin: 0 16px;
}
& > .right {
width: 360px;
height: 100%;
box-shadow: inset 0px 0px 5px 0px #D5E6FF;
border-radius: 8px;
border: 1px solid #030D1C;
}
}
</style>