hwy 1 周之前
父节点
当前提交
1c2b68e3ae

+ 97 - 81
mini-pro-web/package-lock.json

@ -1746,6 +1746,63 @@
          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@ -1754,6 +1811,28 @@
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
    },
@ -5855,6 +5934,11 @@
        }
      }
    },
    "html5-qrcode": {
      "version": "2.3.8",
      "resolved": "https://registry.npmmirror.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="
    },
    "htmlparser2": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@ -10468,6 +10552,11 @@
        }
      }
    },
    "sortablejs": {
      "version": "1.10.2",
      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
    },
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@ -11866,87 +11955,6 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.2.0",
      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293579301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-router": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
@ -11986,6 +11994,14 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
    "vuedraggable": {
      "version": "2.24.3",
      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
      "requires": {
        "sortablejs": "1.10.2"
      }
    },
    "vuex": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

+ 1 - 0
mini-pro-web/package.json

@ -17,6 +17,7 @@
    "custom-components-mobile": "git+http://192.168.1.220:10080/lincl/custom-components-mobile.git#master",
    "echarts": "^5.2.2",
    "exif-js": "^2.3.0",
    "html5-qrcode": "^2.3.8",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",

+ 199 - 191
mini-pro-web/src/router/replenishment.js

@ -1,194 +1,202 @@
import NavLayout from "@/components/layout/NavLayout"
import NavLayout from '@/components/layout/NavLayout'
const routeMap = [
    {
        path: "/replenishment",
        name: "replenishment",
        component: NavLayout,
		children: [
            {
                path: "/replenishment/index",
                name: "replenishmentIndex",
                meta: {
                    title: "",
                    hasTop: false,
                    hasBot: true
                },
				component: () => import("@/views/replenishment/index.vue")
            },
            {
                path: "/replenishment/device/list",
                name: "replenishmentDeviceList",
                meta: {
                    title: "设备药品概况",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/device/list.vue")
            },
            {
                path: "/replenishment/device/detail",
                name: "replenishmentDeviceDetail",
                meta: {
                    title: "设备药品概况",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/device/detail.vue")
            },
            {
                path: "/replenishment/record/list",
                name: "replenishmentRecordList",
                meta: {
                    title: "入库记录",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/record/list.vue")
            },
            {
                path: "/replenishment/record/detail",
                name: "replenishmentRecordDetail",
                meta: {
                    title: "入库记录详情",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/record/detail.vue")
            },
            {
                path: "/replenishment/picking/list",
                name: "replenishmentPickingList",
                meta: {
                    title: "药品申领详情",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/picking/list.vue")
            },
            {
                path: "/replenishment/picking/outList",
                name: "replenishmentOutList",
                meta: {
                    title: "出库单列表",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/picking/outList.vue")
            },
            {
                path: "/replenishment/picking/detail",
                name: "replenishmentPickingDetail",
                meta: {
                    title: "药品申领详情",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/picking/detail.vue")
            },
            {
                path: "/replenishment/stockUp/deviceList",
                name: "replenishmentStockUpDeviceList",
                meta: {
                    title: "查看缺药设备",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/deviceList.vue")
            },
            {
                path: "/replenishment/stockUp/detail",
                name: "replenishmentStockUpDetail",
                meta: {
                    title: "查看缺药汇总",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/detail.vue")
            },
            {
                path: "/replenishment/stockUp/createOut",
                name: "replenishmentStockUpCreateOut",
                meta: {
                    title: "生成出药单",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/createOut.vue")
            },
            {
                path: "/replenishment/stockUp/drugList",
                name: "ReplenishmentDrugSel",
                meta: {
                    title: "选择药品",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/drugList.vue")
            },
  {
    path: '/replenishment',
    name: 'replenishment',
    component: NavLayout,
    children: [
      {
        path: '/replenishment/index',
        name: 'replenishmentIndex',
        meta: {
          title: '',
          hasTop: false,
          hasBot: true
        },
        component: () => import('@/views/replenishment/index.vue')
      },
      {
        path: '/replenishment/device/list',
        name: 'replenishmentDeviceList',
        meta: {
          title: '设备药品概况',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/device/list.vue')
      },
      {
        path: '/replenishment/device/detail',
        name: 'replenishmentDeviceDetail',
        meta: {
          title: '设备药品概况',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/device/detail.vue')
      },
      {
        path: '/replenishment/record/list',
        name: 'replenishmentRecordList',
        meta: {
          title: '入库记录',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/record/list.vue')
      },
      {
        path: '/replenishment/record/detail',
        name: 'replenishmentRecordDetail',
        meta: {
          title: '入库记录详情',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/record/detail.vue')
      },
      {
        path: '/replenishment/picking/list',
        name: 'replenishmentPickingList',
        meta: {
          title: '药品申领详情',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/picking/list.vue')
      },
      {
        path: '/replenishment/picking/outList',
        name: 'replenishmentOutList',
        meta: {
          title: '出库单列表',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/picking/outList.vue')
      },
      {
        path: '/replenishment/picking/detail',
        name: 'replenishmentPickingDetail',
        meta: {
          title: '药品申领详情',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/picking/detail.vue')
      },
      {
        path: '/replenishment/stockUp/deviceList',
        name: 'replenishmentStockUpDeviceList',
        meta: {
          title: '查看缺药设备',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/stockUp/deviceList.vue')
      },
      {
        path: '/replenishment/stockUp/detail',
        name: 'replenishmentStockUpDetail',
        meta: {
          title: '查看缺药汇总',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/stockUp/detail.vue')
      },
      {
        path: '/replenishment/stockUp/createOut',
        name: 'replenishmentStockUpCreateOut',
        meta: {
          title: '生成出药单',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/stockUp/createOut.vue')
      },
      {
        path: '/replenishment/stockUp/drugList',
        name: 'ReplenishmentDrugSel',
        meta: {
          title: '选择药品',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/stockUp/drugList.vue')
      },
            
      {
        path: '/replenishment/start/deviceList',
        name: 'replenishmentStartDeviceList',
        meta: {
          title: '选择设备',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/deviceList.vue')
      },
      {
        path: '/replenishment/start/deviceDetail',
        name: 'replenishmentStartDeviceDetail',
        meta: {
          title: '药品入库',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/deviceDetail.vue')
      },
      {
        path: '/replenishment/start/quick',
        name: 'replenishmentStartQuick',
        meta: {
          title: '药品详情',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/quick.vue')
      },
      {
        path: '/replenishment/start/productDetail',
        name: 'replenishmentStartProductDetail',
        meta: {
          title: '药品详情',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/productDetail.vue')
      },
      {
        path: '/replenishment/start/selProduct',
        name: 'replenishmentStartSelProduct',
        meta: {
          title: '选择药品',
          // hasTop: false,
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/selProduct.vue')
      },
      {
        path: '/replenishment/start/traceability',
        name: 'replenishmentStartTraceability',
        meta: {
          title: '药品追溯码',
          hasBot: false
        },
        component: () => import('@/views/replenishment/start/traceability.vue')
      },
      {
        path: '/replenishment/start/scan',
        name: 'scan',
        meta: {
          title: '扫码',
          hasBot: false,
          hasTop: false
        },
        component: () => import('@/views/replenishment/start/components/scan.vue')
      }
    ]
  }
]
            {
                path: "/replenishment/start/deviceList",
                name: "replenishmentStartDeviceList",
                meta: {
                    title: "选择设备",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/deviceList.vue")
            },
            {
                path: "/replenishment/start/deviceDetail",
                name: "replenishmentStartDeviceDetail",
                meta: {
                    title: "药品入库",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/deviceDetail.vue")
            },
            {
                path: "/replenishment/start/quick",
                name: "replenishmentStartQuick",
                meta: {
                    title: "药品详情",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/quick.vue")
            },
            {
                path: "/replenishment/start/productDetail",
                name: "replenishmentStartProductDetail",
                meta: {
                    title: "药品详情",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/productDetail.vue")
            },
            {
                path: "/replenishment/start/selProduct",
                name: "replenishmentStartSelProduct",
                meta: {
                    title: "选择药品",
                    // hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/selProduct.vue")
            },
            {
                path: '/replenishment/start/traceability',
                name: 'replenishmentStartTraceability',
                meta: {
                    title: '药品追溯码',
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/traceability.vue")
            }
		]
    }
];
export default routeMap;
export default routeMap

+ 216 - 0
mini-pro-web/src/views/replenishment/start/components/scan.vue

@ -0,0 +1,216 @@
<template>
  <div class="scanCode">
    <div class="btn">
      <div class="left-back">
        <van-icon name="arrow-left" @click="clickBack" size="14px"></van-icon>
      </div>
      <div class="currentIndex">
        5位最里:827162 123 12334 34435
      </div>
    </div>
    <div class="container">
      <div class="qrcode">
        <div id="reader"></div>
      </div>
    </div>
    <div class="footerBtn">
      <div class="current">当前号码:{{ currentCode || '未扫描' }}({{ scannedCodes.length + 1 }}/5)</div>
      <div class="nextBtn" @click="saveCode">{{ scannedCodes.length >= 5 ? '已完成' : '录入下一个追溯码' }}</div>
    </div>
  </div>
</template>
<script>
import { Html5Qrcode } from 'html5-qrcode'
export default {
  data() {
    return {
      html5QrCode: null,
      fileList: [],
      scannedCodes: [], // 存储已扫描的码
      currentCode: null, // 当前扫描的临时存储
      maxScanCount: 5 // 最大扫描数量
    }
  },
  methods: {
    async start() {
      try {
        await this.html5QrCode.start(
          { facingMode: 'environment' },
          {
            fps: 1,
            qrbox: { width: 250, height: 250 }
          },
          decodedText => {
            this.handleScanSuccess(decodedText)
          }
        )
      } catch (err) {
        this.handleScanError(err)
      }
    },
    handleScanSuccess(code) {
      this.currentCode = code
      this.stop() // 扫描成功停止扫描
      this.$toast('扫描成功,请点击录入下一个')
    },
    handleScanError(err) {
      this.$toast(err?.message || '扫码失败')
    },
    async saveCode() {
      if (!this.currentCode) return
      // 添加到数组
      this.scannedCodes.push(this.currentCode)
      console.log('11111111111111111', this.scannedCodes)
      // 如果达到最大数量
      if (this.scannedCodes.length >= this.maxScanCount) {
        this.$toast('已完成所有扫描')
        this.submitCodes()
        return
      }
      // 重置当前码并重新开始扫描
      this.currentCode = null
      await this.start()
    },
    submitCodes() {
      // 这里可以添加提交到服务器的逻辑
      console.log('最终提交的数组:', this.scannedCodes)
      this.$toast(`已保存${this.scannedCodes.length}个码`)
    },
    clickBack() {
      this.$router.back()
    },
    getCameras() {
      Html5Qrcode.getCameras()
        .then(devices => {
          if (devices && devices.length) {
            this.html5QrCode = new Html5Qrcode('reader')
            this.start()
          }
        })
        .catch(err => {
          this.$toast({
            message: '摄像头无访问权限!',
            duration: 3000
          })
        })
    },
    stop() {
      this.html5QrCode
        .stop()
        .then(ignore => {
          console.log('停止扫码', ignore)
        })
        .catch(err => {
          console.log(err)
          this.$toast('停止扫码失败')
        })
    },
    dealSelectFiles() {
      try {
        window.qrcode.callback = result => {
          console.log(result, '我是扫描获取到的值')
        }
        // get select files.
        let file = this.fileList[0].file
        var reader = new FileReader()
        reader.onload = (function() {
          return function(e) {
            window.qrcode.decode(e.target.result)
          }
        })(file)
        reader.readAsDataURL(file)
      } catch (error) {
        this.$toast('图片扫描失败')
      }
    }
  },
  mounted() {
    this.getCameras()
  },
  beforeDestroy() {
    // 扫描设备是否在运行
    if (this.html5QrCode && this.html5QrCode.isScanning) {
      this.stop()
    }
  }
}
</script>
<style scoped lang="scss">
.scanCode {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(0, 0, 0);
}
.container {
  height: 90vh;
  position: relative;
  width: 100%;
}
.qrcode {
  height: 100%;
}
#reader {
  top: 35%;
  left: 0;
  transform: translateY(-50%);
}
.btn {
  padding: 3vw;
  color: #fff;
  font-size: 8vw;
  .currentIndex {
    width: 263px;
    height: 34px;
    line-height: 34px;
    margin: 0 auto;
    background: rgba($color: #ffffff, $alpha: 0.7);
    border-radius: 6px 6px 6px 6px;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    text-align: center;
  }
}
.footerBtn {
  position: absolute;
  bottom: 30px;
  z-index: 999;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .current {
    font-weight: 400;
    font-size: 13px;
    color: #999999;
    margin-bottom: 10px;
  }
  .nextBtn {
    width: 315px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #17b3ec;
    border-radius: 6px 6px 6px 6px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>