优化首页和大屏样式
This commit is contained in:
parent
008cccd60e
commit
2d0fd6f920
|
@ -251,8 +251,8 @@ const leftBar1Option = ref({
|
|||
offset: '7',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)',
|
||||
fontSize: '14',
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
data: []
|
||||
|
@ -267,8 +267,8 @@ const leftBar1Option = ref({
|
|||
show: true,
|
||||
position: 'right',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: '12',
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -316,7 +316,8 @@ const leftBar2Option = ref({
|
|||
right: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
|
@ -335,18 +336,18 @@ const leftBar2Option = ref({
|
|||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
//rotate:-90,
|
||||
formatter: function (value: any) { return value.split("").join("\n"); },
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -356,15 +357,16 @@ const leftBar2Option = ref({
|
|||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: true,
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
@ -398,7 +400,7 @@ const centerBar1Option = ref({
|
|||
grid: {
|
||||
top: "20%",
|
||||
right: "50",
|
||||
bottom: "20",
|
||||
bottom: "30",
|
||||
left: "30",
|
||||
},
|
||||
legend: {
|
||||
|
@ -406,7 +408,8 @@ const centerBar1Option = ref({
|
|||
right: 'center',
|
||||
width: '100%',
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
|
@ -415,9 +418,17 @@ const centerBar1Option = ref({
|
|||
{
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@ -428,17 +439,19 @@ const centerBar1Option = ref({
|
|||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
fontSize: 14,
|
||||
color: "rgba(255,255,255,.6)"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
min: 0,
|
||||
lineStyle: { color: 'rgba(255,255,255,.1)' }
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//左线色
|
||||
|
||||
},
|
||||
|
@ -448,12 +461,23 @@ const centerBar1Option = ref({
|
|||
"show": true,
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
fontSize: 14,
|
||||
color: "rgba(255,255,255,.6)"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
||||
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//右线色
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//x轴线
|
||||
},
|
||||
],
|
||||
"series": [
|
||||
|
@ -595,7 +619,7 @@ const centerLine2Option = ref({
|
|||
grid: {
|
||||
left: '0',
|
||||
top: '30',
|
||||
right: '10',
|
||||
right: '20',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
|
@ -617,14 +641,14 @@ const centerLine2Option = ref({
|
|||
axisLabel: {
|
||||
rotate: -90,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 14,
|
||||
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -644,20 +668,22 @@ const centerLine2Option = ref({
|
|||
// splitNumber: 6,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.1)'
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
@ -721,7 +747,7 @@ const rightBar1Option = ref({
|
|||
}, "grid": {
|
||||
"top": "15%",
|
||||
"right": "10%",
|
||||
"bottom": "20",
|
||||
"bottom": "30",
|
||||
"left": "10%",
|
||||
},
|
||||
legend: {
|
||||
|
@ -729,7 +755,8 @@ const rightBar1Option = ref({
|
|||
right: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
|
@ -739,9 +766,17 @@ const rightBar1Option = ref({
|
|||
"type": "category",
|
||||
|
||||
data: [],
|
||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
|
@ -754,10 +789,16 @@ const rightBar1Option = ref({
|
|||
axisTick: { show: false },
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
color: "rgba(255,255,255,.6)"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
|
||||
},
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//左线色
|
||||
|
||||
},
|
||||
{
|
||||
|
@ -768,10 +809,22 @@ const rightBar1Option = ref({
|
|||
"axisLabel": {
|
||||
"show": true,
|
||||
formatter: "{value}",
|
||||
color: "rgba(255,255,255,.6)"
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
||||
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//右线色
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
}
|
||||
},//x轴线
|
||||
},
|
||||
],
|
||||
"series": [
|
||||
|
@ -842,13 +895,13 @@ const rightPie2Option = ref({
|
|||
x: 'center',
|
||||
y: '50%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
lineHeight: 10,
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: 16,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
lineHeight: 10,
|
||||
|
||||
},
|
||||
|
@ -880,13 +933,12 @@ const rightPie2Option = ref({
|
|||
rich: {
|
||||
c: {
|
||||
color: 'rgb(241,246,104)',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontSize: '0.2rem',
|
||||
lineHeight: 5
|
||||
},
|
||||
b: {
|
||||
color: 'rgb(98,137,169)',
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,.7)',
|
||||
fontSize: '0.2rem',
|
||||
height: 44
|
||||
},
|
||||
},
|
||||
|
@ -896,6 +948,7 @@ const rightPie2Option = ref({
|
|||
normal: {
|
||||
lineStyle: {
|
||||
color: 'rgb(98,137,169)',
|
||||
fontSize: '0.2rem',
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
|
@ -1034,7 +1087,7 @@ li {
|
|||
}
|
||||
|
||||
.alltitle {
|
||||
font-size: .25rem;
|
||||
font-size: .225rem;
|
||||
color: #fff;
|
||||
line-height: .5rem;
|
||||
position: relative;
|
||||
|
|
|
@ -31,7 +31,14 @@
|
|||
<el-table-column label="场次名称" align="center" prop="sessionName" />
|
||||
<el-table-column label="量表名称 以逗号隔开" align="center" prop="scaleNames" />
|
||||
|
||||
<el-table-column label="班级名称/用户名称" align="center" prop="deptNames" />
|
||||
<el-table-column label="班级名称/用户名称" align="center" prop="deptNames">
|
||||
<template #default="scope">
|
||||
<span>
|
||||
{{ scope.row.deptNames.length > 0 ? scope.row.deptNames.join(',') : scope.row.userNames.join(',') }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="截止日期" align="center" prop="expireTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
|
||||
|
|
|
@ -1,111 +1,129 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="item header">
|
||||
<el-card>
|
||||
<div class="card-header">
|
||||
<ul>
|
||||
<li><img :src="userStore.avatar" />{{ getGreeting() }}</li>
|
||||
<li>
|
||||
<el-button round>
|
||||
<router-link target="_blank" to="/bigScreen">
|
||||
<el-icon>
|
||||
<FullScreen />
|
||||
</el-icon><span>可视大屏</span>
|
||||
</router-link>
|
||||
</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-row justify="space-around" align="center">
|
||||
<el-col :span="12">
|
||||
<img class="avater" :src="userStore.avatar" />{{ getGreeting() }}
|
||||
</el-col>
|
||||
<el-col :span="12" class="screen">
|
||||
<el-button round>
|
||||
<router-link target="_blank" to="/bigScreen">
|
||||
<el-icon>
|
||||
<FullScreen />
|
||||
</el-icon><span>可视大屏</span>
|
||||
</router-link>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<div class="item">
|
||||
<el-card style="height: 180px;">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<el-icon color="#33CABB" :size="70">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12">
|
||||
<el-icon :size="60" color="#40C9C6">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</el-col>
|
||||
<el-col :span="12" class="right">
|
||||
<el-statistic title="总用户数" :value="userNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||
<template #title>
|
||||
<div class="stats-title">
|
||||
总用户数
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li class="font-txt">总用户数</li>
|
||||
<li class="font-num">{{ userNum }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12">
|
||||
<el-icon :size="60" color="#36A3F7">
|
||||
<Operation />
|
||||
</el-icon>
|
||||
</el-col>
|
||||
<el-col :span="12" class="right">
|
||||
<el-statistic :value="evaluationNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||
<template #title>
|
||||
<div class="stats-title">
|
||||
总测评数
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<div class="item">
|
||||
<el-card style="height: 180px;">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<el-icon color="#15C377" :size="70">
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12">
|
||||
<el-icon :size="60" color="#F4516C">
|
||||
<Histogram />
|
||||
</el-icon>
|
||||
</el-col>
|
||||
<el-col :span="12" class="right">
|
||||
<el-statistic :value="warnNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||
<template #title>
|
||||
<div class="stats-title">
|
||||
总预警数
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li class="font-txt">总测评数</li>
|
||||
<li class="font-num">{{ evaluationNum }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="12">
|
||||
<el-icon :size="60" color="#34BFA3">
|
||||
<HelpFilled />
|
||||
</el-icon>
|
||||
</el-col>
|
||||
<el-col :span="12" class="right">
|
||||
<el-statistic :value="interveneNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||
<template #title>
|
||||
<div class="stats-title">
|
||||
总干预数
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="item">
|
||||
<el-card style="height: 180px;">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<el-icon color="#F96868" :size="70">
|
||||
<WarnTriangleFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10">
|
||||
<el-card>
|
||||
<v-chart style="height: 300px;" :option="leftPieOption" autoresize />
|
||||
</el-card>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li class="font-txt">总预警数</li>
|
||||
<li class="font-num">{{ warnNum }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-card>
|
||||
<v-chart style="height: 300px;" :option="centerBarOption" autoresize />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="item">
|
||||
<el-card style="height: 180px;">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<el-icon color="#926DDE" :size="70">
|
||||
<Collection />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li class="font-txt">总干预数</li>
|
||||
<li class="font-num">{{ interveneNum }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="item item-chart">
|
||||
<div>
|
||||
<v-chart :option="leftPieOption" autoresize />
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :option="centerBarOption" autoresize />
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :option="rightBarOption" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<v-chart style="height: 350px;" :option="rightBarOption" autoresize />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -300,7 +318,7 @@ const centerBarOption = ref({
|
|||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: true,
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#95989D'
|
||||
}
|
||||
|
@ -365,7 +383,13 @@ const rightBarOption = ref({
|
|||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
data: [],
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#95989D'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
||||
|
@ -431,103 +455,32 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 声明字体*/
|
||||
@font-face {
|
||||
font-family: electronicFont;
|
||||
src: url('@/assets/font/DS-DIGIT.TTF');
|
||||
}
|
||||
|
||||
.font-txt {
|
||||
color: #95989D;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.font-num {
|
||||
font-size: 70px;
|
||||
color: #FF9C57;
|
||||
text-align: center;
|
||||
font-family: 'electronicFont';
|
||||
}
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 85px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 150px 180px 400px;
|
||||
gap: 5px;
|
||||
background-color: #F3F3F3;
|
||||
padding: 10px;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
.el-card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-column: 1 / 5;
|
||||
|
||||
.card-header {
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.avater {
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.item-chart {
|
||||
margin-top: 6px;
|
||||
grid-column: 1 / 5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
flex: 0 1 33%;
|
||||
background-color: #fff;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.screen {
|
||||
line-height: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #95989D;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-item-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.card-item-2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
color: #95989D;
|
||||
padding: 10px 0;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.stats-title {
|
||||
font-size: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue