wszhyWx/src/views/page/largeScreen1.vue

2537 lines
86 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-if="limitUserId == 1">
<div class="map">
<div class="map1">
<div class="drag_box1" ref="drag_box1">
<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>
</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>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content" :style="getTopOrLeft1_1(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 东北 -->
<div class="content" v-if="limitUserId == 2">
<div class="map">
<div class="map1">
<div class="drag_box2" ref="drag_box2">
<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:' +
(27 + index * 0.1) +
'%' +
';' +
'left:' +
(82.7 - index * 3.21) +
'%' +
';'
" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft1(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</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:' +
(57 + index * 0.2) +
'%' +
';' +
'left:' +
(80 - index * 3.95) +
'%' +
';'
" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }}#温室</span>
</div>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft2(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 石门 -->
<div class="content" v-if="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>
</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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 大冶鑫 -->
<div class="content" v-if="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>
</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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 大冶鑫 -->
<div class="content" v-if="limitUserId == 8">
<div class="map">
<div class="map1">
<div class="drag_box8" ref="drag_box8">
<img class="drag_img" src="../../assets/img/map4.png" 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>
</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>
</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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 甘井村设施农业园 -->
<div class="content" v-if="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>
</div>
</template>
</div> -->
<div class="popBox">
<div class="pole_item" style="top:40.5%;left:48.5%;z-index:1;" @click="toHttp">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>100个拱棚</span>
</div>
</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>
</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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 丽水凤鸣共富葡萄 -->
<div class="content" v-if="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">
<div class="pole_item" style="top:78.5%;left:40.5%;z-index:1;" @click="toHttp">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>泵房</span>
</div>
</div>
</div>
<div class="popBox">
<div class="pole_item" style="top:83.5%;left:53.5%;z-index:1;" @click="toHttp">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
</div>
</div>
<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>
</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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 镇海欣丰农场 -->
<div class="content" v-if="limitUserId == 11">
<div class="map">
<div class="map1">
<div class="drag_box11" ref="drag_box11">
<img class="drag_img" src="../../assets/img/map7.png" alt="" />
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template>
<div class="pole_item" :style="getTopOrLeft11(item.id)" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft11_11(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<!-- 金山吕港草莓 -->
<div class="content" v-if="limitUserId == 12">
<div class="map">
<div class="map1">
<div class="drag_box12" ref="drag_box12">
<img class="drag_img" src="../../assets/img/map8.png" alt="" />
<div class="popBox">
<div class="pole_item" style="top:33.5%;left:48.5%;z-index:1;">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制中心</span>
</div>
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template>
<div class="pole_item" :style="getTopOrLeft12(item.id)" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft12_12(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</span>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- <div class="popBox">
<div class="pole_item" style="top:37.5%;left:29.5%;z-index:1;">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制器南</span>
</div>
</div>
</div>
<div class="popBox">
<div class="pole_item" style="top:37.5%;left:70%;z-index:1;">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>控制器北</span>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<!-- 长兴前卫柑桔新优品种扩繁基地 -->
<div class="content" v-if="limitUserId == 13">
<div class="map">
<div class="map1">
<div class="drag_box13" ref="drag_box13">
<img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
<div class="popBox">
<div class="pole_item" style="top:62.5%;left:71.5%;z-index:1;">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>C1</span>
</div>
</div>
</div>
<div class="popBox">
<div class="pole_item" style="top:70.5%;left:69.5%;z-index:1;">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>C2</span>
</div>
</div>
</div>
<div class="popBox" v-for="(item, index) in popContentList" :key="index">
<template>
<div class="pole_item" :style="getTopOrLeft13(item.id)" @click="handlerPop(item.id)">
<div class="p_title">
<img src="../../assets/img/wenshi.png" alt="" />
<span>{{ item.greenhouseName }} </span>
</div>
</div>
</template>
<!-- 弹框 -->
<template>
<div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
:style="getTopOrLeft13_13(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?item1.formula:1) +
'.png')
" alt="" />
<div>
<span>{{ item1.environmentDataId }}</span>
<span>{{
item1.environmentData + getTypeList((item1.formula?item1.formula:1))
}}</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,
// 自动跳转和手动跳转切换
autoPlay: false, //false 手动切换 true 自动切换
time: "", //当前时间
typeList: this.$store.state.typeList,
limitUserId: "",
popContentList1: [],
popContentList2: [],
listNumber:[{id:1,num:6},
{id:2,num:35},
{id:4,num:6},
{id:5,num:5},
{id:7,num:7},
{id:8,num:6},
{id:9,num:9},
{id:10,num:6},
{id:11,num:1},
{id:12,num:2},
{id:13,num:12}],
};
},
mounted() {
this.login();
this.getTime();
this.typeList=this.$store.state.typeList
},
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)
);
}
}
});
},
getTopOrLeft1_1(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%);`;
}
}
}
},
getTopOrLeft2(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:81%;left:29%;z-index:8;'
} else if (id == 1) {
return 'top:65%;left:39%;z-index:7;'
} else if (id == 2) {
return 'top:53%;left:49%;z-index:6;'
} else if (id == 3) {
return 'top:38%;left:55%;z-index:5;'
} else if (id == 4) {
return 'top:30%;left:55%;z-index:4;'
} else if (id == 5) {
return 'top:22%;left:54%;z-index:3;'
} else if (id == 6) {
return 'top:14%;left:52%;z-index:2;'
} else if (id == 7) {
return 'top:9%;left:50%;z-index:1;'
}
},
getTopOrLeft8_8(id) {
if (id == 8) {
return 'top:81%;left:29%;transform: translate(54%,0%);'
} else if (id == 1) {
return 'top:65%;left:39%;transform: translate(54%,0%);'
} else if (id == 2) {
return 'top:53%;left:49%;transform: translate(54%,0%);'
} else if (id == 3) {
return 'top:38%;left:55%;transform: translate(54%,0%);'
} else if (id == 4) {
return 'top:30%;left:55%;transform: translate(54%,0%);'
} else if (id == 5) {
return 'top:22%;left:54%;transform: translate(54%,0%);'
} else if (id == 6) {
return 'top:14%;left:52%;transform: translate(54%,0%);'
} else if (id == 7) {
return 'top:9%;left:50%;transform: translate(54%,0%);'
}
},
getTopOrLeft9(id) {
if (id == 1) {
return 'top:23.5%;left:21%;z-index:10;'
} else if (id == 2) {
return 'top:63%;left:28%;z-index:9;'
} else if (id == 3) {
return 'top:23%;left:55%;z-index:8;'
} else if (id == 4) {
return 'top:34%;left:57%;z-index:7;'
} else if (id == 5) {
return 'top:13.5%;left:59.5%;z-index:6;'
} else if (id == 6) {
return 'top:15.5%;left:61%;z-index:5;'
} else if (id == 7) {
return 'top:10%;left:61.6%;z-index:4;'
} else if (id == 8) {
return 'top:12.5%;left:63.5%;z-index:3;'
} else if (id == 9) {
return 'top:7%;left:63%;z-index:2;'
} else if (id == 10) {
return 'top:10%;left:65.5%;z-index:1;'
}
},
getTopOrLeft9_9(id) {
if (id == 1) {
return 'top:23.5%;left:21%;transform: translate(30%,0);'
} else if (id == 2) {
return 'top:63%;left:28%;transform: translate(30%,0);'
} else if (id == 3) {
return 'top:23%;left:55%;transform: translate(30%,0);'
} else if (id == 4) {
return 'top:34%;left:57%;transform: translate(30%,0%);'
} else if (id == 5) {
return 'top:13.5%;left:59.5%;transform: translate(30%,0%);'
} else if (id == 6) {
return 'top:15.5%;left:61%;transform: translate(30%,0%);'
} else if (id == 7) {
return 'top:10%;left:61.6%;transform: translate(30%,0%);'
} else if (id == 8) {
return 'top:12.5%;left:63.5%;transform: translate(30%,0);'
} else if (id == 9) {
return 'top:7%;left:63%;transform: translate(30%,0);'
} else if (id == 10) {
return 'top:10%;left:65.5%;transform: translate(30%,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%);'
}
},
getTopOrLeft11(id) {
if (id == 1) {
return 'top:14.5%;left:41%;z-index:10;'
}
},
getTopOrLeft11_11(id) {
if (id == 1) {
return 'top:14.5%;left:41%;transform: translate(54%,0);'
}
},
getTopOrLeft12(id) {
if (id == 1) {
return 'top:37.5%;left:29.5%;z-index:10;'
} else if (id == 2) {
return 'top:37.5%;left:70%;z-index:9;'
}
},
getTopOrLeft12_12(id) {
if (id == 1) {
return 'top:37.5%;left:26.5%;transform: translate(54%,0);'
} else if (id == 2) {
return 'top:37.5%;left:67%;transform: translate(54%,0);'
}
},
getTopOrLeft13(id) {
if (id == 1) {
return 'top:50%;left:57%;z-index:5;'
}else if (id == 2) {
return 'top:43%;left:58%;z-index:4;'
}else if (id == 3) {
return 'top:36%;left:59%;z-index:3;'
}else if (id == 4) {
return 'top:29%;left:60%;z-index:2;'
}else if (id == 5) {
return 'top:21%;left:61%;z-index:1;'
} else if (id == 6) {
return 'top:10%;left:43.5%;z-index:12;'
} else if (id == 7) {
return 'top:11%;left:34.5%;z-index:11;'
} else if (id == 8) {
return 'top:12%;left:26%;z-index:10;'
} else if (id == 9) {
return 'top:24%;left:35%;z-index:9;'
} else if (id == 10) {
return 'top:25%;left:27%;z-index:8;'
} else if (id == 11) {
return 'top:39%;left:38.5%;z-index:7;'
} else if (id == 12) {
return 'top:40%;left:30.5%;z-index:6;'
}
},
getTopOrLeft13_13(id) {
if (id == 1) {
return 'top:50%;left:54%;transform: translate(54%,0);'
} else if (id == 2) {
return 'top:43%;left:55%;transform: translate(54%,0);'
} else if (id == 3) {
return 'top:36%;left:56%;transform: translate(54%,0);'
} else if (id == 4) {
return 'top:29%;left:57%;transform: translate(54%,0);'
} else if (id == 5) {
return 'top:21%;left:58%;transform: translate(54%,0);'
}else if (id == 6) {
return 'top:10%;left:40.5%;transform: translate(54%,0);'
} else if (id == 7) {
return 'top:11%;left:31.5%;transform: translate(54%,0);'
} else if (id == 8) {
return 'top:12%;left:23%;transform: translate(54%,0);'
} else if (id == 9) {
return 'top:24%;left:32%;transform: translate(54%,0);'
} else if (id == 10) {
return 'top:25%;left:24%;transform: translate(54%,0);'
} else if (id == 11) {
return 'top:39%;left:35.5%;transform: translate(54%,0);'
} else if (id == 12) {
return 'top:40%;left:27.5%;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));
var num=this.listNumber.find(item => item.id == that.limitUserId).num
clearInterval(this.timer2) && this.timer2;
var maxNum=num?num:0
this.timer2 = setInterval(() => {
that.popContentCurrent++;
if (that.popContentCurrent > maxNum) {
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);
},
// 获取用户id权限
get_user_getjurisdiction(userId) {
let that = this;
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 || el.id == 11 || el.id == 12|| el.id == 13))[0].id;
setTimeout(() => {
this.drag_boxHandler(this.limitUserId);
}, 0);
this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
if (this.autoPlay) {
clearInterval(this.timer2) && this.timer2;
console.log(this.limitUserId);
var num=this.listNumber.find(item => item.id == that.limitUserId).num
var maxNum=num?num:0
this.timer2 = setInterval(() => {
that.popContentCurrent++;
if (that.popContentCurrent > maxNum) {
that.popContentCurrent = 1;
}
console.log( that.popContentCurrent);
}, 3000);
}
// 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();
// } else if (this.limitUserId == 11) {
// this.drag_boxHandler11();
// } else if (this.limitUserId == 12) {
// this.drag_boxHandler12();
// }else if (this.limitUserId == 13) {
// this.drag_boxHandler13();
// }
}
});
},
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;
},
handlerPop(id) {
this.popContentCurrent = id;
},
toBack() {
this.$router.push({ path: "/largeScreen" });
},
drag_boxHandler(id) {
let demo = this.$refs[`drag_box${id}`];
demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
let scale = 1; // 初始缩放比例
// 只保留滚轮缩放功能
demo.onwheel = function(e) {
e.preventDefault(); // 阻止默认滚动行为
if (e.deltaY < 0) { // 向上滚动,放大
scale += 0.05;
if (scale > 4) {
scale = 4; // 最大放大4倍
}
} else { // 向下滚动,缩小
scale -= 0.05;
if (scale < 0.5) {
scale = 0.5; // 最小缩小到0.5倍
}
}
demo.style.transform = `translate(-50%,-50%) scale(${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 96%,
transparent 100%);
overflow: hidden;
position: absolute;
.drag_box2 {
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-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 4%,
blue 96%,
transparent 100%);
}
.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;
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_box1 {
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 4%,
blue 96%,
transparent 100%);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 4%,
blue 96%,
transparent 100%);
}
.pole_item_4 {
position: absolute;
top: 43%;
left: 42%;
}
.pole_item {
width: 1.45rem;
height: 0.44rem;
transform: translate(0,200%);
.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;
>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: 3.5rem;
height: 5.05rem;
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_box7,
.drag_box8,
.drag_box9,
.drag_box10,
.drag_box11,
.drag_box12,
.drag_box13 {
width: 100%;
height:auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
blue 2%,
blue 97%,
transparent 100%
);
.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;
cursor: pointer;
transform: translate(-10%,300%);
.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.8rem;
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;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%,
blue 5%,
blue 93%,
transparent 100%);
.drag_img {
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(transparent 0%,
blue 4%,
blue 96%,
transparent 100%);
}
.pole_item {
height: 0.22rem;
position: absolute;
top: 21%;
left: 5%;
transform: translate(-10%,200%);
.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;
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>