mt-fe-group/pad-demo
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新

Browse Source
This commit is contained in:
helloDy 2022-09-16 16:07:08 +08:00
parent e429c455d1
commit 7d62da003f
8 changed files with 670 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main.js
View File

@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-07-25 14:18:00
* @LastEditors: DY
* @LastEditTime: 2022-09-07 09:21:31
* @LastEditTime: 2022-09-16 14:13:07
* @Description: file content
* @FilePath: \hf-pda\src\main.js
*/
@ -20,9 +20,9 @@ import './assets/css/iconfont.css'
import './components/'
import store from '@/store'
import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup } from 'vant'
import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup, Swipe, SwipeItem } from 'vant'
Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup)
Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup).use(Swipe).use(SwipeItem)
// const vConsole = new Vconsole()

16
src/pages/index/index.vue
View File

@ -97,15 +97,14 @@ export default {
color: white;
}
.un-button{
font-size: 0.1px;
margin: 0.15rem auto 0 auto;
margin: 2.5vh auto 0 auto;
width: 0.64rem;
height: 0.57rem;
height: 13vh;
color: #0B58FF;
// text-align: center;
}
.van-button{
margin-top: -0.25rem;
margin-top: -5.5vh;
background-color: #0B58FF;
color: white;
width: 0.64rem;
@ -121,16 +120,19 @@ export default {
}
.nav-div{
// background-image: url('../../assets/img/nav.png');
background-size: 100% 0.727rem;
background-size: 100% 17vh;
background-repeat: no-repeat;
position: absolute;
bottom: 0px;
width: 100%;
height: 0.762rem;
height: 17vh;
font-size: 0.1rem;
}
.index{
// width: 100vh;
height: 4.21rem;
height: 100vh;
overflow: hidden;
overflow-y: auto;
background-color: #EDEFF0;
}
</style>

108
src/pages/overview/overview.vue
View File

@ -217,12 +217,12 @@ export default {
}
.top{
// width: 100%;
height: 0.64rem;
height: 15vh;
background: #276BFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.2rem;
padding: 0 4.7vh;
p{
font-size: 0.247rem;
@ -241,7 +241,7 @@ export default {
.description{
font-size: 0.1rem;
opacity: 0.7;
margin-top: 0.05rem;
margin-top: 1.1vh;
}
.right{
@ -255,38 +255,38 @@ export default {
}
.middle {
width: 6.89rem;
height: 2.6rem;
margin: 0.09rem auto;
height: 61vh;
margin: 2.4vh auto;
background-color: white;
.week {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: white;
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.181rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
span:first-child {
@ -307,37 +307,37 @@ export default {
}
.day {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: rgba(197, 199, 206, 0.55);
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
@ -349,37 +349,37 @@ export default {
}
.pass {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: white;
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
@ -403,37 +403,37 @@ export default {
}
.energy {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: rgba(197, 199, 206, 0.55);
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
@ -445,37 +445,37 @@ export default {
}
.unit {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: white;
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
@ -499,37 +499,37 @@ export default {
}
.equipment {
width: 100%;
height: 0.37rem;
height: 8.7vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: rgba(197, 199, 206, 0.55);
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.4vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.4vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
@ -541,37 +541,37 @@ export default {
}
.monitor {
width: 100%;
height: 0.37rem;
height: 8.6vh;
li {
float: left;
height: 0.37rem;
height: 8.6vh;
width: 1.362rem;
background-color: white;
margin-right: 0.016rem;
h2 {
height: 0.181rem;
height: 4.2vh;
font-size: 0.158rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
margin-top: 0.11rem;
margin-top: 2.5vh;
color: rgba(19, 20, 21, 0.85);
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}
div {
margin-left: 0.1rem;
margin-top: 0.03rem;
margin-top: 0.7vh;
span {
font-size: 0.158rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff4d4f;
line-height: 0.181rem;
margin-top: 0.1rem;
line-height: 4.2vh;
margin-top: 2.3vh;
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
}

187
src/pages/quality/components/swipeBar.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<p class="chartTitle">A产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="bar" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<p class="chartTitle">B产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pie" class="bar"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data () {
return {
chart: null
}
},
mounted () {
this.initChart()
this.pieChart()
},
methods: {
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
initChart () {
echarts.init(document.getElementById('bar')).setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
{ value: 67, name: '崩边' },
{ value: 42, name: '气泡' },
{ value: 12, name: '凹凸物' }
]
}
]
}
)
},
pieChart () {
echarts.init(document.getElementById('pie')).setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '45%'],
type: 'pie',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
{ value: 67, name: '崩边' },
{ value: 42, name: '气泡' },
{ value: 12, name: '凹凸物' }
]
}
]
}
)
}
}
}
</script>
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
height: 63vh;
background-color: white;
border-radius: 5%;
text-align: center;
color: #276BFF;
font-size: 0.16rem;
font-weight: 600;
opacity: 0.8;
.chartTitle{
margin: 5vh auto 0.5vh 0.25rem;
text-align: left;
}
.imgcss{
display: flex;
width: 0.8rem;
height: 0.8vh;
margin-left: 0.25rem;
.img-left{
width: 0.1rem;
background-color: #276BFF;
}
.img-right{
width: 0.64rem;
margin-left: 0.01rem;
// background-color: #276BFF;
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
}
}
}
.bar{
width: 3.4rem;
height: 60vh;
}
}
</style>

187
src/pages/quality/components/swipePie.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<p class="chartTitle">C产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pie1" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<p class="chartTitle">D产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pie2" class="bar"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data () {
return {
chart: null
}
},
mounted () {
this.pieChart1()
this.pieChart2()
},
methods: {
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
pieChart1 () {
echarts.init(document.getElementById('pie1')).setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
{ value: 67, name: '崩边' },
{ value: 42, name: '气泡' },
{ value: 12, name: '凹凸物' }
]
}
]
}
)
},
pieChart2 () {
echarts.init(document.getElementById('pie2')).setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
{ value: 67, name: '崩边' },
{ value: 42, name: '气泡' },
{ value: 12, name: '凹凸物' }
]
}
]
}
)
}
}
}
</script>
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
height: 63vh;
background-color: white;
border-radius: 5%;
text-align: center;
color: #276BFF;
font-size: 0.16rem;
font-weight: 600;
opacity: 0.8;
.chartTitle{
margin: 5vh auto 0.5vh 0.25rem;
text-align: left;
}
.imgcss{
display: flex;
width: 0.8rem;
height: 0.8vh;
margin-left: 0.25rem;
.img-left{
width: 0.1rem;
background-color: #276BFF;
}
.img-right{
width: 0.64rem;
margin-left: 0.01rem;
// background-color: #276BFF;
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
}
}
}
.bar{
width: 3.4rem;
height: 60vh;
}
}
</style>

