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:44:47 +08:00
parent b804a7e5aa
commit 2f05a88e56
1 changed files with 111 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,7 +113,23 @@
</div>
<div class="item item-tags">
<div class="title">群聊统计</div>
<div class="chart4" style="width: 336px; height: 134px;"></div>
<div class="item-top ql">
<div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
</div>
<div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
</div>
<div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
<h2>单聊会话</h2>
<p>279</p>
</div>
</div>
<div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 134px;"></div>
<div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 134px;"></div>
<div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 134px;"></div>
</div>
</div>
</div>
@@ -218,7 +234,8 @@
return {
leftIndex: 0,
rightIndex: 0,
dlIndex: 0
dlIndex: 0,
qlIndex: 0
}
},
@@ -235,6 +252,18 @@
{offset: 0, color: 'rgba(66, 187, 255, 1)'},
{offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
])
this.initBarChart('.chart5', [
{offset: 0, color: 'rgba(66, 255, 254, 1)'},
{offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
])
this.initBarChart('.chart6', [
{offset: 0, color: 'rgba(255, 190, 66, 1)'},
{offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
])
this.initBarChart('.chart7', [
{offset: 0, color: 'rgba(66, 187, 255, 1)'},
{offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
])
}, 500)
})
},
@@ -484,6 +513,86 @@
}
}
.ql {
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;
cursor: pointer;
user-select: none;
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.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/ql5.png);
background-size: 100% 100%;
h2 {
color: #FFD458;
}
}
&:nth-of-type(3) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql6.png);
background-size: 100% 100%;
h2 {
color: #4488FB;
}
}
p {
font-size: 14px;
color: #fff;
font-weight: bold;
font-style: oblique;
}
&.active {
&:nth-of-type(1) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql1.png);
background-size: 100% 100%;
h2 {
color: #fff;
}
}
&:nth-of-type(2) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql2.png);
background-size: 100% 100%;
h2 {
color: #fff;
}
}
&:nth-of-type(3) {
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql3.png);
background-size: 100% 100%;
h2 {
color: #fff;
}
}
}
}
}
.appPdDv-title {
position: absolute;
top: 0;