fix 样式优化
This commit is contained in:
@@ -21,7 +21,7 @@
|
||||
position: relative;
|
||||
.title {
|
||||
margin: vh(20) auto;
|
||||
width: vw(450);
|
||||
width: vw(640);
|
||||
height: vh(66);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="box-3" :class="homeStore.amplify?'':'coll-box'">
|
||||
<div class="header" :class="homeStore.amplify?'':'coll-box-2'">
|
||||
<div class="header-2"></div>
|
||||
<div class="header top-header" :class="homeStore.amplify?'':'coll-box-2'">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="item"
|
||||
@@ -878,8 +879,23 @@
|
||||
height:100%;
|
||||
flex:1;
|
||||
margin-top: vh(120);
|
||||
.header-2{
|
||||
height: vh(128);
|
||||
padding: 0 vw(40);
|
||||
box-sizing: border-box;
|
||||
// background-image: url('@/assets/images/group.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.top-header{
|
||||
position:absolute;
|
||||
width: vw(1750);
|
||||
left:50%;
|
||||
transform: translateX(-50%);
|
||||
top:vh(110);
|
||||
}
|
||||
.header {
|
||||
// width: vw(1400);
|
||||
|
||||
|
||||
height: vh(128);
|
||||
padding: 0 vw(40);
|
||||
box-sizing: border-box;
|
||||
@@ -887,10 +903,10 @@
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
display: flex;
|
||||
width: vw(840);
|
||||
// width: vw(840);
|
||||
margin-top: vh(20);
|
||||
flex:1;
|
||||
|
||||
flex: 1;
|
||||
margin-left:vw(20);
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(16),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 6, 0],
|
||||
inside: true,
|
||||
@@ -141,13 +141,13 @@
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(16)
|
||||
},
|
||||
total: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(16)
|
||||
},
|
||||
}
|
||||
},
|
||||
@@ -172,7 +172,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(16),
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
<div class="box-2">
|
||||
<Title1 title="不同景区工单占比" />
|
||||
<div class="chart">
|
||||
<div class="chart" style="padding-top: 0;">
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="景区工单占比" />
|
||||
<div class="chart__inner">
|
||||
@@ -343,11 +343,13 @@
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__legend {
|
||||
flex: 1;
|
||||
|
||||
// flex: 1;
|
||||
width: vw(800);
|
||||
margin-left:vw(50);
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<div class="chart-box" style="justify-content: center;align-items: center;">
|
||||
<newsRate :dataList="newsStateList" />
|
||||
<ul class="chart__legend">
|
||||
<li class="chart__legend-item" v-for="(item, index) in newsStateList" :key="index">
|
||||
@@ -160,14 +160,14 @@
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
width: vw(130);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -233,10 +233,16 @@
|
||||
}
|
||||
.label--warning {
|
||||
@extend .label;
|
||||
width:initial;
|
||||
height:initial;
|
||||
padding:vw(15);
|
||||
background: #feae00;
|
||||
}
|
||||
.label--error {
|
||||
width:initial;
|
||||
height:initial;
|
||||
@extend .label;
|
||||
padding:vw(15);
|
||||
background: #d9011b;
|
||||
}
|
||||
.time {
|
||||
|
||||
@@ -55,11 +55,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,13 +80,13 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(16),
|
||||
fontSize: fitChartSize(18),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -158,7 +158,8 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarmRate {
|
||||
width: vw(380);
|
||||
height: vh(180);
|
||||
width: vw(440);
|
||||
height: vh(300);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -35,11 +35,35 @@
|
||||
|
||||
var defaultCofig = {
|
||||
color: [],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
y: 'center',
|
||||
left: '50%',
|
||||
itemWidth: fitChartSize(18),
|
||||
itemHeight: fitChartSize(18),
|
||||
itemGap: fitChartSize(6),
|
||||
formatter: (name) => {
|
||||
let obj = props.dataList.find((item) => item.name == name)
|
||||
return `{name|${name}} {value|${obj?.value}}{value|%}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
center: ['24%', '50%'],
|
||||
radius: ['35%', '50%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
borderColor: '#093672'
|
||||
@@ -51,13 +75,13 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontSize: fitChartSize(20),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(22)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -92,7 +116,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.spotRate {
|
||||
width: vw(240);
|
||||
height: vh(320);
|
||||
width: vw(640);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user