修改

public/static/config/config2.js

@@ -883,7 +883,7 @@ systemConfig.pointInfo = {
             ]
         },
         {
-            name: "简介",// 高阳办公室
+            name: "简介",// 高阳工作室
             type: 1,
             img: "./static/images/point.png",
             sizeW: 30,
@@ -1388,16 +1388,16 @@ systemConfig.scene = [
         "name": "三层3F",
         "children": [
             {
-                name: "市场综合受理",
-                image: './static/images/scene/3F-市场综合受理窗口.png',
+                name: "企业服务一窗通",
+                image: './static/images/scene/3F-企业服务一窗通.png',
                 sceneType: 3,
                 camera: {
                     lon: 121.12276306780541, lat: 31.1538149480797, h: 9.21669506271693, heading: 121.014367262339, pitch: 0, roll: 0
                 }
             },
             {
-                name: "企业服务一窗通",
-                image: './static/images/scene/3F-企业服务一窗通.jpg',
+                name: "市场综合受理",
+                image: './static/images/scene/3F-市场综合受理窗口.png',
                 sceneType: 3,
                 camera: {
                     lon: 121.12273108086876,
@@ -1409,8 +1409,8 @@ systemConfig.scene = [
                 }
             },
             {
-                name: "高阳办公室",
-                image: './static/images/scene/3F-高阳办公室.jpg',
+                name: "高阳工作室",
+                image: './static/images/scene/3F-高阳办公室.png',
                 sceneType: 3,
                 camera: {
                     lon: 121.12272290535402,
@@ -1577,10 +1577,10 @@ systemConfig.positionPoint = [
     { viewH: 9.53, h: 7.98, lon: 2.1139905941332198, lat: 0.5437352918497378, areaName: "三层走廊" },
     { viewH: 9.53, h: 7.98, lon: 2.1139904526185287, lat: 0.5437358950245587, areaName: "三层走廊" },
     { viewH: 9.53, h: 7.98, lon: 2.1139900865089603, lat: 0.5437364433651986, areaName: "三层走廊" },
-    { viewH: 9.53, h: 7.98, lon: 2.1139907699156533, lat: 0.5437363534566811, areaName: "高阳办公室" },
-    { viewH: 9.53, h: 7.98, lon: 2.1139906707584464, lat: 0.5437368072446498, areaName: "高阳办公室" },
-    { viewH: 9.53, h: 7.98, lon: 2.1139909537424630, lat: 0.5437367890629063, areaName: "高阳办公室" },
-    { viewH: 9.53, h: 7.98, lon: 2.1139911466385380, lat: 0.5437362951460863, areaName: "高阳办公室" },
+    { viewH: 9.53, h: 7.98, lon: 2.1139907699156533, lat: 0.5437363534566811, areaName: "高阳工作室" },
+    { viewH: 9.53, h: 7.98, lon: 2.1139906707584464, lat: 0.5437368072446498, areaName: "高阳工作室" },
+    { viewH: 9.53, h: 7.98, lon: 2.1139909537424630, lat: 0.5437367890629063, areaName: "高阳工作室" },
+    { viewH: 9.53, h: 7.98, lon: 2.1139911466385380, lat: 0.5437362951460863, areaName: "高阳工作室" },
     { viewH: 9.53, h: 7.98, lon: 2.1139916732627830, lat: 0.5437366579562968, areaName: "企业开办一窗通" },
     { viewH: 9.53, h: 7.98, lon: 2.1139918307923540, lat: 0.5437361162160987, areaName: "企业开办一窗通" },
     { viewH: 9.53, h: 7.98, lon: 2.1139910125555230, lat: 0.5437358533602022, areaName: "三层走廊" },

src/components/MainMap.vue

@@ -1,6 +1,7 @@
 <template>
-  <div id="cesiumContainer">
-    <!-- <div class="get_now_camera_view">
+  <div class="viewer_container">
+    <div id="cesiumContainer">
+      <!-- <div class="get_now_camera_view">
       <van-button @click="consoleCameraPosition"> 当前视角 </van-button>
       <van-button @click="setViewDefaultlocation"> 复位 </van-button>
     </div>
@@ -17,14 +18,16 @@
         </van-button>
       </div>
     </van-popup> -->
+    </div>
+    <Tool></Tool>
   </div>
-  <Tool></Tool>
 </template>
 
 <script>
 // import Clipboard from "clipboard";
 import { defineAsyncComponent } from "vue";
 import Water from "@/utils/Water";
+import api from "@/api/content";
 
 export default {
   data() {
@@ -143,34 +146,6 @@ export default {
         this.showInfoDailog(result.info);
       });
     };
-
-    window.addImage = this.addImage;
-    window.changeImage = this.changeImage; 
-    // addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273519090121, 31.153826679130416, 3.280499471365055,
-    //     121.12273833983032, 31.153813096263634, 3.281036567079009,
-    //   ],
-    //   minH: [2.807028457880749, 2.807028457880749],
-    // });
-    // window.tp =
-    // this.addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273519090121, 31.153826679130416, 3.280499471365055,
-    //     121.12273833983032, 31.153813096263634, 3.281036567079009,
-    //   ],
-    //   minH: [2.807028457880749, 2.807028457880749]
-    // }, '../static/images/ceshi.png');
-    // changeImage(tp,'../static/images/jinru.png')
-
-    // this.addImage(globalVariable.viewer, {
-    //   arr: [
-    //     121.12273884192843, 31.153811497621240, 3.2435919391164383,
-    //     121.12274206014264, 31.153797613000965, 3.2321212783392600,
-    //   ],
-    //   minH: [2.8569308025328994, 2.8529680784118310]
-    // }, '../static/images/ceshi.png');
-
     return;
   },
 
@@ -286,7 +261,10 @@ export default {
       //     }
       //   );
       // }
-      window.changeImage = this.changeImage;
+      // window.changeImage = this.changeImage;
+
+      // 叫号
+      this.initJH();
       // 水面加载
       setTimeout(() => {
         that.addWaterPanel();
@@ -346,28 +324,21 @@ export default {
 
     wetherScroll(func) {
       let startX = 0;
-      // let startY = 0;
       let endX = 0;
-      // let endY = 0;
       let distanceX = 0;
-      // let distanceY = 0;
       let body = document.getElementById("cesiumContainer");
-      // var clientHeight = document.documentElement.clientHeight;
       var clientWidth = document.documentElement.clientWidth;
       body.addEventListener("touchstart", function (event) {
         var touch = event.targetTouches[0];
         //滑动起点的坐标
         startX = touch.pageX;
-        // startY = touch.pageY;
         // console.log("startX:"+startX+","+"startY:"+startY);
       });
       body.addEventListener("touchmove", function (event) {
         var touch = event.targetTouches[0];
         //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
         endX = touch.pageX;
-        // endY = touch.pageY;
         distanceX = endX - startX;
-        // distanceY = endY - startY;
         if (startX != Math.abs(distanceX)) {
           //在滑动的距离超过屏幕高度的20%时，做某种操作
           if (Math.abs(distanceX) > clientWidth * 0.001) {
@@ -375,44 +346,26 @@ export default {
             //向左滑实行函数someAction1，向右滑实行函数someAction2
             distanceX > 0 ? func("left") : func("right");
             startX = endX;
-            // startY = endY;
           }
         }
-        // console.log("endX:"+endX+","+"endY:"+endY);
       });
       body.addEventListener("touchend", function (event) {
-        // distanceX = endX - startX;
-        // distanceY = endY - startY;
-        // // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
-        // //移动端设备的屏幕宽度
-        // var clientHeight = document.documentElement.clientHeight;
-        // // console.log(clientHeight;*0.2);
-        // //判断是否滑动了，而不是屏幕上单击了
-        // if (startY != Math.abs(distanceY)) {
-        //   //在滑动的距离超过屏幕高度的20%时，做某种操作
-        //   if (Math.abs(distanceY) > clientHeight * 0.2) {
-        //     //向下滑实行函数someAction1，向上滑实行函数someAction2
-        //     distanceY < 0 ? someAction1() : someAction2();
-        //   }
-        // }
+
         startX = 0;
-        // startY = 0;
         endX = 0;
-        // endY = 0;
         distanceX = 0;
-        // distanceY = 0;
       });
     },
 
     // 禁用/开启 操作
     controlCZ(bool) {
-      globalVariable.viewer.scene.screenSpaceCameraController.enableLook = bool;
-      globalVariable.viewer.scene.screenSpaceCameraController.enableRotate =
-        bool;
-      globalVariable.viewer.scene.screenSpaceCameraController.enableTilt = bool;
-      globalVariable.viewer.scene.screenSpaceCameraController.enableTranslate =
-        bool;
-      globalVariable.viewer.scene.screenSpaceCameraController.enableZoom = bool;
+      let screenSpaceCameraController =
+        globalVariable.viewer.scene.screenSpaceCameraController;
+      screenSpaceCameraController.enableLook = bool;
+      screenSpaceCameraController.enableRotate = bool;
+      screenSpaceCameraController.enableTilt = bool;
+      screenSpaceCameraController.enableTranslate = bool;
+      screenSpaceCameraController.enableZoom = bool;
     },
 
     // 默认定位
@@ -692,6 +645,375 @@ export default {
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
+    /* ------------叫号------------ */
+    initJH() {
+      let that = this;
+      this.initWindowBackground();
+      window.openJH = this.openJH;
+      window.closeJH = this.closeJH;
+      window.showJH = this.showJH;
+      window.hideJH = this.hideJH;
+      window.getToken = function () {
+        return that.$store.getters.getToken;
+      };
+      // this.getToken().then(() => {
+      serviceWindow.map(function (item, index) {
+        let pointArr = item.topPoint
+          .map(function (item_) {
+            return [item_.lon, item_.lat, item_.height];
+          })
+          .join()
+          .split(",")
+          .map((num) => Number(num));
+        if (item.type == 1) {
+          // that.getWindowInfo(item).then((info) => {
+          //   let image = that.createJHImage(item, info);
+          //   let entity = globalVariable.viewer.entities.add({
+          //     wall: {
+          //       positions:
+          //         Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+          //       minimumHeights: item.endHeight,
+          //       material: new Cesium.ImageMaterialProperty({
+          //         image: image,
+          //         transparent: false,
+          //       }),
+          //     },
+          //   });
+          //   globalVariable.JHEntityObj[item.id] = {
+          //     item: item,
+          //     entity: entity,
+          //   };
+          // });
+          let entity = globalVariable.viewer.entities.add({
+            wall: {
+              positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+              minimumHeights: item.endHeight,
+              material: Cesium.Color.BLACK,
+              // material: new Cesium.ImageMaterialProperty({
+              //   image: image,
+              //   transparent: false,
+              // }),
+            },
+          });
+          if (item.id != "")
+            globalVariable.JHEntityObj[item.id] = {
+              item: item,
+              entity1: entity,
+            };
+        } else {
+          let image = that.createJHImage(item);
+          let entity = globalVariable.viewer.entities.add({
+            wall: {
+              positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+              minimumHeights: item.endHeight,
+              material: new Cesium.ImageMaterialProperty({
+                image: image,
+                transparent: false,
+              }),
+            },
+          });
+          if (item.id != "")
+            globalVariable.JHEntityObj[item.id] = {
+              item: item,
+              entity1: entity,
+            };
+        }
+      });
+      // });
+      that.roundJH = true;
+      // 开始循环访问
+      that.loopJH();
+      // 开始循环访问
+      window.setInterval(function () {
+        that.loopJH();
+      }, serviceWindowTime);
+    },
+    initWindowBackground() {
+      // let width = 300,
+      //   height = 100;
+      // var canvas = document.createElement("canvas");
+      // canvas.width = 300;
+      // canvas.height = 100;
+      // var ctx = canvas.getContext("2d");
+      // ctx.clearRect(0, 0, width, height);
+      // // 背景黑色填充
+      // ctx.fillStyle = "#000000";
+      // ctx.fillRect(0, 0, width, height);
+      // let image = canvas.toDataURL("image/png");
+      this.windowBackgroundArr = windowBackground.map(function (item, index) {
+        let pointArr = item.topPoint
+          .map(function (item_) {
+            return [item_.lon, item_.lat, item_.height];
+          })
+          .join()
+          .split(",")
+          .map((num) => Number(num));
+        return globalVariable.viewer.entities.add({
+          wall: {
+            positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+            minimumHeights: item.endHeight,
+            material: Cesium.Color.BLACK,
+            // new Cesium.ImageMaterialProperty({
+            //   image: Cesium.Color.BLACK,
+            //   transparent: false,
+            // }),
+          },
+        });
+      });
+    },
+    openJH() {
+      this.roundJH = true;
+    },
+    closeJH() {
+      this.roundJH = false;
+    },
+    showJH(floor) {
+      let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
+      arr.map(function (id) {
+        let info = globalVariable.JHEntityObj[id];
+        if (floor) {
+          if (info.item.floor == floor) {
+            if (info.entity1) info.entity1.show = true;
+            if (info.entity2) info.entity2.show = true;
+          }
+        } else {
+          if (info.entity1) info.entity1.show = true;
+          if (info.entity2) info.entity2.show = true;
+        }
+      });
+      this.windowBackgroundArr.map(function (item) {
+        item.show = true;
+      });
+    },
+    hideJH(floor) {
+      let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
+      arr.map(function (id) {
+        let info = globalVariable.JHEntityObj[id];
+        if (floor) {
+          if (info.item.floor == floor) {
+            if (info.entity1) info.entity1.show = false;
+            if (info.entity2) info.entity2.show = false;
+          }
+        } else {
+          if (info.entity1) info.entity1.show = false;
+          if (info.entity2) info.entity2.show = false;
+        }
+      });
+      this.windowBackgroundArr.map(function (item) {
+        item.show = false;
+      });
+    },
+    getToken() {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        api.getToken().then(function (result) {
+          that.$store.commit("setToken", result.data);
+          resolve();
+        });
+      });
+    },
+    getWindowInfo(params) {
+      return new Promise((resolve, reject) => {
+        api.getWindowInfo({ id: params.id }).then(function (result) {
+          resolve(
+            result.data != null
+              ? result.data
+              : {
+                  win_status: "STOP",
+                }
+          );
+        });
+      });
+    },
+    createJHImage(item, info) {
+      // win_code: "A02",
+      // win_id: "102",
+      // area_id: "310000310100310118001",
+      // win_status: "STOP",
+      // user_code: "742",
+      // user_name: "谢晨 ",
+      // ticket_uuid: "",
+      // ticket_code: "",
+
+      let width = 300,
+        height = 100;
+      var canvas = document.createElement("canvas");
+      canvas.width = 300;
+      canvas.height = 100;
+      var ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, width, height);
+      // 背景黑色填充
+      ctx.fillStyle = "#000000";
+      ctx.fillRect(0, 0, width, height);
+      // 窗口编号
+      ctx.fillStyle = "#FF0000";
+      ctx.font = "30px Arial";
+      ctx.fillText(item.id, 15, 60);
+      // ctx.fillText(info.win_code, 15, 60);
+      // 红色数线
+      ctx.fillStyle = "#FF0000";
+      ctx.beginPath();
+      ctx.lineWidth = "2";
+      ctx.strokeStyle = "#FF0000"; // Green path
+      ctx.moveTo(83, 10);
+      ctx.lineTo(83, 90);
+      ctx.stroke(); // Draw it
+
+      /* 标题和叫号 */
+      ctx.fillStyle = "#FF0000";
+      let maxWidth = 183;
+
+      let row = 1;
+      if (item.title != "") ++row;
+      if (item.subtitle != "") ++row;
+      if (item.type == 1) {
+        if (row == 2) {
+          if (item.title.length * 30 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (30 - num) / 2 + 15 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 30) / 2 + 100;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.title, start, 45);
+          }
+          if (info.win_status == "STOP") {
+            ctx.font = "30px Arial";
+            ctx.fillText("暂停服务", 130, 83);
+          } else {
+            if (info.ticket_code == "") {
+              ctx.font = "30px Arial";
+              ctx.fillText("欢迎光临", 130, 83);
+            } else {
+              ctx.font = "30px Arial";
+              ctx.fillText("请" + info.ticket_code + "号", 112, 83);
+            }
+          }
+        } else if (row == 3) {
+          if (item.title.length * 20 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (20 - num) / 2 + 10 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 20) / 2 + 100;
+            ctx.font = "20px Arial";
+            ctx.fillText(item.title, start, 30);
+          }
+
+          if (item.subtitle.length * 20 > maxWidth) {
+            let num = maxWidth / item.subtitle.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(
+              item.subtitle,
+              100,
+              (20 - num) / 2 + 10 + 20 + 10 + num
+            );
+          } else {
+            let start = (maxWidth - item.subtitle.length * 20) / 2 + 100;
+            ctx.font = "20px Arial";
+            ctx.fillText(item.subtitle, start, 60);
+          }
+
+          if (info.win_status == "STOP") {
+            ctx.font = "20px Arial";
+            ctx.fillText("暂停服务", 153.5, 90);
+          } else {
+            if (info.ticket_code == "") {
+              ctx.font = "20px Arial";
+              ctx.fillText("欢迎光临", 153.5, 90);
+            } else {
+              ctx.font = "20px Arial";
+              ctx.fillText("请" + info.ticket_code + "号", 140, 90);
+            }
+          }
+        }
+      } else {
+        if (row == 1) {
+          ctx.clearRect(0, 0, width, height);
+          // 背景黑色填充
+          ctx.fillStyle = "#000000";
+          ctx.fillRect(0, 0, width, height);
+          ctx.fillStyle = "#FF0000";
+          if (item.name.length * 30 >= 280) {
+            let num = 300 / item.name.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.name, 10, (100 - num) / 2 + num);
+          } else {
+            let start = (280 - item.name.length * 30) / 2 + 10;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.name, start, 65);
+          }
+        } else if (row == 2) {
+          if (item.title.length * 30 > maxWidth) {
+            let num = maxWidth / item.title.length;
+            ctx.font = num + "px Arial";
+            ctx.fillText(item.title, 100, (30 - num) / 2 + 15 + num);
+          } else {
+            let start = (maxWidth - item.title.length * 30) / 2 + 100;
+            ctx.font = "30px Arial";
+            ctx.fillText(item.title, start, 45);
+          }
+          ctx.font = "30px Arial";
+          ctx.fillText("欢迎光临", 130, 83);
+        }
+      }
+      return canvas.toDataURL("image/png");
+    },
+    loopJH() {
+      if (!this.roundJH) return;
+      let that = this;
+      this.getToken().then(() => {
+        let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
+        arr.map(function (index) {
+          let obj = globalVariable.JHEntityObj[index];
+          let item = obj.item;
+          if (item.type == 1) {
+            that.getWindowInfo(obj.item).then((info) => {
+              let image = that.createJHImage(item, info);
+              let pointArr = item.topPoint
+                .map(function (item_) {
+                  return [item_.lon, item_.lat, item_.height];
+                })
+                .join()
+                .split(",")
+                .map((num) => Number(num));
+              globalVariable.JHEntityObj[index].entity2 =
+                globalVariable.viewer.entities.add({
+                  show: false,
+                  wall: {
+                    positions:
+                      Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+                    minimumHeights: item.endHeight,
+                    material: new Cesium.ImageMaterialProperty({
+                      image: image,
+                      transparent: false,
+                    }),
+                  },
+                });
+              setTimeout(() => {
+                globalVariable.JHEntityObj[index].entity1.show = false;
+                if (that.roundJH) {
+                  globalVariable.JHEntityObj[index].entity2.show = true;
+                } else {
+                  globalVariable.JHEntityObj[index].entity2.show = false;
+                }
+                globalVariable.viewer.entities.remove(
+                  globalVariable.JHEntityObj[index].entity1
+                );
+                globalVariable.JHEntityObj[index].entity1 =
+                  globalVariable.JHEntityObj[index].entity2;
+              }, 200);
+              // obj.entity.wall.material = new Cesium.ImageMaterialProperty({
+              //   image: image,
+              //   transparent: true,
+              // });
+            });
+          }
+        });
+      });
+    },
+    /* -------------------------- */
+
     // 地图添加图片
     addImage(viewer, pObj, imgUrl) {
       // // 顺时针
@@ -866,13 +1188,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#cesiumContainer {
+.viewer_container {
   width: 100%;
   height: 100%;
+  #cesiumContainer {
+    width: 100%;
+    height: 100%;
 
-  .get_now_camera_view {
-    position: absolute;
-    z-index: 1;
+    // .get_now_camera_view {
+    //   position: absolute;
+    //   z-index: 1;
+    // }
   }
 }
 </style>

src/components2/MainMap.vue

@@ -32,8 +32,6 @@ import api from "@/api/content";
 export default {
   data() {
     return {
-      loopJHObj: null,
-
       dialogVisible: false,
       dialogInfoStr: "",
       clipboard: null,
@@ -647,7 +645,7 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
-
+    /* ------------叫号------------ */
     initJH() {
       let that = this;
       this.initWindowBackground();
@@ -722,12 +720,11 @@ export default {
         }
       });
       // });
-      window.loopJHObj = "";
       that.roundJH = true;
       // 开始循环访问
       that.loopJH();
       // 开始循环访问
-      window.loopJHObj = window.setInterval(function () {
+      window.setInterval(function () {
         that.loopJH();
       }, serviceWindowTime);
     },
@@ -764,16 +761,11 @@ export default {
         });
       });
     },
-
     openJH() {
       this.roundJH = true;
     },
     closeJH() {
       this.roundJH = false;
-      // if (window.loopJHObj) {
-      //   window.clearInterval(window.loopJHObj);
-      //   window.loopJHObj = null;
-      // }
     },
     showJH(floor) {
       let arr = Object.getOwnPropertyNames(globalVariable.JHEntityObj);
@@ -811,7 +803,6 @@ export default {
         item.show = false;
       });
     },
-
     getToken() {
       let that = this;
       return new Promise((resolve, reject) => {
@@ -821,7 +812,6 @@ export default {
         });
       });
     },
-
     getWindowInfo(params) {
       return new Promise((resolve, reject) => {
         api.getWindowInfo({ id: params.id }).then(function (result) {
@@ -835,7 +825,6 @@ export default {
         });
       });
     },
-
     createJHImage(item, info) {
       // win_code: "A02",
       // win_id: "102",
@@ -970,7 +959,6 @@ export default {
       }
       return canvas.toDataURL("image/png");
     },
-
     loopJH() {
       if (!this.roundJH) return;
       let that = this;
@@ -1024,6 +1012,7 @@ export default {
         });
       });
     },
+    /* ------------------------ */
 
     // 地图添加图片
     addImage(viewer, pObj, imgUrl) {
@@ -1215,16 +1204,10 @@ export default {
     width: 100%;
     height: 100%;
 
-    .get_now_camera_view {
-      position: absolute;
-      z-index: 1;
-    }
-  }
-  #canvas-b {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: none;
+    // .get_now_camera_view {
+    //   position: absolute;
+    //   z-index: 1;
+    // }
   }
 }
 </style>