184
src/pages/quality/components/swipePies.vue Normal file
View File

@ -0,0 +1,184 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<p class="chartTitle">E产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pieDiv" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<p class="chartTitle">缺陷总量排名</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="barDiv" class="bar"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data () {
return {
chart: null
}
},
mounted () {
this.initChart()
this.pieChart()
},
methods: {
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
initChart () {
this.chart = echarts.init(document.getElementById('barDiv'))
this.chart.setOption(
{
grid: {
left: 50,
top: 23
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 40
},
data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
},
yAxis: {
type: 'value'
},
series: [{
data: [518, 400, 289, 123, 24],
type: 'bar',
showBackground: true,
barWidth: '35%',
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
return colorList[params.dataIndex]
}
}
},
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.4)'
}
}]
}
)
},
pieChart () {
echarts.init(document.getElementById('pieDiv')).setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
{ value: 67, name: '崩边' },
{ value: 42, name: '气泡' },
{ value: 12, name: '凹凸物' }
]
}
]
}
)
}
}
}
</script>
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
height: 63vh;
background-color: white;
border-radius: 5%;
text-align: center;
color: #276BFF;
font-size: 0.16rem;
font-weight: 600;
opacity: 0.8;
.chartTitle{
margin: 5vh auto 0.5vh 0.25rem;
text-align: left;
}
.imgcss{
display: flex;
width: 0.8rem;
height: 0.8vh;
margin-left: 0.25rem;
.img-left{
width: 0.1rem;
background-color: #276BFF;
}
.img-right{
width: 0.64rem;
margin-left: 0.01rem;
// background-color: #276BFF;
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
}
}
}
.bar{
width: 3.4rem;
height: 60vh;
}
}
</style>

79
src/pages/quality/quality.vue
View File

