新增东北大屏和大图

src/api/index.js

@@ -210,4 +210,9 @@ export default {
     return sendGetRequest(`/readControl/fiveControl`, data);
   },
 
+  // 查看用户额外权限
+  user_getjurisdiction(userId,data){
+    return sendGetRequest(`/user/getjurisdiction?userId=${userId}`, data)
+  }
+
 };

src/views/index.vue

@@ -89,6 +89,7 @@ export default {
             loading: true,//页面加载
             IDTimer: null,
             deviceId:'',
+            limitUserId:''
         }
     },
     watch: {
@@ -125,11 +126,25 @@ export default {
             that.getEqbyid()
         }, 120000);
 
+        // 获取用户id权限
+        this.get_user_getjurisdiction()
     },
     beforeDestroy() {
         this.IDTimer && clearInterval(this.IDTimer)
     },
     methods: {
+        // 获取用户id权限
+        get_user_getjurisdiction() {
+            let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+            let userId  = userInfo.userid
+            this.api.user_getjurisdiction(userId).then(res => {
+                if (res.data.code == 200) {
+                    this.limitUserId = res.data.data[0].id;
+                }
+            })
+        },
+
+
         //获取设备名称/配方名称
         getByid() {
             var store = this.$store.state
@@ -255,6 +270,7 @@ export default {
                   return
 
               } else if (item.router != this.routerNow && !item.http) {
+                    if(this.limitUserId == 0) return this.$message('您当前没有权限查看!')
                     this.$router.push({ name: item.router })
                 }
             } else {

src/views/page/largeScreen.vue

@@ -90,7 +90,7 @@
         <div class="middle">
           <div class="map">
             <div class="map1">
-              <div class="drag_box" ref="drag_box">
+              <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
                 <img class="drag_img" src="../../assets/img/map.png" alt="" />
                 <img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                 <img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
@@ -100,6 +100,12 @@
                 <img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                 <img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" />
               </div>
+              <div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
+                <img class="drag_img" src="../../assets/img/map1.png" alt="" />
+                <img class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png" :style="'left:' + (48.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i,index) in 10" :key="index + '_1'"/>
+
+                <img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" :style="'top:' + (22 + index1 * 0.105) + '%' + ';' + 'left:' + (5 + index1 * 3.3) + '%' + ';'" alt="" @click="handlerAxis_2" v-for="(i,index1) in 25" :key="index1 + '_2'"/>
+              </div>
             </div>
           </div>
         </div>
@@ -673,10 +679,13 @@ export default {
           unit: "dB",
         },
       ],
+
+      limitUserId:''
     };
   },
   mounted() {
-    this.drag_boxHandler();
+    
+    
 
     this.login();
 
@@ -943,6 +952,9 @@ export default {
       this.dataInit(userInfo.userid);
       this.get_sel_eqbyid(userInfo.userid);
 
+      // 获取用户id权限
+      this.get_user_getjurisdiction(userInfo.userid)
+
       // this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
       // console.log(this.autoPlay);
       // if (this.autoPlay == false) {
@@ -954,6 +966,20 @@ export default {
       // }
     },
 
+    // 获取用户id权限
+    get_user_getjurisdiction(userId){
+      this.api.user_getjurisdiction(userId).then(res=>{
+        if(res.data.code == 200){
+          this.limitUserId = res.data.data[0].id;
+          if(this.limitUserId == 1){
+            this.drag_boxHandler();
+          }else if(this.limitUserId == 2){
+            this.drag_boxHandler1();
+          }
+        }
+      })
+    },
+
     // autoPlay1() {
     //   this.autoPlay = false;
     //   clearInterval(this.timer_) && this.timer_;
@@ -1012,6 +1038,10 @@ export default {
       this.$router.push({ path: "/largeScreen1" });
     },
 
+    handlerAxis_2() {
+      this.$router.push({ path: "/largeScreen1" });
+    },
+
     toBackPage() {
       this.$router.push({ path: "/realTime" });
     },
@@ -1089,6 +1119,74 @@ export default {
         }
       };
     },
+
+    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);
+        }
+      };
+    },
   },
 };
 </script>
