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

首页

Browse Source
This commit is contained in:
liuye
2022-08-08 10:57:09 +08:00
parent 91abd76323
commit 91e4292b5d
19 changed files with 364 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/project/saas/AppHome/components/Home.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div class="Home">
<div class="tips">
<img src="../img/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
</div>
<div class="content">
<div class="user-info">
<div class="left">
<img src="../img/avatva.jpg" alt="">
</div>
<div class="right">
<p class="name">你好，汪周文</p>
<p class="time">您已加入慧政务 <span>15</span>天</p>
</div>
</div>
<div class="app-list">
<div class="item" v-for="(item, index) in appList" :key="index">
<img :src="item.img" alt="">
<p>{{ item.title }}</p>
</div>
</div>
<div class="title">数据统计</div>
<div class="tab-content">
<div class="item" v-for="(item, index) in tabStatistics" :key="index">
<p><span></span>{{ item.title }}</p>
<div>{{ item.num }}</div>
</div>
</div>
<div class="title">居民活跃指数</div>
<div class="chart-content" id="statistic"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "Home",
data() {
return {
appList: [
{
img: require('../img/home-jmgl-icon.png'),
title: '居民管理'
},
{
img: require('../img/home-zfww-icon.png'),
title: '走访慰问'
},
{
img: require('../img/home-mdtj-icon.png'),
title: '矛盾调解'
},
{
img: require('../img/home-xftj-icon.png'),
title: '宣发统计'
}
],
tabStatistics: [
{
title: '网格数',
num: 15
},
{
title: '网格员数',
num: 35
},
{
title: '辖区户数',
num: 1550
},
{
title: '居民群数',
num: 15
}
],
echartData: null
}
},
methods: {
chartInit() {
this.echartData = echarts.init(document.getElementById('statistic'))
var option = {
grid: {
left: '6%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
lineStyle: {
normal: {
color: '#2891FF'
}
},
itemStyle : {
normal : {
color:'#2891FF',
}
}
}
]
};
this.echartData.setOption(option)
}
},
created() {
this.$nextTick(() => {
this.chartInit()
})
},
}
</script>
<style lang="scss" scoped>
.Home {
.tips {
padding: 24px 32px;
background-color: #3975C6;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #FFF;
line-height: 40px;
img {
width: 32px;
height: 32px;
margin-right: 16px;
vertical-align: middle;
}
}
.content {
padding: 0 32px;
.user-info {
display: flex;
padding: 48px 0 32px 0;
.left {
width: 96px;
height: 96px;
margin-right: 32px;
img {
width: 96px;
height: 96px;
border-radius: 50%;
border: 4px solid #FFFFFF;
box-sizing: border-box;
}
}
.right {
width: calc(100% - 128px);
margin-top: 6px;
.name {
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 44px;
}
.time {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 40px;
span {
color: #3975C6;
}
}
}
}
.app-list {
width: 100%;
background: #FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
border-radius: 8px;
display: flex;
.item {
flex: 1;
text-align: center;
padding: 24px 0;
img {
width: 64px;
height: 64px;
margin-bottom: 8px;
}
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 36px;
}
}
}
.title {
padding: 48px 0 24px 0;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
}
.tab-content {
.item {
display: inline-block;
width: 336px;
height: 160px;
background: #FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
border-radius: 16px;
padding: 24px;
box-sizing: border-box;
margin-bottom: 16px;
p {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666;
line-height: 40px;
margin-bottom: 8px;
span {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 4px solid #3975C6;
margin-right: 8px;
box-sizing: border-box;
}
}
div{
font-size: 48px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
line-height: 64px;
padding-left: 24px;
}
}
.item:nth-of-type(2n-1) {
margin-right: 14px;
}
.item:nth-last-of-type(1) {
p {
span {
border-color: #3ACEB3;
}
}
}
}
.chart-content{
width: 686px;
height: 514px;
background: #FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
border-radius: 8px;
margin-bottom: 82px;
}
}
}
</style>