其他页面增加APP下载二维码

src/views/Others/index.vue

@@ -12,7 +12,13 @@
       @change="changeSwiper"
     >
       <!-- card-1 -->
-      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
+      <el-carousel-item
+        :style="
+          $store.state.themeName === 'dark'
+            ? 'padding: 20px; background: rgb(4, 12, 11)'
+            : 'padding: 20px; background: #fff'
+        "
+      >
         <div class="itemBox">
           <p class="itemTitle">记录查询</p>
           <div class="df-table">
@@ -33,7 +39,13 @@
 
       <!-- card-2 -->
 
-      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
+      <el-carousel-item
+        :style="
+          $store.state.themeName === 'dark'
+            ? 'padding: 20px; background: rgb(4, 12, 11)'
+            : 'padding: 20px; background: #fff'
+        "
+      >
         <div class="itemBox">
           <p class="itemTitle">
             报表管理
@@ -92,7 +104,13 @@
         </div>
       </el-carousel-item>
       <!-- card-3 -->
-      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
+      <el-carousel-item
+        :style="
+          $store.state.themeName === 'dark'
+            ? 'padding: 20px; background: rgb(4, 12, 11)'
+            : 'padding: 20px; background: #fff'
+        "
+      >
         <div class="itemBox">
           <p class="itemTitle">数据查询</p>
           <div class="df-table" @click="jumpUrl('/others/realSearch')">
@@ -133,7 +151,13 @@
           </div>
         </div>
       </el-carousel-item> -->
-      <el-carousel-item :style="$store.state.themeName === 'dark' ? 'padding: 20px; background: rgb(4, 12, 11)' : 'padding: 20px; background: #fff'">
+      <el-carousel-item
+        :style="
+          $store.state.themeName === 'dark'
+            ? 'padding: 20px; background: rgb(4, 12, 11)'
+            : 'padding: 20px; background: #fff'
+        "
+      >
         <div class="itemBox">
           <p class="itemTitle">
             专家知识
@@ -207,19 +231,35 @@
         </div>
       </el-carousel-item>
     </el-carousel>
+    <div class="downloadAppBtnBox">
+      <el-popover
+        placement="left-start"
+        title=""
+        :width="180"
+        trigger="hover"
+        content=""
+        popper-class="popoverCurrentClass"
+      >
+        <template #reference>
+          <button class="btn green">下载 APP</button>
+        </template>
+        <el-image
+          style="width: 152px; height: 150px"
+          src="./static/img/appdownload.png"
+          fit="fill"
+        />
+      </el-popover>
+    </div>
   </div>
 </template>
 
 <script>
 import $ from "jquery";
-import ComTable from "./table.vue";
 export default {
   // 名称
   name: "cutAnalyse",
   // 使用组件
-  components: {
-    ComTable,
-  },
+  components: {},
   // 数据
   data() {
     const that = this;
@@ -882,6 +922,32 @@ export default {
     background: #fff;
   }
 }
+
+.swiperBox {
+  position: relative;
+
+  .downloadAppBtnBox {
+    position: absolute;
+    right: 0;
+    bottom: 40px;
+
+    button.btn {
+      opacity: 0.75;
+      background: rgba(5, 187, 76, 0.2);
+      color: #05bb4c;
+      border-color: #05bb4c;
+      transition: 0.2s;
+
+      &:hover {
+        opacity: 1;
+        background: #05bb4c;
+        color: #fff;
+        border-color: rgba(5, 187, 76, 0.2);;
+        transition: 0.2s;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="less">
@@ -895,4 +961,11 @@ export default {
     text-align: left;
   }
 }
+
+.popoverCurrentClass {
+  .el-popper__arrow::before {
+    background: transparent !important;
+    border-color: transparent !important;
+  }
+}
 </style>