@@ -1506,6 +1604,43 @@ export default {
             transform: translate(-50%, -50%);
             overflow: hidden;
 
+            .drag_box1{
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              // top: 0.3rem;
+              // left: 0.5rem;
+              z-index: 10;
+              -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%);
+              }
+
+              .axis_init{
+                width: 0.4rem;
+                height: 0.5rem;
+                position: absolute;
+                top: 54%;
+                z-index: 99;
+              }
+
+              .axis_init1{
+                width: 0.4rem;
+                height: 0.5rem;
+                position: absolute;
+                z-index: 99;
+              }
+            }
             .drag_box {
               width: 100%;
               height: 100%;

src/views/page/largeScreen1.vue

@@ -19,7 +19,7 @@
         <span>{{ time.time }}</span>
       </div>
 
-      <div class="content">
+      <div class="content" v-show="limitUserId == 1">
         <div class="map">
           <div class="map1">
             <div class="drag_box" ref="drag_box">
@@ -40,48 +40,10 @@
                     </div>
                     <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                   </div>
-                  <!-- <div class="pole_item pole_item2" @click="handlerPop(3)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>1#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item3" @click="handlerPop(4)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi1.png" alt="" />
-                      <span>3#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole.png" alt="" />
-                  </div> -->
-
-                  <!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>4#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item6" @click="handlerPop(6)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>5#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item7" @click="handlerPop(7)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>6#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div> -->
                 </template>
 
                 <!-- 弹框 -->
                 <template>
-                  <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
-                    v-if="popContentCurrent == index ? true : false"> -->
                   <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" />
@@ -132,44 +94,126 @@
           </div>
         </div>
       </div>
-      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+
-        <div class="pop_content">
+      <div class="content" v-show="limitUserId == 2">
-          <div class="p_video">
+        <div class="map">
-            <img src="../assets/img/c_top.png" alt="">
+          <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 * .1) + '%' + ';' + 'left:' + (83 - index * 3.24) + '%' + ';'" @click="handlerPop1(item.id)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>{{ item.greenhouseName }}#温室</span>
                     </div>
-          <div class="text">某某项目温室一号</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="">
+                        <img src="../../assets/img/detail_img.png" alt="" />
-              <span>面积：6652㎡</span>
+                        <span>品种：{{ item.greenhouseVariety }}</span>
                       </div>
                       <div class="d_item">
-              <img src="../assets/img/detail_img.png" alt="">
+                        <img src="../../assets/img/detail_img.png" alt="" />
-              <span>品种：番茄</span>
+                        <span>数量：{{ item.greenhouseNums }}株</span>
-            </div>
-            <div class="d_item">
-              <img src="../assets/img/detail_img.png" alt="">
-              <span>数量：80000株</span>
                       </div>
                     </div>
                     <div class="grow">
-            <img src="../assets/img/grow_img.png" alt="">
+                      <img src="../../assets/img/grow_img.png" alt="" />
                       <span>生长阶段：</span>
-            <span>幼苗期</span>
+                      <span>{{ item.growthStageName }}</span>
                     </div>
-          <div class="line" style="margin-top: 0.2rem;"></div>
+                    <div class="line" style="margin-top: 0.06rem"></div>
-          <div class="icon_item">
+                    <div class="icon_item scroll">
-            <div class="icon_item_child" v-for="(item, index) in list" :key="index">
+                      <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
-              <img :src="item.img" alt="">
+                        <img :src="require('../../assets/image/real-time-' +
+                          item1.formula +
+                          '.png')
+                          " alt="" />
                         <div>
-                <span>{{ item.name }}</span>
+                          <span>{{ item1.environmentDataId }}</span>
-                <span>{{ item.data }}</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 * .2) + '%' + ';' + 'left:' + (84 - index * 4.05) + '%' + ';'" @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>
-      </el-dialog> -->
     </div>
   </div>
 </template>
@@ -221,6 +265,7 @@ export default {
 
       popContentList: [],
       popContentCurrent: 1,
+      popContentCurrent1: 1,
 
       // 自动跳转和手动跳转切换
       autoPlay: false, //false 手动切换   true 自动切换
@@ -582,10 +627,14 @@ export default {
           unit: "dB",
         },
       ],
