青浦事项库修改

src/components/Tool.vue

@@ -225,6 +225,7 @@
                     <li
                       v-for="(item_, index_) in item.chiles"
                       :key="index_"
+                      @click="searchInfoAndJump(item_)"
                     >
                       {{ item_.name }}
                     </li>
@@ -232,6 +233,7 @@
                 </van-collapse-item>
                 <span
                   class="item"
+                  @click="searchInfoAndJump(item.chiles[0])"
                   v-else
                 >
                   {{ item.name }}
@@ -405,12 +407,12 @@ export default {
         active: false,
         clickFunc: this.showPlane,
       },
-      {
-        label: "事项库",
-        changeActive: true,
-        active: false,
-        clickFunc: this.showEvent,
-      },
+      // {
+      //   label: "事项库",
+      //   changeActive: true,
+      //   active: false,
+      //   clickFunc: this.showEvent,
+      // },
     ];
     window.cancelLookAround = this.cancelLookAround;
     setTimeout(() => {
@@ -824,6 +826,43 @@ export default {
     chooseDBSecond(item) {
       this.doThingSecond = item;
     },
+    // 可办事项地址查询并跳转
+    searchInfoAndJump(item) {
+      let that = this;
+      if (item.executeNumber.length < 6) {
+        // this.$message({
+        //   type: "info",
+        //   messsage: "当前选项暂时跳转！",
+        // });
+        this.$toast({
+          message: "当前选项暂不支持跳转",
+        });
+        return;
+      }
+      let params = {
+        page: 0,
+        pageSize: 10,
+        tableName: "ywtb_auditfwzn",
+        where: "item_code = '" + item.executeNumber + "'",
+      };
+      postform(this.eventData.url, params).then((res) => {
+        if (res.code == 200) {
+          // window.open(res.content[0].login_url); // 在safari中失效
+          that.setCLJ(res.content[0].login_url)
+        }
+      });
+    },
+
+    // 页面跳转（为了结局在safari浏览器中无法跳转的问题）
+    setCLJ(url) {
+      let dom = document.createElement("a");
+      dom.setAttribute("href", url);
+      document.body.appendChild(dom);
+      dom.click();
+      setTimeout(() => {
+        document.body.removeChild(dom);
+      }, 100);
+    },
 
     // 点位触发事件
     pointClickHandle(item) {

src/components2/Tool.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="tool">
     <ul class="func">
-      <li v-for="(item, index) in funcList" :key="index" :class="{ active: item.active }" @click="toolClickHandle(item)">
+      <li
+        v-for="(item, index) in funcList"
+        :key="index"
+        :class="{ active: item.active }"
+        @click="toolClickHandle(item)"
+      >
         <p></p>
         <!-- {{ item.label }} -->
       </li>
     </ul>
-    <div :class="{ help: true, active: helpActive }" v-show="false" @click="showHelp"></div>
+    <div
+      :class="{ help: true, active: helpActive }"
+      v-show="false"
+      @click="showHelp"
+    ></div>
 
     <!-- 展示索引页面 -->
     <van-popup
@@ -40,7 +49,11 @@
           </div> -->
           <div class="list_container">
             <div>
-              <div class="first_content" v-for="(item, index) in cameraInfo" :key="index">
+              <div
+                class="first_content"
+                v-for="(item, index) in cameraInfo"
+                :key="index"
+              >
                 <div class="title">{{ item.name }}</div>
                 <ul>
                   <li
@@ -67,7 +80,10 @@
           </div>
         </div>
       </div>
-      <div class="close" @click="hideIndexesInfoDailog"></div>
+      <div
+        class="close"
+        @click="hideIndexesInfoDailog"
+      ></div>
     </van-popup>
 
     <!-- 展示点位文字信息 -->
@@ -81,7 +97,10 @@
       <div class="pointInfoContent">
         <div v-html="pointInfos"></div>
       </div>
-      <div class="close" @click="hidePointInfoDailog"></div>
+      <div
+        class="close"
+        @click="hidePointInfoDailog"
+      ></div>
     </van-popup>
 
     <!-- 展示平面图 -->
@@ -101,15 +120,30 @@
       <div class="plane_container">
         <div class="image_container">
           <ul>
-            <li v-for="(item, index) in planeArr" :key="index" v-show="item.active">
-              <img :src="item.src" alt="" />
+            <li
+              v-for="(item, index) in planeArr"
+              :key="index"
+              v-show="item.active"
+            >
+              <img
+                :src="item.src"
+                alt=""
+              />
             </li>
-            <div class="close" @click="hidePlaneInfoDailog"></div>
+            <div
+              class="close"
+              @click="hidePlaneInfoDailog"
+            ></div>
           </ul>
         </div>
         <div class="image_header">
           <ul>
-            <li v-for="(item, index) in planeArr" :key="index" :class="{ active: item.active }" @click="choosePlane(index)">
+            <li
+              v-for="(item, index) in planeArr"
+              :key="index"
+              :class="{ active: item.active }"
+              @click="choosePlane(index)"
+            >
               {{ item.name }}
             </li>
           </ul>
@@ -137,7 +171,10 @@
           <div>2. 使用工具栏内“索引”功能，可快速切换场景</div>
         </div>
       </div>
-      <div class="close" @click="hideHelpInfoDailog"></div>
+      <div
+        class="close"
+        @click="hideHelpInfoDailog"
+      ></div>
     </van-popup>
 
     <!-- 展示点位可办事项 -->
@@ -156,26 +193,51 @@
           <div class="header">部门</div>
           <div class="list">
             <ul>
-              <li v-for="(item, index) in doThingFirst" :key="index" @click="chooseDBSecond(item)">
+              <li
+                v-for="(item, index) in doThingFirst"
+                :key="index"
+                @click="chooseDBSecond(item)"
+              >
                 <span>{{ item.unit }}</span>
                 <span v-if="item.chiles">({{ item.chiles.length }})</span>
               </li>
             </ul>
           </div>
         </div>
-        <div class="doThingSecondContent" v-if="Object.getOwnPropertyNames(doThingSecond).length != 0">
+        <div
+          class="doThingSecondContent"
+          v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
+        >
           <div class="header">青浦区{{ doThingSecond.unit }}</div>
           <div class="list">
-            <van-collapse v-model="activeNames" accordion>
-              <div v-for="(item, index) in doThingSecond.chiles" :key="index">
-                <van-collapse-item :title="item.name" :name="index + 1 + ''" v-if="item.chiles[0].name.length != 0">
+            <van-collapse
+              v-model="activeNames"
+              accordion
+            >
+              <div
+                v-for="(item, index) in doThingSecond.chiles"
+                :key="index"
+              >
+                <van-collapse-item
+                  :title="item.name"
+                  :name="index + 1 + ''"
+                  v-if="item.chiles[0].name.length != 0"
+                >
                   <ul>
-                    <li v-for="(item_, index_) in item.chiles" :key="index_">
+                    <li
+                      v-for="(item_, index_) in item.chiles"
+                      :key="index_"
+                      @click="searchInfoAndJump(item_)"
+                    >
                       {{ item_.name }}
                     </li>
                   </ul>
                 </van-collapse-item>
-                <span class="item" v-else>
+                <span
+                  class="item"
+                  @click="searchInfoAndJump(item.chiles[0])"
+                  v-else
+                >
                   {{ item.name }}
                 </span>
               </div>
@@ -184,9 +246,16 @@
         </div>
       </div>
 
-      <div class="close" @click="closeDoThingPopup"></div>
+      <div
+        class="close"
+        @click="closeDoThingPopup"
+      ></div>
       <!-- v-if="Object.getOwnPropertyNames(doThingSecond).length == 0" -->
-      <div class="back" @click="backDoThingPopup" v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"></div>
+      <div
+        class="back"
+        @click="backDoThingPopup"
+        v-if="Object.getOwnPropertyNames(doThingSecond).length != 0"
+      ></div>
     </van-popup>
 
     <!-- 事项库 -->
@@ -200,28 +269,53 @@
       :closed="hideEventListDailog"
     >
       <div class="plane_container_event">
-        <div class="close" @click="hideEventListDailog"></div>
+        <div
+          class="close"
+          @click="hideEventListDailog"
+        ></div>
         <div class="paramsBox">
-          关键字：<input type="text" v-model="eventData.params.where" /> 当前页：<input
+          关键字：<input
+            type="text"
+            v-model="eventData.params.where"
+          /> 当前页：<input
             type="number"
             v-model="eventData.params.page"
           />
-          每页数：<input type="number" v-model="eventData.params.pageSize" />
+          每页数：<input
+            type="number"
+            v-model="eventData.params.pageSize"
+          />
           <div class="paramBtuBox">
-            <div class="paramBtu" @click="reSetParam()">重置</div>
-            <div class="paramBtu" @click="showEvent()">查询</div>
+            <div
+              class="paramBtu"
+              @click="reSetParam()"
+            >重置</div>
+            <div
+              class="paramBtu"
+              @click="showEvent()"
+            >查询</div>
           </div>
         </div>
 
-        <p v-for="(item, index) in eventData.data" :key="'event_' + index">
+        <p
+          v-for="(item, index) in eventData.data"
+          :key="'event_' + index"
+        >
           <span
             v-if="(item.link_ck || item.jsfs_ck) && (item.link_ws || item.jsfs_ws)"
             @click="windowOpenNewPage(item.link_ws || item.jsfs_ws)"
-            >{{ item.link_ck || item.jsfs_ck }}</span
-          >
+          >{{ item.link_ck || item.jsfs_ck }}</span>
         </p>
       </div>
     </van-popup>
+
+    <van-popup
+      v-model:show="tipsShow"
+      class="tips"
+    ><van-icon
+        name="warning-o"
+        style="color:red;margin-right:5px"
+      />当前选项暂不支持跳转</van-popup>
   </div>
 </template>
 
@@ -239,14 +333,14 @@ export default {
       planeShow: false,
       showEventState: false, // 事项库弹窗显示状态
       eventData: {
-        url:systemConfig.eventUrl,
+        url: systemConfig.eventUrl,
         data: [],
         params: {
           tableName: "ywtb_auditfwzn",
           page: 1,
           pageSize: 20,
-          where: ""
-        }
+          where: "",
+        },
       },
       helpShow: false,
       doThingShow: false,
@@ -262,21 +356,22 @@ export default {
         {
           name: "一层1F",
           src: "./static/images/plane/plane1.png",
-          active: true
+          active: true,
         },
         {
           name: "二层2F",
           src: "./static/images/plane/plane2.png",
-          active: false
+          active: false,
         },
         {
           name: "三层3F",
           src: "./static/images/plane/plane3.png",
-          active: false
-        }
+          active: false,
+        },
       ],
       activeNames: "0",
-      helpActive: false
+      helpActive: false,
+      tipsShow: false,
     };
   },
   mounted() {
@@ -286,38 +381,38 @@ export default {
         label: "热点",
         changeActive: true,
         active: true,
-        clickFunc: this.loadPoint
+        clickFunc: this.loadPoint,
       },
       {
         label: "索引",
         changeActive: true,
         active: false,
-        clickFunc: this.showIndexes
+        clickFunc: this.showIndexes,
       },
       {
         label: "漫游",
         changeActive: true,
         active: false,
-        clickFunc: this.lookaround
+        clickFunc: this.lookaround,
       },
       {
         label: "复位",
         changeActive: false,
         active: false,
-        clickFunc: this.setViewDefaultlocation
+        clickFunc: this.setViewDefaultlocation,
       },
       {
         label: "平面图",
         changeActive: true,
         active: false,
-        clickFunc: this.showPlane
+        clickFunc: this.showPlane,
       },
-      {
-        label: "事项库",
-        changeActive: true,
-        active: false,
-        clickFunc: this.showEvent
-      }
+      // {
+      //   label: "事项库",
+      //   changeActive: true,
+      //   active: false,
+      //   clickFunc: this.showEvent,
+      // },
     ];
     window.cancelLookAround = this.cancelLookAround;
     setTimeout(() => {
@@ -377,12 +472,17 @@ export default {
     showEvent() {
       let params_ = Object.assign({}, this.eventData.params);
       if (params_.where) {
-        params_.where = "link_ck like '%" + params_.where + "%' or jsfs_ck like '%" + params_.where + "%'";
+        params_.where =
+          "link_ck like '%" +
+          params_.where +
+          "%' or jsfs_ck like '%" +
+          params_.where +
+          "%'";
       }
       if (params_.page > 0) {
         params_.page -= 1;
       }
-      postform(this.eventData.url, params_).then(res => {
+      postform(this.eventData.url, params_).then((res) => {
         if (!this.showEventState) {
           this.showEventState = true;
         }
@@ -432,12 +532,16 @@ export default {
         lng: 121.12275503870025,
         lat: 31.153914277622604,
         pitch: -35,
-        height: 140
+        height: 140,
       };
       // rotateCamera({lng:121.12275503870025, lat:31.153914277622604, pitch: -35, height: 140});
       // // 相机绕点环绕飞行
       // function rotateCamera(options){
-      var position = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, 0.0);
+      var position = Cesium.Cartesian3.fromDegrees(
+        options.lng,
+        options.lat,
+        0.0
+      );
       // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
       var pitch = Cesium.Math.toRadians(options.pitch);
       // 给定飞行一周所需时间，比如30s, 那么每秒转动度数
@@ -446,7 +550,11 @@ export default {
       var distance = options.height;
       var startTime = Cesium.JulianDate.fromDate(new Date());
 
-      var stopTime = Cesium.JulianDate.addSeconds(startTime, 30, new Cesium.JulianDate());
+      var stopTime = Cesium.JulianDate.addSeconds(
+        startTime,
+        30,
+        new Cesium.JulianDate()
+      );
 
       globalVariable.viewer.clock.startTime = startTime.clone(); // 开始时间
       globalVariable.viewer.clock.stopTime = stopTime.clone(); // 结速时间
@@ -464,9 +572,17 @@ export default {
         // 根据过去的时间，计算偏航角的变化
         var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
 
-        globalVariable.viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, distance));
+        globalVariable.viewer.camera.lookAt(
+          position,
+          new Cesium.HeadingPitchRange(heading, pitch, distance)
+        );
 
-        if (Cesium.JulianDate.compare(globalVariable.viewer.clock.currentTime, globalVariable.viewer.clock.stopTime) >= 0) {
+        if (
+          Cesium.JulianDate.compare(
+            globalVariable.viewer.clock.currentTime,
+            globalVariable.viewer.clock.stopTime
+          ) >= 0
+        ) {
           that.cancelLookAround();
         }
       };
@@ -504,7 +620,7 @@ export default {
           roll: systemConfig.mapDefault.roll,
           time: 1,
           pitchAdjustHeight: 1000,
-          callback: function () {}
+          callback: function () {},
         }).then(() => {
           resolve();
         });
@@ -568,8 +684,8 @@ export default {
                   outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
                   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
-                  pixelOffset: new Cesium.Cartesian2(0, -20) //偏移
-                }
+                  pixelOffset: new Cesium.Cartesian2(0, -20), //偏移
+                },
               });
               entity.infos = item;
               entity.callback = that.pointClickHandle;
@@ -600,8 +716,8 @@ export default {
                   outlineColor: Cesium.Color.fromCssColorString("#00000066"), //背景颜色
                   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
                   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
-                  pixelOffset: new Cesium.Cartesian2(0, 23) //偏移
-                }
+                  pixelOffset: new Cesium.Cartesian2(0, 23), //偏移
+                },
               });
               entity.infos = item;
               entity.callback = that.pointClickHandle;
@@ -625,15 +741,24 @@ export default {
       return;
       globalVariable.viewer.scene.postRender.addEventListener(function () {
         globalVariable.hotMarkerArr.map(function (item) {
-          var canvasPosition = globalVariable.viewer.scene.cartesianToCanvasCoordinates(
-            item._position._value,
-            new Cesium.Cartesian2()
-          );
-          if (Cesium.defined(canvasPosition) && !isNaN(canvasPosition.x) && !isNaN(canvasPosition.y)) {
+          var canvasPosition =
+            globalVariable.viewer.scene.cartesianToCanvasCoordinates(
+              item._position._value,
+              new Cesium.Cartesian2()
+            );
+          if (
+            Cesium.defined(canvasPosition) &&
+            !isNaN(canvasPosition.x) &&
+            !isNaN(canvasPosition.y)
+          ) {
             document.getElementsByClassName(item.id)[0].style.display = "block";
             if (!document.getElementsByClassName(item.id)) return;
-            document.getElementsByClassName(item.id)[0].style.top = `${canvasPosition.y - 15}px`;
-            document.getElementsByClassName(item.id)[0].style.left = `${canvasPosition.x - 15}px`;
+            document.getElementsByClassName(item.id)[0].style.top = `${
+              canvasPosition.y - 15
+            }px`;
+            document.getElementsByClassName(item.id)[0].style.left = `${
+              canvasPosition.x - 15
+            }px`;
           } else {
             document.getElementsByClassName(item.id)[0].style.display = "none";
           }
@@ -642,7 +767,10 @@ export default {
     },
 
     addGIF2(item, position, id) {
-      let c = globalVariable.viewer.scene.cartesianToCanvasCoordinates(position, new Cesium.Cartesian2());
+      let c = globalVariable.viewer.scene.cartesianToCanvasCoordinates(
+        position,
+        new Cesium.Cartesian2()
+      );
       //创建一个div
       var div = document.createElement("div");
       //为div创建属性class = "test"
@@ -683,6 +811,44 @@ export default {
     chooseDBSecond(item) {
       this.doThingSecond = item;
     },
+    // 可办事项地址查询并跳转
+    searchInfoAndJump(item) {
+      let that = this;
+      if (item.executeNumber.length < 6) {
+        // this.$message({
+        //   type: "info",
+        //   messsage: "当前选项无法跳转！",
+        // });
+        this.tipsShow = true;
+        setTimeout(() => {
+          that.tipsShow = false;
+        }, 1500);
+        return;
+      }
+      let params = {
+        page: 0,
+        pageSize: 10,
+        tableName: "ywtb_auditfwzn",
+        where: "item_code = '" + item.executeNumber + "'",
+      };
+      postform(this.eventData.url, params).then((res) => {
+        if (res.code == 200) {
+          // window.open(res.content[0].login_url); // 在safari中失效
+          that.setCLJ(res.content[0].login_url);
+        }
+      });
+    },
+
+    // 页面跳转（为了结局在safari浏览器中无法跳转的问题）
+    setCLJ(url) {
+      let dom = document.createElement("a");
+      dom.setAttribute("href", url);
+      document.body.appendChild(dom);
+      dom.click();
+      setTimeout(() => {
+        document.body.removeChild(dom);
+      }, 100);
+    },
 
     // 点位触发事件
     pointClickHandle(item) {
@@ -723,7 +889,7 @@ export default {
             callback: function (item) {
               // closeHull(item.camera.sceneType);
               showTitle(item.details.areaName);
-            }
+            },
           }).then(() => {});
           break;
         case 5:
@@ -761,8 +927,11 @@ export default {
             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             pixelOffset: new Cesium.Cartesian2(0, 0),
-            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 15)
-          }
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+              0,
+              15
+            ),
+          },
           // label: {
           //   text: item.areaName != "" ? item.areaName : "" + (index + 1),
           //   // text: "" + (index + 1),
@@ -798,7 +967,7 @@ export default {
         time: 1,
         pitchAdjustHeight: 1000,
         details: item,
-        callback: function () {}
+        callback: function () {},
       }).then(() => {
         // resolve();
       });
@@ -850,7 +1019,7 @@ export default {
         details: item,
         callback: function (item) {
           closeHull(item.details.sceneType);
-        }
+        },
       });
 
       this.indexesShow = false;
@@ -881,7 +1050,7 @@ export default {
         }
         return item;
       });
