<template>
  <div class="about">
    <div class="kuang">
      <div class="title"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>

      <div class="yuan" @click="toBack">
        <img src="../../assets/img/small.png" alt="" />
      </div>
      <div class="auto_play">
        <span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
        <span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
      </div>
      <div class="calendar">
        <img src="../../assets/img/calendar.png" alt="" />
        <span>{{ getNowTime() }}</span>
        <span class="line"></span>
        <span>{{ time.week }}</span>
        <span class="line"></span>
        <span>{{ time.time }}</span>
      </div>
      <!-- 丽水 -->
      <div class="content" v-if="limitUserId == 1">
        <div class="map">
          <div class="map1">
            <div class="drag_box1" ref="drag_box1">
              <img class="drag_img" src="../../assets/img/map.png" alt="" />
            <div class="pole_item pole_item_4">
                <div class="p_title">
                  <img src="../../assets/img/wenshi.png" alt="" />
                  <span>控制中心</span>
                </div>
              </div>
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getNamePosition(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}温室</span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content" :style="getTopOrLeft1_1(item.id)"
                    v-show="popContentCurrent == item.id ? true : false">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">温室{{ item.greenhouseName }}#</div>
                    <div class="line"></div>
                    <div class="detail">
                      <!-- <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>面积：{{ item.greenhouseArea }}㎡</span>
                      </div> -->
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.2rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <!-- <img :src="item.formula" alt=""> -->
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 东北 -->
      <div class="content" v-if="limitUserId == 2">
        <div class="map">
          <div class="map1">
            <div class="drag_box2" ref="drag_box2">
              <img class="drag_img" src="../../assets/img/map1.png" alt="" />
              <div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
                <template>
                  <div class="pole_item" :style="'top:' +
                    (27 + index * 0.1) +
                    '%' +
                    ';' +
                    'left:' +
                    (82.7 - index * 3.21) +
                    '%' +
                    ';'
                    " @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}#温室</span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft1(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>

              <div class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
                <template>
                  <div class="pole_item_1" :style="'top:' +
                    (57 + index * 0.2) +
                    '%' +
                    ';' +
                    'left:' +
                    (80 - index * 3.95) +
                    '%' +
                    ';'
                    " @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}#温室</span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft2(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 石门 -->
      <div class="content" v-if="limitUserId == 5">
        <div class="map">
          <div class="map1">
            <div class="drag_box5" ref="drag_box5">
              <img class="drag_img" src="../../assets/img/map2.png" alt="" />
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft5(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}#温室</span>
                    </div>
                    
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft55(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 大冶鑫 -->
      <div class="content" v-if="limitUserId == 7">
        <div class="map">
          <div class="map1">
            <div class="drag_box7" ref="drag_box7">
              <img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft7(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}#温室</span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft77(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 大冶鑫 -->
      <div class="content" v-if="limitUserId == 8">
        <div class="map">
          <div class="map1">
            <div class="drag_box8" ref="drag_box8">
              <img class="drag_img" src="../../assets/img/map4.png" alt="" />
              <div class="popBox">
                <template>
                  <div class="pole_item" :style="getTopOrLeft8(8)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>泵房</span>
                    </div>
                  </div>
                </template>
              </div>
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft8(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }}#温室</span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft8_8(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 甘井村设施农业园 -->
      <div class="content" v-if="limitUserId == 9">
        <div class="map">
          <div class="map1">
            <div class="drag_box9" ref="drag_box9">
              <img class="drag_img" src="../../assets/img/map5.png" alt="" />
              <!-- <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft9(9)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>泵房</span>
                    </div>
                    
                  </div>
                </template>
              </div> -->
              <div class="popBox">
                <div class="pole_item" style="top:40.5%;left:48.5%;z-index:1;" @click="toHttp">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>100个拱棚</span>
                  </div>
                </div>
              </div>
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft9(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }} </span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft9_9(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 丽水凤鸣共富葡萄 -->
      <div class="content" v-if="limitUserId == 10">
        <div class="map">
          <div class="map1">
            <div class="drag_box10" ref="drag_box10">
              <img class="drag_img" src="../../assets/img/map6.jpg" alt="" />
              <div class="popBox">
                <div class="pole_item" style="top:78.5%;left:40.5%;z-index:1;" @click="toHttp">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>泵房</span>
                  </div>
                </div>
              </div>
              <div class="popBox">
                <div class="pole_item" style="top:83.5%;left:53.5%;z-index:1;" @click="toHttp">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>控制中心</span>
                  </div>
                </div>
              </div>
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft10(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }} </span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft10_10(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 镇海欣丰农场 -->
      <div class="content" v-if="limitUserId == 11">
        <div class="map">
          <div class="map1">
            <div class="drag_box11" ref="drag_box11">
              <img class="drag_img" src="../../assets/img/map7.png" alt="" />
          

              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft11(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }} </span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft11_11(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 金山吕港草莓 -->
      <div class="content" v-if="limitUserId == 12">
        <div class="map">
          <div class="map1">
            <div class="drag_box12" ref="drag_box12">
              <img class="drag_img" src="../../assets/img/map8.png" alt="" />
               <div class="popBox">
                <div class="pole_item" style="top:33.5%;left:48.5%;z-index:1;">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>控制中心</span>
                  </div>
                </div>
              </div>
                         <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft12(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }} </span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft12_12(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <!-- <div class="popBox">
                <div class="pole_item" style="top:37.5%;left:29.5%;z-index:1;">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>控制器南</span>
                  </div>
                </div>
              </div>
             
              <div class="popBox">
                <div class="pole_item" style="top:37.5%;left:70%;z-index:1;">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>控制器北</span>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
        <!-- 长兴前卫柑桔新优品种扩繁基地 -->
      <div class="content" v-if="limitUserId == 13">
        <div class="map">
          <div class="map1">
            <div class="drag_box13" ref="drag_box13">
              <img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
               <div class="popBox">
                <div class="pole_item" style="top:62.5%;left:71.5%;z-index:1;">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>C1</span>
                  </div>
                </div>
              </div>
               <div class="popBox">
                <div class="pole_item" style="top:70.5%;left:69.5%;z-index:1;">
                  <div class="p_title">
                    <img src="../../assets/img/wenshi.png" alt="" />
                    <span>C2</span>
                  </div>
                </div>
              </div>
              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
                <template>
                  <div class="pole_item" :style="getTopOrLeft13(item.id)" @click="handlerPop(item.id)">
                    <div class="p_title">
                      <img src="../../assets/img/wenshi.png" alt="" />
                      <span>{{ item.greenhouseName }} </span>
                    </div>
                  </div>
                </template>

                <!-- 弹框 -->
                <template>
                  <div class="pop_content1" v-show="popContentCurrent == item.id ? true : false"
                    :style="getTopOrLeft13_13(item.id)">
                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
                    <div class="p_video">
                      <img :src="item.greenhouseImage" alt="" />
                    </div>
                    <div class="text">{{ item.greenhouseName }}</div>
                    <div class="line"></div>
                    <div class="detail">
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>品种：{{ item.greenhouseVariety }}</span>
                      </div>
                      <div class="d_item">
                        <img src="../../assets/img/detail_img.png" alt="" />
                        <span>数量：{{ item.greenhouseNums }}株</span>
                      </div>
                    </div>
                    <div class="grow">
                      <img src="../../assets/img/grow_img.png" alt="" />
                      <span>生长阶段：</span>
                      <span>{{ item.growthStageName }}</span>
                    </div>
                    <div class="line" style="margin-top: 0.06rem"></div>
                    <div class="icon_item scroll">
                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
                        <img :src="require('../../assets/image/real-time-' +
                          (item1.formula?item1.formula:1) +
                          '.png')
                          " alt="" />
                        <div>
                          <span>{{ item1.environmentDataId }}</span>
                          <span>{{
                            item1.environmentData + getTypeList((item1.formula?item1.formula:1))
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
       
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getnowtime } from "../../assets/js/nowTime";
export default {
  name: "largeScreen1",
  data() {
    return {
      dialogVisible: false,
      timer: "",
      timer1: "",
      timer2: "",
      list: [
        {
          img: require("../../assets/img/icon_1.png"),
          name: "空气温度",
          data: "29.6℃",
        },
        {
          img: require("../../assets/img/icon_2.png"),
          name: "空气湿度",
          data: "18.5%",
        },
        {
          img: require("../../assets/img/icon_3.png"),
          name: "光亮度",
          data: "38.8klux",
        },
        {
          img: require("../../assets/img/icon_4.png"),
          name: "二氧化碳",
          data: "600PPM",
        },
        {
          img: require("../../assets/img/icon_5.png"),
          name: "土壤温度",
          data: "29.0℃",
        },
        {
          img: require("../../assets/img/icon_6.png"),
          name: "土壤湿度",
          data: "18.5%",
        },
      ],
      top_: 2,
      left_: 2,

      popContentList: [],
      popContentCurrent: 1,

      // 自动跳转和手动跳转切换
      autoPlay: false, //false 手动切换   true 自动切换

      time: "", //当前时间

      typeList: this.$store.state.typeList,

      limitUserId: "",
      popContentList1: [],
      popContentList2: [],
      listNumber:[{id:1,num:6},
      {id:2,num:35},
      {id:4,num:6},
      {id:5,num:5},
      {id:7,num:7},
      {id:8,num:6},
      {id:9,num:9},
      {id:10,num:6},
      {id:11,num:1},
      {id:12,num:2},
      {id:13,num:12}],
    };
  },
  mounted() {
    this.login();

    this.getTime();
  this.typeList=this.$store.state.typeList

  },
  beforeDestroy() {
    clearInterval(this.timer2) && this.timer2;
  },
  methods: {
    // 根据用户id查询对应的设备大数据信息
    dataInit(userid) {
      this.api.Bigdata_getAllControl(userid).then((res) => {
        // console.log("根据用户id查询对应的设备大数据信息", res);
        this.popContentList = res.data.data;
        this.popContentList = this.popContentList.map((item) => {
          return {
            ...item,
            childList: [],
          };
        });
        this.popContentList.forEach((el) => {
          // 获取控制器实时数据
          this.api.getcontrol_rtdata(el.deviceId).then((res1) => {
            // console.log('获取控制器实时数据', res1);
            if (res1.data.code == 200) {
              el.childList = res1.data.data;
            }
          });
        });
        // console.log(this.popContentList, "12121212");
        if (this.limitUserId == 2) {
          this.popContentList1 = this.popContentList.slice(0, 24);
          // this.popContentList2 = this.popContentList.slice(-10)
          if (this.popContentList.length > 24) {
            this.popContentList2 = this.popContentList.slice(
              -(this.popContentList.length - 24)
            );
          }
        }
      });
    },

    getTopOrLeft1_1(id) {
    if (id == 2) {
        return "top:46%;left:46%;transform: translate(-50%,-50%);";
      } else if (id == 5) {
        return "top:53%;left:47%;transform: translate(-50%,-50%);";
      } else if (id == 6) {
        return "top:46%;left:51%;transform: translate(-50%,-50%);";
      } else if (id == 4) {
        return "top:50%;left:62%;transform: translate(-50%,-50%);";
      } else if (id == 3) {
        return "top:50%;left:62%;transform: translate(-50%,-50%);";
      } else if (id == 1) {
        return "top:50%;left:35%;transform: translate(-50%,-50%);";
      }
    },

    getTopOrLeft1(id) {
      for (let i = 0; i < 25; i++) {
        if (id == i + 1) {
          if (i < 20) {
            return `top:40%;left:${74 - i * 3 < 15 ? 15 : 74 - i * 3
              }%;transform: translate(-50%,-50%);`;
          } else {
            return `top:40%;left:${74 - i * 3 < 15 ? 15 + (i - 20) * 3 : 74 - i * 3
              }%;transform: translate(-50%,-50%);`;
          }
        }
      }
    },

    getTopOrLeft2(id) {
      for (let i = 0; i < 10; i++) {
        if (id == i + 25)
          return `top:65%;left:${71 - i * 4}%;transform: translate(-50%,-50%);`;
      }
    },

    getTopOrLeft5(id) {
      if (id == 1) {
        return 'top:50%;left:9%'
      } else if (id == 2) {
        return 'top:47%;left:16%'
      } else if (id == 3) {
        return 'top:49%;left:18%'
      } else if (id == 4) {
        return 'top:51%;left:20%'
      } else if (id == 5) {
        return 'top:53%;left:22%'
      }
    },

    getTopOrLeft55(id) {
      if (id == 1) {
        return `top:53%;left:21%;transform: translate(-50%,-50%);`;
      }
      for (let i = 0; i < 4; i++) {
        if (id == i + 1) {
          return `top:${46 + (i - 1) * 2}%;left:${28 + (i - 1) * 2}%;transform: translate(-50%,-50%);`;
        }
      }
    },
    getTopOrLeft7(id) {
      if (id == 1) {
        return 'top:34%;left:62%'
      } else if (id == 2) {
        return 'top:19%;left:64%'
      } else if (id == 3) {
        return 'top:19%;left:50%'
      } else if (id == 4) {
        return 'top:52%;left:22%'
      } else if (id == 5) {
        return 'top:34%;left:25%'
      } else if (id == 6) {
        return 'top:52%;left:64%'
      }
    },

    getTopOrLeft77(id) {

      if (id == 1) {
        return 'top:34%;left:62%;transform: translate(54%,-50%);'
      } else if (id == 2) {
        return 'top:19%;left:64%;transform: translate(54%,0%);'
      } else if (id == 3) {
        return 'top:19%;left:50%;transform: translate(54%,0%);'
      } else if (id == 4) {
        return 'top:52%;left:22%;transform: translate(54%,-50%);'
      } else if (id == 5) {
        return 'top:34%;left:25%;transform: translate(54%,-50%);'
      } else if (id == 6) {
        return 'top:52%;left:64%;transform: translate(54%,-50%);'
      }
    },
    getTopOrLeft8(id) {
      if (id == 8) {
        return 'top:81%;left:29%;z-index:8;'
      } else if (id == 1) {
        return 'top:65%;left:39%;z-index:7;'
      } else if (id == 2) {
        return 'top:53%;left:49%;z-index:6;'
      } else if (id == 3) {
        return 'top:38%;left:55%;z-index:5;'
      } else if (id == 4) {
        return 'top:30%;left:55%;z-index:4;'
      } else if (id == 5) {
        return 'top:22%;left:54%;z-index:3;'
      } else if (id == 6) {
        return 'top:14%;left:52%;z-index:2;'
      } else if (id == 7) {
        return 'top:9%;left:50%;z-index:1;'
      }
    },
    getTopOrLeft8_8(id) {
      if (id == 8) {
        return 'top:81%;left:29%;transform: translate(54%,0%);'
      } else if (id == 1) {
        return 'top:65%;left:39%;transform: translate(54%,0%);'
      } else if (id == 2) {
        return 'top:53%;left:49%;transform: translate(54%,0%);'
      } else if (id == 3) {
        return 'top:38%;left:55%;transform: translate(54%,0%);'
      } else if (id == 4) {
        return 'top:30%;left:55%;transform: translate(54%,0%);'
      } else if (id == 5) {
        return 'top:22%;left:54%;transform: translate(54%,0%);'
      } else if (id == 6) {
        return 'top:14%;left:52%;transform: translate(54%,0%);'
      } else if (id == 7) {
        return 'top:9%;left:50%;transform: translate(54%,0%);'
      }
    },
    getTopOrLeft9(id) {
      if (id == 1) {
        return 'top:23.5%;left:21%;z-index:10;'
      } else if (id == 2) {
        return 'top:63%;left:28%;z-index:9;'
      } else if (id == 3) {
        return 'top:23%;left:55%;z-index:8;'
      } else if (id == 4) {
        return 'top:34%;left:57%;z-index:7;'
      } else if (id == 5) {
        return 'top:13.5%;left:59.5%;z-index:6;'
      } else if (id == 6) {
        return 'top:15.5%;left:61%;z-index:5;'
      } else if (id == 7) {
        return 'top:10%;left:61.6%;z-index:4;'
      } else if (id == 8) {
        return 'top:12.5%;left:63.5%;z-index:3;'
      } else if (id == 9) {
        return 'top:7%;left:63%;z-index:2;'
      } else if (id == 10) {
        return 'top:10%;left:65.5%;z-index:1;'
      }
    },
    getTopOrLeft9_9(id) {
      if (id == 1) {
        return 'top:23.5%;left:21%;transform: translate(30%,0);'
      } else if (id == 2) {
        return 'top:63%;left:28%;transform: translate(30%,0);'
      } else if (id == 3) {
        return 'top:23%;left:55%;transform: translate(30%,0);'
      } else if (id == 4) {
        return 'top:34%;left:57%;transform: translate(30%,0%);'
      } else if (id == 5) {
        return 'top:13.5%;left:59.5%;transform: translate(30%,0%);'
      } else if (id == 6) {
        return 'top:15.5%;left:61%;transform: translate(30%,0%);'
      } else if (id == 7) {
        return 'top:10%;left:61.6%;transform: translate(30%,0%);'
      } else if (id == 8) {
        return 'top:12.5%;left:63.5%;transform: translate(30%,0);'
      } else if (id == 9) {
        return 'top:7%;left:63%;transform: translate(30%,0);'
      } else if (id == 10) {
        return 'top:10%;left:65.5%;transform: translate(30%,0);'
      }
    },

    getTopOrLeft10(id) {
      if (id == 1) {
        return 'top:12.5%;left:43%;z-index:10;'
      } else if (id == 2) {
        return 'top:12.5%;left:53%;z-index:9;'
      } else if (id == 3) {
        return 'top:45%;left:43%;z-index:8;'
      } else if (id == 4) {
        return 'top:45%;left:54%;z-index:7;'
      } else if (id == 5) {
        return 'top:68%;left:43%;z-index:6;'
      } else if (id == 6) {
        return 'top:68%;left:54%;z-index:5;'
      }
    },
    getTopOrLeft10_10(id) {
      if (id == 1) {
        return 'top:12.5%;left:43%;transform: translate(54%,0);'
      } else if (id == 2) {
        return 'top:12.5%;left:53%;transform: translate(54%,0);'
      } else if (id == 3) {
        return 'top:45%;left:43%;transform: translate(54%,0);'
      } else if (id == 4) {
        return 'top:45%;left:54%;transform: translate(54%,0%);'
      } else if (id == 5) {
        return 'top:68%;left:43%;transform: translate(54%,0%);'
      } else if (id == 6) {
        return 'top:68%;left:54%;transform: translate(54%,0%);'
      }
    },
    getTopOrLeft11(id) {
      if (id == 1) {
        return 'top:14.5%;left:41%;z-index:10;'
      }
    },
    getTopOrLeft11_11(id) {
      if (id == 1) {
        return 'top:14.5%;left:41%;transform: translate(54%,0);'
      }
    },
     getTopOrLeft12(id) {
      if (id == 1) {
        return 'top:37.5%;left:29.5%;z-index:10;'
      } else if (id == 2) {
        return 'top:37.5%;left:70%;z-index:9;'
      }
    },
    getTopOrLeft12_12(id) {
      if (id == 1) {
        return 'top:37.5%;left:26.5%;transform: translate(54%,0);'
      } else if (id == 2) {
        return 'top:37.5%;left:67%;transform: translate(54%,0);'
      }
    },
         getTopOrLeft13(id) {
       if (id == 1) {
        return 'top:50%;left:57%;z-index:5;'
      }else if (id == 2) {
        return 'top:43%;left:58%;z-index:4;'
      }else if (id == 3) {
        return 'top:36%;left:59%;z-index:3;'
      }else if (id == 4) {
        return 'top:29%;left:60%;z-index:2;'
      }else if (id == 5) {
        return 'top:21%;left:61%;z-index:1;'
      } else if (id == 6) {
        return 'top:10%;left:43.5%;z-index:12;'
      } else if (id == 7) {
        return 'top:11%;left:34.5%;z-index:11;'
      } else if (id == 8) {
        return 'top:12%;left:26%;z-index:10;'
      } else if (id == 9) {
        return 'top:24%;left:35%;z-index:9;'
      } else if (id == 10) {
        return 'top:25%;left:27%;z-index:8;'
      } else if (id == 11) {
        return 'top:39%;left:38.5%;z-index:7;'
      } else if (id == 12) {
        return 'top:40%;left:30.5%;z-index:6;'
      }
    },
    getTopOrLeft13_13(id) {
       if (id == 1) {
        return 'top:50%;left:54%;transform: translate(54%,0);'
      } else if (id == 2) {
        return 'top:43%;left:55%;transform: translate(54%,0);'
      } else if (id == 3) {
        return 'top:36%;left:56%;transform: translate(54%,0);'
      } else if (id == 4) {
        return 'top:29%;left:57%;transform: translate(54%,0);'
      } else if (id == 5) {
        return 'top:21%;left:58%;transform: translate(54%,0);'
      }else if (id == 6) {
        return 'top:10%;left:40.5%;transform: translate(54%,0);'
      } else if (id == 7) {
        return 'top:11%;left:31.5%;transform: translate(54%,0);'
      } else if (id == 8) {
        return 'top:12%;left:23%;transform: translate(54%,0);'
      } else if (id == 9) {
        return 'top:24%;left:32%;transform: translate(54%,0);'
      } else if (id == 10) {
        return 'top:25%;left:24%;transform: translate(54%,0);'
      } else if (id == 11) {
        return 'top:39%;left:35.5%;transform: translate(54%,0);'
      } else if (id == 12) {
        return 'top:40%;left:27.5%;transform: translate(54%,0);'
      }
    },
 getNamePosition(id) {
      if (id == 1) {
        return "position: absolute;top: 41%;left: 13%;";
      } else if (id == 2) {
        return "position: absolute;top: 10%;left: 24%;";
      } else if (id == 3) {
        return "position: absolute;top: 22%;left: 40%;";
      } else if (id == 4) {
        return "position: absolute;top: 29%;left: 76%;";
      } else if (id == 5) {
        return "position: absolute;top: 61%;left: 62%;";
      } else if (id == 6) {
        return "position: absolute;top: 1%;left: 62%;";
      }
    },


    autoPlay1() {
      let that = this;
      this.autoPlay = false;
      clearInterval(that.timer2) && this.timer2;
      localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
    },
    autoPlay2() {
      let that = this;
      this.autoPlay = true;
      localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
      var num=this.listNumber.find(item => item.id == that.limitUserId).num
       clearInterval(this.timer2) && this.timer2;
      var maxNum=num?num:0
      this.timer2 = setInterval(() => {
          that.popContentCurrent++;
          if (that.popContentCurrent > maxNum) {
            that.popContentCurrent = 1;
          }
      }, 3000);
    },

    // 数据单位
    getTypeList(val) {
      let typeList1 = [];
      typeList1 = this.typeList.filter((item) => {
        return item.value == val;
      });
      return typeList1[0].unit;
    },

    // 获取本地的userid和token
    login() {
      // var data = {
      //   "username": "lsjskymdp",
      //   "password": "lihemix888"
      // }
      // this.api.login(data).then(res => {
      //   // console.log('信息', res);

      //   if (res.status == 200) {
      //     localStorage.setItem('token', res.data.data.token)
      //     localStorage.setItem('userid', res.data.data.userid)
      //     // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
      //     this.dataInit(res.data.data.userid)
      //   }

      // })
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));

      // 获取用户id权限
      this.get_user_getjurisdiction(userInfo.userid);

      this.dataInit(userInfo.userid);

   
    },

    // 获取用户id权限
    get_user_getjurisdiction(userId) {
            let that = this;
      this.api.user_getjurisdiction(userId).then((res) => {
        if (res.data.code == 200) {
          this.limitUserId = (res.data.data.filter(el => el.id == 1 || el.id == 2 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11 || el.id == 12|| el.id == 13))[0].id;
       setTimeout(() => {
          this.drag_boxHandler(this.limitUserId);
       }, 0);
    
      this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
      if (this.autoPlay)  {
         clearInterval(this.timer2) && this.timer2;
         console.log(this.limitUserId);
          var num=this.listNumber.find(item => item.id == that.limitUserId).num
      var maxNum=num?num:0
      this.timer2 = setInterval(() => {
          that.popContentCurrent++;
          if (that.popContentCurrent > maxNum) {
            that.popContentCurrent = 1;
          }
          console.log( that.popContentCurrent);
      }, 3000);
     
      }
         // if (this.limitUserId == 1) {
            //  this.drag_boxHandler();
          // } else if (this.limitUserId == 2) {
          //   this.drag_boxHandler1();
          // } else if (this.limitUserId == 5) {
          //   this.drag_boxHandler5();
          // } else if (this.limitUserId == 7) {
          //   this.drag_boxHandler7();
          // } else if (this.limitUserId == 8) {
          //   this.drag_boxHandler8();
          // } else if (this.limitUserId == 9) {
          //   this.drag_boxHandler9();
          // } else if (this.limitUserId == 10) {
          //   this.drag_boxHandler10();
          // } else if (this.limitUserId == 11) {
          //   this.drag_boxHandler11();
          // } else if (this.limitUserId == 12) {
          //   this.drag_boxHandler12();
          // }else if (this.limitUserId == 13) {
          //   this.drag_boxHandler13();
          // }
        }
      });
    },

    getTime() {
      this.time = getnowtime();
      // console.log(this.time);
      const that = this;
      setInterval(() => {
        that.time = getnowtime();
      }, 1000);
    },
    toHttp() {
      window.open('https://wlw.hx3n.com/datav/indexinfo.do', '_blank');
    },
    getNowTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const formattedDate = `${year}.${month}.${day}`;
      return formattedDate;
    },

    cancelHandler() {
      this.popContentCurrent = -1;
      let that = this;
      clearInterval(that.timer2) && this.timer2;
    },


    handlerPop(id) {
      this.popContentCurrent = id;
    },



    toBack() {
      this.$router.push({ path: "/largeScreen" });
    },

    drag_boxHandler(id) {
      let demo = this.$refs[`drag_box${id}`];
      demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
   let scale = 1; // 初始缩放比例

// 只保留滚轮缩放功能
demo.onwheel = function(e) {
  e.preventDefault(); // 阻止默认滚动行为
  
  if (e.deltaY < 0) { // 向上滚动，放大
    scale += 0.05;
    if (scale > 4) {
      scale = 4; // 最大放大4倍
    }
  } else { // 向下滚动，缩小
    scale -= 0.05;
    if (scale < 0.5) {
      scale = 0.5; // 最小缩小到0.5倍
    }
  }
  
  demo.style.transform = `translate(-50%,-50%) scale(${scale})`;
}
    }
  }
};
</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/bg.png") center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-bottom: 0.1rem;

  .kuang {
    width: 100%;
    height: 100%;
    background: url("../../assets/img/kuang.png") center no-repeat;
    background-size: 100% 100%;
    position: relative;

    .title {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding-top: 0.06rem;
      font-size: 0.54rem;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #eff8fc;
      line-height: 0.54rem;
      opacity: 0.89;
      text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);

      background: linear-gradient(to bottom,
          #ffffff 45%,
          #e9f8ff 90%,
          #77baff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
    }

    .auto_play {
      height: 0.56rem;
      position: absolute;
      top: 0.53rem;
      left: 1.4rem;
      z-index: 99999999;
      display: flex;
      align-items: center;

      >span {
        width: 0.8rem;
        height: 0.3rem;
        background: rgba(14, 91, 165, 0.1);
        border: 1px solid rgba(97, 152, 209, 0.65);
        margin-right: 0.1rem;
        font-size: 0.18rem;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #70d0ee;
        text-align: center;
        line-height: 0.3rem;
        cursor: pointer;
      }

      .act {
        background: linear-gradient(-35deg,
            #56a8d5 0%,
            rgba(0, 55, 110, 0.75) 50%,
            #56a8d5 100%);
        border: 1px solid rgba(122, 225, 255, 0.75);
        font-size: 0.18rem;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #fff;
      }
    }

    .yuan {
      width: 0.56rem;
      height: 0.56rem;
      background: url("../../assets/img/yuan_bg.png") center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0.53rem;
      left: 0.71rem;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;

      >img {
        width: 0.2rem;
        height: 0.2rem;
      }
    }

    .calendar {
      width: 4rem;
      height: 0.3rem;
      position: absolute;
      top: 0.63rem;
      right: 0.66rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      >img {
        width: 0.28rem;
        height: 0.3rem;
      }

      >span:nth-child(2) {
        font-size: 0.24rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      >span:nth-child(4) {
        font-size: 0.2rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      >span:nth-child(6) {
        font-size: 0.3rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #7abaff;
      }

      .line {
        width: 0.02rem;
        height: 0.3rem;
        background: #ffffff;
        opacity: 0.2;
      }
    }

    .content {
      width: 100%;
      height: calc(100% - 0.6rem);

      .map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        -webkit-mask-image: linear-gradient(90deg,
            transparent 0%,
            blue 7%,
            blue 87%,
            transparent 97%);

        .map1 {
          width: 100%;
          height: 100%;
          // background: url('../assets/img/map.png') center no-repeat;
          // background-size: 100% 100%;
          -webkit-mask-image: linear-gradient(transparent 4%,
              blue 15%,
              blue 96%,
              transparent 100%);
          overflow: hidden;
          position: absolute;

          .drag_box2 {
            width: 100%;
            height: 100%;
            position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
            -webkit-mask-image: linear-gradient(90deg,
                transparent 0%,
                blue 5%,
                blue 93%,
                transparent 99%);

            .drag_img {
              width: 100%;
              height: 100%;
              -webkit-mask-image: linear-gradient(transparent 0%,
                  blue 4%,
                  blue 96%,
                  transparent 100%);
            }

            .pole_item,
            .pole_item_1 {
              width: 0.5rem;
              height: 0.22rem;
              position: absolute;
              top: 21%;
              left: 5%;

              .p_title {
                // width: 0.5rem;
                height: 0.22rem;
                background: rgba(1, 12, 28, 0.7);
                border-radius: 12px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0.04rem;
                overflow: hidden;
                white-space: nowrap;

                >img {
                  width: 0.1rem;
                  height: 0.1rem;
                  margin-right: 0.05rem;
                }

                >span {
                  font-size: 0.1rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                  flex: 1;
                }
              }

              .pole1 {
                width: 0.3rem;
                height: 0.7rem;
                position: absolute;
                right: 0;
              }
            }

            .pop_content1 {
              width: 3.5rem;
              height: 4.55rem;
              background: url("../../assets/img/pop_bg.png") center no-repeat;
              background-size: 100% 100%;
              overflow: hidden;
              position: absolute;
              // top: 17%;
              // left: 23%;
              z-index: 999999;

              .close_img {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 0;
                right: 0;
              }

              .p_video {
                width: 90%;
                height: 1.82rem;
                margin: 0.1rem auto 0;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }

              .text {
                width: 100%;
                height: 0.4rem;
                font-size: 0.2rem;
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: bold;
                color: #f3fdff;
                line-height: 0.4rem;
                box-sizing: border-box;
                padding-left: 0.2rem;
              }

              .line {
                width: 90%;
                height: 0.01rem;
                background: #51d4fa;
                opacity: 0.5;
                margin: 0 auto;
              }

              .detail {
                width: 100%;
                height: 0.45rem;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                padding: 0 0.15rem;

                .d_item {
                  height: 0.3rem;
                  background: rgba(81, 212, 250, 0.15);
                  border: 0.01rem solid rgba(106, 222, 255, 0.4);
                  border-radius: 0.02rem;
                  display: flex;
                  justify-content: center;
                  // align-items: center;
                  box-sizing: border-box;
                  padding: 0.05rem 0.05rem;

                  >img {
                    width: 0.2rem;
                    height: 0.2rem;
                    margin-right: 0.05rem;
                  }

                  >span {
                    font-size: 0.13rem;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #d9effd;
                  }
                }
              }

              .grow {
                width: 2.5rem;
                height: 0.3rem;
                background: url("../../assets/img/grow_bg.png") center no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;

                >img {
                  width: 0.18rem;
                  height: 0.18rem;
                  margin-right: 0.05rem;
                }

                >span:nth-child(2) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                >span:nth-child(3) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #36ffd2;
                }
              }

              .icon_item {
                width: 100%;
                height: calc(100% - 3.22rem);
                box-sizing: border-box;
                padding: 0.1rem 0.15rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                overflow: auto;

                .icon_item_child {
                  width: 33.33%;
                  height: 33.33%;
                  display: flex;
                  margin-bottom: 0.05rem;

                  >img {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.05rem;
                  }

                  >div {
                    display: flex;
                    flex-direction: column;

                    >span:nth-child(1) {
                      font-size: 0.12rem;
                      font-family: MicrosoftYaHei;
                      font-weight: bold;
                      color: #86d9ff;
                    }

                    >span:nth-child(2) {
                      font-size: 0.15rem;
                      font-family: AlibabaPuHuiTiB;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }

          .drag_box1 {
            width: 100%;
            height: 100%;
                 position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
            -webkit-mask-image: linear-gradient(90deg,
                transparent 0%,
                blue 4%,
                blue 96%,
                transparent 100%);

            .drag_img {
              width: 100%;
              height: 100%;
              -webkit-mask-image: linear-gradient(transparent 0%,
                  blue 4%,
                  blue 96%,
                  transparent 100%);
            }

            .pole_item_4 {
              position: absolute;
              top: 43%;
              left: 42%;
            }

            .pole_item {
              width: 1.45rem;
              height: 0.44rem;
              transform: translate(0,200%);
              .p_title {
                width: 1.45rem;
                height: 0.44rem;
                background: rgba(1, 12, 28, 0.7);
                border-radius: 22px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0 0 0 10px;

                >img {
                  width: 0.32rem;
                  height: 0.32rem;
                  margin-right: 0.15rem;
                }

                >span {
                  font-size: 0.18rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                  flex: 1;
                }
              }

              .pole1 {
                width: 0.77rem;
                height: 1.8rem;
                position: absolute;
                top: 0;
                left: 40%;
              }
            }

            .pole_item1 {
              position: absolute;
              top: 13%;
              left: 26%;
            }

            .pole_item2 {
              position: absolute;
              top: 41%;
              left: 13%;
            }

            .pole_item3 {
              position: absolute;
              top: 22%;
              left: 40%;
            }

            .pole_item4 {
              position: absolute;
              top: 29%;
              left: 76%;
            }

            .pole_item5 {
              position: absolute;
              top: 61%;
              left: 62%;
            }

            .pole_item6 {
              position: absolute;
              top: 1%;
              left: 62%;
            }

            .pop_content {
               width: 3.5rem;
              height: 5.05rem;
              background: url("../../assets/img/pop_bg.png") center no-repeat;
              background-size: 100% 100%;
              overflow: hidden;
              position: absolute;
              // top: 17%;
              // left: 23%;
              z-index: 999999;

              .close_img {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 0;
                right: 0;
              }

              .p_video {
                width: 90%;
                height: 1.82rem;
                margin: 0.1rem auto 0;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }

              .text {
                width: 100%;
                height: 0.4rem;
                font-size: 0.2rem;
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: bold;
                color: #f3fdff;
                line-height: 0.4rem;
                box-sizing: border-box;
                padding-left: 0.2rem;
              }

              .line {
                width: 90%;
                height: 0.01rem;
                background: #51d4fa;
                opacity: 0.5;
                margin: 0 auto;
              }

              .detail {
                width: 100%;
                height: 0.45rem;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                padding: 0 0.15rem;

                .d_item {
                  height: 0.3rem;
                  background: rgba(81, 212, 250, 0.15);
                  border: 0.01rem solid rgba(106, 222, 255, 0.4);
                  border-radius: 0.02rem;
                  display: flex;
                  justify-content: center;
                  // align-items: center;
                  box-sizing: border-box;
                  padding: 0.05rem 0.05rem;

                  >img {
                    width: 0.2rem;
                    height: 0.2rem;
                    margin-right: 0.05rem;
                  }

                  >span {
                    font-size: 0.13rem;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #d9effd;
                  }
                }
              }

              .grow {
                width: 2.5rem;
                height: 0.3rem;
                background: url("../../assets/img/grow_bg.png") center no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;

                >img {
                  width: 0.18rem;
                  height: 0.18rem;
                  margin-right: 0.05rem;
                }

                >span:nth-child(2) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                >span:nth-child(3) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #36ffd2;
                }
              }

              .icon_item {
                width: 100%;
                height: calc(100% - 3.22rem);
                box-sizing: border-box;
                padding: 0.1rem 0.15rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                overflow: auto;

                .icon_item_child {
                  width: 33.33%;
                  height: 33.33%;
                  display: flex;
                  margin-bottom: 0.05rem;

                  >img {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.05rem;
                  }

                  >div {
                    display: flex;
                    flex-direction: column;

                    >span:nth-child(1) {
                      font-size: 0.12rem;
                      font-family: MicrosoftYaHei;
                      font-weight: bold;
                      color: #86d9ff;
                    }

                    >span:nth-child(2) {
                      font-size: 0.15rem;
                      font-family: AlibabaPuHuiTiB;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }

          .drag_box7,
          .drag_box8,
          .drag_box9,
          .drag_box10,
          .drag_box11,
          .drag_box12,
          .drag_box13 {
            width: 100%;
     
            height:auto;
            position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
            -webkit-mask-image: linear-gradient(
             90deg,
              transparent 0%,
              blue 2%,
              blue 97%,
              transparent 100%
             );
           
            .drag_img {
              width: 100%;
              height: auto;
              -webkit-mask-image: linear-gradient(transparent 0%,
                  blue 3%,
                  blue 95%,
                  transparent 97%);
            }

            .pole_item {
              // width: 0.5rem;
              height: 0.34rem;
              position: absolute;
              cursor: pointer;
                            transform: translate(-10%,300%);
              .p_title {
                // width: 0.5rem;
                // height: 0.22rem;
                background: rgba(1, 12, 28, 0.7);
                border-radius: 40px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0.04rem;
                // position: absolute;
                overflow: hidden;
                white-space: nowrap;

                >img {
                  width: 0.2rem;
                  height: 0.2rem;
                  margin-right: 0.05rem;
                }

                >span {
                  font-size: 0.2rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                  flex: 1;
                }
              }

              .pole1 {
                width: 0.5rem;
                height: auto;
                position: absolute;
                left: 50%;
                top: .2rem;
                transform: translateX(-50%)
              }
            }

            .pop_content1 {
              width: 3.5rem;
              height: 4.8rem;
              background: url("../../assets/img/pop_bg.png") center no-repeat;
              background-size: 100% 100%;
              overflow: hidden;
              position: absolute;
              // top: 17%;
              // left: 23%;
              z-index: 999999;

              .close_img {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 0;
                right: 0;
              }

              .p_video {
                width: 90%;
                height: 1.82rem;
                margin: 0.1rem auto 0;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }

              .text {
                width: 100%;
                height: 0.4rem;
                font-size: 0.2rem;
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: bold;
                color: #f3fdff;
                line-height: 0.4rem;
                box-sizing: border-box;
                padding-left: 0.2rem;
              }

              .line {
                width: 90%;
                height: 0.01rem;
                background: #51d4fa;
                opacity: 0.5;
                margin: 0 auto;
              }

              .detail {
                width: 100%;
                height: 0.45rem;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                padding: 0 0.15rem;

                .d_item {
                  height: 0.3rem;
                  background: rgba(81, 212, 250, 0.15);
                  border: 0.01rem solid rgba(106, 222, 255, 0.4);
                  border-radius: 0.02rem;
                  display: flex;
                  justify-content: center;
                  // align-items: center;
                  box-sizing: border-box;
                  padding: 0.05rem 0.05rem;

                  >img {
                    width: 0.2rem;
                    height: 0.2rem;
                    margin-right: 0.05rem;
                  }

                  >span {
                    font-size: 0.13rem;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #d9effd;
                  }
                }
              }

              .grow {
                width: 2.5rem;
                height: 0.3rem;
                background: url("../../assets/img/grow_bg.png") center no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;

                >img {
                  width: 0.18rem;
                  height: 0.18rem;
                  margin-right: 0.05rem;
                }

                >span:nth-child(2) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                >span:nth-child(3) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #36ffd2;
                }
              }

              .icon_item {
                width: 100%;
                height: calc(100% - 3.22rem);
                box-sizing: border-box;
                padding: 0.1rem 0.15rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                overflow: auto;

                .icon_item_child {
                  width: 33.33%;
                  height: 33.33%;
                  display: flex;
                  margin-bottom: 0.05rem;

                  >img {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.05rem;
                  }

                  >div {
                    display: flex;
                    flex-direction: column;

                    >span:nth-child(1) {
                      font-size: 0.12rem;
                      font-family: MicrosoftYaHei;
                      font-weight: bold;
                      color: #86d9ff;
                    }

                    >span:nth-child(2) {
                      font-size: 0.15rem;
                      font-family: AlibabaPuHuiTiB;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }

          .drag_box5 {
            width: 100%;
            height: 100%;
            position: absolute;
            
          left: 50%;
          transform: translate(-50%,-50%);
          top: 50%;
            -webkit-mask-image: linear-gradient(90deg,
                transparent 0%,
                blue 5%,
                blue 93%,
                transparent 100%);

            .drag_img {
              width: 100%;
              height: 100%;
              -webkit-mask-image: linear-gradient(transparent 0%,
                  blue 4%,
                  blue 96%,
                  transparent 100%);
            }

            .pole_item {
              height: 0.22rem;
              position: absolute;
              top: 21%;
              left: 5%;
              transform: translate(-10%,200%);
              .p_title {
                // width: 0.5rem;
                height: 0.22rem;
                background: rgba(1, 12, 28, 0.7);
                border-radius: 12px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0.04rem;
                overflow: hidden;
                white-space: nowrap;

                >img {
                  width: 0.1rem;
                  height: 0.1rem;
                  margin-right: 0.05rem;
                }

                >span {
                  font-size: 0.1rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                  flex: 1;
                }
              }

              .pole1 {
                width: 0.3rem;
                height: 0.7rem;
                position: absolute;
                right: 0;
              }
            }

            .pop_content1 {
              width: 3.5rem;
              height: 4.55rem;
              background: url("../../assets/img/pop_bg.png") center no-repeat;
              background-size: 100% 100%;
              overflow: hidden;
              position: absolute;
              // top: 17%;
              // left: 23%;
              z-index: 999999;

              .close_img {
                width: 0.2rem;
                height: 0.2rem;
                position: absolute;
                top: 0;
                right: 0;
              }

              .p_video {
                width: 90%;
                height: 1.82rem;
                margin: 0.1rem auto 0;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }

              .text {
                width: 100%;
                height: 0.4rem;
                font-size: 0.2rem;
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: bold;
                color: #f3fdff;
                line-height: 0.4rem;
                box-sizing: border-box;
                padding-left: 0.2rem;
              }

              .line {
                width: 90%;
                height: 0.01rem;
                background: #51d4fa;
                opacity: 0.5;
                margin: 0 auto;
              }

              .detail {
                width: 100%;
                height: 0.45rem;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                padding: 0 0.15rem;

                .d_item {
                  height: 0.3rem;
                  background: rgba(81, 212, 250, 0.15);
                  border: 0.01rem solid rgba(106, 222, 255, 0.4);
                  border-radius: 0.02rem;
                  display: flex;
                  justify-content: center;
                  // align-items: center;
                  box-sizing: border-box;
                  padding: 0.05rem 0.05rem;

                  >img {
                    width: 0.2rem;
                    height: 0.2rem;
                    margin-right: 0.05rem;
                  }

                  >span {
                    font-size: 0.13rem;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #d9effd;
                  }
                }
              }

              .grow {
                width: 2.5rem;
                height: 0.3rem;
                background: url("../../assets/img/grow_bg.png") center no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;

                >img {
                  width: 0.18rem;
                  height: 0.18rem;
                  margin-right: 0.05rem;
                }

                >span:nth-child(2) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                >span:nth-child(3) {
                  font-size: 0.13rem;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: #36ffd2;
                }
              }

              .icon_item {
                width: 100%;
                height: calc(100% - 3.22rem);
                box-sizing: border-box;
                padding: 0.1rem 0.15rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                overflow: auto;

                .icon_item_child {
                  width: 33.33%;
                  height: 33.33%;
                  display: flex;
                  margin-bottom: 0.05rem;

                  >img {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.05rem;
                  }

                  >div {
                    display: flex;
                    flex-direction: column;

                    >span:nth-child(1) {
                      font-size: 0.12rem;
                      font-family: MicrosoftYaHei;
                      font-weight: bold;
                      color: #86d9ff;
                    }

                    >span:nth-child(2) {
                      font-size: 0.15rem;
                      font-family: AlibabaPuHuiTiB;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>
