<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;
|
"
|
></span
|
>
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<div class="home-user-task-stats">
|
<p>{{ 11231 }}</p>
|
<div class="text-color2">
|
<p>门诊就诊量（人次）</p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<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;
|
"
|
></span
|
>
|
<span>{{ endatd }} ~ {{ statd }}</span>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<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="10">
|
<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>
|
</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="24">
|
<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>
|
</div>
|
</el-col>
|
<!-- <el-col :span="9">
|
<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="3"
|
><div class="grid-contents bg-purples">出院：</div></el-col
|
>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">出院随访</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">出院宣教</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">复诊通知</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3"
|
><div class="grid-contents bg-purples"></div
|
></el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">出院评估</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">满意度调查</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">其他通知</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="3"
|
><div class="grid-contents bg-purples">门诊：</div></el-col
|
>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">影像随访</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">门诊宣教</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">复诊通知</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3"
|
><div class="grid-contents bg-purples"></div
|
></el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">满意度调查</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">其他通知</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3"
|
><div class="grid-contents bg-purples">在院：</div></el-col
|
>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">在院宣教</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">在院评估</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
|
<el-col :span="7">
|
<div style="display: flex">
|
<div class="subtitle">其他通知</div>
|
<div class="grid-contents bg-purple-light">0次</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col> -->
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getoutpatientamount,
|
getInhospital,
|
getBarchart,
|
getQtemplateobj,
|
} from "@/api/AiCentre/index";
|
import dayjs from "dayjs";
|
|
export default {
|
name: "home",
|
data() {
|
return {
|
NodeCount: "",
|
PrtnerCount: "",
|
NodeCount: "",
|
myChart2: null,
|
mypPieCharts: null,
|
lastWidth: window.innerWidth,
|
lastHeight: window.innerHeight,
|
radio1: "周",
|
ticketStatistics: {},
|
order: "",
|
Count: "",
|
datatni: [],
|
series: [],
|
tableData: [],
|
nodeCollect: [],
|
SkuTop: [],
|
cylinderSeries: [],
|
cylinderXAxis: [],
|
dyat: 30,
|
intervalId: null,
|
};
|
},
|
|
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.getoutpatientamount();
|
// this.getInhospital();
|
// this.getBarchart();
|
this.$nextTick(function () {
|
this.getregionAmountCollect();
|
this.getnodeCollect();
|
this.getSkuTop();
|
});
|
},
|
mounted() {
|
this.setInterval();
|
// window.addEventListener("resize", this.handleResize());
|
},
|
beforeDestroy() {
|
if (this.intervalId) {
|
clearInterval(this.intervalId); // 清除定时器
|
}
|
},
|
methods: {
|
// 改变时间事件
|
changes() {
|
if (this.radio1 == "周") {
|
this.dyat = 7;
|
} else if (this.radio1 == "月") {
|
this.dyat = 30;
|
} else {
|
this.dyat = 360;
|
}
|
this.getregionAmountCollect();
|
// this.getoutpatientamount();
|
// this.getInhospital();
|
// this.getBarchart();
|
this.getnodeCollect();
|
this.getSkuTop();
|
},
|
|
// 合作商点位汇总统计饼状图
|
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: "放射科1" },
|
{ amount: 0, count: 67, skuId: "0", skuName: "放射科2" },
|
];
|
},
|
// 获取门诊基础数据
|
getoutpatientamount() {
|
getoutpatientamount().then((res) => {});
|
},
|
// 获取就诊数量
|
getBarchart() {
|
getBarchart().then((res) => {});
|
},
|
// 获取总量数量
|
getInhospital() {
|
getInhospital().then((res) => {});
|
},
|
|
// 获取线状图时间
|
async getregionAmountCollect() {
|
//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"));
|
this.myChart2 = myChart2;
|
var option2 = {
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "cross",
|
crossStyle: {
|
color: "#999",
|
},
|
},
|
},
|
toolbox: {
|
feature: {
|
dataView: { show: true, readOnly: false },
|
magicType: { show: true, type: ["line", "bar"] },
|
restore: { show: true },
|
saveAsImage: { show: true },
|
},
|
},
|
legend: {
|
data: [
|
"出院随访量",
|
"门诊随访量",
|
// "在院随访量",
|
// "门诊复诊通知",
|
"出院服务人次",
|
"门诊服务人次",
|
],
|
},
|
xAxis: [
|
{
|
type: "category",
|
data: [
|
"一月",
|
"二月",
|
"三月",
|
"四月",
|
"五月",
|
"六月",
|
"七月",
|
"八月",
|
"九月",
|
"十月",
|
],
|
axisPointer: {
|
type: "shadow",
|
},
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
name: "随访量",
|
min: 0,
|
max: 250,
|
interval: 50,
|
axisLabel: {
|
formatter: "{value} 人",
|
},
|
},
|
{
|
type: "value",
|
name: "复诊/评估次数",
|
min: 0,
|
max: 250,
|
interval: 50,
|
axisLabel: {
|
formatter: "{value} 次",
|
},
|
},
|
],
|
grid: { top: "35%" },
|
series: [
|
{
|
name: "出院随访量",
|
type: "bar",
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " 人";
|
},
|
},
|
data: [120, 150, 165, 90, 140, 200, 130, 85, 175, 95, 110, 160],
|
},
|
// {
|
// name: "影像随访量",
|
// type: "bar",
|
// tooltip: {
|
// valueFormatter: function (value) {
|
// return value + " 人";
|
// },
|
// },
|
// data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180],
|
// },
|
{
|
name: "门诊随访量",
|
type: "bar",
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " 人";
|
},
|
},
|
data: [145, 92, 178, 134, 167, 85, 199, 112, 156, 88, 120, 145],
|
},
|
|
// {
|
// name: "出院复诊通知",
|
// type: "line",
|
// smooth: 0.3,
|
// yAxisIndex: 1,
|
// tooltip: {
|
// valueFormatter: function (value) {
|
// return value + " 次";
|
// },
|
// },
|
// data: [45, 123, 78, 156, 89, 34, 199, 112, 67, 145, 88, 175],
|
// },
|
{
|
name: "出院服务人次",
|
type: "line",
|
smooth: 0.3,
|
yAxisIndex: 1,
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " 次";
|
},
|
},
|
data: [102, 190, 135, 88, 175, 160, 83, 145, 200, 110, 97, 180],
|
},
|
{
|
name: "门诊服务人次",
|
type: "line",
|
smooth: 0.3,
|
yAxisIndex: 1,
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " 次";
|
},
|
},
|
data: [120, 150, 165, 90, 140, 200, 130, 85, 175, 95, 110, 160],
|
},
|
],
|
};
|
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 + "]} ",
|
},
|
encode: {
|
value: dimension,
|
tooltip: dimension,
|
},
|
},
|
});
|
}
|
});
|
myChart2.setOption(option2);
|
},
|
// 饼状图
|
myPieChart() {
|
// 基于准备好的dom，初始化echarts实例
|
var echarts = require("echarts");
|
var mypPieCharts = echarts.init(document.getElementById("pieCharts"));
|
this.mypPieCharts = mypPieCharts;
|
// 指定图表的配置项和数据
|
var optionPie = {
|
legend: {},
|
tooltip: {
|
trigger: "axis",
|
showContent: true,
|
},
|
dataset: {
|
source: [
|
["product", "2012", "2013", "2014", "2015", "2016", "2017"],
|
["出院宣教", 56, 82, 88, 70, 53, 85],
|
["在院宣教", 51, 51, 55, 53, 73, 68],
|
["门诊宣教", 40, 62, 69, 36, 45, 32],
|
],
|
},
|
xAxis: { type: "category" },
|
yAxis: { gridIndex: 0 },
|
grid: { top: "25%", left: "10%", right: "40%", bottom: "10%" },
|
series: [
|
{
|
name: "出院宣教",
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
name: "在院宣教",
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
name: "门诊宣教",
|
type: "line",
|
smooth: true,
|
seriesLayoutBy: "row",
|
emphasis: { focus: "series" },
|
},
|
{
|
type: "pie",
|
id: "pie",
|
radius: ["40%", "70%"],
|
center: ["80%", "50%"],
|
emphasis: {
|
focus: "self",
|
},
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: "#fff",
|
borderWidth: 2,
|
},
|
label: {
|
formatter: "{b}: {@2012}",
|
},
|
encode: {
|
itemName: "product",
|
value: "2012",
|
tooltip: "2012",
|
},
|
},
|
],
|
};
|
mypPieCharts.on("updateAxisPointer", function (event) {
|
const xAxisInfo = event.axesInfo[0];
|
if (xAxisInfo) {
|
const dimension = xAxisInfo.value + 1;
|
mypPieCharts.setOption({
|
series: {
|
id: "pie",
|
label: {
|
formatter: "{b}: {@[" + dimension + "]} ",
|
},
|
encode: {
|
value: dimension,
|
tooltip: dimension,
|
},
|
},
|
});
|
}
|
});
|
|
// 使用刚指定的配置项和数据显示图表。
|
mypPieCharts.setOption(optionPie);
|
},
|
// 页面变化调整大小
|
handleResize() {
|
console.log(111);
|
// 调整 ECharts 图表大小
|
if (this.myChart2) {
|
this.myChart2.resize();
|
}
|
if (this.mypPieCharts) {
|
this.mypPieCharts.resize();
|
}
|
},
|
setInterval() {
|
this.intervalId = setInterval(() => {
|
if (window.innerWidth != this.lastWidth) {
|
this.lastWidth = window.innerWidth;
|
console.log("窗口大小可能被手动调整了");
|
this.handleResize();
|
}
|
}, 1000);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
* {
|
padding: 0;
|
margin: 0;
|
}
|
|
.boxEchars {
|
width: 100%;
|
height: 40vh;
|
margin-top: 45px;
|
display: flex;
|
.echars1 {
|
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: 1;
|
}
|
.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-purples {
|
color: #206abe;
|
font-size: 18px;
|
}
|
.bg-purple-light {
|
background: #e5e9f2;
|
text-align: center;
|
align-items: center;
|
line-height: 36px;
|
width: 6vw;
|
}
|
.subtitle {
|
text-align: center;
|
align-items: center;
|
}
|
.grid-content {
|
min-height: 36px;
|
border-radius: 20px;
|
padding: 0 10px;
|
text-align: center;
|
}
|
|
.grid-contents {
|
min-height: 36px;
|
border-radius: 20px;
|
padding: 0 10px;
|
padding-right: 0;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
</style>
|