-    }
+    },
   },
 
   watch: {
@@ -892,9 +1061,9 @@ export default {
         } else {
           this.helpActive = false;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 
@@ -928,50 +1097,62 @@ export default {
       }
       &:nth-child(1) {
         p {
-          background: url(~@/assets/img/tool/new_tb/hotpoint.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/hotpoint.png) center
+            center/100% 100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/hotpoint_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/hotpoint_active.png) center
+            center/100% 100% no-repeat;
         }
       }
       &:nth-child(2) {
         p {
-          background: url(~@/assets/img/tool/new_tb/indexes.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/indexes.png) center
+            center/100% 100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/indexes_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/indexes_active.png) center
+            center/100% 100% no-repeat;
         }
       }
       &:nth-child(3) {
         p {
-          background: url(~@/assets/img/tool/new_tb/pan.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/pan.png) center center/100%
+            100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/pan_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/pan_active.png) center
+            center/100% 100% no-repeat;
         }
       }
       &:nth-child(4) {
         p {
-          background: url(~@/assets/img/tool/new_tb/reposition.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/reposition.png) center
+            center/100% 100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/reposition_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/reposition_active.png)
+            center center/100% 100% no-repeat;
         }
       }
       &:nth-child(5) {
         p {
-          background: url(~@/assets/img/tool/new_tb/plan.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/plan.png) center center/100%
+            100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/plan_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/plan_active.png) center
+            center/100% 100% no-repeat;
         }
       }
       &:nth-child(6) {
         p {
-          background: url(~@/assets/img/tool/new_tb/event_library.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/event_library.png) center
+            center/100% 100% no-repeat;
         }
         &.active p {
-          background: url(~@/assets/img/tool/new_tb/event_library_active.png) center center/100% 100% no-repeat;
+          background: url(~@/assets/img/tool/new_tb/event_library_active.png)
+            center center/100% 100% no-repeat;
         }
       }
     }
