<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.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>
                    <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">
                <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>
                  <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                </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>
                  <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="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 class="content" v-show="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">
                <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>
                  <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="getTopOrLeft11(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="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 +
                          '.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: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: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%);'
      }
    },
    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);'
      }
    },
    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|| el.id == 11))[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();
          } else if (this.limitUserId == 11) {
            this.drag_boxHandler11();
          }
        }
      });
    },

    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_boxHandler11() {
      let demo = this.$refs.drag_box11;
      demo = document.querySelector(".drag_box11"); //待拖拽元素
      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,
          .drag_box11 {
            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>