@ -17,7 +17,7 @@
<p>质量缺陷</p>
<div class="right">
<div>
<p style="font-size: 0.1rem;">2022.12.24</p>
<p style="font-size: 0.1rem; opacity: 0.8;">2022.12.24</p>
<p style="font-size: 0.142rem;">23.12</p>
</div>
<div class="date">
@ -26,15 +26,21 @@
</div>
</div>
</div>
<div class="content">
<div id="bar" class="bar" style="border-bottom-right-radius: 20%"></div>
<div id="pie" class="bar" style="border-bottom-left-radius: 20%"></div>
<div class="swipDiv">
<van-swipe class="my-swipe" indicator-color="white">
<van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
<van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
<van-swipe-item><swipe-pies></swipe-pies></van-swipe-item>
</van-swipe>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import SwipeBar from './components/swipeBar.vue'
import SwipePie from './components/swipePie.vue'
import SwipePies from './components/swipePies.vue'
export default {
data () {
@ -42,9 +48,10 @@ export default {
chart: null
}
},
components: { SwipeBar, SwipePie, SwipePies },
mounted () {
this.initChart()
this.pieChart()
// this.initChart()
// this.pieChart()
},
methods: {
beforeDestroy () {
@ -58,17 +65,9 @@ export default {
this.chart = echarts.init(document.getElementById('bar'))
this.chart.setOption(
{
title: {
text: '总量排名',
textStyle: {
color: '#276BFF'
},
top: '1%',
left: '2%'
},
grid: {
left: 50,
bottom: 60
top: 23
},
xAxis: {
type: 'category',
@ -93,7 +92,7 @@ export default {
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40']
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
return colorList[params.dataIndex]
}
}
@ -111,24 +110,17 @@ export default {
tooltip: {
trigger: 'item'
},
title: {
text: 'B产线',
textStyle: {
color: '#276BFF'
},
top: '1%',
left: '2%'
},
legend: {
orient: 'vertical',
top: 'center',
right: '5%'
icon: 'circle',
top: '15%',
right: '10%'
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40'],
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '53%'],
center: ['35%', '45%'],
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
@ -164,8 +156,7 @@ export default {
<style lang="scss" scoped>
.top{
// width: 100%;
height: 0.64rem;
height: 15vh;
background: #276BFF;
display: flex;
justify-content: space-between;
@ -188,7 +179,7 @@ export default {
.description{
font-size: 0.1rem;
opacity: 0.7;
margin-top: 0.05rem;
margin-top: 1vh;
}
.right{
@ -202,37 +193,33 @@ export default {
display: flex;
text-align: center;
align-items: center;
line-height: 0.36rem;
line-height: 8.4vh;
.day{
height: 0.36rem;
height: 8.4vh;
width: 0.64rem;
background-color: #4E9AFF;
border-radius: 5px;
border-radius: 3px 0 0 3px;
border: #4E9AFF 1px solid;
}
.month{
height: 0.36rem;
height: 8.4vh;
width: 0.64rem;
background-color: #276BFF;
border: #88ADFF 1px solid;
border-radius: 5px;
border-radius: 0 3px 3px 0;
margin-left: -0.05rem;
}
}
}
}
.content{
display: flex;
justify-content: space-around;
margin-top: 0.1rem;
font-size: 0.135rem;
.swipDiv{
width: 100%;
.bar{
width: 3.4rem;
height: 2.66rem;
background-color: white;
border-radius: 5%;
.my-swipe .van-swipe-item {
color: #fff;
height: 67vh;
text-align: center;
}
}

25
src/pages/threeDimensional/threeDimensional.vue
View File

@ -115,23 +115,23 @@ export default {
}
.top {
width: 100%;
height: 1.1rem;
height: 25vh;
overflow: hidden;
display: flex;
.left{
float: left;
img{
width: 1.96rem;
margin-top: 0.329rem;
margin-top: 7.7vh;
margin-left: 0.238rem;
}
}
.topMiddle{
color: white;
margin-top: 0.181rem;
margin-top: 4vh;
width: 2.68rem;
float: left;
height: 0.378rem;
height: 8.8vh;
.base{
margin-left: 0.181rem;
img{
@ -139,7 +139,7 @@ export default {
}
span{
width: 1.862rem;
height: 0.135rem;
height: 3.1vh;
font-size: 0.15rem;
text-align: center;
font-family: PingFangSC-Semibold, PingFang SC;
@ -151,7 +151,7 @@ export default {
.factory{
width: 2.68rem;
text-align: center;
height: 0.181rem;
height: 4.2vh;
font-size: 0.181rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
@ -163,24 +163,25 @@ export default {
float:left;
.rightLogo {
width: 1.5rem;
margin-top: 0.329rem;
margin-top: 7vh;
}
.user{
margin: 0.18rem auto auto 0.4rem;
margin: 4.5vh auto auto 0.5rem;
width: 0.363rem;
height: 0.363rem;
}
}
}
.middle {
width: 100%;
height: 2.58rem;
width: 100vw;
height: 66vh;
background: url("../../assets/img/background.png") no-repeat;
background-size: 100% 100%;
overflow: hidden;
img{
width: 100%;
margin-top: 0.61rem;
width: 90%;
margin: 14vh auto;
display: block;
}
}
</style>