@@ -979,9 +1160,11 @@ export default {
   .help {
     width: 50px;
     height: 50px;
-    background: url(~@/assets/img/tool/new_tb/help.png) center center / 100% 100% no-repeat;
+    background: url(~@/assets/img/tool/new_tb/help.png) center center / 100%
+      100% no-repeat;
     &.active {
-      background: url(~@/assets/img/tool/new_tb/help_active.png) center center/100% 100% no-repeat;
+      background: url(~@/assets/img/tool/new_tb/help_active.png) center
+        center/100% 100% no-repeat;
     }
   }
 
@@ -1009,7 +1192,8 @@ export default {
           text-align: center;
           color: #ffffff;
           margin: 21px auto;
-          background: url(~@/assets/img/tool/indexes_header.png) center center / 100% 100% no-repeat;
+          background: url(~@/assets/img/tool/indexes_header.png) center center /
+            100% 100% no-repeat;
         }
         .list_container {
           width: 100%;
@@ -1050,7 +1234,8 @@ export default {
       width: 16px;
       height: 16px;
       margin: 4px 4px;
-      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       right: 0px;
@@ -1081,7 +1266,8 @@ export default {
       width: 16px;
       height: 16px;
       margin: 4px 4px;
-      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       right: 0px;
@@ -1187,7 +1373,8 @@ export default {
       height: 16px;
       margin: 4px 4px;
       margin-right: 10px;
-      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       right: 0px;
@@ -1229,7 +1416,8 @@ export default {
       width: 16px;
       height: 16px;
       margin: 4px 4px;
-      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       right: 0px;
@@ -1276,13 +1464,15 @@ export default {
               height: 2px;
               width: 120px;
               position: absolute;
-              background: url(~@/assets/img/tool/indexes_point_bottom.png) center center / 100% 100% no-repeat;
+              background: url(~@/assets/img/tool/indexes_point_bottom.png)
+                center center / 100% 100% no-repeat;
               bottom: 0px;
               left: 15px;
             }
             &.active {
               color: #ffc44d;
-              background: url(~@/assets/img/tool/indexes_point_active.png) center center / 100% 100% no-repeat;
+              background: url(~@/assets/img/tool/indexes_point_active.png)
+                center center / 100% 100% no-repeat;
               &::after {
                 display: none;
               }
@@ -1359,7 +1549,8 @@ export default {
       width: 16px;
       height: 16px;
       margin: 4px 4px;
-      background: url(~@/assets/img/tool/close.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/close.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       right: 0px;
@@ -1367,7 +1558,8 @@ export default {
     .back {
       width: 24px;
       height: 24px;
-      background: url(~@/assets/img/tool/back.png) center center / 100% 100% no-repeat;
+      background: url(~@/assets/img/tool/back.png) center center / 100% 100%
+        no-repeat;
       position: absolute;
       top: 0px;
       left: 0px;
@@ -1381,4 +1573,11 @@ export default {
     height: 100%;
   }
 }
+:deep(.tips) {
+  font-size: 8px;
+  padding: 5px 5px;
+  border-radius: 2px;
+  top: 4vh;
+  left: 14vh;
+}
 </style>

src/main.js

@@ -21,4 +21,7 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 Vant.install(initApp);
 
+import { Toast } from 'vant';
+initApp.use(Toast);
+
 initApp.mount('#app');