Skip to content

P
pet-business-web
Commit 0de95463 authored by 陈明豪's avatar 陈明豪
Browse files
Options

数据统计-宠主数据统计-前端部分

parent 85e942fc
Show whitespace changes
Inline Side-by-side
Showing with 1088 additions and 9 deletions
src/router/index.js
View file @ 0de95463
......@@ -317,6 +317,13 @@ export const constantRoutes = [
component: () => import('@/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue'),
name: 'HospitalDataStatistics',
meta: { title: '医院数据统计', icon: 'component' }
},
{
path: 'pet-data-statistics',
props: true,
component: () => import('@/views/data-statistics/pet-data-statistics/pet-data-statistics.vue'),
name: 'PetDataStatistics',
meta: { title: '宠主数据统计', icon: 'component' }
}
]
},
......
src/views/data-statistics/echars-components/radar-chart-for-hospital.vue
View file @ 0de95463
......@@ -7,7 +7,7 @@
<script>
export default {
name: 'RadarChartForHospital',
props: ['title', 'radarIndicatorData', 'radarLegendData'],
props: ['title', 'yData1', 'yData2'],
data() {
return {}
},
......@@ -17,7 +17,7 @@ export default {
},
methods: {
setCharts() {
// const _this = this
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
......@@ -68,7 +68,7 @@ export default {
type: 'radar',
data: [
{
value: [42, 30, 20, 35, 50, 18],
value: _this.yData1,
name: '历史入驻量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
......@@ -93,7 +93,7 @@ export default {
}
},
{
value: [50, 14, 28, 26, 42, 21],
value: _this.yData2,
name: '当前有效数量',
symbol: 'emptyCircle',
symbolSize: 6,
......
src/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue 0 → 100644
View file @ 0de95463
<template>
<div ref="radarMap" class="radarChart">
雷达
</div>
</template>
<script>
export default {
name: 'RadarChartForPetOwnerPlatform',
props: ['title', 'yData1', 'yData2'],
data() {
return {}
},
watch: {},
mounted() {
this.setCharts()
},
methods: {
setCharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
title: {
left: 'left',
text: '医院评级分布',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
}
},
tooltip: {
show: true
},
legend: {
data: ['历史入驻量', '当前有效数量'],
left: 'right',
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
radar: {
// shape: 'circle',
center: ['50%', '55%'],
radius: 140,
indicator: [
{ name: '5000元以下', max: 50 },
{ name: '5000~12000元', max: 50 },
{ name: '12000~30000元', max: 50 },
{ name: '30000~100000元', max: 50 },
{ name: '100000元以上', max: 50 }
],
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: _this.yData1,
name: '历史入驻量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#7245D9' },
{ offset: 1, color: '#5A5FE6' }
]
)
},
// 雷达图辐射区域的样式
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(114, 69, 217, 0.3)' },
{ offset: 1, color: 'rgba(90, 95, 230, 0.3)' }
]
)
}
},
{
value: _this.yData2,
name: '当前有效数量',
symbol: 'emptyCircle',
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#3994C1' },
{ offset: 1, color: '#5BB158' }
]
)
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(57, 148, 193, 0.3)' },
{ offset: 1, color: 'rgba(91, 177, 88, 0.3)' }
]
)
}
}
]
}
]
})
}
}
}
</script>
<style scoped>
.radarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue
View file @ 0de95463
......@@ -191,7 +191,10 @@
<!-- <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<radar-chart-for-hospital />
<radar-chart-for-hospital
:y-data1="[42, 30, 20, 35, 50, 18]"
:y-data2="[50, 14, 28, 26, 42, 21]"
/>
</div>
</el-col>
</el-row>
......
src/views/data-statistics/pet-data-statistics/pet-data-statistics.vue
View file @ 0de95463
<template>
<div>宠主数据统计</div>
<div class="fatherDiv">
<el-row :gutter="24">
<!--医院信息统计-->
<el-col :span="12">
<div style="width: 100%;background-color: #FFFFFF" class="cardDiv">
<div class="cardTitle">
客户信息统计
</div>
<el-row :gutter="14">
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_register_owner">
<div style="display: flex;">
<div class="numberColor">319,393</div>
<div class="fontColor">人</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_chongzhu.png" height="24" width="24">
<div class="bottom_font">
注册宠主数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_yifuwucz">
<div style="display: flex;">
<div class="numberColor">19,393</div>
<div class="fontColor">人</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_yifuwu.png" height="24" width="24">
<div class="bottom_font">
已服务宠主数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_register_pet">
<div style="display: flex;">
<div class="numberColor">312,123</div>
<div class="fontColor">只</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_zhucechongzhu.png" height="24" width="24">
<div class="bottom_font">
注册宠物数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_yifuwucw">
<div style="display: flex;">
<div class="numberColor">148,936</div>
<div class="fontColor">只</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_fuwuchongzhu.png" height="24" width="24">
<div class="bottom_font">
已服务宠物数量
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<!--各项占比数据-->
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
活跃客户占比
</div>
<div class="activeUser_percent">
<el-progress type="circle" :percentage="90" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
会员客户占比
</div>
<div class="vip_percent">
<el-progress type="circle" :percentage="58" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
复购客户占比
</div>
<div class="repurchase_percent">
<el-progress type="circle" :percentage="37" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="12">
<div class="cardDiv" style="padding-bottom: 0">
<two-line-chart :y-data1="yData1" :y-data2="yData2" title="本年客户统计" />
</div>
</el-col>
<el-col :span="8">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
宠主累计消费排行
</div>
<div v-for="(item, key) in petOwnerConsumeRank" :key="key" class="consumeRankDiv">
<div class="rank_hospital_name_font">
<overlong-tool :text="item.name" :max="30" />
</div>
<el-row>
<el-col :span="19">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="consumeRankProgress"
/>
</el-col>
<el-col :span="5">
<div class="consumeRankFont">
{{ item.total }}元
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
宠主注册天数排行
</div>
<div v-for="(item, key) in petOwnerTimeRank" :key="key" class="timeRankDiv">
<div class="rank_hospital_name_font">
<overlong-tool :text="item.name" :max="13" />
</div>
<el-row>
<el-col :span="16">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="timeRankProgress"
/>
</el-col>
<el-col :span="8">
<div class="timeRankFont">
{{ item.total }}天
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0">
123
</div>
</el-col>
<el-col :span="6">
<div class="cardDiv" style="padding-bottom: 0px">
<columnar-chart
title="宠主绑定医院数量分析"
start-color="#3490CE"
end-color="#5FB54B"
label="宠主人数"
unit="人"
:x-data="columnarChartData.xData"
:y-data="columnarChartData.yData"
name="宠主人数"
/>
</div>
</el-col>
<el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0px">
<!-- <div style="text-align: right;position: absolute;z-index: 10;width: 34%">-->
<!-- <el-radio-group v-model="radarSelect">-->
<!-- <el-radio-button label="lastYear" class="radioButton">去年</el-radio-button>-->
<!-- <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<radar-chart-for-pet-owner-platform />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import ProgressColor from '@/views/data-statistics/other-components/progress-color.vue'
import TwoLineChart from '@/views/data-statistics/echars-components/twoLineChart.vue'
import OverlongTool from '@/views/data-statistics/other-components/overlong-tool.vue'
import ColumnarChart from '@/views/data-statistics/echars-components/columnarChart.vue'
import RadarChartForPetOwnerPlatform
from '@/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue'
export default {
name: 'PetDataStatistics'
name: 'PetDataStatistics',
components: {
RadarChartForPetOwnerPlatform,
ColumnarChart, OverlongTool, TwoLineChart, ProgressColor },
data() {
return {
mapData: [
{
name: '北京',
value: 200
},
{
name: '天津',
value: 0
},
{
name: '上海',
value: 200
},
{
name: '重庆',
value: 0
},
{
name: '河北',
value: 0
},
{
name: '河南',
value: 0
},
{
name: '云南',
value: 0
},
{
name: '辽宁',
value: 0
},
{
name: '黑龙江',
value: 0
},
{
name: '湖南',
value: 40
},
{
name: '安徽',
value: 10
},
{
name: '山东',
value: 60
},
{
name: '新疆',
value: 0
},
{
name: '江苏',
value: 0
},
{
name: '浙江',
value: 0
},
{
name: '江西',
value: 90
},
{
name: '湖北',
value: 70
},
{
name: '广西',
value: 0
},
{
name: '甘肃',
value: 0
},
{
name: '山西',
value: 0
},
{
name: '内蒙古',
value: 10
},
{
name: '陕西',
value: 0
},
{
name: '吉林',
value: 0
},
{
name: '福建',
value: 60
},
{
name: '贵州',
value: 0
},
{
name: '广东',
value: 800
},
{
name: '青海',
value: 1
},
{
name: '西藏',
value: 1
},
{
name: '四川',
value: 0
},
{
name: '宁夏',
value: 0
},
{
name: '海南',
value: 0
},
{
name: '台湾',
value: 0
},
{
name: '香港',
value: 0
},
{
name: '澳门',
value: 0
},
{
name: '南海诸岛',
value: 0
}
],
yData1: {
label: '新增用户量',
data: [33203, 31312, 12352, 33266, 11128, 2271, 43222, 9235, 8111, 9211, 11120, 22221],
line_color: '#3490CE',
area_color: 'rgba(52,144,206,0.3)',
unit: '人'
},
yData2: {
label: '活跃用户量',
data: [11233, 32223, 22225, 111116, 21311, 11110, 2222, 12344, 2258, 11279, 22230, 1110],
line_color: '#5FB54B',
area_color: 'rgba(95,181,75,0.3)',
unit: '人'
},
petOwnerConsumeRank: [
{
name: 'TOM',
percent: 100,
total: 214523
},
{
name: 'JACVK',
percent: 90,
total: 114523
},
{
name: 'TONSHW',
percent: 50,
total: 84523
},
{
name: 'TINAI',
percent: 20,
total: 24523
}
],
petOwnerTimeRank: [
{
name: 'JARRY',
percent: 100,
total: 2145
},
{
name: 'NARNA',
percent: 90,
total: 1145
},
{
name: 'CARRY',
percent: 50,
total: 845
},
{
name: 'JAMAS',
percent: 20,
total: 245
}
],
columnarChartData: {
xData: ['1家', '2~4家', '5~8家', '8家以上'],
yData: [53, 26, 66, 36]
},
radarSelect: 'lastYear',
tableData: [
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
},
{
name: '乖乖宠物医院（八里台店）',
deptId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院',
linkPerson: 'JACK',
linkPhone: '13423453345',
address: '天津市滨海新区平山道57号增1',
inDate: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1'
}
],
total: 20,
queryParams: {
pageNum: 1,
pageSize: 20
}
}
},
watch: {},
created() {
}
}
</script>
<style scoped>
<style scoped lang="scss">
.fatherDiv {
background-color: #F4F4F4;
padding-top: 24px
}
.cardDiv {
padding: 20px;
background-color: #FFFFFF;
}
.row2 {
margin-top: 24px;
}
.percentDiv {
width: 100%;
height: 181px;
text-align: center;
}
.cardTitle {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
margin-bottom: 20px;
}
.pet_info_statistics {
width: 100%;
height: 103px;
padding-top: 20px;
padding-left: 16px;
//padding-right: 16px;
}
.pet_info_statistics_register_owner {
background-image: url("../../../assets/data_statistics/chongzhutongji_img_chongzhu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.pet_info_statistics_yifuwucz {
background-image: url("../../../assets/data_statistics/chongzhutongji_img_yifuwu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.pet_info_statistics_register_pet {
background-image: url("../../../assets/data_statistics/chongzhutongji_img_zhucechongzhu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.pet_info_statistics_yifuwucw {
background-image: url("../../../assets/data_statistics/chongzhutongji_imgfuwuchongzhu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.activeUser_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#youxiao); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #4F69EB, #7F37D1);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.vip_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#changqi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #3490CE, #5FB54B);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.repurchase_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#yuchuzhi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DE6859, #DB8747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.consumeRankDiv {
margin-bottom: 35px;
.rank_hospital_name_font {
//width: 210px;
//height: 19px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
//line-height: 17px;
color: #666666;
//opacity: 1;
}
.consumeRankProgress {
margin-top: 18px;
::v-deep .el-progress-bar__inner{
background-color: unset;
background-image: linear-gradient(to right, #DE6859 , #DB8647);
}
}
.consumeRankFont {
//width: 100px;
//height: 21px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 45px;
color: #333333;
//opacity: 1;
padding-left: 10px;
}
}
.timeRankDiv {
margin-bottom: 35px;
.rank_hospital_name_font {
//width: 210px;
//height: 19px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
//line-height: 17px;
color: #666666;
//opacity: 1;
}
.timeRankProgress {
margin-top: 18px;
::v-deep .el-progress-bar__inner{
background-color: unset;
background-image: linear-gradient(to right, #3490CE , #5FB54B);
}
}
.timeRankFont {
//width: 100px;
//height: 21px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 45px;
color: #333333;
//opacity: 1;
padding-left: 10px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment