lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 样式优化

Browse Source
This commit is contained in:
duanliang
2026-01-25 19:05:28 +08:00
parent e23a541799
commit 4d81265f97
8 changed files with 78 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Title1/index.vue
View File

@@ -21,7 +21,7 @@
position: relative; position: relative;
.title { .title {
margin: vh(20) auto; margin: vh(20) auto;
width: vw(450); width: vw(640);
height: vh(66); height: vh(66);
display: flex; display: flex;
align-items: center; align-items: center;

1
src/components/Title3/index.vue
View File

@@ -21,7 +21,6 @@
margin-top: vh(20); margin-top: vh(20);
background-image: url('@/assets/images/title-6.png'); background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%; background-size: 100% 100%;
& > span { & > span {
position: absolute; position: absolute;
bottom: vh(4); bottom: vh(4);

24
src/views/home/components/box-2.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="box-3" :class="homeStore.amplify?'':'coll-box'"> <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="flex">
<div class="left"> <div class="left">
<div class="item" <div class="item"
@@ -878,8 +879,23 @@
height:100%; height:100%;
flex:1; flex:1;
margin-top: vh(120); 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 { .header {
// width: vw(1400);
height: vh(128); height: vh(128);
padding: 0 vw(40); padding: 0 vw(40);
box-sizing: border-box; box-sizing: border-box;
@@ -887,10 +903,10 @@
background-size: 100% 100%; background-size: 100% 100%;
.left { .left {
display: flex; display: flex;
width: vw(840); // width: vw(840);
margin-top: vh(20); margin-top: vh(20);
flex: 1; flex: 1;
margin-left:vw(20);
} }
.right { .right {
flex: 1; flex: 1;

8
src/views/home/components/vacancy.vue
View File

@@ -128,7 +128,7 @@
show: true, show: true,
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12), fontSize: fitChartSize(16),
verticalAlign: 'bottom', verticalAlign: 'bottom',
padding: [0, 0, 6, 0], padding: [0, 0, 6, 0],
inside: true, inside: true,
@@ -141,13 +141,13 @@
align: 'center', align: 'center',
color: '#fff', color: '#fff',
fontWeight: 600, fontWeight: 600,
fontSize: fitChartSize(14) fontSize: fitChartSize(16)
}, },
total: { total: {
align: 'center', align: 'center',
color: '#fff', color: '#fff',
fontWeight: 600, fontWeight: 600,
fontSize: fitChartSize(14) fontSize: fitChartSize(16)
}, },
} }
}, },
@@ -172,7 +172,7 @@
fontWeight: 500, fontWeight: 500,
position: 'left', position: 'left',
align: 'left', align: 'left',
fontSize: fitChartSize(14), fontSize: fitChartSize(16),
formatter: function (params) { formatter: function (params) {
return params.data.name return params.data.name
} }

8
src/views/workOrder/components/box-2.vue
View File

@@ -70,7 +70,7 @@
</div> </div>
<div class="box-2"> <div class="box-2">
<Title1 title="不同景区工单占比" /> <Title1 title="不同景区工单占比" />
<div class="chart"> <div class="chart" style="padding-top: 0;">
<div class="chart__wrapper"> <div class="chart__wrapper">
<Title3 title="景区工单占比" /> <Title3 title="景区工单占比" />
<div class="chart__inner"> <div class="chart__inner">
@@ -343,11 +343,13 @@
&__inner { &__inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
&__legend { &__legend {
flex: 1; // flex: 1;
width: vw(800);
margin-left:vw(50);
&-item { &-item {
position: relative; position: relative;
width: 50%; width: 50%;

12
src/views/workOrder/components/box-3.vue
View File

@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="chart-box"> <div class="chart-box" style="justify-content: center;align-items: center;">
<newsRate :dataList="newsStateList" /> <newsRate :dataList="newsStateList" />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in newsStateList" :key="index"> <li class="chart__legend-item" v-for="(item, index) in newsStateList" :key="index">
@@ -160,14 +160,14 @@
.name { .name {
font-weight: 400; font-weight: 400;
font-size: vw(12); font-size: font-vw(18);
color: #ffffff; color: #ffffff;
width: vw(130); width: vw(130);
} }
.value { .value {
font-weight: bold; font-weight: bold;
font-size: vw(15); font-size: font-vw(20);
color: #ffffff; color: #ffffff;
} }
} }
@@ -233,10 +233,16 @@
} }
.label--warning { .label--warning {
@extend .label; @extend .label;
width:initial;
height:initial;
padding:vw(15);
background: #feae00; background: #feae00;
} }
.label--error { .label--error {
width:initial;
height:initial;
@extend .label; @extend .label;
padding:vw(15);
background: #d9011b; background: #d9011b;
} }
.time { .time {

13
src/views/workOrder/components/newsRate.vue
View File

@@ -55,11 +55,11 @@
rich: { rich: {
name: { name: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(18)
}, },
value: { value: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(18)
} }
} }
} }
@@ -80,13 +80,13 @@
rich: { rich: {
value: { value: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(16), fontSize: fitChartSize(18),
fontWeight: 'bold', fontWeight: 'bold',
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(18)
} }
} }
}, },
@@ -158,7 +158,8 @@
<style scoped lang="scss"> <style scoped lang="scss">
.alarmRate { .alarmRate {
width: vw(380); width: vw(440);
height: vh(180); height: vh(300);
} }
</style> </style>

36
src/views/workOrder/components/spotRate.vue
View File

@@ -35,11 +35,35 @@
var defaultCofig = { var defaultCofig = {
color: [], 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: [ series: [
{ {
type: 'pie', type: 'pie',
center: ['50%', '50%'], center: ['24%', '50%'],
radius: ['70%', '90%'], radius: ['35%', '50%'],
itemStyle: { itemStyle: {
borderWidth: fitChartSize(4), borderWidth: fitChartSize(4),
borderColor: '#093672' borderColor: '#093672'
@@ -51,13 +75,13 @@
rich: { rich: {
value: { value: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(24), fontSize: fitChartSize(20),
fontWeight: 'bold', fontWeight: 'bold',
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
name: { name: {
color: '#fff', color: '#fff',
fontSize: fitChartSize(12) fontSize: fitChartSize(22)
} }
} }
}, },
@@ -92,7 +116,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.spotRate { .spotRate {
width: vw(240); width: vw(640);
height: vh(320); height: vh(400);
} }
</style> </style>