xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更换地图

pull/71/head
pangdundun 2023-12-11 17:12:32 +08:00
parent b068c8a833
commit 0429b4e039
4 changed files with 11281 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10724
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

BIN
src/assets/img/map1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 26 MiB

419
src/views/page/largeScreen.vue
View File

@ -42,9 +42,17 @@
<div class="weather"> <div class="weather">
<div> <div>
<marquee behavior="" direction="" scrollamount="3"> <marquee behavior="" direction="" scrollamount="3">
<div class="item" v-for="(item, index) in weatherDataList" :key="index"> <div
<img :src="require(`../../assets/image/real-time-${item.formula}.png`) class="item"
" alt="" /> v-for="(item, index) in weatherDataList"
:key="index"
>
<img
:src="
require(`../../assets/image/real-time-${item.formula}.png`)
"
alt=""
/>
<span>{{ item.environmentDataId }} : </span> <span>{{ item.environmentDataId }} : </span>
<span>{{ <span>{{
item.environmentData + getTypeList(item.formula) item.environmentData + getTypeList(item.formula)
@ -60,7 +68,11 @@
<div class="e_title">温室环境数据</div> <div class="e_title">温室环境数据</div>
<div class="detail"> <div class="detail">
<!-- <div class="title_child">一号温室</div> --> <!-- <div class="title_child">一号温室</div> -->
<vue-seamless class="e_content" :data="list" :class-option="defaultOption"> <vue-seamless
class="e_content"
:data="list"
:class-option="defaultOption"
>
<div class="item" v-for="(el, index) in list" :key="index"> <div class="item" v-for="(el, index) in list" :key="index">
<!-- <img :src="el.formula" alt=""> --> <!-- <img :src="el.formula" alt=""> -->
<img :src="el.img" alt="" /> <img :src="el.img" alt="" />
@ -84,7 +96,10 @@
<div class="thisWeekTemperature"> <div class="thisWeekTemperature">
<div class="e_title">本周温度统计</div> <div class="e_title">本周温度统计</div>
<div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div> <div
class="thisWeekTemperature_echart"
id="thisWeekTemperature_echart"
></div>
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
@ -92,23 +107,81 @@
<div class="map1"> <div class="map1">
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1"> <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
<img class="drag_img" src="../../assets/img/map.png" alt="" /> <img class="drag_img" src="../../assets/img/map.png" alt="" />
<img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> <img
<img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> class="axis_1"
<img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> src="../../assets/img/axis1.png"
<img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> alt=""
<img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> @click="handlerAxis_1"
<img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" /> />
<img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" /> <img
class="axis_2"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_3"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_4"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_5"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_6"
src="../../assets/img/axis1.png"
alt=""
@click="handlerAxis_1"
/>
<img
class="axis_7"
src="../../assets/img/axis2.png"
alt=""
@click="handlerAxis_1"
/>
</div> </div>
<div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2"> <div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
<img class="drag_img" src="../../assets/img/map1.png" alt="" /> <img class="drag_img" src="../../assets/img/map1.png" alt="" />
<img class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png" <img
:style="'left:' + (48.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i, index) in 10" class="axis_init"
:key="index + '_1'" /> :class="'axis_' + (index + 8)"
src="../../assets/img/axis1.png"
:style="'left:' + (44.5 + index * 4.1) + '%'"
alt=""
@click="handlerAxis_2"
v-for="(i, index) in 10"
:key="index + '_1'"
/>
<img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" <img
:style="'top:' + (22 + index1 * 0.105) + '%' + ';' + 'left:' + (5 + index1 * 3.3) + '%' + ';'" alt="" class="axis_init1"
@click="handlerAxis_2" v-for="(i, index1) in 25" :key="index1 + '_2'" /> :class="'axis_' + (index1 + 17)"
src="../../assets/img/axis1.png"
:style="
'top:' +
(22 + index1 * 0.105) +
'%' +
';' +
'left:' +
(8.25 + index1 * 3.3) +
'%' +
';'
"
alt=""
@click="handlerAxis_2"
v-for="(i, index1) in 24"
:key="index1 + '_2'"
/>
</div> </div>
</div> </div>
</div> </div>
@ -119,9 +192,17 @@
<div class="liveVideo_content"> <div class="liveVideo_content">
<div class="swiper-container mySwiper_video"> <div class="swiper-container mySwiper_video">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index"> <div
class="swiper-slide swiper-slide_video"
v-for="(item, index) in get_sel_eqbyid_list"
:key="index"
>
<div class="monitor" :id="'monitor' + item.number"> <div class="monitor" :id="'monitor' + item.number">
<div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div> <div
ref="videoPlayer"
class="video-js"
:id="'video-js' + item.number"
></div>
</div> </div>
<div class="c_bottom">{{ item.deviceTypeName }}</div> <div class="c_bottom">{{ item.deviceTypeName }}</div>
</div> </div>
@ -140,14 +221,25 @@
<div class="device_detail"> <div class="device_detail">
<div class="swiper_timer"> <div class="swiper_timer">
<div> <div>
<div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer"> <div
class="swiper-container middle_disasterWarningAnalysis"
:style="styleContainer"
>
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div :class="(limitUserId == 1 ? current : current1) == index <div
:class="
(limitUserId == 1 ? current : current1) == index
? 'swiper-slide swiper-slide2' ? 'swiper-slide swiper-slide2'
: 'swiper-slide swiper-slide1' : 'swiper-slide swiper-slide1'
" v-for="(item, index) in dataList" :key="index" :style="styleItem" "
@click="getCurrent(index, item)"> v-for="(item, index) in dataList"
{{ item.greenhouseName + (limitUserId == 1 ? "温室" : '') }} :key="index"
:style="styleItem"
@click="getCurrent(index, item)"
>
{{
item.greenhouseName + (limitUserId == 1 ? "温室" : "")
}}
</div> </div>
</div> </div>
</div> </div>
@ -162,7 +254,6 @@
</div> </div>
<div class="device_content scroll"> <div class="device_content scroll">
<!-- 丽水 --> <!-- 丽水 -->
<div class="content_item" v-if="limitUserId == 1"> <div class="content_item" v-if="limitUserId == 1">
<div class="i_title" v-if="fanStatus.open != 0"> <div class="i_title" v-if="fanStatus.open != 0">
@ -184,32 +275,47 @@
<div class="i_content"> <div class="i_content">
<div class="i_content_item"> <div class="i_content_item">
<span>1#风机</span> <span>1#风机</span>
<span :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[0] == 1 ? "打开" : <span
"关闭" }}</span> :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[0] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span> <span class="line"></span>
<span>2#风机</span> <span>2#风机</span>
<span :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[1] == 1 ? "打开" : <span
"关闭" }}</span> :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[1] == 1 ? "打开" : "关闭" }}</span
>
</div> </div>
<div class="line1"></div> <div class="line1"></div>
<div class="i_content_item"> <div class="i_content_item">
<span>3#风机</span> <span>3#风机</span>
<span :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[2] == 1 ? "打开" : <span
"关闭" }}</span> :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[2] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span> <span class="line"></span>
<span>4#风机</span> <span>4#风机</span>
<span :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[3] == 1 ? "打开" : <span
"关闭" }}</span> :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[3] == 1 ? "打开" : "关闭" }}</span
>
</div> </div>
<div class="line1"></div> <div class="line1"></div>
<div class="i_content_item" style="width: 50%"> <div class="i_content_item" style="width: 50%">
<span>5#风机</span> <span>5#风机</span>
<span :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[4] == 1 ? "打开" : <span
"关闭" }}</span> :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'"
>{{ fanStatus.status[4] == 1 ? "打开" : "关闭" }}</span
>
<span class="line"></span> <span class="line"></span>
</div> </div>
</div> </div>
<div class="i_title_" style="margin-top: 0.2rem" v-for="(item, index) in statusList" :key="index"> <div
class="i_title_"
style="margin-top: 0.2rem"
v-for="(item, index) in statusList"
:key="index"
>
<template v-if="item.open != 0"> <template v-if="item.open != 0">
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
@ -232,15 +338,27 @@
</div> </div>
<!-- 东北 --> <!-- 东北 -->
<div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem;"> <div
<div v-for="(item,index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem;"> class="content_item"
v-if="limitUserId == 2"
style="margin-top: 0.05rem"
>
<div
v-for="(item, index) in fiveControlList"
:key="index"
style="margin-bottom: 0.15rem"
>
<div class="i_title" v-if="item.controlState != 0"> <div class="i_title" v-if="item.controlState != 0">
<img src="../../assets/img/i_title_img.png" alt="" /> <img src="../../assets/img/i_title_img.png" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
<span class="line"></span> <span class="line"></span>
<span>{{item.controlState == 1 ? "自动控制" : "手机控制"}}</span> <span>{{
item.controlState == 1 ? "自动控制" : "手机控制"
}}</span>
<span class="line"></span> <span class="line"></span>
<i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i> <i class="progress" v-if="Number(item.progress) == ''"
>进度{{ item.progress }}%</i
>
<span>菜单</span> <span>菜单</span>
</div> </div>
<div class="i_title" v-else> <div class="i_title" v-else>
@ -253,7 +371,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -711,57 +828,54 @@ export default {
}, },
], ],
limitUserId: '', limitUserId: "",
// 东北 // 东北
fiveControlList: [{ fiveControlList: [
title: '加温水泵', {
title: "加温水泵",
controlState: 0, controlState: 0,
num: '1000', num: "1000",
close_btn: false close_btn: false,
}, },
{ {
title: '地热风机', title: "地热风机",
controlState: 0, controlState: 0,
num: '1002', num: "1002",
close_btn: false close_btn: false,
}, },
{ {
title: '上风口', title: "上风口",
controlState: 0, controlState: 0,
num: '1004', num: "1004",
close_btn: true, close_btn: true,
progress_num: '1006', progress_num: "1006",
progress: '' progress: "",
}, },
{ {
title: '下风口', title: "下风口",
controlState: 0, controlState: 0,
num: '1007', num: "1007",
close_btn: true, close_btn: true,
progress_num: '1009', progress_num: "1009",
progress: '' progress: "",
}, },
{ {
title: '卷被', title: "卷被",
controlState: 0, controlState: 0,
num: '1010', num: "1010",
close_btn: true close_btn: true,
}, },
{ {
title: '除雪', title: "除雪",
controlState: 0, controlState: 0,
num: '1013', num: "1013",
close_btn: false close_btn: false,
}, },
] ],
}; };
}, },
mounted() { mounted() {
this.login(); this.login();
this.getTime(); this.getTime();
@ -812,7 +926,6 @@ export default {
this.get_readControl_getState(2023112911050004); this.get_readControl_getState(2023112911050004);
this.getWeatherData(2023112911050004); this.getWeatherData(2023112911050004);
} }
} }
}); });
}, },
@ -994,14 +1107,15 @@ export default {
// console.log(this.statusList); // console.log(this.statusList);
// 五防项目状态 // 五防项目状态
this.fiveControlList.forEach(el => { this.fiveControlList.forEach((el) => {
el.controlState = res.data.data[el.num]; el.controlState = res.data.data[el.num];
if(el.progress_num){ if (el.progress_num) {
el.progress = res.data.data[el.progress_num]; el.progress = res.data.data[el.progress_num];
} }
}) });
} }
});0 });
0;
}, },
// 获取天气预报数据 // 获取天气预报数据
@ -1046,7 +1160,7 @@ export default {
this.get_sel_eqbyid(userInfo.userid); this.get_sel_eqbyid(userInfo.userid);
// 获取用户id权限 // 获取用户id权限
this.get_user_getjurisdiction(userInfo.userid) this.get_user_getjurisdiction(userInfo.userid);
// this.autoPlay = JSON.parse(localStorage.getItem("autoPlay")); // this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
// console.log(this.autoPlay); // console.log(this.autoPlay);
@ -1061,7 +1175,7 @@ export default {
// 获取用户id权限 // 获取用户id权限
get_user_getjurisdiction(userId) { get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then(res => { this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.limitUserId = res.data.data[0].id; this.limitUserId = res.data.data[0].id;
if (this.limitUserId == 1) { if (this.limitUserId == 1) {
@ -1072,7 +1186,7 @@ export default {
this.dataInit(userId, this.limitUserId); this.dataInit(userId, this.limitUserId);
} }
} }
}) });
}, },
// autoPlay1() { // autoPlay1() {
@ -1290,10 +1404,10 @@ export default {
<style lang="scss"> <style lang="scss">
.environmentData { .environmentData {
.e_content { .e_content {
>div { > div {
width: 100% !important; width: 100% !important;
>div { > div {
width: 100% !important; width: 100% !important;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1335,10 +1449,12 @@ export default {
opacity: 0.9; opacity: 0.9;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25); text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom, background: linear-gradient(
to bottom,
#ffffff 45%, #ffffff 45%,
#e9f8ff 90%, #e9f8ff 90%,
#77baff 100%); #77baff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-align: center; text-align: center;
@ -1353,7 +1469,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
>span { > span {
width: 0.8rem; width: 0.8rem;
height: 0.3rem; height: 0.3rem;
background: rgba(14, 91, 165, 0.1); background: rgba(14, 91, 165, 0.1);
@ -1369,10 +1485,12 @@ export default {
} }
.act { .act {
background: linear-gradient(-35deg, background: linear-gradient(
-35deg,
#56a8d5 0%, #56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%, rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%); #56a8d5 100%
);
border: 1px solid rgba(122, 225, 255, 0.75); border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem; font-size: 0.18rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
@ -1393,7 +1511,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>img { > img {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
} }
@ -1409,26 +1527,26 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>img { > img {
width: 0.28rem; width: 0.28rem;
height: 0.3rem; height: 0.3rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.24rem; font-size: 0.24rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(4) { > span:nth-child(4) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(6) { > span:nth-child(6) {
font-size: 0.3rem; font-size: 0.3rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
@ -1459,12 +1577,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>img { > img {
width: 1.08rem; width: 1.08rem;
height: 0.91rem; height: 0.91rem;
} }
>span { > span {
font-size: 0.2rem; font-size: 0.2rem;
font-family: AlibabaPuHuiTiB; font-family: AlibabaPuHuiTiB;
font-weight: bold; font-weight: bold;
@ -1478,12 +1596,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>img { > img {
width: 1.08rem; width: 1.08rem;
height: 0.91rem; height: 0.91rem;
} }
>span { > span {
font-size: 0.2rem; font-size: 0.2rem;
font-family: AlibabaPuHuiTiB; font-family: AlibabaPuHuiTiB;
font-weight: bold; font-weight: bold;
@ -1513,7 +1631,8 @@ export default {
.weatherStation { .weatherStation {
width: 4rem; width: 4rem;
height: 0.43rem; height: 0.43rem;
background: url("../../assets/img/weatherStation.png") center no-repeat; background: url("../../assets/img/weatherStation.png") center
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -1521,7 +1640,7 @@ export default {
width: 3.84rem; width: 3.84rem;
height: 0.34rem; height: 0.34rem;
>div { > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -1549,7 +1668,7 @@ export default {
margin-right: 0.1rem; margin-right: 0.1rem;
display: inline-block; display: inline-block;
>img { > img {
width: 0.3rem; width: 0.3rem;
height: 0.3rem; height: 0.3rem;
position: relative; position: relative;
@ -1557,7 +1676,7 @@ export default {
margin-right: 0.05rem; margin-right: 0.05rem;
} }
>span { > span {
font-size: 0.16rem; font-size: 0.16rem;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
@ -1578,7 +1697,8 @@ export default {
.e_title { .e_title {
width: 3.98rem; width: 3.98rem;
height: 0.19rem; height: 0.19rem;
background: url("../../assets/img/environmentData_bg.png") center no-repeat; background: url("../../assets/img/environmentData_bg.png") center
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 0.18rem; font-size: 0.18rem;
font-family: AlibabaPuHuiTiM; font-family: AlibabaPuHuiTiM;
@ -1624,7 +1744,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
>img { > img {
width: 0.62rem; width: 0.62rem;
height: 0.68rem; height: 0.68rem;
margin: 0 0.16rem 0 0.13rem; margin: 0 0.16rem 0 0.13rem;
@ -1634,14 +1754,14 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
>span:nth-child(1) { > span:nth-child(1) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold; font-family: MicrosoftYaHei-Bold;
font-weight: bold; font-weight: bold;
color: #86c2ff; color: #86c2ff;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.22rem; font-size: 0.22rem;
font-family: AlibabaPuHuiTiB; font-family: AlibabaPuHuiTiB;
font-weight: bold; font-weight: bold;
@ -1672,13 +1792,15 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; z-index: 99;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 22%, transparent 22%,
transparent 10%, transparent 10%,
blue 30%, blue 30%,
blue 70%, blue 70%,
transparent 75%, transparent 75%,
transparent 100%); transparent 100%
);
.map1 { .map1 {
width: 60%; width: 60%;
@ -1691,10 +1813,12 @@ export default {
// blue 80%, // blue 80%,
// transparent 100%, // transparent 100%,
// transparent 100%); // transparent 100%);
-webkit-mask-image: linear-gradient(transparent 0%, -webkit-mask-image: linear-gradient(
transparent 0%,
blue 8%, blue 8%,
blue 85%, blue 85%,
transparent 100%); transparent 100%
);
// transform: scale(0.6); // transform: scale(0.6);
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -1709,19 +1833,23 @@ export default {
// top: 0.3rem; // top: 0.3rem;
// left: 0.5rem; // left: 0.5rem;
z-index: 10; z-index: 10;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 0%, transparent 0%,
blue 5%, blue 5%,
blue 93%, blue 93%,
transparent 99%); transparent 99%
);
.drag_img { .drag_img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%, -webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%, blue 13%,
blue 73%, blue 73%,
transparent 97%); transparent 97%
);
} }
.axis_init { .axis_init {
@ -1747,19 +1875,23 @@ export default {
// top: 0.3rem; // top: 0.3rem;
// left: 0.5rem; // left: 0.5rem;
z-index: 10; z-index: 10;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 4%, transparent 4%,
blue 18%, blue 18%,
blue 88%, blue 88%,
transparent 100%); transparent 100%
);
.drag_img { .drag_img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%, -webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%, blue 13%,
blue 73%, blue 73%,
transparent 97%); transparent 97%
);
} }
.axis_1 { .axis_1 {
@ -1931,7 +2063,7 @@ export default {
width: 100%; width: 100%;
height: 0.54rem; height: 0.54rem;
>div { > div {
width: 100%; width: 100%;
height: 0.54rem; height: 0.54rem;
cursor: pointer; cursor: pointer;
@ -1951,14 +2083,17 @@ export default {
width: 0.74rem !important; width: 0.74rem !important;
} }
.swiper-slide1 {} .swiper-slide1 {
}
::v-deep .swiper-slide2 { ::v-deep .swiper-slide2 {
color: #ffffff !important; color: #ffffff !important;
background: linear-gradient(-35deg, background: linear-gradient(
-35deg,
#56a8d5 0%, #56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%, rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%) !important; #56a8d5 100%
) !important;
border: 1px solid rgba(122, 225, 255, 0.75) !important; border: 1px solid rgba(122, 225, 255, 0.75) !important;
} }
@ -2042,7 +2177,8 @@ export default {
.i_title { .i_title {
// width: 4rem; // width: 4rem;
height: 0.5rem; height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat; background: url("../../assets/img/i_title_bg.png") center
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -2050,12 +2186,12 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.1rem 0 0.05rem; padding: 0 0.1rem 0 0.05rem;
>img { > img {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold; font-family: MicrosoftYaHei-Bold;
font-weight: bold; font-weight: bold;
@ -2069,7 +2205,7 @@ export default {
opacity: 0.2; opacity: 0.2;
} }
>span:nth-child(4) { > span:nth-child(4) {
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -2084,7 +2220,7 @@ export default {
// margin-right: 0.47rem; // margin-right: 0.47rem;
// } // }
.progress{ .progress {
width: 18%; width: 18%;
font-size: 0.14rem; font-size: 0.14rem;
font-style: normal; font-style: normal;
@ -2094,12 +2230,15 @@ export default {
margin-right: 0.47rem; margin-right: 0.47rem;
} }
>span:nth-child(6),>span:nth-child(7) { > span:nth-child(6),
> span:nth-child(7) {
width: 0.66rem; width: 0.66rem;
height: 0.3rem; height: 0.3rem;
background: linear-gradient(-35deg, background: linear-gradient(
-35deg,
rgba(122, 225, 255, 0.49) 1%, rgba(122, 225, 255, 0.49) 1%,
rgba(122, 225, 255, 0.5) 100%); rgba(122, 225, 255, 0.5) 100%
);
border: 0.01rem solid rgba(122, 225, 255, 0.5); border: 0.01rem solid rgba(122, 225, 255, 0.5);
border-radius: 0.15rem; border-radius: 0.15rem;
font-size: 0.14rem; font-size: 0.14rem;
@ -2114,7 +2253,8 @@ export default {
.i_title_ { .i_title_ {
// width: 4rem; // width: 4rem;
height: 0.5rem; height: 0.5rem;
background: url("../../assets/img/i_title_bg.png") center no-repeat; background: url("../../assets/img/i_title_bg.png") center
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -2122,12 +2262,12 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.1rem 0 0.05rem; padding: 0 0.1rem 0 0.05rem;
>img { > img {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
width: 18%; width: 18%;
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei-Bold; font-family: MicrosoftYaHei-Bold;
@ -2143,7 +2283,7 @@ export default {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
>span:nth-child(4) { > span:nth-child(4) {
width: 18%; width: 18%;
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
@ -2151,7 +2291,7 @@ export default {
color: #4effd5; color: #4effd5;
} }
>span:nth-child(6) { > span:nth-child(6) {
width: 18%; width: 18%;
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
@ -2160,12 +2300,14 @@ export default {
margin-right: 0.47rem; margin-right: 0.47rem;
} }
>span:nth-child(7) { > span:nth-child(7) {
width: 0.66rem; width: 0.66rem;
height: 0.3rem; height: 0.3rem;
background: linear-gradient(-35deg, background: linear-gradient(
-35deg,
rgba(122, 225, 255, 0.49) 1%, rgba(122, 225, 255, 0.49) 1%,
rgba(122, 225, 255, 0.5) 100%); rgba(122, 225, 255, 0.5) 100%
);
border: 0.01rem solid rgba(122, 225, 255, 0.5); border: 0.01rem solid rgba(122, 225, 255, 0.5);
border-radius: 0.15rem; border-radius: 0.15rem;
font-size: 0.14rem; font-size: 0.14rem;
@ -2192,16 +2334,16 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>span:nth-child(1), > span:nth-child(1),
>span:nth-child(4) { > span:nth-child(4) {
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
>span:nth-child(2), > span:nth-child(2),
>span:nth-child(5) { > span:nth-child(5) {
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -2228,4 +2370,5 @@ export default {
} }
} }
} }
}</style> }
</style>

343
src/views/page/largeScreen1.vue
View File

@ -31,22 +31,42 @@
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img class="pole1" src="../../assets/img/pole1.png" alt="" />
</div> </div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index"> <div
class="popBox"
v-for="(item, index) in popContentList"
:key="index"
>
<template> <template>
<div class="pole_item" :style="getNamePosition(item.id)" @click="handlerPop(item.id)"> <div
class="pole_item"
:style="getNamePosition(item.id)"
@click="handlerPop(item.id)"
>
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}温室</span> <span>{{ item.greenhouseName }}温室</span>
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div> </div>
</template> </template>
<!-- 弹框 --> <!-- 弹框 -->
<template> <template>
<div class="pop_content" :style="getTopOrLeft(item.id)" <div
v-show="popContentCurrent == item.id ? true : false"> class="pop_content"
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" /> :style="getTopOrLeft(item.id)"
v-show="popContentCurrent == item.id ? true : false"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler"
/>
<div class="p_video"> <div class="p_video">
<img :src="item.greenhouseImage" alt="" /> <img :src="item.greenhouseImage" alt="" />
</div> </div>
@ -73,12 +93,20 @@
</div> </div>
<div class="line" style="margin-top: 0.2rem"></div> <div class="line" style="margin-top: 0.2rem"></div>
<div class="icon_item scroll"> <div class="icon_item scroll">
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1"> <div
class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<!-- <img :src="item.formula" alt=""> --> <!-- <img :src="item.formula" alt=""> -->
<img :src="require('../../assets/image/real-time-' + <img
:src="
require('../../assets/image/real-time-' +
item1.formula + item1.formula +
'.png') '.png')
" alt="" /> "
alt=""
/>
<div> <div>
<span>{{ item1.environmentDataId }}</span> <span>{{ item1.environmentDataId }}</span>
<span>{{ <span>{{
@ -100,22 +128,51 @@
<div class="map1"> <div class="map1">
<div class="drag_box1" ref="drag_box1"> <div class="drag_box1" ref="drag_box1">
<img class="drag_img" src="../../assets/img/map1.png" alt="" /> <img class="drag_img" src="../../assets/img/map1.png" alt="" />
<div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'"> <div
class="popBox"
v-for="(item, index) in popContentList1"
:key="index + '_1'"
>
<template> <template>
<div class="pole_item" <div
:style="'top:' + (21 + index * .1) + '%' + ';' + 'left:' + (83 - index * 3.24) + '%' + ';'" @click="handlerPop1(item.id)"> class="pole_item"
:style="
'top:' +
(21 + index * 0.1) +
'%' +
';' +
'left:' +
(82.7 - index * 3.21) +
'%' +
';'
"
@click="handlerPop1(item.id)"
>
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span> <span>{{ item.greenhouseName }}#温室</span>
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div> </div>
</template> </template>
<!-- 弹框 --> <!-- 弹框 -->
<template> <template>
<div class="pop_content1" v-show="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft1(item.id)"> <div
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/> class="pop_content1"
v-show="popContentCurrent1 == item.id ? true : false"
:style="getTopOrLeft1(item.id)"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler1"
/>
<div class="p_video"> <div class="p_video">
<img :src="item.greenhouseImage" alt="" /> <img :src="item.greenhouseImage" alt="" />
</div> </div>
@ -138,11 +195,19 @@
</div> </div>
<div class="line" style="margin-top: 0.06rem"></div> <div class="line" style="margin-top: 0.06rem"></div>
<div class="icon_item scroll"> <div class="icon_item scroll">
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1"> <div
<img :src="require('../../assets/image/real-time-' + class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<img
:src="
require('../../assets/image/real-time-' +
item1.formula + item1.formula +
'.png') '.png')
" alt="" /> "
alt=""
/>
<div> <div>
<span>{{ item1.environmentDataId }}</span> <span>{{ item1.environmentDataId }}</span>
<span>{{ <span>{{
@ -155,23 +220,51 @@
</template> </template>
</div> </div>
<div
<div class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'"> class="popBox"
<template > v-for="(item, index) in popContentList2"
<div class="pole_item_1" :key="index + '_2'"
:style="'top:' + (51 + index * .2) + '%' + ';' + 'left:' + (84 - index * 4.05) + '%' + ';'" @click="handlerPop1(item.id)"> >
<template>
<div
class="pole_item_1"
:style="
'top:' +
(51 + index * 0.2) +
'%' +
';' +
'left:' +
(80 - index * 3.95) +
'%' +
';'
"
@click="handlerPop1(item.id)"
>
<div class="p_title"> <div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" /> <img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span> <span>{{ item.greenhouseName }}#温室</span>
</div> </div>
<img class="pole1" src="../../assets/img/pole1.png" alt="" /> <img
class="pole1"
src="../../assets/img/pole1.png"
alt=""
/>
</div> </div>
</template> </template>
<!-- 弹框 --> <!-- 弹框 -->
<template> <template>
<div class="pop_content1" v-show="popContentCurrent1 == item.id ? true : false" :style="getTopOrLeft11(item.id)"> <div
<img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/> class="pop_content1"
v-show="popContentCurrent1 == item.id ? true : false"
:style="getTopOrLeft11(item.id)"
>
<img
class="close_img"
src="../../assets/img/close.png"
alt=""
@click="cancelHandler1"
/>
<div class="p_video"> <div class="p_video">
<img :src="item.greenhouseImage" alt="" /> <img :src="item.greenhouseImage" alt="" />
</div> </div>
@ -194,11 +287,19 @@
</div> </div>
<div class="line" style="margin-top: 0.06rem"></div> <div class="line" style="margin-top: 0.06rem"></div>
<div class="icon_item scroll"> <div class="icon_item scroll">
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1"> <div
<img :src="require('../../assets/image/real-time-' + class="icon_item_child"
v-for="(item1, index1) in item.childList"
:key="index1"
>
<img
:src="
require('../../assets/image/real-time-' +
item1.formula + item1.formula +
'.png') '.png')
" alt="" /> "
alt=""
/>
<div> <div>
<span>{{ item1.environmentDataId }}</span> <span>{{ item1.environmentDataId }}</span>
<span>{{ <span>{{
@ -628,14 +729,12 @@ export default {
}, },
], ],
limitUserId: '', limitUserId: "",
popContentList1: [], popContentList1: [],
popContentList2: [], popContentList2: [],
}; };
}, },
mounted() { mounted() {
this.login(); this.login();
this.getTime(); this.getTime();
@ -668,14 +767,16 @@ export default {
} }
}); });
}); });
// console.log(this.popContentList,'12121212'); // console.log(this.popContentList, "12121212");
if (this.limitUserId == 2) { if (this.limitUserId == 2) {
this.popContentList1 = (this.popContentList.slice(0, 25)) this.popContentList1 = this.popContentList.slice(0, 24);
// this.popContentList2 = this.popContentList.slice(-10) // this.popContentList2 = this.popContentList.slice(-10)
if(this.popContentList.length > 25){ if (this.popContentList.length > 24) {
this.popContentList2 = (this.popContentList.slice(-(this.popContentList.length - 25))) this.popContentList2 = this.popContentList.slice(
-(this.popContentList.length - 24)
);
} }
console.log(this.popContentList1); // console.log(this.popContentList1);
} }
}); });
}, },
@ -697,9 +798,17 @@ export default {
}, },
getTopOrLeft1(id) { getTopOrLeft1(id) {
for(let i = 0; i < 26;i++){ for (let i = 0; i < 25; i++) {
if(id == (i + 1)){ if (id == i + 1) {
return `top:40%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`; if (i < 20) {
return `top:40%;left:${
74 - i * 3 < 15 ? 15 : 74 - i * 3
}%;transform: translate(-50%,-50%);`;
} else {
return `top:40%;left:${
74 - i * 3 < 15 ? 15 + (i - 20) * 3 : 74 - i * 3
}%;transform: translate(-50%,-50%);`;
}
} }
} }
// if (id == 1) { // if (id == 1) {
@ -712,9 +821,9 @@ export default {
}, },
getTopOrLeft11(id) { getTopOrLeft11(id) {
for(let i=0;i<10;i++){ for (let i = 0; i < 10; i++) {
if(id == (i + 26)) if (id == i + 25)
return `top:65%;left:${77 - i *4}%;transform: translate(-50%,-50%);` return `top:65%;left:${71 - i * 4}%;transform: translate(-50%,-50%);`;
} }
// if (id == 10) { // if (id == 10) {
// return "top:65%;left:57%;transform: translate(-50%,-50%);"; // return "top:65%;left:57%;transform: translate(-50%,-50%);";
@ -725,43 +834,42 @@ export default {
getNamePosition(id) { getNamePosition(id) {
if (id == 1) { if (id == 1) {
return "position: absolute;top: 41%;left: 13%;" return "position: absolute;top: 41%;left: 13%;";
} else if (id == 2) { } else if (id == 2) {
return "position: absolute;top: 10%;left: 24%;" return "position: absolute;top: 10%;left: 24%;";
} else if (id == 3) { } else if (id == 3) {
return "position: absolute;top: 22%;left: 40%;" return "position: absolute;top: 22%;left: 40%;";
} else if (id == 4) { } else if (id == 4) {
return "position: absolute;top: 29%;left: 76%;" return "position: absolute;top: 29%;left: 76%;";
} else if (id == 5) { } else if (id == 5) {
return "position: absolute;top: 61%;left: 62%;" return "position: absolute;top: 61%;left: 62%;";
} else if (id == 6) { } else if (id == 6) {
return "position: absolute;top: 1%;left: 62%;" return "position: absolute;top: 1%;left: 62%;";
} }
}, },
autoPlay1() { autoPlay1() {
let that = this let that = this;
this.autoPlay = false; this.autoPlay = false;
clearInterval(that.timer2) && this.timer2; clearInterval(that.timer2) && this.timer2;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay)); localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
}, },
autoPlay2() { autoPlay2() {
let that = this let that = this;
this.autoPlay = true; this.autoPlay = true;
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay)); localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
this.timer2 = setInterval(() => { this.timer2 = setInterval(() => {
if(that.limitUserId == 1){ if (that.limitUserId == 1) {
that.popContentCurrent++; that.popContentCurrent++;
if (that.popContentCurrent > 6) { if (that.popContentCurrent > 6) {
that.popContentCurrent = 1; that.popContentCurrent = 1;
} }
}else if(that.limitUserId == 2){ } else if (that.limitUserId == 2) {
that.popContentCurrent1++; that.popContentCurrent1++;
if (that.popContentCurrent1 > 35) { if (that.popContentCurrent1 > 34) {
that.popContentCurrent1 = 1; that.popContentCurrent1 = 1;
} }
} }
}, 3000); }, 3000);
}, },
@ -794,7 +902,7 @@ export default {
let userInfo = JSON.parse(localStorage.getItem("userInfo")); let userInfo = JSON.parse(localStorage.getItem("userInfo"));
// 获取用户id权限 // 获取用户id权限
this.get_user_getjurisdiction(userInfo.userid) this.get_user_getjurisdiction(userInfo.userid);
this.dataInit(userInfo.userid); this.dataInit(userInfo.userid);
@ -804,12 +912,12 @@ export default {
clearInterval(that.timer2) && this.timer2; clearInterval(that.timer2) && this.timer2;
} else { } else {
this.timer2 = setInterval(() => { this.timer2 = setInterval(() => {
if(that.limitUserId == 1){ if (that.limitUserId == 1) {
that.popContentCurrent++; that.popContentCurrent++;
if (that.popContentCurrent > 6) { if (that.popContentCurrent > 6) {
that.popContentCurrent = 1; that.popContentCurrent = 1;
} }
}else if(that.limitUserId == 2){ } else if (that.limitUserId == 2) {
that.popContentCurrent1++; that.popContentCurrent1++;
if (that.popContentCurrent1 > 35) { if (that.popContentCurrent1 > 35) {
that.popContentCurrent1 = 1; that.popContentCurrent1 = 1;
@ -821,7 +929,7 @@ export default {
// 获取用户id权限 // 获取用户id权限
get_user_getjurisdiction(userId) { get_user_getjurisdiction(userId) {
this.api.user_getjurisdiction(userId).then(res => { this.api.user_getjurisdiction(userId).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.limitUserId = res.data.data[0].id; this.limitUserId = res.data.data[0].id;
if (this.limitUserId == 1) { if (this.limitUserId == 1) {
@ -830,7 +938,7 @@ export default {
this.drag_boxHandler1(); this.drag_boxHandler1();
} }
} }
}) });
}, },
getTime() { getTime() {
@ -857,7 +965,7 @@ export default {
clearInterval(that.timer2) && this.timer2; clearInterval(that.timer2) && this.timer2;
}, },
cancelHandler1(){ cancelHandler1() {
this.popContentCurrent1 = -1; this.popContentCurrent1 = -1;
}, },
@ -866,7 +974,7 @@ export default {
this.popContentCurrent = id; this.popContentCurrent = id;
}, },
handlerPop1(id){ handlerPop1(id) {
this.popContentCurrent1 = id; this.popContentCurrent1 = id;
}, },
@ -1041,10 +1149,12 @@ export default {
opacity: 0.89; opacity: 0.89;
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25); text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
background: linear-gradient(to bottom, background: linear-gradient(
to bottom,
#ffffff 45%, #ffffff 45%,
#e9f8ff 90%, #e9f8ff 90%,
#77baff 100%); #77baff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-align: center; text-align: center;
@ -1059,7 +1169,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
>span { > span {
width: 0.8rem; width: 0.8rem;
height: 0.3rem; height: 0.3rem;
background: rgba(14, 91, 165, 0.1); background: rgba(14, 91, 165, 0.1);
@ -1075,10 +1185,12 @@ export default {
} }
.act { .act {
background: linear-gradient(-35deg, background: linear-gradient(
-35deg,
#56a8d5 0%, #56a8d5 0%,
rgba(0, 55, 110, 0.75) 50%, rgba(0, 55, 110, 0.75) 50%,
#56a8d5 100%); #56a8d5 100%
);
border: 1px solid rgba(122, 225, 255, 0.75); border: 1px solid rgba(122, 225, 255, 0.75);
font-size: 0.18rem; font-size: 0.18rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
@ -1100,7 +1212,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>img { > img {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
} }
@ -1116,26 +1228,26 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>img { > img {
width: 0.28rem; width: 0.28rem;
height: 0.3rem; height: 0.3rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.24rem; font-size: 0.24rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(4) { > span:nth-child(4) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
color: #7abaff; color: #7abaff;
} }
>span:nth-child(6) { > span:nth-child(6) {
font-size: 0.3rem; font-size: 0.3rem;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-weight: bold; font-weight: bold;
@ -1161,21 +1273,25 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; z-index: 99;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 0%, transparent 0%,
blue 7%, blue 7%,
blue 87%, blue 87%,
transparent 97%); transparent 97%
);
.map1 { .map1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: url('../assets/img/map.png') center no-repeat; // background: url('../assets/img/map.png') center no-repeat;
// background-size: 100% 100%; // background-size: 100% 100%;
-webkit-mask-image: linear-gradient(transparent 4%, -webkit-mask-image: linear-gradient(
transparent 4%,
blue 15%, blue 15%,
blue 86%, blue 86%,
transparent 100%); transparent 100%
);
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -1183,19 +1299,23 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 0%, transparent 0%,
blue 5%, blue 5%,
blue 93%, blue 93%,
transparent 99%); transparent 99%
);
.drag_img { .drag_img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%, -webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%, blue 13%,
blue 73%, blue 73%,
transparent 97%); transparent 97%
);
} }
.pole_item, .pole_item,
@ -1219,15 +1339,13 @@ export default {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
> img {
>img {
width: 0.1rem; width: 0.1rem;
height: 0.1rem; height: 0.1rem;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
>span { > span {
font-size: 0.1rem; font-size: 0.1rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1256,8 +1374,8 @@ export default {
z-index: 999999; z-index: 999999;
.close_img { .close_img {
width: .2rem; width: 0.2rem;
height: .2rem; height: 0.2rem;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -1268,7 +1386,7 @@ export default {
height: 1.82rem; height: 1.82rem;
margin: 0.1rem auto 0; margin: 0.1rem auto 0;
>img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -1313,13 +1431,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0.05rem 0.05rem; padding: 0.05rem 0.05rem;
>img { > img {
width: 0.2rem; width: 0.2rem;
height: 0.2rem; height: 0.2rem;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
>span { > span {
font-size: 0.13rem; font-size: 0.13rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1338,20 +1456,20 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
>img { > img {
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.13rem; font-size: 0.13rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
>span:nth-child(3) { > span:nth-child(3) {
font-size: 0.13rem; font-size: 0.13rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1408,19 +1526,23 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
-webkit-mask-image: linear-gradient(90deg, -webkit-mask-image: linear-gradient(
90deg,
transparent 4%, transparent 4%,
blue 18%, blue 18%,
blue 88%, blue 88%,
transparent 100%); transparent 100%
);
.drag_img { .drag_img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%, -webkit-mask-image: linear-gradient(
transparent 0%,
blue 13%, blue 13%,
blue 73%, blue 73%,
transparent 97%); transparent 97%
);
} }
.pole_item_4 { .pole_item_4 {
@ -1446,13 +1568,13 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
>img { > img {
width: 0.32rem; width: 0.32rem;
height: 0.32rem; height: 0.32rem;
margin-right: 0.15rem; margin-right: 0.15rem;
} }
>span { > span {
font-size: 0.18rem; font-size: 0.18rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1528,7 +1650,7 @@ export default {
height: 2.8rem; height: 2.8rem;
margin: 0.2rem auto 0; margin: 0.2rem auto 0;
>img { > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -1572,13 +1694,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 0 0.1rem 0 0.1rem; padding: 0 0.1rem 0 0.1rem;
>img { > img {
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
>span { > span {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1597,20 +1719,20 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
>img { > img {
width: 0.22rem; width: 0.22rem;
height: 0.18rem; height: 0.18rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
>span:nth-child(3) { > span:nth-child(3) {
font-size: 0.16rem; font-size: 0.16rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@ -1634,24 +1756,24 @@ export default {
display: flex; display: flex;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
>img { > img {
width: 0.6rem; width: 0.6rem;
height: 0.53rem; height: 0.53rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
>div { > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
>span:nth-child(1) { > span:nth-child(1) {
font-size: 0.14rem; font-size: 0.14rem;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: bold; font-weight: bold;
color: #86d9ff; color: #86d9ff;
} }
>span:nth-child(2) { > span:nth-child(2) {
font-size: 0.2rem; font-size: 0.2rem;
font-family: AlibabaPuHuiTiB; font-family: AlibabaPuHuiTiB;
font-weight: bold; font-weight: bold;
@ -1662,8 +1784,6 @@ export default {
} }
} }
} }
} }
} }
} }
@ -1673,4 +1793,5 @@ export default {
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
}</style> }
</style>