979 lines
33 KiB
Vue
979 lines
33 KiB
Vue
<template>
|
||
<div class="status content">
|
||
|
||
<largeNav :active="3"></largeNav>
|
||
<div class="content-left">
|
||
<div class="left-view1">
|
||
<div class="view-content">
|
||
<div>
|
||
<div class="input-50">
|
||
<div class="input-title">工作状态</div>
|
||
<div class="input">{{ newData.Data_3=='0'?'待机':'自动运行' }}</div>
|
||
</div>
|
||
<div class="input-50">
|
||
<div class="input-title">控制方式</div>
|
||
<div class="input">{{ newData.Data_2=='0'?'手动':'自动' }}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="input-50">
|
||
<div class="input-title">自动工作方式</div>
|
||
<div class="input">{{ getType3(newData.Data_3) }}</div>
|
||
</div>
|
||
<div class="input-50 w-100">
|
||
<div class="input-title">吸肥泵压力 MP</div>
|
||
<div class="input green">{{ newData1.Data_35 }}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="input-50 w-100">
|
||
<div class="input-title">主管道累计流量 m³</div>
|
||
<div class="input green">{{ newData1.Data_33 }}</div>
|
||
</div>
|
||
<div class="input-50 w-100">
|
||
<div class="input-title">主管道瞬时流量 m³/H</div>
|
||
<div class="input green">{{ newData1.Data_34?Number(newData1.Data_34).toFixed(2):'0' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="left-btn">
|
||
<div :class="newData.Data_4==1 ? 'active' : ''">水泵</div>
|
||
<div :class="newData.Data_5==1 ? 'active' : ''">吸肥泵</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
</div>
|
||
<div class="left-view2">
|
||
<div class="main-title"><span>输出脉宽</span></div>
|
||
<div class="view-content">
|
||
<div v-for="item, index in left2List" :key="index">
|
||
<div class="left" :style="item.img ? `background: url(${item.img}) no-repeat center;` : ''"><span>{{
|
||
item.title }}</span></div>
|
||
<!-- <div class="name">{{ item.name }}</div> -->
|
||
<div class="number">{{ item.number }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-center">
|
||
<div class="center-title"><span>智能施肥机</span></div>
|
||
<div>
|
||
<div class="center-center">
|
||
<div class="view view-1">
|
||
<div class="name">PH实际值</div>
|
||
<div class="number">{{ countType5(newData1.Data_2) }}</div>
|
||
</div>
|
||
<!-- <div class="view view-2">
|
||
<div class="name">2#PH</div>
|
||
<div class="number">{{ newData.Data_10 }}</div>
|
||
</div>
|
||
<div class="view view-3">
|
||
<div class="name">1#EC</div>
|
||
<div class="number">{{ newData.Data_11 }}</div>
|
||
</div> -->
|
||
<div class="view view-4">
|
||
<div class="name">EC实际值</div>
|
||
<div class="number">{{ countType5(newData1.Data_1) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="center-bottom">
|
||
<div class="center-bottom-title"><span>田间阀状态</span></div>
|
||
<div class="center-bottom-flex">
|
||
<template v-for="item, index in 40">
|
||
<div v-if="newData['Data_'+(index+1+20)] == '1'">
|
||
<span> {{ index + 1 }}#</span>
|
||
<img src="../../assets/image/center-flex-active.png" alt="">
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="right-view1">
|
||
<div class="main-title"><span>设备状态 </span></div>
|
||
|
||
</div>
|
||
<div class="right-view2">
|
||
<div v-for="item, index in rightList2"
|
||
:class="newData[item.value] == 1 ? 'active' : ''">{{ item.label }}</div>
|
||
</div>
|
||
<div class="right-view3">
|
||
<div class="main-title"><span>吸肥阀运行状态 </span></div>
|
||
<div class="view-content">
|
||
<div v-for="item, index in rightList3" :key="index">
|
||
<div class="name">{{ item.name }}</div>
|
||
<div class="number">{{ item.number }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-view4">
|
||
<el-button type="primary" @click="openModel">修改设定值</el-button>
|
||
</div>
|
||
</div>
|
||
<el-dialog title="修改设定值" :append-to-body="true" :visible.sync="statusShow" width="70%">
|
||
<div class="model-title">修改设定值</div>
|
||
<div class="model-sel largeScreen4 scroll">
|
||
<div v-for="item, index in statusList" :key="index">
|
||
<div class="w-100 label">
|
||
{{ item.label }}
|
||
</div>
|
||
<div>
|
||
<span>当前状态：</span>
|
||
<el-switch
|
||
v-if="index==0"
|
||
v-model="item.value"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
active-text="自动"
|
||
@change='setData($event,item)'
|
||
inactive-text="手动">
|
||
</el-switch>
|
||
<el-switch
|
||
v-if="index!=0"
|
||
v-model="item.value"
|
||
@change='setData($event,item)'
|
||
active-value="1"
|
||
inactive-value="0">
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="statusShow = false">确认</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import largeNav from '@/components/large-nav.vue'
|
||
import vueSeamless from 'vue-seamless-scroll'
|
||
import { log } from 'video.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageTimer: null,
|
||
left1Act: [0,0],
|
||
openType: '',
|
||
centerAct: 0,
|
||
right2Index: [],
|
||
inputData: [],
|
||
deviceDetail: null,
|
||
centerBottom: [],
|
||
numberList: [273, 278, 283, 288, 293, 298],
|
||
inputData1: [],
|
||
loading: true,
|
||
newData:{},//pinfengGetstate接口
|
||
newData1:{},//pinfengGetrtdata接口
|
||
rightList2:[
|
||
{label:'水泵',value:'Data_4'},
|
||
{label:'吸肥泵',value:'Data_5'},
|
||
{label:'1#搅拌',value:'Data_16'},
|
||
{label:'2#搅拌',value:'Data_17'},
|
||
{label:'3#搅拌',value:'Data_18'},
|
||
{label:'4#搅拌',value:'Data_19'},
|
||
{label:'5#搅拌',value:'Data_20'},
|
||
],
|
||
rightList3:[{
|
||
name: '1#',
|
||
number: '0',
|
||
}, {
|
||
name: '2#',
|
||
number: '0',
|
||
}, {
|
||
name: '3#',
|
||
number: '0',
|
||
}, {
|
||
name: '4#',
|
||
number: '0',
|
||
}, {
|
||
name: '5#',
|
||
number: '0',
|
||
},],
|
||
left2List:[
|
||
{
|
||
title: '1#',
|
||
name:'',
|
||
number: '0%',
|
||
img: ''
|
||
}, {
|
||
title: '2#',
|
||
name:'',
|
||
number: '0%',
|
||
img: ''
|
||
}, {
|
||
title: '3#',
|
||
name:'',
|
||
number: '0%',
|
||
img: ''
|
||
}, {
|
||
title: '4#',
|
||
name:'',
|
||
number: '0%',
|
||
img: ''
|
||
}, {
|
||
title: '5#',
|
||
name:'',
|
||
number: '0%',
|
||
img: ''
|
||
},
|
||
],
|
||
statusShow:false,
|
||
statusList:[
|
||
{label:'控制方式',value:0,name:'Data_2',changeName:'Data_1'},
|
||
{label:'1#搅拌',value:0,name:'Data_16',changeName:'Data_4'},
|
||
{label:'2#搅拌',value:0,name:'Data_17',changeName:'Data_5'},
|
||
{label:'3#搅拌',value:0,name:'Data_18',changeName:'Data_6'},
|
||
{label:'4#搅拌',value:0,name:'Data_19',changeName:'Data_7'},
|
||
{label:'酸搅拌',value:0,name:'Data_20',changeName:'Data_8'},
|
||
{label:'水泵',value:0,name:'Data_4',changeName:'Data_2'},
|
||
{label:'肥泵',value:0,name:'Data_5',changeName:'Data_3'},
|
||
{label:'1#阀',value:0,name:'Data_21',changeName:'Data_19'},
|
||
{label:'2#阀',value:0,name:'Data_22',changeName:'Data_20'},
|
||
{label:'3#阀',value:0,name:'Data_23',changeName:'Data_21'},
|
||
{label:'4#阀',value:0,name:'Data_24',changeName:'Data_22'},
|
||
{label:'5#阀',value:0,name:'Data_25',changeName:'Data_23'},
|
||
{label:'6#阀',value:0,name:'Data_26',changeName:'Data_24'},
|
||
{label:'7#阀',value:0,name:'Data_27',changeName:'Data_25'},
|
||
{label:'8#阀',value:0,name:'Data_28',changeName:'Data_26'},
|
||
{label:'9#阀',value:0,name:'Data_29',changeName:'Data_27'},
|
||
{label:'10#阀',value:0,name:'Data_30',changeName:'Data_28'},
|
||
{label:'11#阀',value:0,name:'Data_31',changeName:'Data_29'},
|
||
{label:'12#阀',value:0,name:'Data_32',changeName:'Data_30'},
|
||
{label:'13#阀',value:0,name:'Data_33',changeName:'Data_31'},
|
||
{label:'14#阀',value:0,name:'Data_34',changeName:'Data_32'},
|
||
{label:'15#阀',value:0,name:'Data_35',changeName:'Data_33'},
|
||
{label:'16#阀',value:0,name:'Data_36',changeName:'Data_34'},
|
||
{label:'17#阀',value:0,name:'Data_37',changeName:'Data_35'},
|
||
{label:'18#阀',value:0,name:'Data_38',changeName:'Data_36'},
|
||
{label:'19#阀',value:0,name:'Data_39',changeName:'Data_37'},
|
||
{label:'20#阀',value:0,name:'Data_40',changeName:'Data_38'},
|
||
{label:'21#阀',value:0,name:'Data_41',changeName:'Data_39'},
|
||
{label:'22#阀',value:0,name:'Data_42',changeName:'Data_40'},
|
||
{label:'23#阀',value:0,name:'Data_43',changeName:'Data_41'},
|
||
{label:'24#阀',value:0,name:'Data_44',changeName:'Data_42'},
|
||
{label:'25#阀',value:0,name:'Data_45',changeName:'Data_43'},
|
||
{label:'26#阀',value:0,name:'Data_46',changeName:'Data_44'},
|
||
{label:'27#阀',value:0,name:'Data_47',changeName:'Data_45'},
|
||
{label:'28#阀',value:0,name:'Data_48',changeName:'Data_46'},
|
||
{label:'29#阀',value:0,name:'Data_49',changeName:'Data_47'},
|
||
{label:'30#阀',value:0,name:'Data_50',changeName:'Data_48'},
|
||
{label:'31#阀',value:0,name:'Data_51',changeName:'Data_49'},
|
||
{label:'32#阀',value:0,name:'Data_52',changeName:'Data_50'},
|
||
{label:'33#阀',value:0,name:'Data_53',changeName:'Data_51'},
|
||
{label:'34#阀',value:0,name:'Data_54',changeName:'Data_52'},
|
||
{label:'35#阀',value:0,name:'Data_55',changeName:'Data_53'},
|
||
{label:'36#阀',value:0,name:'Data_56',changeName:'Data_54'},
|
||
{label:'37#阀',value:0,name:'Data_57',changeName:'Data_55'},
|
||
{label:'38#阀',value:0,name:'Data_58',changeName:'Data_56'},
|
||
{label:'39#阀',value:0,name:'Data_59',changeName:'Data_57'},
|
||
{label:'40#阀',value:0,name:'Data_60',changeName:'Data_58'}]
|
||
}
|
||
},
|
||
components: { vueSeamless,largeNav },
|
||
computed: {
|
||
defaultOption() {
|
||
return {
|
||
step: 0.3, // 数值越大速度滚动越快
|
||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
},
|
||
|
||
|
||
},
|
||
//清除监听
|
||
beforeDestroy() {
|
||
const that = this;
|
||
this.$bus.$off('refreshData')
|
||
that.pageTimer && clearInterval(that.pageTimer)
|
||
},
|
||
mounted() {
|
||
const that = this;
|
||
if (localStorage.getItem('token')) {
|
||
this.dataInit()
|
||
setTimeout(() => {
|
||
that.pageTimer && clearInterval(that.pageTimer)
|
||
that.pageTimer = setInterval(() => {
|
||
that.dataInit()
|
||
}, 10000);
|
||
}, 0);
|
||
} else {
|
||
// this.$router.push({ name: 'login' })
|
||
}
|
||
// this.$bus.$on('refreshData', (res) => {
|
||
// that.getEqbyid();
|
||
// })
|
||
},
|
||
methods: {
|
||
//countType计算类型
|
||
//0是原数据
|
||
//1是原数据-400
|
||
//2是原数据/10
|
||
//3是(原数据-400) / 10
|
||
countType1(data) {
|
||
var num = data - 400
|
||
return num.toFixed(2)
|
||
},
|
||
countType2(data) {
|
||
var num = data / 10
|
||
return num.toFixed(2)
|
||
},
|
||
countType3(data) {
|
||
|
||
var num = (data - 400) / 10
|
||
return num.toFixed(2)
|
||
},
|
||
countType4(data) {
|
||
|
||
var num = (data - 1000) / 10
|
||
return num.toFixed(2)
|
||
},
|
||
countType5(data) {
|
||
if(data){
|
||
var num = data / 100
|
||
return num.toFixed(2)
|
||
}else{
|
||
return 0
|
||
}
|
||
|
||
},
|
||
|
||
compare(property) {
|
||
return function (a, b) {
|
||
let value1 = a[property];
|
||
let value2 = b[property];
|
||
return value1 - value2;
|
||
};
|
||
},
|
||
|
||
|
||
countData(data) {
|
||
if (data) {
|
||
return data
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
padString(str, length) {
|
||
return str.padStart(length, '0');
|
||
},
|
||
countData100(data) {
|
||
if (data) {
|
||
return data / 100
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
getType3(index) {
|
||
if (index == 0) {
|
||
return '灌溉模式'
|
||
} else if (index == 1) {
|
||
return 'EC施肥'
|
||
} else if (index == 2) {
|
||
return '定量施肥'
|
||
} else if (index == 3) {
|
||
return '定时施肥'
|
||
}
|
||
},
|
||
|
||
//进水泵和出水泵状态
|
||
getData30() {
|
||
var num =this.inputData['30']?this.inputData['30']:0
|
||
var number = this.padString(num.toString(2), 2)
|
||
this.left1Act=number
|
||
},
|
||
dataInit() {
|
||
this.api.pinfengGetstate().then(res=>{
|
||
if(res.data.code==200){
|
||
this.newData=res.data.data.result.data
|
||
this.rightList3=[
|
||
{
|
||
name: '1#',
|
||
number:`${this.newData.Data_6=='1'?'开启':'关闭'}`,
|
||
}, {
|
||
name: '2#',
|
||
number:`${this.newData.Data_8=='1'?'开启':'关闭'}`,
|
||
}, {
|
||
name: '3#',
|
||
number:`${this.newData.Data_10=='1'?'开启':'关闭'}`,
|
||
}, {
|
||
name: '4#',
|
||
number:`${this.newData.Data_12=='1'?'开启':'关闭'}`,
|
||
}, {
|
||
name: '5#',
|
||
number:`${this.newData.Data_14=='1'?'开启':'关闭'}`,
|
||
},
|
||
]
|
||
this.left2List=[
|
||
{
|
||
title: '1#',
|
||
name:'',
|
||
number: this.newData.Data_7+'%',
|
||
img: ''
|
||
}, {
|
||
title: '2#',
|
||
name:'',
|
||
number: this.newData.Data_9+'%',
|
||
img: ''
|
||
}, {
|
||
title: '3#',
|
||
name:'',
|
||
number: this.newData.Data_11+'%',
|
||
img: ''
|
||
}, {
|
||
title: '4#',
|
||
name:'',
|
||
number: this.newData.Data_13+'%',
|
||
img: ''
|
||
}, {
|
||
title: '5#',
|
||
name:'',
|
||
number: this.newData.Data_15+'%',
|
||
img: ''
|
||
},
|
||
]
|
||
}else{
|
||
this.newData={}
|
||
}
|
||
|
||
})
|
||
this.api.pinfengGetrtdata().then(res=>{
|
||
if(res.data.code==200){
|
||
this.newData1=res.data.data.result.data
|
||
}else{
|
||
this.newData1={}
|
||
}
|
||
|
||
})
|
||
},
|
||
setData(e,item){
|
||
var data={name:item.changeName,value:e}
|
||
this.api.pinfengSetdevice(data).then(res=>{
|
||
|
||
if(res.data.code==200){
|
||
this.$message.success('修改成功')
|
||
this.newData[item.name]=e
|
||
}else{
|
||
this.$message.warning('修改失败')
|
||
}
|
||
})
|
||
},
|
||
openModel(){
|
||
this.statusList= this.statusList.map(item=>{
|
||
var data={
|
||
...item,
|
||
value:this.newData[item.name]
|
||
}
|
||
return data
|
||
})
|
||
setTimeout(() => {
|
||
this.statusShow=true
|
||
}, 0);
|
||
|
||
},
|
||
checkTime(i) {
|
||
if (i < 10) {
|
||
i = "0" + i;
|
||
}
|
||
|
||
return i;
|
||
},
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 3.6%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>div {
|
||
height: 100%;
|
||
}
|
||
|
||
.content-left {
|
||
width: 25.8%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.left-view1 {
|
||
width: 100%;
|
||
|
||
.view-content {
|
||
height:400px;
|
||
padding: 20px 16px 37px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
>div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.input-50 {
|
||
width: calc((100% - 14px) / 2);
|
||
|
||
|
||
}
|
||
|
||
.left-btn {
|
||
justify-content: space-between;
|
||
|
||
>div {
|
||
// margin-right: 20px;
|
||
min-width: 140px;
|
||
height: 44px;
|
||
padding: 0 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url(../../assets/image/left1-btn.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
font-size: 24px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
color: #A2C9F8;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
background: url(../../assets/image/left1-btn-act.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-view2 {
|
||
width: 100%;
|
||
|
||
.view-content {
|
||
height: 350px;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-row-gap: 10px; //纵向间隔
|
||
grid-column-gap: auto; //横向间隔
|
||
padding: 20px 20px 0;
|
||
|
||
>div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 65px;
|
||
height: 65px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
background: url(../../assets/image/left2-icon0.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
|
||
span {
|
||
font-size: 34px;
|
||
font-family: Oswald;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
|
||
background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 20px;
|
||
font-family: Alibaba PuHuiTiR;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
width: 49px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.number {
|
||
font-size: 32px;
|
||
font-family: Oswald;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
margin-left: 10px;
|
||
background: linear-gradient(180deg, #34AFF6 0%, #EDFDFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-right {
|
||
width: 25.8%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
>div {
|
||
width: 100%;
|
||
}
|
||
|
||
.right-view3 {
|
||
width: 100%;
|
||
|
||
.view-content {
|
||
padding: 20px 20px 0;
|
||
// display: grid;
|
||
// grid-template-columns: repeat(3, 1fr);
|
||
// grid-row-gap: 30px; //纵向间隔
|
||
// grid-column-gap: auto; //横向间隔
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
height: 350px;
|
||
>div {
|
||
|
||
flex-shrink: 0;
|
||
width:130px;
|
||
height: 117px;
|
||
background: url(../../assets/image/right-view3.png) no-repeat center;
|
||
background-size:86px 100%;
|
||
padding: 20px 15px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 20px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
|
||
background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.number {
|
||
width: 100%;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-view2 {
|
||
width: 100%;
|
||
|
||
white-space: nowrap;
|
||
display: grid;
|
||
grid-template-columns: repeat(2,1fr);
|
||
grid-row-gap:30px;//纵向间隔
|
||
grid-column-gap:20px;//横向间隔
|
||
padding: 20px 0;
|
||
>div {
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
color: #A9D1FF;
|
||
background: url(../../assets/image/right-view2.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
background: url(../../assets/image/right-view2-act.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
|
||
text-shadow: 0px 2px 0px rgba(0, 111, 128, 0.5);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.right-view4{
|
||
display: flex;
|
||
margin-top: 20px;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.main-table-title {
|
||
width: 100%;
|
||
height: 41px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: url(../../assets/image/main-title.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
|
||
>div {
|
||
width: calc(100% / 3);
|
||
height: 100%;
|
||
text-align: center;
|
||
line-height: 41px;
|
||
font-size: 16px;
|
||
font-family: Alibaba PuHuiTiR;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.table-content {
|
||
width: 100%;
|
||
height: 314px;
|
||
overflow: hidden;
|
||
|
||
.seamless-warp {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
|
||
|
||
|
||
.tr {
|
||
width: 100%;
|
||
height: calc(314px / 8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
font-family: Alibaba PuHuiTiR;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
border-bottom: 1px solid rgba(216, 227, 238, 0.1);
|
||
;
|
||
|
||
&:nth-child(odd) {
|
||
background: rgba(0, 84, 170, 0.25);
|
||
}
|
||
|
||
&:nth-child(even) {
|
||
|
||
background: rgba(23, 158, 228, 0.22);
|
||
}
|
||
}
|
||
|
||
.td {
|
||
width: calc(100% / 3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 100%;
|
||
font-family: Alibaba PuHuiTiR;
|
||
|
||
&.name {
|
||
>div {
|
||
width: 80px;
|
||
height: 24px;
|
||
background: rgba(23, 158, 228, 0.3);
|
||
border: 1px solid rgba(20, 197, 255, 0.5);
|
||
line-height: 24px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-center {
|
||
width: calc(100% - 51.6%);
|
||
position: relative;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 60px 20px 240px;
|
||
|
||
>div {
|
||
width: 100%;
|
||
}
|
||
|
||
.center-title {
|
||
width: 660px;
|
||
height: 68px;
|
||
background: url(../../assets/image/center-title.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-size: 40px;
|
||
font-family: Alimama ShuHeiTiB;
|
||
color: #F9CB9D;
|
||
// text-shadow: 0px 2px 0px rgba(0,55,160,0.75);
|
||
|
||
background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.center-center {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.view {
|
||
width: 222px;
|
||
height: 234px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.name {
|
||
font-size: 27px;
|
||
font-family: Alimama ShuHeiTiB;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.number {
|
||
font-size: 36px;
|
||
font-family: Oswald;
|
||
font-weight: 500;
|
||
color: #3CFDFF;
|
||
}
|
||
|
||
&.view-1,
|
||
&.view-2 {
|
||
background: url(../../assets/image/PH.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
&.view-3,
|
||
&.view-4 {
|
||
background: url(../../assets/image/EC.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
&.view-1 {
|
||
position: absolute;
|
||
bottom: 245px;
|
||
left: -20px;
|
||
}
|
||
|
||
&.view-2 {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 87px;
|
||
}
|
||
|
||
&.view-3 {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 87px;
|
||
}
|
||
|
||
&.view-4 {
|
||
position: absolute;
|
||
bottom: 245px;
|
||
right: -20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.center-bottom-title {
|
||
width: 427px;
|
||
height: 54px;
|
||
background: url(../../assets/image/center-title.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-size: 24px;
|
||
font-family: Alimama ShuHeiTiB;
|
||
color: #F9CB9D;
|
||
// text-shadow: 0px 2px 0px rgba(0,55,160,0.75);
|
||
|
||
background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.center-bottom-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
>div {
|
||
flex-shrink: 0;
|
||
width: 64px;
|
||
height: 64px;
|
||
background: url(../../assets/image/center-flex.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
background-position: center center;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
|
||
>img {
|
||
width: 81px;
|
||
height: 81px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
&.active {
|
||
background: unset;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|