1076 lines
35 KiB
Vue
1076 lines
35 KiB
Vue
<template>
|
|
<div class="status content">
|
|
<div class="content-left">
|
|
<div class="left-view1">
|
|
<div class="main-title"><span>灌溉状态 </span></div>
|
|
<div class="view-content">
|
|
<div>
|
|
<div class="input-50">
|
|
<div class="input-title">灌溉剩余时长</div>
|
|
<div class="input">{{ countData(inputData['36']) }}</div>
|
|
</div>
|
|
<div class="input-50">
|
|
<div class="input-title">灌溉瞬时流量</div>
|
|
<div class="input">{{ countData(inputData['28']) }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="input-50">
|
|
<div class="input-title">本次灌溉量</div>
|
|
<div class="input">{{ countData(inputData['37']) }}</div>
|
|
</div>
|
|
<div class="input-50">
|
|
<div class="input-title">启动方式</div>
|
|
<div class="input green">{{ openType }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="input-50">
|
|
<div class="input-title">使用灌溉配方号</div>
|
|
<div class="input">{{ countData(inputData['31']) }}</div>
|
|
</div>
|
|
<div class="input-50">
|
|
<div class="input-title">执行灌溉组号</div>
|
|
<div class="input">{{ countData(inputData['38']) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-btn">
|
|
<div :class="left1Act == 1 || left1Act == 3 ? 'active' : ''">进水泵</div>
|
|
<div :class="left1Act == 2 || left1Act == 3 ? '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 v-if="deviceDetail">{{ deviceDetail.stationName }}</span></div>
|
|
<div>
|
|
<div class="center-center">
|
|
<div class="view view-1">
|
|
<div class="name">目标PH</div>
|
|
<div class="number">{{ countData100(inputData['6']) }}</div>
|
|
</div>
|
|
<div class="view view-2">
|
|
<div class="name">实测PH</div>
|
|
<div class="number">{{ countData100(inputData['8']) }}</div>
|
|
</div>
|
|
<div class="view view-3">
|
|
<div class="name">实测EC</div>
|
|
<div class="number">{{ countData100(inputData['9']) }}</div>
|
|
</div>
|
|
<div class="view view-4">
|
|
<div class="name">目标EC</div>
|
|
<div class="number">{{ countData100(inputData['7']) }}</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 64">
|
|
<div v-if="centerBottom.indexOf(index) != -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-table-title">
|
|
<div>传感器数据</div>
|
|
<div>数值</div>
|
|
<div>AD值</div>
|
|
</div>
|
|
<div class="table-content">
|
|
<div class="seamless-warp" v-if="!loading">
|
|
<div class="tr" v-for="item, index in tableList1" :key="index" :class="'tr-' + (index + 1)">
|
|
<div class="td name">
|
|
<div>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<div class="td number">{{ item.data }}</div>
|
|
<div class="td ADnumber">{{ item.ADdata }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- <vue-seamless class="seamless-warp" :data="tableList1" :class-option="defaultOption">
|
|
|
|
</vue-seamless> -->
|
|
</div>
|
|
</div>
|
|
<div class="right-view2">
|
|
<div>
|
|
<div v-for="item, index in rightList2.slice(0, 4)"
|
|
:class="right2Index.indexOf(index) != -1 ? 'active' : ''">{{ item }}</div>
|
|
</div>
|
|
<div>
|
|
<div v-for="item, index in rightList2.slice(4, 8)"
|
|
:class="right2Index.indexOf(index + 4) != -1 ? 'active' : ''">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-view3">
|
|
<div class="main-title"><span>配肥速度 (L/h) </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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import vueSeamless from 'vue-seamless-scroll'
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageTimer: null,
|
|
left1Act: -1,
|
|
openType: '',
|
|
left2List: [
|
|
{
|
|
title: 'A',
|
|
name: 'A肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'B',
|
|
name: 'B肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'C',
|
|
name: 'C肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'D',
|
|
name: 'D肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'E',
|
|
name: 'E肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'F',
|
|
name: 'F肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: 'G',
|
|
name: 'G肥',
|
|
number: '26%',
|
|
img: ''
|
|
}, {
|
|
title: '',
|
|
name: '酸',
|
|
number: '26%',
|
|
img: require('../../assets/image/left2-icon1.png')
|
|
},
|
|
],
|
|
rightList3: [
|
|
{
|
|
name: 'A肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'B肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'C肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'D肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'E肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'F肥',
|
|
number: '0',
|
|
}, {
|
|
name: 'G肥',
|
|
number: '0',
|
|
}, {
|
|
name: '酸肥',
|
|
number: '0',
|
|
},
|
|
],
|
|
centerAct: 0,
|
|
tableList1: [{
|
|
name: 'PH传感器',
|
|
data: '1#PH 0',
|
|
ADdata: '2#PH 0',
|
|
}, {
|
|
name: 'EC传感器',
|
|
data: '1#EC 0',
|
|
ADdata: '2#EC 0',
|
|
}, {
|
|
name: '传感器1',
|
|
data: 0,
|
|
ADdata: 0,
|
|
}, {
|
|
name: '传感器2',
|
|
data: 0,
|
|
ADdata: 0,
|
|
}, {
|
|
name: '传感器3',
|
|
data: 0,
|
|
ADdata: 0,
|
|
}, {
|
|
name: '传感器4',
|
|
data: 0,
|
|
ADdata: 0,
|
|
}, {
|
|
name: '传感器5',
|
|
data: 0,
|
|
ADdata: 0,
|
|
}, {
|
|
name: '传感器6',
|
|
data: 0,
|
|
ADdata: 0,
|
|
},],
|
|
right2Index: [],
|
|
rightList2: ['外控信号1#',
|
|
'外控信号2#',
|
|
'外控信号3#',
|
|
'外控信号4#',
|
|
'高液位信号',
|
|
'中液位信号',
|
|
'低液位信号',
|
|
'电机信号',],
|
|
inputData: [],
|
|
deviceDetail: null,
|
|
centerBottom: [],
|
|
numberList: [273, 278, 283, 288, 293, 298],
|
|
inputData1: [],
|
|
loading: true,
|
|
}
|
|
},
|
|
components: { vueSeamless },
|
|
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')) {
|
|
that.getEqbyid();
|
|
this.getReg()
|
|
setTimeout(() => {
|
|
that.pageTimer && clearInterval(that.pageTimer)
|
|
that.pageTimer = setInterval(() => {
|
|
that.getEqbyid();
|
|
}, 5000);
|
|
}, 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)
|
|
},
|
|
getTypeData(dataCode, typeCode) {
|
|
var typeList = this.$store.state.typeList
|
|
|
|
var countType = 0
|
|
typeList.forEach((el, index) => {
|
|
|
|
if (el.value == this.inputData1[typeCode]) {
|
|
countType = el.countType
|
|
}
|
|
})
|
|
|
|
|
|
if (countType == 0) {
|
|
return this.inputData[dataCode]
|
|
} else if (countType == 1) {
|
|
return this.countType1(this.inputData[dataCode])
|
|
} else if (countType == 2) {
|
|
return this.countType2(this.inputData[dataCode])
|
|
} else if (countType == 3) {
|
|
return this.countType3(this.inputData[dataCode])
|
|
}
|
|
},
|
|
getTabelList() {
|
|
|
|
var inputData = this.inputData
|
|
this.tableList1[0] = {
|
|
name: 'PH传感器',
|
|
data: '1#PH ' + this.countData100(inputData['51']),
|
|
ADdata: '2#PH ' + this.countData100(inputData['53']),
|
|
}
|
|
|
|
this.tableList1[1] = {
|
|
name: 'EC传感器',
|
|
data: '1#EC ' + this.countData100(inputData['52']),
|
|
ADdata: '2#EC ' + this.countData100(inputData['54']),
|
|
}
|
|
|
|
this.tableList1[2] = {
|
|
name: '传感器1',
|
|
data: this.getTypeData('40', '273'),
|
|
ADdata: inputData['39'],
|
|
}
|
|
|
|
this.tableList1[3] = {
|
|
name: '传感器2',
|
|
data: this.getTypeData('42', '278'),
|
|
ADdata: inputData['41'],
|
|
}
|
|
|
|
this.tableList1[4] = {
|
|
name: '传感器3',
|
|
data: this.getTypeData('44', '283'),
|
|
ADdata: inputData['43'],
|
|
}
|
|
|
|
this.tableList1[5] = {
|
|
name: '传感器4',
|
|
data: this.getTypeData('46', '288'),
|
|
ADdata: inputData['45'],
|
|
}
|
|
|
|
this.tableList1[6] = {
|
|
name: '传感器5',
|
|
data: this.getTypeData('48', '293'),
|
|
ADdata: inputData['47'],
|
|
}
|
|
|
|
this.tableList1[7] = {
|
|
name: '传感器6',
|
|
data: this.getTypeData('50', '298'),
|
|
ADdata: inputData['49'],
|
|
}
|
|
this.loading = false
|
|
},
|
|
getEqbyid() {
|
|
var store = this.$store.state
|
|
this.deviceDetail = store.equipmentList[store.equipmentIndex - 1]
|
|
this.dataInit()
|
|
|
|
},
|
|
getcenterBottom() {
|
|
this.centerBottom = []
|
|
var inputData = this.inputData
|
|
var list1 = this.padString(inputData['32'].toString(2), 16)
|
|
var list2 = this.padString(inputData['33'].toString(2), 16)
|
|
var list3 = this.padString(inputData['34'].toString(2), 16)
|
|
var list4 = this.padString(inputData['35'].toString(2), 16)
|
|
var number = 16
|
|
for (var i = 0; i < number; i++) {
|
|
if (Number(list1[list1.length - 1 - i])) {
|
|
this.centerBottom.push(i)
|
|
}
|
|
}
|
|
for (var j = 0; j < number; j++) {
|
|
if (Number(list2[list2.length - 1 - j])) {
|
|
this.centerBottom.push(j + 16)
|
|
}
|
|
}
|
|
for (var k = 0; k < number; k++) {
|
|
if (Number(list3[list3.length - 1 - k])) {
|
|
this.centerBottom.push(k + 32)
|
|
}
|
|
}
|
|
for (var l = 0; l < number; l++) {
|
|
if (Number(list4[list4.length - 1 - l])) {
|
|
this.centerBottom.push(l + 48)
|
|
}
|
|
}
|
|
},
|
|
getrightList3() {
|
|
var list = [19, 20, 21, 22, 23, 24, 25, 27]
|
|
list.forEach((el, index) => {
|
|
this.rightList3[index].number = this.inputData[el]
|
|
})
|
|
},
|
|
getleft2List() {
|
|
var list = [10, 11, 12, 13, 14, 15, 16, 18]
|
|
list.forEach((el, index) => {
|
|
this.left2List[index].number = this.inputData[el] + '%'
|
|
})
|
|
},
|
|
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
|
|
}
|
|
},
|
|
getType29(index) {
|
|
if (index == 0) {
|
|
return '手动开启动'
|
|
} else if (index == 1) {
|
|
return '外控模式启动'
|
|
} else if (index == 2) {
|
|
return '光照积累启动'
|
|
} else if (index == 3) {
|
|
return '土壤湿度控制'
|
|
} else if (index == 4) {
|
|
return '间隔启动'
|
|
} else if (index == 5) {
|
|
return '定时启动'
|
|
} else {
|
|
return '无'
|
|
}
|
|
},
|
|
//什么方式启动的灌溉
|
|
getData29() {
|
|
var number = this.padString(this.inputData['29'].toString(2), 14)
|
|
var index = 6
|
|
var typeNumber = -1
|
|
|
|
for (var i = 0; i < index; i++) {
|
|
if (Number(number[i])) {
|
|
typeNumber = i
|
|
}
|
|
}
|
|
this.openType = this.getType29(typeNumber)
|
|
|
|
var statusIndex = 8
|
|
for (var j = 0; j < statusIndex; j++) {
|
|
if (Number(number[number.length - 1 - j])) {
|
|
if (j == 0) {
|
|
this.right2Index.push('1')
|
|
} else if (j == 1) {
|
|
this.right2Index.push('0')
|
|
} else {
|
|
this.right2Index.push(j)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//进水泵和出水泵状态
|
|
getData30() {
|
|
var number = this.padString(this.inputData['30'].toString(2), 2)
|
|
if (Number(number[0])) {
|
|
this.left1Act = 1
|
|
}
|
|
if (Number(number[1])) {
|
|
this.left1Act = 0
|
|
}
|
|
if (Number(number[0])&&Number(number[1])) {
|
|
this.left1Act = 3
|
|
}
|
|
else {
|
|
this.left1Act = -1
|
|
}
|
|
},
|
|
dataInit() {
|
|
const that = this
|
|
var deviceDetail = this.deviceDetail
|
|
var data = {
|
|
"equipmentId": deviceDetail.deviceId,
|
|
"pattern": 0,//需要根据文档填写 //6目标ph-数值
|
|
"regNum": 72
|
|
}
|
|
var week = [
|
|
"星期日",
|
|
"星期一",
|
|
"星期二",
|
|
"星期三",
|
|
"星期四",
|
|
"星期五",
|
|
"星期六",
|
|
]
|
|
this.api.postState(data).then(res => {
|
|
if (res.data.code == 200) {
|
|
this.inputData = res.data.data;
|
|
this.getData30() //数据30/进水出水泵
|
|
this.getData29()//数据29 启动方式/信号
|
|
|
|
|
|
this.getleft2List()//获取左下角数据
|
|
this.getrightList3()//获取又下角数据
|
|
this.getcenterBottom()//获取电磁阀
|
|
var h = this.checkTime(this.inputData[3])
|
|
var m = this.checkTime(this.inputData[4])
|
|
var month_ = this.checkTime(this.inputData[1])
|
|
var date_ = this.checkTime(this.inputData[2])
|
|
var time = {
|
|
year: { year: this.inputData[0], month: month_, date: date_ },
|
|
week: week[this.inputData[5]],
|
|
time: h + ":" + m,
|
|
}
|
|
this.$bus.$emit('refreshTime',time)
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
|
|
},
|
|
checkTime(i) {
|
|
if (i < 10) {
|
|
i = "0" + i;
|
|
}
|
|
|
|
return i;
|
|
},
|
|
getReg() {
|
|
var store = this.$store.state
|
|
var deviceDetail = store.equipmentList[store.equipmentIndex - 1]
|
|
//获取传感器种类
|
|
var data1 = {
|
|
equipmentId: deviceDetail.deviceId,
|
|
pattern: 272, //需要根据文档填写 //6目标ph-数值
|
|
regNum: 31,//从pattern取多少个数据
|
|
};
|
|
this.api.postReg(data1).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.inputData1 = res.data.data;
|
|
this.getTabelList()//右上角标题
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
}
|
|
</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-between;
|
|
|
|
>div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-50 {
|
|
width: calc((100% - 14px) / 2);
|
|
}
|
|
|
|
.left-btn {
|
|
justify-content: flex-start;
|
|
|
|
>div {
|
|
margin-right: 20px;
|
|
width: 140px;
|
|
height: 44px;
|
|
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: 321px;
|
|
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;
|
|
|
|
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(4, 1fr);
|
|
grid-row-gap: 30px; //纵向间隔
|
|
grid-column-gap: auto; //横向间隔
|
|
|
|
>div {
|
|
width: 86px;
|
|
height: 117px;
|
|
background: url(../../assets/image/right-view3.png) no-repeat center;
|
|
background-size: 100% 100%;
|
|
padding-top: 20px;
|
|
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: 24px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-view2 {
|
|
width: 100%;
|
|
height: 136px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
white-space: nowrap;
|
|
|
|
>div {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
>div {
|
|
width: 90px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 20px;
|
|
|
|
>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>
|
|
|