3228 lines
98 KiB
Vue
3228 lines
98 KiB
Vue
<template>
|
||
<div class="about">
|
||
<div class="kuang">
|
||
<div class="title"> {{limitUserId == 9 ?'甘井设施农业大数据云平台':'温室智慧云数据统计'}}</div>
|
||
|
||
<div class="yuan" @click="toBack">
|
||
<img src="../../assets/img/small.png" alt="" />
|
||
</div>
|
||
<div class="auto_play">
|
||
<span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
|
||
<span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
|
||
</div>
|
||
<div class="calendar">
|
||
<img src="../../assets/img/calendar.png" alt="" />
|
||
<span>{{ getNowTime() }}</span>
|
||
<span class="line"></span>
|
||
<span>{{ time.week }}</span>
|
||
<span class="line"></span>
|
||
<span>{{ time.time }}</span>
|
||
</div>
|
||
<!-- 丽水 -->
|
||
<div class="content" v-show="limitUserId == 1">
|
||
<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_item_4">
|
||
<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="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div
|
||
class="pole_item"
|
||
:style="getNamePosition(item.id)"
|
||
@click="handlerPop(item.id)"
|
||
>
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content"
|
||
: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">
|
||
<img :src="item.greenhouseImage" 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>
|
||
</div>
|
||
<!-- 东北 -->
|
||
<div class="content" v-show="limitUserId == 2">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box1" ref="drag_box1">
|
||
<img class="drag_img" src="../../assets/img/map1.png" alt="" />
|
||
<div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
|
||
<template>
|
||
<div
|
||
class="pole_item"
|
||
:style="
|
||
'top:' +
|
||
(21 + index * 0.1) +
|
||
'%' +
|
||
';' +
|
||
'left:' +
|
||
(82.7 - index * 3.21) +
|
||
'%' +
|
||
';'
|
||
"
|
||
@click="handlerPop1(item.id)"
|
||
>
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}#温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
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">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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 class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
|
||
<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">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}#温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
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">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
<!-- 石门 -->
|
||
<div class="content" v-show="limitUserId == 5">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box5" ref="drag_box5">
|
||
<img class="drag_img" src="../../assets/img/map2.png" alt="" />
|
||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft5(item.id)" @click="handlerPop(item.id)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}#温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content1"
|
||
v-show="popContentCurrent == item.id ? true : false"
|
||
:style="getTopOrLeft55(item.id)"
|
||
>
|
||
<img
|
||
class="close_img"
|
||
src="../../assets/img/close.png"
|
||
alt=""
|
||
@click="cancelHandler"
|
||
/>
|
||
<div class="p_video">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
<!-- 大冶鑫 -->
|
||
<div class="content" v-show="limitUserId == 7">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box7" ref="drag_box7">
|
||
<img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
|
||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft7(item.id)" @click="handlerPop(item.id)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}#温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content1"
|
||
v-show="popContentCurrent == item.id ? true : false"
|
||
:style="getTopOrLeft77(item.id)"
|
||
>
|
||
<img
|
||
class="close_img"
|
||
src="../../assets/img/close.png"
|
||
alt=""
|
||
@click="cancelHandler"
|
||
/>
|
||
<div class="p_video">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
<!-- 大冶鑫 -->
|
||
<div class="content" v-show="limitUserId == 8">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box8" ref="drag_box8">
|
||
<img class="drag_img" src="../../assets/img/map4.jpg" alt="" />
|
||
<div class="popBox" >
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft8(8)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>泵房</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft8(item.id)" @click="handlerPop(item.id)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{ item.greenhouseName }}#温室</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content1"
|
||
v-show="popContentCurrent == item.id ? true : false"
|
||
:style="getTopOrLeft8_8(item.id)"
|
||
>
|
||
<img
|
||
class="close_img"
|
||
src="../../assets/img/close.png"
|
||
alt=""
|
||
@click="cancelHandler"
|
||
/>
|
||
<div class="p_video">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
<!-- 甘井设施农业 -->
|
||
<div class="content" v-show="limitUserId == 9">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box9" ref="drag_box9">
|
||
<img class="drag_img" src="../../assets/img/map5.png" alt="" />
|
||
<!-- <div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft9(9)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>泵房</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
</div> -->
|
||
<div class="popBox">
|
||
<div class="pole_item" style="top:53.5%;left:48.5%;z-index:1;" @click="toHttp">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>100个拱棚</span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft9(item.id)" @click="handlerPop(item.id)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{item.greenhouseName}} </span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content1"
|
||
v-show="popContentCurrent == item.id ? true : false"
|
||
:style="getTopOrLeft9_9(item.id)"
|
||
>
|
||
<img
|
||
class="close_img"
|
||
src="../../assets/img/close.png"
|
||
alt=""
|
||
@click="cancelHandler"
|
||
/>
|
||
<div class="p_video">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
<!-- 甘井设施农业 -->
|
||
<div class="content" v-show="limitUserId == 10">
|
||
<div class="map">
|
||
<div class="map1">
|
||
<div class="drag_box10" ref="drag_box10">
|
||
<img class="drag_img" src="../../assets/img/map6.jpg" alt="" />
|
||
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
|
||
<template>
|
||
<div class="pole_item" :style="getTopOrLeft10(item.id)" @click="handlerPop(item.id)">
|
||
<div class="p_title">
|
||
<img src="../../assets/img/wenshi.png" alt="" />
|
||
<span>{{item.greenhouseName}} </span>
|
||
</div>
|
||
<img
|
||
class="pole1"
|
||
src="../../assets/img/pole1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 弹框 -->
|
||
<template>
|
||
<div
|
||
class="pop_content1"
|
||
v-show="popContentCurrent == item.id ? true : false"
|
||
:style="getTopOrLeft10_10(item.id)"
|
||
>
|
||
<img
|
||
class="close_img"
|
||
src="../../assets/img/close.png"
|
||
alt=""
|
||
@click="cancelHandler"
|
||
/>
|
||
<div class="p_video">
|
||
<img :src="item.greenhouseImage" 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.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.06rem"></div>
|
||
<div class="icon_item scroll">
|
||
<div
|
||
class="icon_item_child"
|
||
v-for="(item1, index1) in item.childList"
|
||
:key="index1"
|
||
>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getnowtime } from "../../assets/js/nowTime";
|
||
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: 1,
|
||
popContentCurrent1: 1,
|
||
|
||
// 自动跳转和手动跳转切换
|
||
autoPlay: false, //false 手动切换 true 自动切换
|
||
|
||
time: "", //当前时间
|
||
|
||
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",
|
||
},
|
||
],
|
||
|
||
limitUserId: "",
|
||
popContentList1: [],
|
||
popContentList2: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.login();
|
||
|
||
this.getTime();
|
||
|
||
setInterval(() => {
|
||
this.getNowTime();
|
||
}, 1000);
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer2) && this.timer2;
|
||
},
|
||
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");
|
||
if (this.limitUserId == 2) {
|
||
this.popContentList1 = this.popContentList.slice(0, 24);
|
||
// this.popContentList2 = this.popContentList.slice(-10)
|
||
if (this.popContentList.length > 24) {
|
||
this.popContentList2 = this.popContentList.slice(
|
||
-(this.popContentList.length - 24)
|
||
);
|
||
}
|
||
// console.log(this.popContentList1);
|
||
}
|
||
});
|
||
},
|
||
|
||
getTopOrLeft(id) {
|
||
if (id == 2) {
|
||
return "top:46%;left:46%;transform: translate(-50%,-50%);";
|
||
} else if (id == 5) {
|
||
return "top:53%;left:47%;transform: translate(-50%,-50%);";
|
||
} else if (id == 6) {
|
||
return "top:46%;left:51%;transform: translate(-50%,-50%);";
|
||
} else if (id == 4) {
|
||
return "top:50%;left:62%;transform: translate(-50%,-50%);";
|
||
} else if (id == 3) {
|
||
return "top:50%;left:62%;transform: translate(-50%,-50%);";
|
||
} else if (id == 1) {
|
||
return "top:50%;left:35%;transform: translate(-50%,-50%);";
|
||
}
|
||
},
|
||
|
||
getTopOrLeft1(id) {
|
||
for (let i = 0; i < 25; i++) {
|
||
if (id == i + 1) {
|
||
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%);`;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
getTopOrLeft11(id) {
|
||
for (let i = 0; i < 10; i++) {
|
||
if (id == i + 25)
|
||
return `top:65%;left:${71 - i * 4}%;transform: translate(-50%,-50%);`;
|
||
}
|
||
},
|
||
|
||
getTopOrLeft5(id){
|
||
if(id == 1){
|
||
return 'top:50%;left:9%'
|
||
}else if(id == 2){
|
||
return 'top:47%;left:16%'
|
||
}else if(id == 3){
|
||
return 'top:49%;left:18%'
|
||
}else if(id == 4){
|
||
return 'top:51%;left:20%'
|
||
}else if(id == 5){
|
||
return 'top:53%;left:22%'
|
||
}
|
||
},
|
||
|
||
getTopOrLeft55(id){
|
||
if(id == 1){
|
||
return `top:53%;left:21%;transform: translate(-50%,-50%);`;
|
||
}
|
||
for (let i = 0; i < 4; i++) {
|
||
if(id == i + 1) {
|
||
return `top:${46 + (i - 1) * 2}%;left:${28 + (i - 1) * 2}%;transform: translate(-50%,-50%);`;
|
||
}
|
||
}
|
||
},
|
||
getTopOrLeft7(id){
|
||
if(id == 1){
|
||
return 'top:34%;left:62%'
|
||
}else if(id == 2){
|
||
return 'top:19%;left:64%'
|
||
}else if(id == 3){
|
||
return 'top:19%;left:50%'
|
||
}else if(id == 4){
|
||
return 'top:52%;left:22%'
|
||
}else if(id == 5){
|
||
return 'top:34%;left:25%'
|
||
}else if(id == 6){
|
||
return 'top:52%;left:64%'
|
||
}
|
||
},
|
||
|
||
getTopOrLeft77(id){
|
||
|
||
if(id == 1){
|
||
return 'top:34%;left:62%;transform: translate(54%,-50%);'
|
||
}else if(id == 2){
|
||
return 'top:19%;left:64%;transform: translate(54%,0%);'
|
||
}else if(id == 3){
|
||
return 'top:19%;left:50%;transform: translate(54%,0%);'
|
||
}else if(id == 4){
|
||
return 'top:52%;left:22%;transform: translate(54%,-50%);'
|
||
}else if(id == 5){
|
||
return 'top:34%;left:25%;transform: translate(54%,-50%);'
|
||
}else if(id == 6){
|
||
return 'top:52%;left:64%;transform: translate(54%,-50%);'
|
||
}
|
||
},
|
||
getTopOrLeft8(id){
|
||
if(id == 8){
|
||
return 'top:79%;left:28%;z-index:8;'
|
||
}else if(id == 1){
|
||
return 'top:62%;left:39%;z-index:7;'
|
||
}else if(id == 2){
|
||
return 'top:48%;left:52%;z-index:6;'
|
||
}else if(id == 3){
|
||
return 'top:24%;left:59%;z-index:5;'
|
||
}else if(id == 4){
|
||
return 'top:16%;left:57%;z-index:4;'
|
||
}else if(id == 5){
|
||
return 'top:6%;left:55%;z-index:3;'
|
||
}else if(id == 6){
|
||
return 'top:1%;left:52%;z-index:2;'
|
||
}else if(id == 7){
|
||
return 'top:-4%;left:48%;z-index:1;'
|
||
}
|
||
},
|
||
getTopOrLeft8_8(id){
|
||
if(id == 8){
|
||
return 'top:79%;left:28%;transform: translate(54%,-50%);'
|
||
}else if(id == 1){
|
||
return 'top:62%;left:39%;transform: translate(54%,-50%);'
|
||
}else if(id == 2){
|
||
return 'top:48%;left:52%;transform: translate(54%,-50%);'
|
||
}else if(id == 3){
|
||
return 'top:24%;left:59%;transform: translate(54%,-50%);'
|
||
}else if(id == 4){
|
||
return 'top:16%;left:57%;transform: translate(54%,0%);'
|
||
}else if(id == 5){
|
||
return 'top:6%;left:55%;transform: translate(54%,0%);'
|
||
}else if(id == 6){
|
||
return 'top:1%;left:52%;transform: translate(54%,0%);'
|
||
}else if(id == 7){
|
||
return 'top:0%;left:48%;transform: translate(54%,0%);'
|
||
}
|
||
},
|
||
getTopOrLeft9(id){
|
||
if(id == 1){
|
||
return 'top:20.5%;left:10%;z-index:10;'
|
||
}else if(id == 2){
|
||
return 'top:72%;left:12%;z-index:9;'
|
||
}else if(id == 3){
|
||
return 'top:32%;left:56%;z-index:8;'
|
||
}else if(id == 4){
|
||
return 'top:34%;left:57%;z-index:7;'
|
||
}else if(id == 5){
|
||
return 'top:20.5%;left:66.5%;z-index:6;'
|
||
}else if(id == 6){
|
||
return 'top:22.5%;left:68%;z-index:5;'
|
||
}else if(id == 7){
|
||
return 'top:17%;left:70.6%;z-index:4;'
|
||
}else if(id == 8){
|
||
return 'top:19.5%;left:71.5%;z-index:3;'
|
||
}else if(id == 9){
|
||
return 'top:14%;left:75%;z-index:2;'
|
||
}else if(id == 10){
|
||
return 'top:16.5%;left:75.5%;z-index:1;'
|
||
}
|
||
},
|
||
getTopOrLeft9_9(id){
|
||
if(id == 1){
|
||
return 'top:20.5%;left:10%;transform: translate(54%,0);'
|
||
}else if(id == 2){
|
||
return 'top:72%;left:12%;transform: translate(54%,0);'
|
||
}else if(id == 3){
|
||
return 'top:32%;left:56%;transform: translate(54%,0);'
|
||
}else if(id == 4){
|
||
return 'top:16%;left:57%;transform: translate(54%,0%);'
|
||
}else if(id == 5){
|
||
return 'top:20.5%;left:66.5%;transform: translate(54%,0%);'
|
||
}else if(id == 6){
|
||
return 'top:22.5%;left:68%;transform: translate(54%,0%);'
|
||
}else if(id == 7){
|
||
return 'top:17%;left:70.6%;transform: translate(54%,0%);'
|
||
}else if(id == 8){
|
||
return 'top:19.5%;left:71.5%;transform: translate(54%,0);'
|
||
}else if(id == 9){
|
||
return 'top:14%;left:75%;transform: translate(54%,0);'
|
||
}else if(id == 10){
|
||
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
|
||
}
|
||
},
|
||
getTopOrLeft10(id){
|
||
if(id == 1){
|
||
return 'top:12.5%;left:43%;z-index:10;'
|
||
}else if(id == 2){
|
||
return 'top:12.5%;left:53%;z-index:9;'
|
||
}else if(id == 3){
|
||
return 'top:45%;left:43%;z-index:8;'
|
||
}else if(id == 4){
|
||
return 'top:45%;left:54%;z-index:7;'
|
||
}else if(id == 5){
|
||
return 'top:68%;left:43%;z-index:6;'
|
||
}else if(id == 6){
|
||
return 'top:68%;left:54%;z-index:5;'
|
||
}
|
||
},
|
||
getTopOrLeft10_10(id){
|
||
if(id == 1){
|
||
return 'top:12.5%;left:43%;transform: translate(54%,0);'
|
||
}else if(id == 2){
|
||
return 'top:12.5%;left:53%;transform: translate(54%,0);'
|
||
}else if(id == 3){
|
||
return 'top:45%;left:43%;transform: translate(54%,0);'
|
||
}else if(id == 4){
|
||
return 'top:45%;left:54%;transform: translate(54%,0%);'
|
||
}else if(id == 5){
|
||
return 'top:68%;left:43%;transform: translate(54%,0%);'
|
||
}else if(id == 6){
|
||
return 'top:68%;left:54%;transform: translate(54%,0%);'
|
||
}
|
||
},
|
||
getNamePosition(id) {
|
||
if (id == 1) {
|
||
return "position: absolute;top: 41%;left: 13%;";
|
||
} else if (id == 2) {
|
||
return "position: absolute;top: 10%;left: 24%;";
|
||
} else if (id == 3) {
|
||
return "position: absolute;top: 22%;left: 40%;";
|
||
} else if (id == 4) {
|
||
return "position: absolute;top: 29%;left: 76%;";
|
||
} else if (id == 5) {
|
||
return "position: absolute;top: 61%;left: 62%;";
|
||
} else if (id == 6) {
|
||
return "position: absolute;top: 1%;left: 62%;";
|
||
}
|
||
},
|
||
|
||
autoPlay1() {
|
||
let that = this;
|
||
this.autoPlay = false;
|
||
clearInterval(that.timer2) && this.timer2;
|
||
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||
},
|
||
autoPlay2() {
|
||
let that = this;
|
||
this.autoPlay = true;
|
||
localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
|
||
this.timer2 = setInterval(() => {
|
||
if (that.limitUserId == 1) {
|
||
that.popContentCurrent++;
|
||
if (that.popContentCurrent > 6) {
|
||
that.popContentCurrent = 1;
|
||
}
|
||
} else if (that.limitUserId == 2) {
|
||
that.popContentCurrent1++;
|
||
if (that.popContentCurrent1 > 34) {
|
||
that.popContentCurrent1 = 1;
|
||
}
|
||
} else if(that.limitUserId == 5){
|
||
that.popContentCurrent++;
|
||
if(that.popContentCurrent > 4){
|
||
that.popContentCurrent = 1;
|
||
}
|
||
} else if(that.limitUserId == 7){
|
||
that.popContentCurrent++;
|
||
if(that.popContentCurrent > 6){
|
||
that.popContentCurrent = 1;
|
||
}
|
||
}
|
||
}, 3000);
|
||
},
|
||
|
||
// 数据单位
|
||
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"));
|
||
|
||
// 获取用户id权限
|
||
this.get_user_getjurisdiction(userInfo.userid);
|
||
|
||
this.dataInit(userInfo.userid);
|
||
|
||
let that = this;
|
||
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
|
||
if (this.autoPlay == false) {
|
||
clearInterval(that.timer2) && this.timer2;
|
||
} else {
|
||
this.timer2 = setInterval(() => {
|
||
if (that.limitUserId == 1) {
|
||
that.popContentCurrent++;
|
||
if (that.popContentCurrent > 6) {
|
||
that.popContentCurrent = 1;
|
||
}
|
||
} else if (that.limitUserId == 2) {
|
||
that.popContentCurrent1++;
|
||
if (that.popContentCurrent1 > 35) {
|
||
that.popContentCurrent1 = 1;
|
||
}
|
||
}else if(that.limitUserId == 5){
|
||
that.popContentCurrent++;
|
||
if(that.popContentCurrent > 4){
|
||
that.popContentCurrent = 1;
|
||
}
|
||
}else if(that.limitUserId == 7){
|
||
that.popContentCurrent++;
|
||
if(that.popContentCurrent > 6){
|
||
that.popContentCurrent = 1;
|
||
}
|
||
}
|
||
}, 3000);
|
||
}
|
||
},
|
||
|
||
// 获取用户id权限
|
||
get_user_getjurisdiction(userId) {
|
||
this.api.user_getjurisdiction(userId).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7|| el.id == 8|| el.id == 9|| el.id == 10))[0].id;
|
||
if (this.limitUserId == 1) {
|
||
this.drag_boxHandler();
|
||
} else if (this.limitUserId == 2) {
|
||
this.drag_boxHandler1();
|
||
} else if (this.limitUserId == 5) {
|
||
this.drag_boxHandler5();
|
||
} else if (this.limitUserId == 7) {
|
||
this.drag_boxHandler7();
|
||
} else if (this.limitUserId == 8) {
|
||
this.drag_boxHandler8();
|
||
} else if (this.limitUserId == 9) {
|
||
this.drag_boxHandler9();
|
||
} else if (this.limitUserId == 10) {
|
||
this.drag_boxHandler10();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
getTime() {
|
||
this.time = getnowtime();
|
||
// console.log(this.time);
|
||
const that = this;
|
||
setInterval(() => {
|
||
that.time = getnowtime();
|
||
}, 1000);
|
||
},
|
||
toHttp(){
|
||
window.open('https://wlw.hx3n.com/datav/indexinfo.do', '_blank');
|
||
},
|
||
getNowTime() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = (now.getMonth() + 1).toString().padStart(2, "0");
|
||
const day = now.getDate().toString().padStart(2, "0");
|
||
const formattedDate = `${year}.${month}.${day}`;
|
||
return formattedDate;
|
||
},
|
||
|
||
cancelHandler() {
|
||
this.popContentCurrent = -1;
|
||
let that = this;
|
||
clearInterval(that.timer2) && this.timer2;
|
||
},
|
||
|
||
cancelHandler1() {
|
||
this.popContentCurrent1 = -1;
|
||
},
|
||
|
||
handlerPop(id) {
|
||
// console.log(id);
|
||
this.popContentCurrent = id;
|
||
},
|
||
|
||
handlerPop1(id) {
|
||
this.popContentCurrent1 = id;
|
||
},
|
||
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
|
||
drag_boxHandler1() {
|
||
let demo = this.$refs.drag_box1;
|
||
demo = document.querySelector(".drag_box1"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler10() {
|
||
let demo = this.$refs.drag_box10;
|
||
demo = document.querySelector(".drag_box10"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler9() {
|
||
let demo = this.$refs.drag_box9;
|
||
demo = document.querySelector(".drag_box9"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler8() {
|
||
let demo = this.$refs.drag_box8;
|
||
demo = document.querySelector(".drag_box8"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler7() {
|
||
let demo = this.$refs.drag_box7;
|
||
demo = document.querySelector(".drag_box7"); //待拖拽元素
|
||
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);
|
||
}
|
||
};
|
||
},
|
||
drag_boxHandler5() {
|
||
let demo = this.$refs.drag_box5;
|
||
demo = document.querySelector(".drag_box5"); //待拖拽元素
|
||
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: 0.54rem;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #eff8fc;
|
||
line-height: 0.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;
|
||
}
|
||
|
||
.auto_play {
|
||
height: 0.56rem;
|
||
position: absolute;
|
||
top: 0.53rem;
|
||
left: 1.4rem;
|
||
z-index: 99999999;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
> span {
|
||
width: 0.8rem;
|
||
height: 0.3rem;
|
||
background: rgba(14, 91, 165, 0.1);
|
||
border: 1px solid rgba(97, 152, 209, 0.65);
|
||
margin-right: 0.1rem;
|
||
font-size: 0.18rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #70d0ee;
|
||
text-align: center;
|
||
line-height: 0.3rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.act {
|
||
background: linear-gradient(
|
||
-35deg,
|
||
#56a8d5 0%,
|
||
rgba(0, 55, 110, 0.75) 50%,
|
||
#56a8d5 100%
|
||
);
|
||
border: 1px solid rgba(122, 225, 255, 0.75);
|
||
font-size: 0.18rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.yuan {
|
||
width: 0.56rem;
|
||
height: 0.56rem;
|
||
background: url("../../assets/img/yuan_bg.png") center no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 0.53rem;
|
||
left: 0.71rem;
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
}
|
||
}
|
||
|
||
.calendar {
|
||
width: 4rem;
|
||
height: 0.3rem;
|
||
position: absolute;
|
||
top: 0.63rem;
|
||
right: 0.66rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
> img {
|
||
width: 0.28rem;
|
||
height: 0.3rem;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.24rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7abaff;
|
||
}
|
||
|
||
> span:nth-child(4) {
|
||
font-size: 0.2rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7abaff;
|
||
}
|
||
|
||
> span:nth-child(6) {
|
||
font-size: 0.3rem;
|
||
font-family: PingFang-SC-Bold;
|
||
font-weight: bold;
|
||
color: #7abaff;
|
||
}
|
||
|
||
.line {
|
||
width: 0.02rem;
|
||
height: 0.3rem;
|
||
background: #ffffff;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100% - 0.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_box1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
-webkit-mask-image: linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
blue 5%,
|
||
blue 93%,
|
||
transparent 99%
|
||
);
|
||
|
||
.drag_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-mask-image: linear-gradient(
|
||
transparent 0%,
|
||
blue 13%,
|
||
blue 73%,
|
||
transparent 97%
|
||
);
|
||
}
|
||
|
||
.pole_item,
|
||
.pole_item_1 {
|
||
width: 0.5rem;
|
||
height: 0.22rem;
|
||
position: absolute;
|
||
// top: 21%;
|
||
// left: 5%;
|
||
|
||
.p_title {
|
||
width: 0.5rem;
|
||
height: 0.22rem;
|
||
background: rgba(1, 12, 28, 0.7);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.04rem;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
> img {
|
||
width: 0.1rem;
|
||
height: 0.1rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.1rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.pole1 {
|
||
width: 0.3rem;
|
||
height: 0.7rem;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.pop_content1 {
|
||
width: 3.5rem;
|
||
height: 4.55rem;
|
||
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
// top: 17%;
|
||
// left: 23%;
|
||
z-index: 999999;
|
||
|
||
.close_img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.p_video {
|
||
width: 90%;
|
||
height: 1.82rem;
|
||
margin: 0.1rem auto 0;
|
||
|
||
> img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
height: 0.4rem;
|
||
font-size: 0.2rem;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-weight: bold;
|
||
color: #f3fdff;
|
||
line-height: 0.4rem;
|
||
box-sizing: border-box;
|
||
padding-left: 0.2rem;
|
||
}
|
||
|
||
.line {
|
||
width: 90%;
|
||
height: 0.01rem;
|
||
background: #51d4fa;
|
||
opacity: 0.5;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.detail {
|
||
width: 100%;
|
||
height: 0.45rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
padding: 0 0.15rem;
|
||
|
||
.d_item {
|
||
height: 0.3rem;
|
||
background: rgba(81, 212, 250, 0.15);
|
||
border: 0.01rem solid rgba(106, 222, 255, 0.4);
|
||
border-radius: 0.02rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.05rem 0.05rem;
|
||
|
||
> img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #d9effd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grow {
|
||
width: 2.5rem;
|
||
height: 0.3rem;
|
||
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: 0.18rem;
|
||
height: 0.18rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
> span:nth-child(3) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #36ffd2;
|
||
}
|
||
}
|
||
|
||
.icon_item {
|
||
width: 100%;
|
||
height: calc(100% - 3.22rem);
|
||
box-sizing: border-box;
|
||
padding: 0.1rem 0.15rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
overflow: auto;
|
||
|
||
.icon_item_child {
|
||
width: 33.33%;
|
||
height: 33.33%;
|
||
display: flex;
|
||
margin-bottom: 0.05rem;
|
||
|
||
> img {
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
> span:nth-child(1) {
|
||
font-size: 0.12rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #86d9ff;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.15rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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_4 {
|
||
position: absolute;
|
||
top: 43%;
|
||
left: 42%;
|
||
}
|
||
|
||
.pole_item {
|
||
width: 1.45rem;
|
||
height: 1.8rem;
|
||
|
||
.p_title {
|
||
width: 1.45rem;
|
||
height: 0.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: 0.32rem;
|
||
height: 0.32rem;
|
||
margin-right: 0.15rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.18rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.pole1 {
|
||
width: 0.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: 29%;
|
||
left: 76%;
|
||
}
|
||
|
||
.pole_item5 {
|
||
position: absolute;
|
||
top: 61%;
|
||
left: 62%;
|
||
}
|
||
|
||
.pole_item6 {
|
||
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;
|
||
|
||
.close_img {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.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: 0.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.9rem;
|
||
height: 0.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: 0.3rem;
|
||
background: rgba(81, 212, 250, 0.15);
|
||
border: 0.01rem solid rgba(106, 222, 255, 0.4);
|
||
border-radius: 0.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: 0.16rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #d9effd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grow {
|
||
width: 4rem;
|
||
height: 0.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: 0.22rem;
|
||
height: 0.18rem;
|
||
margin-right: 0.1rem;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.16rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
> span:nth-child(3) {
|
||
font-size: 0.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: 0.6rem;
|
||
height: 0.53rem;
|
||
margin-right: 0.1rem;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
> span:nth-child(1) {
|
||
font-size: 0.14rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #86d9ff;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.2rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-top: 0.02rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.drag_box7,.drag_box8,.drag_box9,.drag_box10{
|
||
width: 100%;
|
||
height: auto;
|
||
position: absolute;
|
||
top:-95px;
|
||
// -webkit-mask-image: linear-gradient(
|
||
// 90deg,
|
||
// transparent 0%,
|
||
// blue 2%,
|
||
// blue 97%,
|
||
// transparent 99%
|
||
// );
|
||
|
||
.drag_img {
|
||
width: 100%;
|
||
height: auto;
|
||
-webkit-mask-image: linear-gradient(
|
||
transparent 0%,
|
||
blue 3%,
|
||
blue 95%,
|
||
transparent 97%
|
||
);
|
||
}
|
||
|
||
.pole_item{
|
||
// width: 0.5rem;
|
||
height: 0.34rem;
|
||
position: absolute;
|
||
top: 21%;
|
||
left: 5%;
|
||
cursor: pointer;
|
||
.p_title {
|
||
// width: 0.5rem;
|
||
// height: 0.22rem;
|
||
background: rgba(1, 12, 28, 0.7);
|
||
border-radius:40px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.04rem;
|
||
// position: absolute;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
> img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.2rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.pole1 {
|
||
width: 0.5rem;
|
||
height:auto;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: .2rem;
|
||
transform: translateX(-50%)
|
||
}
|
||
}
|
||
|
||
.pop_content1 {
|
||
width: 3.5rem;
|
||
height: 4.55rem;
|
||
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
// top: 17%;
|
||
// left: 23%;
|
||
z-index: 999999;
|
||
|
||
.close_img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.p_video {
|
||
width: 90%;
|
||
height: 1.82rem;
|
||
margin: 0.1rem auto 0;
|
||
|
||
> img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
height: 0.4rem;
|
||
font-size: 0.2rem;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-weight: bold;
|
||
color: #f3fdff;
|
||
line-height: 0.4rem;
|
||
box-sizing: border-box;
|
||
padding-left: 0.2rem;
|
||
}
|
||
|
||
.line {
|
||
width: 90%;
|
||
height: 0.01rem;
|
||
background: #51d4fa;
|
||
opacity: 0.5;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.detail {
|
||
width: 100%;
|
||
height: 0.45rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
padding: 0 0.15rem;
|
||
|
||
.d_item {
|
||
height: 0.3rem;
|
||
background: rgba(81, 212, 250, 0.15);
|
||
border: 0.01rem solid rgba(106, 222, 255, 0.4);
|
||
border-radius: 0.02rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.05rem 0.05rem;
|
||
|
||
> img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #d9effd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grow {
|
||
width: 2.5rem;
|
||
height: 0.3rem;
|
||
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: 0.18rem;
|
||
height: 0.18rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
> span:nth-child(3) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #36ffd2;
|
||
}
|
||
}
|
||
|
||
.icon_item {
|
||
width: 100%;
|
||
height: calc(100% - 3.22rem);
|
||
box-sizing: border-box;
|
||
padding: 0.1rem 0.15rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
overflow: auto;
|
||
|
||
.icon_item_child {
|
||
width: 33.33%;
|
||
height: 33.33%;
|
||
display: flex;
|
||
margin-bottom: 0.05rem;
|
||
|
||
> img {
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
> span:nth-child(1) {
|
||
font-size: 0.12rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #86d9ff;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.15rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.drag_box5{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
-webkit-mask-image: linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
blue 5%,
|
||
blue 93%,
|
||
transparent 99%
|
||
);
|
||
|
||
.drag_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-mask-image: linear-gradient(
|
||
transparent 0%,
|
||
blue 13%,
|
||
blue 73%,
|
||
transparent 97%
|
||
);
|
||
}
|
||
|
||
.pole_item{
|
||
width: 0.5rem;
|
||
height: 0.22rem;
|
||
position: absolute;
|
||
top: 21%;
|
||
left: 5%;
|
||
|
||
.p_title {
|
||
width: 0.5rem;
|
||
height: 0.22rem;
|
||
background: rgba(1, 12, 28, 0.7);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.04rem;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
> img {
|
||
width: 0.1rem;
|
||
height: 0.1rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.1rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.pole1 {
|
||
width: 0.3rem;
|
||
height: 0.7rem;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.pop_content1 {
|
||
width: 3.5rem;
|
||
height: 4.55rem;
|
||
background: url("../../assets/img/pop_bg.png") center no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
// top: 17%;
|
||
// left: 23%;
|
||
z-index: 999999;
|
||
|
||
.close_img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.p_video {
|
||
width: 90%;
|
||
height: 1.82rem;
|
||
margin: 0.1rem auto 0;
|
||
|
||
> img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
height: 0.4rem;
|
||
font-size: 0.2rem;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-weight: bold;
|
||
color: #f3fdff;
|
||
line-height: 0.4rem;
|
||
box-sizing: border-box;
|
||
padding-left: 0.2rem;
|
||
}
|
||
|
||
.line {
|
||
width: 90%;
|
||
height: 0.01rem;
|
||
background: #51d4fa;
|
||
opacity: 0.5;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.detail {
|
||
width: 100%;
|
||
height: 0.45rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
padding: 0 0.15rem;
|
||
|
||
.d_item {
|
||
height: 0.3rem;
|
||
background: rgba(81, 212, 250, 0.15);
|
||
border: 0.01rem solid rgba(106, 222, 255, 0.4);
|
||
border-radius: 0.02rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.05rem 0.05rem;
|
||
|
||
> img {
|
||
width: 0.2rem;
|
||
height: 0.2rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #d9effd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grow {
|
||
width: 2.5rem;
|
||
height: 0.3rem;
|
||
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: 0.18rem;
|
||
height: 0.18rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
> span:nth-child(3) {
|
||
font-size: 0.13rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 400;
|
||
color: #36ffd2;
|
||
}
|
||
}
|
||
|
||
.icon_item {
|
||
width: 100%;
|
||
height: calc(100% - 3.22rem);
|
||
box-sizing: border-box;
|
||
padding: 0.1rem 0.15rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
overflow: auto;
|
||
|
||
.icon_item_child {
|
||
width: 33.33%;
|
||
height: 33.33%;
|
||
display: flex;
|
||
margin-bottom: 0.05rem;
|
||
|
||
> img {
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
> span:nth-child(1) {
|
||
font-size: 0.12rem;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #86d9ff;
|
||
}
|
||
|
||
> span:nth-child(2) {
|
||
font-size: 0.15rem;
|
||
font-family: AlibabaPuHuiTiB;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|