<template>
|
<div id="home">
|
<div class="home" style="margin-top: 40px; margin-left: 20px">
|
<!-- 头部两个 -->
|
<el-row :gutter="20">
|
<el-col :span="11">
|
<!-- 就诊统计盒子 -->
|
<div class="grid-content bg-purple headerBox bgc1">
|
<div class="title">
|
患者统计<span
|
style="
|
font-size: 25px;
|
font-weight: 600;
|
text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
|
color: black;
|
"
|
>12322 (人)</span
|
>
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<div class="home-user-task-stats">
|
<p>{{ 11231 }}</p>
|
<div class="text-color2">
|
<p>门诊总数（人）</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div class="home-user-task-stats">
|
<p>{{ 9207 }}</p>
|
<div class="text-color2">
|
<p>住院总数（人）</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div class="home-user-task-stats">
|
<p>{{ 1209 }}</p>
|
<div class="text-color2">
|
<p>体检总数（人）</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="9">
|
<div class="grid-content bg-purple headerBox bgc2">
|
<div class="title">
|
门诊服务总数
|
<span
|
style="
|
font-size: 25px;
|
text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
|
font-weight: 600;
|
color: red;
|
"
|
>12322 (人)</span
|
>
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="home-user-task-stats">
|
<p style="color: red">{{ 3453 }}</p>
|
</div>
|
<div class="text-color2">
|
<p>住院服务人数</p>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="home-user-task-stats">
|
<p style="color: red">{{ 4213 }}</p>
|
<div class="text-color2">
|
<p>体检服务人数</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 中间和右边 -->
|
<el-row :gutter="20">
|
<el-col :span="20">
|
<!-- echars数据可视化 -->
|
<div class="grid-content bg-purple" style="min-height: 365px">
|
<div class="title">
|
就诊统计
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
<el-radio-group
|
v-model="radio1"
|
size="mini"
|
style="margin-left: 390px"
|
@change="changes"
|
>
|
<el-radio-button label="周" @click="dyat = 7"></el-radio-button>
|
<el-radio-button
|
label="月"
|
@click="dyat = 30"
|
></el-radio-button>
|
<el-radio-button
|
label="年"
|
@click="dyat = 360"
|
></el-radio-button>
|
</el-radio-group>
|
</div>
|
<!-- 中间echars -->
|
<div class="boxEchars">
|
<div class="echars1" id="echars"></div>
|
<div class="echars2" id="echars2"></div>
|
</div>
|
</div>
|
</el-col>
|
<!-- 中间和右边 -->
|
<el-col :span="4" class="aside">
|
<div class="grid-content bg-purple" style="margin-top: -180px">
|
<div class="title">
|
健康宣教
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
</div>
|
<div style="max-height: 690px; width: 100%; overflow: auto">
|
<el-table style="width: 100%" :data="SkuTop">
|
<template v-for="(item, index) in SkuTop"></template>
|
<el-table-column
|
prop="order"
|
width="30"
|
style="background: url(~@/assets/order/4.png)"
|
type="index"
|
></el-table-column>
|
<el-table-column
|
prop="skuName"
|
width="88"
|
class-name="name"
|
></el-table-column>
|
<el-table-column prop="count" class-name="count">
|
<template slot-scope="scope">
|
{{ scope.row.count }}次
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 底部一个 -->
|
<el-row :gutter="20" style="margin-bottom: 20px">
|
<el-col :span="13">
|
<div class="grid-content bg-purple" style="min-height: 300px">
|
<div class="title">
|
诊后统计
|
<span class="el-icon-s-unfold moreIcon"></span>
|
</div>
|
<div class="cooperate">
|
<!-- 合作区域 -->
|
<div class="pieChart" id="pieCharts"></div>
|
<div class="Points">
|
<p>{{ 122 }}</p>
|
<span>其中随访干预人次</span>
|
<p>{{ 122 }}</p>
|
<span>门诊随访</span>
|
<p>{{ 122 }}</p>
|
<span>出院随访</span>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="grid-content bg-purple" style="min-height: 300px">
|
<div class="title">
|
各项服务统计
|
<span class="el-icon-s-unfold moreIcon2"></span>
|
</div>
|
<div class="empenty">
|
<el-row>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">诊疗预约</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">123次</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">转诊服务</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">231次</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">信息推送</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">900次</div></el-col
|
> </el-row
|
><el-row>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">标识与导航</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">23次</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">
|
患者便利保障服务
|
</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">13次</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">远程医疗</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">31次</div></el-col
|
> </el-row
|
><el-row>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">患者反馈</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">150人</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">患者管理</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">231人</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">健康宣教</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">400</div></el-col
|
>
|
</el-row>
|
<el-row>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">反馈占比</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">23%</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple">管理占比</div></el-col
|
>
|
<el-col :span="4"
|
><div class="grid-contents bg-purple-light">32%</div></el-col
|
>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import {
|
// getUserWork,
|
// getregionCollect,
|
// getregionOrderCount,
|
// getregionAmountCollect,
|
// getNodeCount,
|
// getPrtnerCount,
|
// getnodeCollect,
|
// getSkuTop,
|
// getOrderAmount,
|
// } from "@/api/home";
|
import dayjs from "dayjs";
|
|
export default {
|
name: "home",
|
data() {
|
return {
|
NodeCount: "",
|
PrtnerCount: "",
|
NodeCount: "",
|
radio1: "周",
|
ticketStatistics: {},
|
order: "",
|
Count: "",
|
datatni: [],
|
series: [],
|
tableData: [],
|
nodeCollect: [],
|
SkuTop: [],
|
cylinderSeries: [],
|
cylinderXAxis: [],
|
dyat: 30,
|
};
|
},
|
|
computed: {
|
// 时间区域
|
td() {
|
return dayjs().format("YYYY-MM-DD HH:mm:ss");
|
},
|
atd() {
|
return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD HH:mm:ss");
|
},
|
statd() {
|
return dayjs().format("YYYY-MM-DD");
|
},
|
endatd() {
|
return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD");
|
},
|
},
|
created() {
|
this.$nextTick(function () {
|
this.getregionAmountCollect();
|
this.getUserWorks();
|
this.getregionCollect();
|
this.getregionOrderCount();
|
this.getNodeCount();
|
this.getPrtnerCount();
|
this.getnodeCollect();
|
this.getSkuTop();
|
this.getOrderAmount();
|
});
|
},
|
mounted() {},
|
methods: {
|
// 改变时间事件
|
changes() {
|
if (this.radio1 == "周") {
|
this.dyat = 7;
|
} else if (this.radio1 == "月") {
|
this.dyat = 30;
|
} else {
|
this.dyat = 360;
|
}
|
this.getregionAmountCollect();
|
this.getUserWorks();
|
this.getregionCollect();
|
this.getregionOrderCount();
|
this.getNodeCount();
|
this.getPrtnerCount();
|
this.getnodeCollect();
|
this.getSkuTop();
|
this.getOrderAmount();
|
},
|
// 柱状图
|
async getOrderAmount() {
|
// const res = await getOrderAmount(this.endatd, this.statd);
|
// this.cylinderXAxis = res.data.xAxis;
|
// this.cylinderSeries = res.data.series;
|
this.cylinderXAxis = [
|
"1月",
|
"2月",
|
"3月",
|
"4月",
|
"5月",
|
"6月",
|
"7月",
|
"8月",
|
];
|
this.cylinderSeries = [123, 123, 223, 212, 432, 123, 442, 234];
|
this.myEcharts();
|
},
|
// 获取点位总数
|
async getNodeCount() {
|
// const res = await getNodeCount();
|
// this.NodeCount = res.data;
|
},
|
// 获取合作商总数
|
async getPrtnerCount() {
|
// const res = await getPrtnerCount();
|
// this.PrtnerCount = res.data;
|
},
|
// 合作商点位汇总统计饼状图
|
async getnodeCollect() {
|
// const res = await getnodeCollect();
|
// this.nodeCollect = res.data;
|
this.nodeCollect = [
|
{ name: "门诊随访", value: 1232 },
|
{ name: "出院随访", value: 342 },
|
];
|
this.myPieChart();
|
},
|
// top排行
|
async getSkuTop() {
|
// const res = await getSkuTop(10, this.endatd, this.statd);
|
// this.SkuTop = res.data;
|
this.SkuTop = [
|
{ amount: 0, count: 123, skuId: "0", skuName: "心肺科" },
|
{ amount: 0, count: 122, skuId: "0", skuName: "肾脏科" },
|
{ amount: 0, count: 112, skuId: "0", skuName: "泌尿科" },
|
{ amount: 0, count: 111, skuId: "0", skuName: "男科" },
|
{ amount: 0, count: 102, skuId: "0", skuName: "妇产科" },
|
{ amount: 0, count: 98, skuId: "0", skuName: "外科" },
|
{ amount: 0, count: 89, skuId: "0", skuName: "急诊" },
|
{ amount: 0, count: 88, skuId: "0", skuName: "器械科" },
|
{ amount: 0, count: 87, skuId: "0", skuName: "骨科" },
|
{ amount: 0, count: 67, skuId: "0", skuName: "放射科" },
|
{ amount: 0, count: 89, skuId: "0", skuName: "急诊" },
|
{ amount: 0, count: 88, skuId: "0", skuName: "器械科" },
|
{ amount: 0, count: 87, skuId: "0", skuName: "骨科" },
|
{ amount: 0, count: 67, skuId: "0", skuName: "放射科" },
|
|
];
|
},
|
// 获取工单数量
|
async getUserWorks() {
|
// const res = await getUserWork(this.atd, this.td);
|
// this.ticketStatistics = res.data[0];
|
},
|
// 获取就诊数量
|
async getregionOrderCount() {
|
// const res = await getregionOrderCount({
|
// start: this.atd,
|
// end: this.td,
|
// });
|
// this.order = res.data;
|
},
|
// 获取总量数量
|
async getregionCollect() {
|
// const res = await getregionCollect({
|
// start: this.atd,
|
// end: this.td,
|
// });
|
// this.Count = (res.data / 1000000).toFixed(2);
|
},
|
|
// 柱状图
|
myEcharts() {
|
// 基于准备好的dom，初始化echarts实例
|
var echarts = require("echarts");
|
var myChart = echarts.init(document.getElementById("echars2"));
|
|
// 指定图表的配置项和数据
|
var option = {
|
title: {
|
text: "诊中统计",
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
legend: {
|
data: ["院内推送", "宣教完成"],
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataView: { show: true, readOnly: false },
|
magicType: { show: true, type: ["line", "bar"] },
|
restore: { show: true },
|
saveAsImage: { show: true },
|
},
|
},
|
calculable: true,
|
xAxis: [
|
{
|
type: "category",
|
// prettier-ignore
|
data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月"],
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
},
|
],
|
series: [
|
{
|
name: "院内推送",
|
type: "bar",
|
data: [20, 49, 70, 32, 56, 76, 56, 122, 26, 20, 64, 33],
|
markPoint: {
|
data: [
|
{ type: "max", name: "Max" },
|
{ type: "min", name: "Min" },
|
],
|
},
|
markLine: {
|
data: [{ type: "average", name: "Avg" }],
|
},
|
},
|
{
|
name: "宣教完成",
|
type: "bar",
|
data: [26, 59, 90, 64, 87, 70, 75, 182, 87, 82, 60, 23],
|
markPoint: {
|
data: [
|
{ name: "Max", value: 182, xAxis: 7, yAxis: 183 },
|
{ name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
|
],
|
},
|
markLine: {
|
data: [{ type: "average", name: "Avg" }],
|
},
|
},
|
],
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
},
|
// 获取线状图时间
|
async getregionAmountCollect() {
|
// const res = await getregionAmountCollect(1, this.endatd, this.statd);
|
// this.xAxis = res.data.xAxis;
|
// this.series = res.data.series;
|
this.xAxis = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
|
this.series = [123, 123, 223, 212, 432, 123, 442, 234];
|
this.myEcharts2();
|
},
|
// 线性图
|
myEcharts2() {
|
var echarts = require("echarts");
|
var myChart2 = echarts.init(document.getElementById("echars"));
|
var option2 = {
|
title: {
|
text: "诊前数据",
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
dataset: {
|
source: [
|
["product", "2018", "2019", "2020", "2021", "2022", "2023"],
|
["复诊", 256, 182, 388, 270, 253, 385],
|
["住院", 351, 451, 355, 353, 373, 468],
|
["手术", 440, 362, 569, 436, 445, 332],
|
["转诊", 525, 237, 541, 518, 433, 249],
|
],
|
},
|
xAxis: { type: "category" },
|
yAxis: { gridIndex: 0 },
|
grid: { top: "55%" },
|
series: [
|
{
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
type: "pie",
|
id: "pie",
|
radius: "30%",
|
center: ["50%", "25%"],
|
emphasis: {
|
focus: "self",
|
},
|
label: {
|
formatter: "{b}: {@2018} ({d}%)",
|
},
|
encode: {
|
itemName: "product",
|
value: "2018",
|
tooltip: "2018",
|
},
|
},
|
],
|
};
|
myChart2.on("updateAxisPointer", function (event) {
|
const xAxisInfo = event.axesInfo[0];
|
if (xAxisInfo) {
|
const dimension = xAxisInfo.value + 1;
|
myChart2.setOption({
|
series: {
|
id: "pie",
|
label: {
|
formatter: "{b}: {@[" + dimension + "]} ({d}%)",
|
},
|
encode: {
|
value: dimension,
|
tooltip: dimension,
|
},
|
},
|
});
|
}
|
});
|
myChart2.setOption(option2);
|
},
|
// 饼状图
|
myPieChart() {
|
// 基于准备好的dom，初始化echarts实例
|
var echarts = require("echarts");
|
var mypPieCharts = echarts.init(document.getElementById("pieCharts"));
|
|
// 指定图表的配置项和数据
|
var optionPie = {
|
// title: {
|
// left: "left",
|
// },
|
|
tooltip: {
|
trigger: "item",
|
formatter: "{b}<br/>总占比 : {d}% ",
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
mark: { show: true },
|
},
|
},
|
legend: {
|
top: "5%",
|
left: "center",
|
},
|
series: [
|
{
|
name: "Access From",
|
type: "pie",
|
radius: ["40%", "70%"],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: "#fff",
|
borderWidth: 2,
|
},
|
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: "bold",
|
},
|
},
|
labelLine: {
|
show: false,
|
},
|
data: [
|
{ value: 580, name: "门诊随访" },
|
{ value: 484, name: "出院随访" },
|
],
|
},
|
],
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
mypPieCharts.setOption(optionPie);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
* {
|
padding: 0;
|
margin: 0;
|
}
|
|
.boxEchars {
|
width: 100%;
|
height: 480px;
|
margin-top: 45px;
|
display: flex;
|
.echars1 {
|
flex: 1;
|
}
|
.echars2 {
|
flex: 1;
|
}
|
}
|
::v-deep .el-table {
|
td:first-child {
|
.cell {
|
display: inline-block;
|
text-align: center;
|
width: 22px;
|
height: 20px;
|
margin-left: 2px;
|
padding-left: 6px;
|
text-align: center;
|
white-space: nowrap;
|
font-size: 12px;
|
font-family: zihun143-zhengkuchaojihei, zihun143;
|
font-weight: 400;
|
line-height: 14px;
|
background: url(~@/assets/order/4.png) no-repeat;
|
color: #e9b499;
|
}
|
}
|
td:nth-child(2) {
|
.cell {
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333;
|
line-height: 20px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
td:last-child {
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #737589;
|
line-height: 20px;
|
text-align: right;
|
}
|
}
|
::v-deep .el-table {
|
tr:nth-child(1) {
|
td:nth-child(1) {
|
.cell {
|
background: url(~@/assets/order/1.png);
|
color: #8e5900;
|
}
|
}
|
}
|
tr:nth-child(2) {
|
td:nth-child(1) {
|
.cell {
|
background: url(~@/assets/order/2.png);
|
color: #494949;
|
}
|
}
|
}
|
tr:nth-child(3) {
|
td:nth-child(1) {
|
.cell {
|
background: url(~@/assets/order/3.png);
|
color: #cf6d3d;
|
}
|
}
|
}
|
}
|
.moreIcon {
|
font-size: 22px !important;
|
margin-left: 400px !important;
|
color: #5f84ff !important;
|
cursor: pointer;
|
}
|
.moreIcon2 {
|
font-size: 22px !important;
|
margin-left: 250px !important;
|
color: #5f84ff !important;
|
cursor: pointer;
|
}
|
.empenty {
|
width: 100%;
|
padding: 20px 0;
|
min-height: 280px;
|
}
|
.cooperate {
|
width: 100%;
|
height: 280px;
|
margin-top: 25px;
|
display: flex;
|
.pieChart {
|
flex: 3;
|
}
|
.Points {
|
width: 154px;
|
height: 230px;
|
text-align: center;
|
padding: 20px 0;
|
background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
|
linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
|
linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
|
linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
|
background-size: 50% 50%;
|
background-repeat: no-repeat;
|
p {
|
height: 33px;
|
margin-bottom: 10px;
|
font-size: 24px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #072074;
|
line-height: 33px;
|
}
|
span {
|
height: 17px;
|
margin-top: 6px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #000412;
|
line-height: 17px;
|
}
|
}
|
}
|
.title {
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
-webkit-box-flex: 1;
|
-ms-flex: 1;
|
flex: 1;
|
font-size: 16px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333;
|
padding-top: 17px;
|
padding-bottom: -4px;
|
|
span {
|
margin-left: 10px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999;
|
}
|
}
|
.bgc2 {
|
background: #fbefe8 url(~@/assets/dashboard/bg33.png) no-repeat
|
calc(100% - 12px) 100% !important;
|
|
.home-user-task-stats {
|
margin-top: 10px;
|
height: 50px;
|
font-size: 36px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
line-height: 50px;
|
text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
|
}
|
.text-color2 {
|
height: 17px;
|
margin-top: 3px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #ff5757;
|
line-height: 17px;
|
}
|
}
|
.bgc1 {
|
background: #e9f3ff !important;
|
background-image: url(~@/assets/dashboard/bg11.png),
|
url(~@/assets/dashboard/bg22.png) !important;
|
background-repeat: no-repeat, no-repeat !important;
|
background-position: 0 0, calc(100% - 12px) 100% !important;
|
.title {
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
-webkit-box-flex: 1;
|
-ms-flex: 1;
|
flex: 1;
|
font-size: 16px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333;
|
span {
|
margin-left: 10px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999;
|
}
|
}
|
.home-user-task-stats {
|
margin-top: 10px;
|
height: 50px;
|
font-size: 36px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
line-height: 50px;
|
text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
|
}
|
.text-color2 {
|
height: 17px;
|
margin-top: 3px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #91a7dc;
|
line-height: 17px;
|
}
|
}
|
::v-deep.aside .el-table__header-wrapper {
|
overflow: hidden;
|
display: none;
|
}
|
.headerBox {
|
height: 150px;
|
padding: 25px;
|
}
|
.el-row {
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple-dark {
|
background: #99a9bf;
|
}
|
.bg-purple {
|
background: #fff;
|
}
|
.bg-purple-light {
|
background: #e5e9f2;
|
text-align: center;
|
align-items: center;
|
line-height: 36px;
|
}
|
.grid-content {
|
min-height: 36px;
|
border-radius: 20px;
|
padding: 0 10px;
|
}
|
.grid-contents {
|
min-height: 36px;
|
border-radius: 20px;
|
padding: 0 10px;
|
padding-right: 0;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
</style>
|
