进度条

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 {