居民统计
This commit is contained in:
liuye
@@ -27,7 +27,7 @@ export default {
|
|||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.id = options.id
|
this.id = options.id
|
||||||
this.id = '7a4701d5641543cca4419488db368d3e'
|
// this.id = '7a4701d5641543cca4419488db368d3e'
|
||||||
this.getAppInfo()
|
this.getAppInfo()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
117
src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
Normal file
117
src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppResidentStatistics">
|
||||||
|
<AiTopFixed>
|
||||||
|
<div class="area-content">
|
||||||
|
<AiAreaPicker v-model="areaId" :name.sync="areaName">
|
||||||
|
<div flex>
|
||||||
|
<img src="./img/location.png" alt="" class="icon-img">
|
||||||
|
<AiMore v-model="areaName" icon="arrow-down"/>
|
||||||
|
</div>
|
||||||
|
</AiAreaPicker>
|
||||||
|
</div>
|
||||||
|
</AiTopFixed>
|
||||||
|
<div class="tab-list">
|
||||||
|
<div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
|
||||||
|
</div>
|
||||||
|
<component :is="tabList[tabIndex].component" class="component" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Files from './components/Files'
|
||||||
|
import Message from './components/Message'
|
||||||
|
import People from './components/People'
|
||||||
|
export default {
|
||||||
|
name: "AppResidentStatistics",
|
||||||
|
appName: "居民统计",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [
|
||||||
|
{
|
||||||
|
text: '人群统计',
|
||||||
|
component: People
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '档案统计',
|
||||||
|
component: Files
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '会话统计',
|
||||||
|
component: Message
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tabIndex: 0,
|
||||||
|
areaId: '',
|
||||||
|
areaName: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {Files, Message, People},
|
||||||
|
methods: {
|
||||||
|
tabClick(index) {
|
||||||
|
this.tabIndex = index
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
document.title = "居民统计"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppResidentStatistics {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #F5F6F7;
|
||||||
|
padding-bottom: 112px;
|
||||||
|
::v-deep .AiTopFixed {
|
||||||
|
.content {
|
||||||
|
background-color: #3975C6;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.icon-img{
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .AiMore{
|
||||||
|
span{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-list {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 88px;
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
color: #666;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000;
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -25px;
|
||||||
|
width: 50px;
|
||||||
|
height: 6px;
|
||||||
|
background: #3399FF;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.component{
|
||||||
|
padding-top: 88px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
115
src/project/saas/AppResidentStatistics/components/Files.vue
Normal file
115
src/project/saas/AppResidentStatistics/components/Files.vue
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Files">
|
||||||
|
<div class="title">特殊人群</div>
|
||||||
|
<div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
|
||||||
|
<div class="title">年龄分布</div>
|
||||||
|
<div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
|
||||||
|
<div class="title">男女比例</div>
|
||||||
|
<div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
name: "Files",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
echartDataSpecial: null,
|
||||||
|
echartDataAge: null,
|
||||||
|
echartDataSex: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
methods: {
|
||||||
|
chartInit() {
|
||||||
|
this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
|
||||||
|
this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
|
||||||
|
this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
{ value: 300, name: 'Video Ads' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.echartDataSpecial.setOption(option)
|
||||||
|
this.echartDataSex.setOption(option)
|
||||||
|
|
||||||
|
var option2 = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
120,
|
||||||
|
{
|
||||||
|
value: 200,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#a90000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
150,
|
||||||
|
80,
|
||||||
|
70,
|
||||||
|
110,
|
||||||
|
130
|
||||||
|
],
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.echartDataAge.setOption(option2)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chartInit()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Files {
|
||||||
|
padding: 0 32px;
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 40px 0 24px 0;
|
||||||
|
}
|
||||||
|
.chart-content{
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
199
src/project/saas/AppResidentStatistics/components/Message.vue
Normal file
199
src/project/saas/AppResidentStatistics/components/Message.vue
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Message">
|
||||||
|
<div class="title">消息回复率</div>
|
||||||
|
<div class="title">单聊统计</div>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||||
|
<p>{{ item.label }}</p>
|
||||||
|
<h3>{{ item.value }}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-content" id="chartFriend"></div>
|
||||||
|
<div class="title">单聊统计</div>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||||||
|
<p>{{ item.label }}</p>
|
||||||
|
<h3>{{ item.value }}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-content" id="chartGroup"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
name: "Message",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
friendList: [
|
||||||
|
{
|
||||||
|
label: '单聊会话',
|
||||||
|
value: '235'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '单聊消息',
|
||||||
|
value: '23500'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
groupList: [
|
||||||
|
{
|
||||||
|
label: '活跃群聊',
|
||||||
|
value: '235'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '活跃群成员',
|
||||||
|
value: '23'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '群聊消息',
|
||||||
|
value: '255,625'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
echartDataFriend: null,
|
||||||
|
echartDataGroup: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
methods: {
|
||||||
|
chartInit() {
|
||||||
|
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||||
|
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||||
|
var option = {
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E1E5EF', //x轴的颜色
|
||||||
|
width: 1, //轴线的宽度
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine:{ //y轴
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
minInterval: 50,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [155, 130, 120, 160, 120, 130, 110],
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {//覆盖区域的渐变色
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#2891FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle : {
|
||||||
|
normal : {
|
||||||
|
color:'#2891FF',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.echartDataFriend.setOption(option)
|
||||||
|
this.echartDataGroup.setOption(option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chartInit()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Message {
|
||||||
|
padding: 0 30px;
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 40px 0 24px 0;
|
||||||
|
span {
|
||||||
|
font-size: 26px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
color: #999;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-content {
|
||||||
|
display: flex;
|
||||||
|
padding: 24px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
p {
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
color: #666;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 517px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
210
src/project/saas/AppResidentStatistics/components/People.vue
Normal file
210
src/project/saas/AppResidentStatistics/components/People.vue
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
<template>
|
||||||
|
<div class="People">
|
||||||
|
<div class="title">
|
||||||
|
居民好友统计<span>（统计数据为去重后的数据）</span>
|
||||||
|
</div>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||||
|
<p>{{ item.label }}</p>
|
||||||
|
<h3>{{ item.value }}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-content" id="chartFriend"></div>
|
||||||
|
<div class="title">
|
||||||
|
居民群统计<span>（统计数据为去重后的数据）</span>
|
||||||
|
</div>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||||||
|
<p>{{ item.label }}</p>
|
||||||
|
<h3>{{ item.value }}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-content" id="chartGroup"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
name: "People",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
friendList: [
|
||||||
|
{
|
||||||
|
label: '居民好友',
|
||||||
|
value: '235,625'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '昨日新增',
|
||||||
|
value: '235'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '昨日流失',
|
||||||
|
value: '18'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
groupList: [
|
||||||
|
{
|
||||||
|
label: '居民群',
|
||||||
|
value: '235'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '居民群',
|
||||||
|
value: '235,625'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '昨日新增',
|
||||||
|
value: '235'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '昨日流失',
|
||||||
|
value: '18'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
echartDataFriend: null,
|
||||||
|
echartDataGroup: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
methods: {
|
||||||
|
chartInit() {
|
||||||
|
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||||
|
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||||
|
var option = {
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E1E5EF', //x轴的颜色
|
||||||
|
width: 1, //轴线的宽度
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine:{ //y轴
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
minInterval: 50,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [155, 130, 120, 160, 120, 130, 110],
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {//覆盖区域的渐变色
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#2891FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle : {
|
||||||
|
normal : {
|
||||||
|
color:'#2891FF',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.echartDataFriend.setOption(option)
|
||||||
|
this.echartDataGroup.setOption(option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chartInit()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.People {
|
||||||
|
padding: 0 30px;
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 40px 0 24px 0;
|
||||||
|
span {
|
||||||
|
font-size: 26px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
color: #999;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-content {
|
||||||
|
display: flex;
|
||||||
|
padding: 24px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
p {
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
color: #666;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 517px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/project/saas/AppResidentStatistics/img/location.png
Normal file
BIN
src/project/saas/AppResidentStatistics/img/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Reference in New Issue
Block a user