+
+      limitUserId: '',
+      popContentList1: [],
+      popContentList2: [],
     };
   },
   mounted() {
-    this.drag_boxHandler();
+
 
     this.login();
 
@@ -602,7 +651,7 @@ export default {
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid) {
       this.api.Bigdata_getAllControl(userid).then((res) => {
-        console.log("根据用户id查询对应的设备大数据信息", res);
+        // console.log("根据用户id查询对应的设备大数据信息", res);
         this.popContentList = res.data.data;
         this.popContentList = this.popContentList.map((item) => {
           return {
@@ -620,6 +669,14 @@ export default {
           });
         });
         // console.log(this.popContentList,'12121212');
+        if (this.limitUserId == 2) {
+          this.popContentList1 = (this.popContentList.slice(0, 25))
+          // this.popContentList2 = this.popContentList.slice(-10)
+          if(this.popContentList.length > 25){
+            this.popContentList2 = (this.popContentList.slice(-(this.popContentList.length - 25)))
+          }
+          console.log(this.popContentList1);
+        }
       });
     },
 
@@ -639,6 +696,33 @@ export default {
       }
     },
 
+    getTopOrLeft1(id) {
+      for(let i = 0; i < 26;i++){
+        if(id == (i + 1)){
+          return `top:34%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
+        }
+      }
+      // if (id == 1) {
+      //   return "top:34%;left:74%;transform: translate(-50%,-50%);";
+      // } else if (id == 2) {
+      //   return "top:34%;left:70%;transform: translate(-50%,-50%);";
+      // }else if(id == 3){
+      //   return "top:34%;left:68%;transform: translate(-50%,-50%);";
+      // }
+    },
+
+    getTopOrLeft11(id) {
+      for(let i=0;i<10;i++){
+        if(id == (i + 26))
+        return `top:65%;left:${77 - i *4}%;transform: translate(-50%,-50%);`
+      }
+      // if (id == 10) {
+      //   return "top:65%;left:57%;transform: translate(-50%,-50%);";
+      // } else if (id == 11) {
+      //   return "top:65%;left:61%;transform: translate(-50%,-50%);";
+      // }
+    },
+
     getNamePosition(id) {
       if (id == 1) {
         return "position: absolute;top: 41%;left: 13%;"
@@ -662,14 +746,22 @@ export default {
       localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
     },
     autoPlay2() {
+      let that = this
       this.autoPlay = true;
       localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
       this.timer2 = setInterval(() => {
-        this.popContentCurrent++;
+        if(that.limitUserId == 1){
-        if (this.popContentCurrent > 6) {
+          that.popContentCurrent++;
-          this.popContentCurrent = 1;
+          if (that.popContentCurrent > 6) {
-          // this.$router.push({ path: "/largeScreen" });
+            that.popContentCurrent = 1;
           }
+        }else if(that.limitUserId == 2){
+          that.popContentCurrent1++;
+          if (that.popContentCurrent1 > 35) {
+            that.popContentCurrent1 = 1;
+          }
+        }
+        
       }, 3000);
     },
 
@@ -702,23 +794,44 @@ export default {
       let userInfo = JSON.parse(localStorage.getItem("userInfo"));
       this.dataInit(userInfo.userid);
 
+      // 获取用户id权限
+      this.get_user_getjurisdiction(userInfo.userid)
+
       let that = this;
       this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
-      // this.popContentCurrent = 0;
       if (this.autoPlay == false) {
         clearInterval(that.timer2) && this.timer2;
       } else {
         this.timer2 = setInterval(() => {
-          this.popContentCurrent++;
+          if(that.limitUserId == 1){
-          console.log('this.popContentCurrent', this.popContentCurrent);
+            that.popContentCurrent++;
-          if (this.popContentCurrent > 6) {
+            if (that.popContentCurrent > 6) {
-            this.popContentCurrent = 1;
+              that.popContentCurrent = 1;
-            // this.$router.push({ path: "/largeScreen" });
+            }
+          }else if(that.limitUserId == 2){
+            that.popContentCurrent1++;
+            if (that.popContentCurrent1 > 35) {
+              that.popContentCurrent1 = 1;
+            }
           }
         }, 3000);
       }
     },
 
+    // 获取用户id权限
+    get_user_getjurisdiction(userId) {
+      this.api.user_getjurisdiction(userId).then(res => {
+        if (res.data.code == 200) {
+          this.limitUserId = res.data.data[0].id;
+          if (this.limitUserId == 1) {
+            this.drag_boxHandler();
+          } else if (this.limitUserId == 2) {
+            this.drag_boxHandler1();
+          }
+        }
+      })
+    },
+
     getTime() {
       this.time = getnowtime();
       // console.log(this.time);
@@ -743,15 +856,19 @@ export default {
       clearInterval(that.timer2) && this.timer2;
     },
 
-    // handleClose(done) {
+    cancelHandler1(){
-    //   done();
+      this.popContentCurrent1 = -1;
-    // },
+    },
 
     handlerPop(id) {
       console.log(id);
       this.popContentCurrent = id;
     },
 
+    handlerPop1(id){
+      this.popContentCurrent1 = id;
+    },
+
     toBack() {
       this.$router.push({ path: "/largeScreen" });
     },
@@ -823,6 +940,74 @@ export default {
         }
       };
     },
+
+    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);
+        }
+      };
+    },
   },
 };
 </script>
@@ -993,6 +1178,231 @@ export default {
           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: 2.5rem;
+              height: 3rem;
+              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: .2rem;
+                height: .2rem;
+                position: absolute;
+                top: 0;
+                right: 0;
+              }
+
+              .p_video {
+                width: 90%;
+                height: 1.2rem;
+                margin: 0.1rem auto 0;
+
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .text {
+                width: 100%;
+                height: 0.3rem;
+                font-size: 0.15rem;
+                font-family: AlimamaShuHeiTi-Bold;
+                font-weight: bold;
+                color: #f3fdff;
+                line-height: 0.3rem;
+                box-sizing: border-box;
+                padding-left: 0.15rem;
+              }
+
+              .line {
+                width: 2.2rem;
+                height: 0.01rem;
+                background: #51d4fa;
+                opacity: 0.5;
+                margin: 0 auto;
+              }
+
+              .detail {
+                width: 100%;
+                height: 0.3rem;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+                padding: 0 0.15rem;
+
+                .d_item {
+                  height: 0.2rem;
+                  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.05rem;
+
+                  >img {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  >span {
+                    font-size: 0.12rem;
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    color: #d9effd;
+                  }
+                }
+              }
+
+              .grow {
+                width: 2.5rem;
+                height: 0.2rem;
+                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.15rem;
+                  height: 0.15rem;
+                  margin-right: 0.05rem;
+                }
+
+                >span:nth-child(2) {
+                  font-size: 0.12rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                }
+
+                >span:nth-child(3) {
+                  font-size: 0.12rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #36ffd2;
+                }
+              }
+
+              .icon_item {
+                width: 95%;
+                height: calc(100% - 2.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: 50%;
+                  height: 45%;
+                  display: flex;
+                  margin-bottom: 0.05rem;
+
+                  > img {
+                    width: 0.28rem;
+                    height: 0.28rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  > div {
+                    display: flex;
+                    flex-direction: column;
+
+                    > span:nth-child(1) {
+                      font-size: 0.1rem;
+                      font-family: MicrosoftYaHei;
+                      font-weight: bold;
+                      color: #86d9ff;
+                    }
+
+                    > span:nth-child(2) {
+                      font-size: 0.11rem;
+                      font-family: AlibabaPuHuiTiB;
+                      font-weight: bold;
+                      color: #ffffff;
+                    }
+                  }
+                }
+              }
+            }
+          }
+
           .drag_box {
             width: 100%;
             height: 100%;
@@ -1251,25 +1661,15 @@ export default {
                 }
               }
             }
-          }
-        }
-      }
-    }
 
-    // ::v-deep .el-dialog {
-    //   background: unset !important;
 
-    //   .el-icon-close:before {
+          }
-    //     contain: " ";
+        }
-    //     width: .44rem;
+      }
-    //     height: .44rem;
+    }
-    //     background: url('../assets/img/close.png') center no-repeat;
-    //     background-size: 100% 100%;
-    //     position: absolute;
-    //     top: 0.3rem;
-    //     left: -0.1rem;
-    //   }
-    // }
   }
 }
-</style>
+
+::-webkit-scrollbar {
+  display: none;
+}</style>