1146 lines
29 KiB
Vue
1146 lines
29 KiB
Vue
<template>
|
||
<div class="about">
|
||
<div class="kuang">
|
||
|
||
<div class="title">
|
||
温室智慧云数据统计
|
||
</div>
|
||
|
||
<div class="yuan" @click="toBack">
|
||
<img src="../../assets/img/small.png" alt="">
|
||
</div>
|
||
|
||
<div class="calendar">
|
||
<img src="../../assets/img/calendar.png" alt="">
|
||
<span>2023.10.30</span>
|
||
<span class="line"></span>
|
||
<span>星期一</span>
|
||
<span class="line"></span>
|
||
<span>14:17</span>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box" ref="drag_box">
|
||
<img class="drag_img" src="../../assets/img/map.png" alt="">
|
||
<div class="pole_item pole_item1" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>2#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item2" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>1#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item3" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi1.png" alt="">
|
||
<span>3#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item4" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>控制中心</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item5" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>4#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item6" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>5#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
<div class="pole_item pole_item7" @click="handlerPop">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="">
|
||
<span>6#温室</span>
|
||
</div>
|
||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||
</div>
|
||
|
||
<!-- 弹框 -->
|
||
<template v-for="(item, index) in popContentList">
|
||
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
|
||
v-if="popContentCurrent == index ? true : false"> -->
|
||
<div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
|
||
v-if="popContentCurrent == index ? true : false">
|
||
<div class="p_video">
|
||
<img src="../../assets/img/c_top.png" alt="">
|
||
</div>
|
||
<div class="text">温室{{ item.greenhouseName }}#</div>
|
||
<div class="line"></div>
|
||
<div class="detail">
|
||
<div class="d_item">
|
||
<img src="../../assets/img/detail_img.png" alt="">
|
||
<span>面积：{{ item.greenhouseArea }}㎡</span>
|
||
</div>
|
||
<div class="d_item">
|
||
<img src="../../assets/img/detail_img.png" alt="">
|
||
<span>品种：{{ item.greenhouseVariety }}</span>
|
||
</div>
|
||
<div class="d_item">
|
||
<img src="../../assets/img/detail_img.png" alt="">
|
||
<span>数量：{{ item.greenhouseNums }}株</span>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<img src="../../assets/img/grow_img.png" alt="">
|
||
<span>生长阶段：</span>
|
||
<span>{{ item.growthStageName }}</span>
|
||
</div>
|
||
<div class="line" style="margin-top: 0.2rem;"></div>
|
||
<div class="icon_item scroll">
|
||
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
|
||
<!-- <img :src="item.formula" alt=""> -->
|
||
<img :src="require('../../assets/image/real-time-'+item1.formula+'.png')" alt="">
|
||
<div>
|
||
<span>{{ item1.environmentDataId }}</span>
|
||
<span>{{ item1.environmentData + getTypeList(item1.formula) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||
<div class="pop_content">
|
||
<div class="p_video">
|
||
<img src="../assets/img/c_top.png" alt="">
|
||
</div>
|
||
<div class="text">某某项目温室一号</div>
|
||
<div class="line"></div>
|
||
<div class="detail">
|
||
<div class="d_item">
|
||
<img src="../assets/img/detail_img.png" alt="">
|
||
<span>面积：6652㎡</span>
|
||
</div>
|
||
<div class="d_item">
|
||
<img src="../assets/img/detail_img.png" alt="">
|
||
<span>品种：番茄</span>
|
||
</div>
|
||
<div class="d_item">
|
||
<img src="../assets/img/detail_img.png" alt="">
|
||
<span>数量：80000株</span>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<img src="../assets/img/grow_img.png" alt="">
|
||
<span>生长阶段：</span>
|
||
<span>幼苗期</span>
|
||
</div>
|
||
<div class="line" style="margin-top: 0.2rem;"></div>
|
||
<div class="icon_item">
|
||
<div class="icon_item_child" v-for="(item, index) in list" :key="index">
|
||
<img :src="item.img" alt="">
|
||
<div>
|
||
<span>{{ item.name }}</span>
|
||
<span>{{ item.data }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:'largeScreen1',
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
timer: '',
|
||
timer1: '',
|
||
timer2: '',
|
||
list: [
|
||
{ img: require('../../assets/img/icon_1.png'), name: '空气温度', data: '29.6℃' },
|
||
{ img: require('../../assets/img/icon_2.png'), name: '空气湿度', data: '18.5%' },
|
||
{ img: require('../../assets/img/icon_3.png'), name: '光亮度', data: '38.8klux' },
|
||
{ img: require('../../assets/img/icon_4.png'), name: '二氧化碳', data: '600PPM' },
|
||
{ img: require('../../assets/img/icon_5.png'), name: '土壤温度', data: '29.0℃' },
|
||
{ img: require('../../assets/img/icon_6.png'), name: '土壤湿度', data: '18.5%' },
|
||
],
|
||
top_: 2,
|
||
left_: 2,
|
||
|
||
popContentList: [],
|
||
popContentCurrent: 5,
|
||
|
||
typeList: [{
|
||
label: '无意义的传感器',
|
||
value: 0,
|
||
countType: 0
|
||
},
|
||
{
|
||
label: '空气温度',
|
||
value: 1,
|
||
countType: 3,
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: '空气湿度',
|
||
value: 2,
|
||
countType: 2,
|
||
unit: '%'
|
||
},
|
||
{
|
||
label: '光亮度',
|
||
value: 3,
|
||
countType: 2,
|
||
unit: 'Klux'
|
||
},
|
||
{
|
||
label: '二氧化碳',
|
||
value: 4,
|
||
countType: 0,
|
||
unit: 'ppm'
|
||
},
|
||
{
|
||
label: '土壤温度',
|
||
value: 5,
|
||
countType: 3,
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: '土壤湿度',
|
||
value: 6,
|
||
countType: 2,
|
||
unit: '%'
|
||
},
|
||
{
|
||
label: '水温',
|
||
value: 7,
|
||
countType: 3,
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: '水肥PH',
|
||
value: 8,
|
||
countType: 2,
|
||
unit: ''
|
||
},
|
||
{
|
||
label: '水肥EC',
|
||
value: 9,
|
||
countType: 2,
|
||
unit: 'mS/cm'
|
||
},
|
||
{
|
||
label: '压差',
|
||
value: 10,
|
||
countType: 0,
|
||
unit: 'Pa'
|
||
},
|
||
{
|
||
label: '风速',
|
||
value: 11,
|
||
countType: 2,
|
||
unit: 'm/s'
|
||
},
|
||
{
|
||
label: '风向',
|
||
value: 12,
|
||
countType: 0,
|
||
unit: '°'
|
||
},
|
||
{
|
||
label: '雨雪信号',
|
||
value: 13,
|
||
countType: 0,
|
||
unit: ''
|
||
},
|
||
{
|
||
label: '降雨量',
|
||
value: 14,
|
||
countType: 2,
|
||
unit: 'mm'
|
||
},
|
||
{
|
||
label: '光合有效辐射',
|
||
value: 15,
|
||
countType: 2,
|
||
unit: 'umol/m2.s'
|
||
},
|
||
{
|
||
label: '太阳总辐射',
|
||
value: 16,
|
||
countType: 0,
|
||
unit: 'W/m2'
|
||
},
|
||
{
|
||
label: '流量',
|
||
value: 17,
|
||
countType: 0,
|
||
unit: 'L/H'
|
||
},
|
||
{
|
||
label: '大气压强',
|
||
value: 18,
|
||
countType: 2,
|
||
unit: 'KPa'
|
||
},
|
||
{
|
||
label: '土壤PH',
|
||
value: 19,
|
||
countType: 2,
|
||
unit: ''
|
||
},
|
||
{
|
||
label: '土壤EC',
|
||
value: 20,
|
||
countType: 0,
|
||
unit: 'uS/cm'
|
||
},
|
||
{
|
||
label: '叶面温度',
|
||
value: 21,
|
||
countType: 3,
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: '叶面湿度',
|
||
value: 22,
|
||
countType: 2,
|
||
unit: '%'
|
||
},
|
||
{
|
||
label: '果实直径',
|
||
value: 23,
|
||
countType: 0,
|
||
unit: 'mm'
|
||
},
|
||
{
|
||
label: '茎秆直径',
|
||
value: 24,
|
||
countType: 0,
|
||
unit: 'mm'
|
||
},
|
||
{
|
||
label: '流速',
|
||
value: 25,
|
||
countType: 2,
|
||
unit: 'm/s'
|
||
},
|
||
{
|
||
label: '瞬时流量',
|
||
value: 26,
|
||
countType: 2,
|
||
unit: 'm3'
|
||
},
|
||
{
|
||
label: '当日流量',
|
||
value: 27,
|
||
countType: 2,
|
||
unit: 'T'
|
||
},
|
||
{
|
||
label: '累计流量',
|
||
value: 28,
|
||
countType: 0,
|
||
unit: 'T'
|
||
},
|
||
{
|
||
label: '无线气象站电池电压',
|
||
value: 29,
|
||
countType: 2,
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: '无线气象站无线信号强度',
|
||
value: 30,
|
||
countType: 1,
|
||
unit: 'dBm'
|
||
},
|
||
{
|
||
label: '无线气象站信噪比（SNR）',
|
||
value: 31,
|
||
countType: 1,
|
||
unit: 'dB'
|
||
},
|
||
{
|
||
label: 'PM1.0',
|
||
value: 32,
|
||
countType: 0,
|
||
unit: 'μg/m2'
|
||
},
|
||
{
|
||
label: 'PM2.5',
|
||
value: 33,
|
||
countType: 0,
|
||
unit: 'μg/m2'
|
||
},
|
||
{
|
||
label: 'PM10',
|
||
value: 34,
|
||
countType: 0,
|
||
unit: 'μg/m2'
|
||
},
|
||
{
|
||
label: '紫外辐射',
|
||
value: 35,
|
||
countType: 0,
|
||
unit: 'W/m2'
|
||
},
|
||
{
|
||
label: '蒸发量',
|
||
value: 36,
|
||
countType: 2,
|
||
unit: 'mm'
|
||
},
|
||
{
|
||
label: '负氧离子',
|
||
value: 37,
|
||
countType: 0,
|
||
unit: '个/cm3'
|
||
},
|
||
{
|
||
label: '露点温度',
|
||
value: 38,
|
||
countType: 3,
|
||
unit: '℃'
|
||
},
|
||
{
|
||
label: '设备电压',
|
||
value: 39,
|
||
countType: 2,
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: '设备电流',
|
||
value: 40,
|
||
countType: 2,
|
||
unit: 'A'
|
||
},
|
||
{
|
||
label: '土壤氮含量',
|
||
value: 41,
|
||
countType: 0,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '土壤磷含量',
|
||
value: 42,
|
||
countType: 0,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '土壤钾含量',
|
||
value: 43,
|
||
countType: 0,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '管道压力',
|
||
value: 44,
|
||
countType: 0,
|
||
unit: 'Kpa'
|
||
},
|
||
{
|
||
label: '一氧化碳',
|
||
value: 45,
|
||
countType: 0,
|
||
unit: 'ppm'
|
||
},
|
||
{
|
||
label: '氨气',
|
||
value: 46,
|
||
countType: 0,
|
||
unit: 'ppm'
|
||
},
|
||
{
|
||
label: '硫化氢',
|
||
value: 47,
|
||
countType: 0,
|
||
unit: 'ppm'
|
||
},
|
||
{
|
||
label: '氧气',
|
||
value: 48,
|
||
countType: 2,
|
||
unit: '%vol'
|
||
},
|
||
{
|
||
label: '甲烷',
|
||
value: 49,
|
||
countType: 2,
|
||
unit: '%vol'
|
||
},
|
||
{
|
||
label: '铜（CU）',
|
||
value: 50,
|
||
countType: 0,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '镉（CD）',
|
||
value: 51,
|
||
countType: 2,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '铅（PB）',
|
||
value: 52,
|
||
countType: 0,
|
||
unit: 'mg/kg'
|
||
},
|
||
{
|
||
label: '噪声',
|
||
value: 53,
|
||
countType: 0,
|
||
unit: 'dB'
|
||
},
|
||
{
|
||
label: '叶面面积',
|
||
value: 54,
|
||
countType: 0,
|
||
unit: 'mm'
|
||
},
|
||
{
|
||
label: '虫数量',
|
||
value: 55,
|
||
countType: 0,
|
||
unit: '个'
|
||
},
|
||
{
|
||
label: '无线传感器电池电压',
|
||
value: 56,
|
||
countType: 2,
|
||
unit: 'V'
|
||
},
|
||
{
|
||
label: '无线传感器无线信号强度',
|
||
value: 57,
|
||
countType: 1,
|
||
unit: 'dBm'
|
||
},
|
||
{
|
||
label: '无线传感器信噪比（SNR）',
|
||
value: 58,
|
||
countType: 1,
|
||
unit: 'dB'
|
||
},
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.drag_boxHandler()
|
||
|
||
this.timer1 = setTimeout(() => {
|
||
this.$router.push({ path: '/largeScreen' })
|
||
}, 24000);
|
||
|
||
|
||
|
||
// this.timer = setInterval(() => {
|
||
// this.dialogVisible = !this.dialogVisible
|
||
// }, 3000);
|
||
|
||
this.login()
|
||
|
||
this.timer2 = setInterval(() => {
|
||
this.popContentCurrent++
|
||
if (this.popContentCurrent > 5) {
|
||
this.popContentCurrent = 0
|
||
}
|
||
}, 3000)
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer1) && this.timer1
|
||
clearInterval(this.timer2) && this.timer2
|
||
// this.timer = null;
|
||
// this.timer1 = null;
|
||
// this.timer2 = null
|
||
},
|
||
methods: {
|
||
// 根据用户id查询对应的设备大数据信息
|
||
dataInit(userid) {
|
||
this.api.Bigdata_getAllControl(userid).then(res => {
|
||
// console.log('根据用户id查询对应的设备大数据信息', res);
|
||
this.popContentList = res.data.data
|
||
this.popContentList = this.popContentList.map((item) => {
|
||
return {
|
||
...item,
|
||
childList: []
|
||
}
|
||
})
|
||
this.popContentList.forEach(el => {
|
||
|
||
// 获取控制器实时数据
|
||
this.api.getcontrol_rtdata(el.deviceId).then(res1 => {
|
||
// console.log('获取控制器实时数据', res1);
|
||
if(res1.data.code == 200){
|
||
el.childList = res1.data.data
|
||
}
|
||
})
|
||
})
|
||
// console.log(this.popContentList,'12121212');
|
||
})
|
||
},
|
||
|
||
|
||
|
||
|
||
getTopOrLeft(name) {
|
||
if (name == '二号') {
|
||
// this.top_ = 1;
|
||
// this.left_ = 6.2
|
||
return 'top:1rem;left:8rem'
|
||
} else if (name == '一号') {
|
||
// this.top_ = 3.5;
|
||
// this.left_ = 3.8
|
||
return 'top:3.5rem;left:4.8rem'
|
||
} else if (name == '3号') {
|
||
// this.top_ = 2;
|
||
// this.left_ = 9
|
||
return 'top:2rem;left:11.5rem'
|
||
} else if (name == '4号') {
|
||
// this.top_ = 2;
|
||
// this.left_ = 9.3
|
||
return 'top:2rem;left:14rem'
|
||
} else if (name == '5') {
|
||
// this.top_ = 3.5;
|
||
// this.left_ = 6.5
|
||
return 'top:6.5rem;left:10.5rem'
|
||
} else if (name == '6') {
|
||
// this.top_ = 0.8;
|
||
// this.left_ = 7.2
|
||
return 'top:0.8rem;left:11rem'
|
||
}
|
||
},
|
||
|
||
// 数据单位
|
||
getTypeList(val) {
|
||
let typeList1 = []
|
||
typeList1 = this.typeList.filter(item => {
|
||
return item.value == val
|
||
})
|
||
return typeList1[0].unit
|
||
},
|
||
|
||
// 获取本地的userid和token
|
||
login() {
|
||
// var data = {
|
||
// "username": "lsjskymdp",
|
||
// "password": "lihemix888"
|
||
// }
|
||
// this.api.login(data).then(res => {
|
||
// // console.log('信息', res);
|
||
|
||
// if (res.status == 200) {
|
||
// localStorage.setItem('token', res.data.data.token)
|
||
// localStorage.setItem('userid', res.data.data.userid)
|
||
// // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
|
||
// this.dataInit(res.data.data.userid)
|
||
// }
|
||
|
||
// })
|
||
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
||
this.dataInit(userInfo.userid)
|
||
},
|
||
|
||
handleClose(done) {
|
||
done();
|
||
},
|
||
|
||
handlerPop() {
|
||
this.dialogVisible = true
|
||
},
|
||
|
||
toBack() {
|
||
this.$router.push({ path: '/largeScreen' })
|
||
|
||
},
|
||
|
||
drag_boxHandler() {
|
||
let demo = this.$refs.drag_box
|
||
demo = document.querySelector('.drag_box') //待拖拽元素
|
||
let canMove = false //拖拽状态
|
||
let x = 0,
|
||
y = 0 //鼠标位置
|
||
//监听按下鼠标事件
|
||
demo.onmousedown = function (e) {
|
||
x = e.pageX - demo.offsetLeft
|
||
y = e.pageY - demo.offsetTop
|
||
canMove = true //激活拖拽状态
|
||
}
|
||
//监听右击鼠标事件
|
||
demo.oncontextmenu = function (e) {
|
||
e.preventDefault() //阻止默认行为
|
||
}
|
||
//监听鼠标抬起事件
|
||
window.onmouseup = function () {
|
||
canMove = false //关闭拖拽状态
|
||
}
|
||
|
||
window.onblur = function () { //窗口失去焦点事件
|
||
canMove = false //关闭拖拽状态
|
||
}
|
||
|
||
//监听鼠标移动事件
|
||
window.onmousemove = function (e) {
|
||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
||
if (canMove) { //对范围判断
|
||
let left = e.pageX - x
|
||
let top = e.pageY - y
|
||
|
||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
||
// let maxTop = window.innerHeight - demo.offsetHeight
|
||
|
||
// if (left > maxLeft) left = maxLeft
|
||
// if (top > maxTop) top = maxTop
|
||
|
||
|
||
demo.style.left = left + 'px'
|
||
demo.style.top = top + 'px'
|
||
|
||
}
|
||
}
|
||
let scale = 1
|
||
demo.onwheel = function (e) {
|
||
|
||
if (e.wheelDelta > 0) {
|
||
scale += 0.05
|
||
if (scale > 4) {
|
||
scale = 4
|
||
}
|
||
demo.style.transform = `scale(${scale})`
|
||
// console.log(scale);
|
||
} else {
|
||
scale -= 0.05
|
||
if (scale < 1) {
|
||
scale = 1
|
||
}
|
||
demo.style.transform = `scale(${scale})`
|
||
// console.log(scale);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.about {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('../../assets/img/bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding-bottom: 0.1rem;
|
||
|
||
.kuang {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('../../assets/img/kuang.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
padding-top: 0.06rem;
|
||
font-size: .54rem;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #EFF8FC;
|
||
line-height: .54rem;
|
||
opacity: 0.89;
|
||
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
|
||
|
||
background: linear-gradient(to bottom, #FFFFFF 45%, #E9F8FF 90%, #77BAFF 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.yuan {
|
||
width: .56rem;
|
||
height: .56rem;
|
||
background: url('../../assets/img/yuan_bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: .53rem;
|
||
left: .71rem;
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
>img {
|
||
width: .20rem;
|
||
height: .20rem;
|
||
}
|
||
}
|
||
|
||
.calendar {
|
||
width: 4rem;
|
||
height: .3rem;
|
||
position: absolute;
|
||
top: .63rem;
|
||
right: .66rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>img {
|
||
width: .28rem;
|
||
height: .3rem;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .24rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
>span:nth-child(4) {
|
||
font-size: .2rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
>span:nth-child(6) {
|
||
font-size: .3rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7ABAFF;
|
||
}
|
||
|
||
.line {
|
||
width: .02rem;
|
||
height: .30rem;
|
||
background: #FFFFFF;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100% - .6rem);
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, blue 7%, blue 87%, transparent 97%);
|
||
|
||
.map1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: url('../assets/img/map.png') center no-repeat;
|
||
// background-size: 100% 100%;
|
||
-webkit-mask-image: linear-gradient(transparent 4%, blue 15%, blue 86%, transparent 100%);
|
||
overflow: hidden;
|
||
position: absolute;
|
||
|
||
.drag_box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent 4%, blue 18%, blue 88%, transparent 100%);
|
||
|
||
.drag_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-mask-image: linear-gradient(transparent 0%, blue 13%, blue 73%, transparent 97%);
|
||
}
|
||
|
||
.pole_item {
|
||
width: 1.45rem;
|
||
height: 1.8rem;
|
||
|
||
|
||
.p_title {
|
||
width: 1.45rem;
|
||
height: .44rem;
|
||
background: rgba(1, 12, 28, 0.7);
|
||
border-radius: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 0 0 10px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
>img {
|
||
width: .32rem;
|
||
height: .32rem;
|
||
margin-right: 0.15rem;
|
||
}
|
||
|
||
>span {
|
||
font-size: .18rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.pole1 {
|
||
width: .77rem;
|
||
height: 1.8rem;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 40%;
|
||
}
|
||
}
|
||
|
||
.pole_item1 {
|
||
position: absolute;
|
||
top: 13%;
|
||
left: 26%;
|
||
}
|
||
|
||
.pole_item2 {
|
||
position: absolute;
|
||
top: 41%;
|
||
left: 13%;
|
||
}
|
||
|
||
.pole_item3 {
|
||
position: absolute;
|
||
top: 22%;
|
||
left: 40%;
|
||
}
|
||
|
||
.pole_item4 {
|
||
position: absolute;
|
||
top: 43%;
|
||
left: 42%;
|
||
}
|
||
|
||
.pole_item5 {
|
||
position: absolute;
|
||
top: 29%;
|
||
left: 76%;
|
||
}
|
||
|
||
.pole_item6 {
|
||
position: absolute;
|
||
top: 61%;
|
||
left: 62%;
|
||
}
|
||
|
||
.pole_item7 {
|
||
position: absolute;
|
||
top: 1%;
|
||
left: 62%;
|
||
}
|
||
|
||
|
||
.pop_content {
|
||
width: 5.38rem;
|
||
height: 6.92rem;
|
||
background: url('../../assets/img/pop_bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
z-index: 999999;
|
||
// top: 2rem;
|
||
// left: 2rem;
|
||
|
||
.p_video {
|
||
width: 4.9rem;
|
||
height: 2.8rem;
|
||
margin: 0.2rem auto 0;
|
||
|
||
>img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
height: 0.6rem;
|
||
font-size: .28rem;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-weight: bold;
|
||
color: #F3FDFF;
|
||
line-height: 0.6rem;
|
||
box-sizing: border-box;
|
||
padding-left: 0.3rem;
|
||
}
|
||
|
||
.line {
|
||
width: 4.90rem;
|
||
height: .01rem;
|
||
background: #51D4FA;
|
||
opacity: 0.5;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.detail {
|
||
width: 100%;
|
||
height: 0.7rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
|
||
.d_item {
|
||
height: .30rem;
|
||
background: rgba(81, 212, 250, 0.15);
|
||
border: .01rem solid rgba(106, 222, 255, 0.4);
|
||
border-radius: .02rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 0.1rem 0 0.1rem;
|
||
|
||
>img {
|
||
width: 0.18rem;
|
||
height: 0.18rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
>span {
|
||
font-size: .16rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #D9EFFD;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grow {
|
||
width: 4rem;
|
||
height: .4rem;
|
||
background: url('../../assets/img/grow_bg.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
>img {
|
||
width: .22rem;
|
||
height: .18rem;
|
||
margin-right: 0.1rem;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .16rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
>span:nth-child(3) {
|
||
font-size: .16rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #36FFD2;
|
||
}
|
||
}
|
||
|
||
.icon_item {
|
||
width: 100%;
|
||
height: calc(100% - 5rem);
|
||
box-sizing: border-box;
|
||
padding: 0.3rem 0.2rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
overflow: auto;
|
||
|
||
.icon_item_child {
|
||
width: 33.33%;
|
||
height: 50%;
|
||
display: flex;
|
||
margin-bottom: 0.1rem;
|
||
|
||
>img {
|
||
width: .6rem;
|
||
height: .53rem;
|
||
margin-right: 0.1rem;
|
||
}
|
||
|
||
>div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
>span:nth-child(1) {
|
||
font-size: .14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #86D9FF;
|
||
}
|
||
|
||
>span:nth-child(2) {
|
||
font-size: .2rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-top: 0.02rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// ::v-deep .el-dialog {
|
||
// background: unset !important;
|
||
|
||
// .el-icon-close:before {
|
||
// contain: " ";
|
||
// width: .44rem;
|
||
// height: .44rem;
|
||
// background: url('../assets/img/close.png') center no-repeat;
|
||
// background-size: 100% 100%;
|
||
// position: absolute;
|
||
// top: 0.3rem;
|
||
// left: -0.1rem;
|
||
// }
|
||
// }
|
||
|
||
|
||
}
|
||
}
|
||
</style> |