进度条

2 years ago · 9cbcd5fc8d
3 changed files with 98 additions and 3 deletions
--- a/download.html
+++ b/download.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>烟雨江南客户端下载</title>
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
+      .main {
+        background: url('http://image.gyyxcdn.cn/upload/wd/p/wallpaper/2018bz6_1920.jpg')
+          no-repeat;
+        background-size: 100% 100%;
+        width: 100vw;
+        height: 100vh;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 140px;
+      }
+      .btn {
+        border: solid 1px #ddd;
+        padding: 60px 80px;
+        cursor: pointer;
+        border-radius: 16px;
+        color: #fff;
+        font-size: 30px;
+        background: linear-gradient(to bottom, #000000, #ffffff);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div class="btn" onclick="download()">下载烟雨江南客户端</div>
+    </div>
+  </body>
+  <script>
+    const download = () => {
+      fetch(
+        'https://lz.qaiu.top/json/parser?url=https://www.123pan.com/s/PK2tVv-1RxsA.html',
+      )
+        .then(res => res.json())
+        .then(res => {
+          if (res.code == 200) {
+            let a = document.createElement('a') //创建一个a标签元素
+            a.style.display = 'none' //设置元素不可见
+            a.href = res.data //设置下载地址
+            document.body.appendChild(a) //加入
+            a.click() //触发点击,下载
+            document.body.removeChild(a) / 释放
+          }
+        })
+        .catch(err => console.log(err))
+    }
+  </script>
+</html>
--- a/src/components/Operator.vue
+++ b/src/components/Operator.vue
@ -32,7 +32,14 @@
      <div class="start" @click="startDisinfect">开始消毒</div>
      <div class="progress">
        <p class="title">消毒进度</p>
-        <div class="tube"></div>
+        <div class="tube">
+          <div
+            class="pro"
+            :style="{
+              '--width': '50px',
+            }"
+          ></div>
+        </div>
        <div class="num">000/100</div>
      </div>
    </div>
@ -233,6 +240,17 @@ const showLogPicker = () => {
        border-radius: 7px;
        background: #ffffff;
        margin-bottom: 11px;
+        position: relative;
+        overflow: hidden;
+        .pro {
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 14px;
+          width: var(--width);
+          border-radius: 7px;
+          background: #06518b;
+        }
      }
      .num {
        display: flex;
--- a/src/components/info/DisinfectantLiquidInfo.vue
+++ b/src/components/info/DisinfectantLiquidInfo.vue
@ -20,7 +20,14 @@
        </g>
      </svg>
      消毒液
-      <div class="progress"></div>
+      <div class="progress">
+        <div
+          class="pro"
+          :style="{
+            '--height': '50px',
+          }"
+        ></div>
+      </div>
    </div>
    <div class="bottom">500 (g)</div>
  </div>
@ -60,7 +67,17 @@
      width: 6px;
      height: 100px;
      border-radius: 3px;
-      background: #1f6397;
+      background: #fff;
+      overflow: hidden;
+      .pro {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 6px;
+        height: var(--height);
+        background: #1f6397;
+        border-radius: 3px;
+      }
    }
  }
  .bottom {