初始化代码

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import user from './modules/user'
+import dict from './modules/dict'
+import stepView from './modules/stepView'
+import permission from './modules/permission'
+import attachment from './modules/attachment'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    user,
+    dict,
+    stepView,
+    permission,
+    attachment
+  },
+  getters
+})
+
+export default store

src/store/modules/attachment.js

+const SET_ATTACHMENT_URL = 'SET_ATTACHMENT_URL'
+
+export default {
+  namespaced: true,
+  state: {
+    attachmentUrl: ''
+  },
+  mutations: {
+    /**
+     * 设置附件链接
+     */
+    [SET_ATTACHMENT_URL](state, payload = '') {
+      state.attachmentUrl = payload
+    }
+  }
+}

src/store/modules/dict.js

+import { queryDictData, queryLogo } from '@/api/dict'
+import { queryPotocolManage } from '@/api/management'
+import { getToken } from '@/utils/auth'
+import store from '../index'
+
+const getDefaultState = () => {
+  return {
+    dictionary: {
+      // 个人证件类型
+      certType: [
+        { 'label': '居民身份证', 'value': 'IDCARD' },
+        { 'label': '户口簿', 'value': 'HOUSEHOLD' },
+        { 'label': '中国人民武装警察身份证件', 'value': 'POLICEPAPER' },
+        { 'label': '中国人民解放军军人身份证件', 'value': 'PLAIDCARD' },
+        { 'label': '港澳居民来往内地通行证', 'value': 'HKIDCARD' },
+        { 'label': '台湾居民来往大陆通行证', 'value': 'TAIBAOZHENG' },
+        { 'label': '外国公民护照', 'value': 'PASSPORT' },
+        { 'label': '港澳居民居住证', 'value': 'HKRESIDENCECARD' },
+        { 'label': '台湾居民居住证', 'value': 'TWRESIDENCECARD' }
+      ],
+      // 企业证件类型
+      companyCertType: [
+        { 'label': '统一社会信用代码', 'value': '0' },
+        { 'label': '组织机构代码证', 'value': '1' },
+        { 'label': '营业执照', 'value': '2' },
+        { 'label': '事业单位法人证书或者社会团体法人登记证书', 'value': '3' }
+      ],
+      // 企业性质
+      companyType: [
+        { 'label': '国有企业', 'value': '0' },
+        { 'label': '集体所有制', 'value': '1' },
+        { 'label': '私营企业', 'value': '2' },
+        { 'label': '有限责任公司', 'value': '3' },
+        { 'label': '股份有限公司', 'value': '4' },
+        { 'label': '有限合伙企业', 'value': '5' },
+        { 'label': '联营企业', 'value': '6' },
+        { 'label': '外商投资企业', 'value': '7' },
+        { 'label': '个人独资企业', 'value': '8' },
+        { 'label': '其他', 'value': '9' }
+      ],
+      // 行业类型
+      industryType: [
+        { 'label': '农、林、牧、渔业', 'value': '0' },
+        { 'label': '采矿业', 'value': '1' },
+        { 'label': '制造业', 'value': '2' },
+        { 'label': '电力、热力、燃气及水生产和供应业', 'value': '3' },
+        { 'label': '建筑业', 'value': '4' },
+        { 'label': '批发和零售业', 'value': '5' },
+        { 'label': '交通运输、仓储和邮政业', 'value': '6' },
+        { 'label': '住宿和餐饮业', 'value': '7' },
+        { 'label': '信息传输、软件和信息技术服务业', 'value': '8' },
+        { 'label': '金融业', 'value': '9' },
+        { 'label': '房地产业', 'value': '10' },
+        { 'label': '租赁和商务服务业', 'value': '11' },
+        { 'label': '科学研究和技术服务业', 'value': '12' },
+        { 'label': '水利、环境和公共设施管理业', 'value': '13' },
+        { 'label': '居民服务、修理和其他服务业', 'value': '14' },
+        { 'label': '教育', 'value': '15' },
+        { 'label': '卫生和社会工作', 'value': '16' },
+        { 'label': '文化、体育和娱乐业', 'value': '17' },
+        { 'label': '公共管理、社会保障和社会组织', 'value': '18' },
+        { 'label': '国际组织', 'value': '19' },
+        { 'label': '其他', 'value': '20' }
+      ],
+      // 企业实名认证步骤
+      enterpriseRealnameSteps: ['车卡信息录入', '填写企业信息', '填写责任人信息', '完成人脸识别'],
+      // 企业责任人变更步骤
+      personChangeSteps: ['变更责任人信息', '完成人脸识别'],
+      // 车企二次实名步骤
+      carEnterpriseRealnameSteps: ['车卡信息录入', '填写企业信息', '填写责任人信息'],
+      // 业务类型
+      businessType: [
+        { label: '自然人新车实名认证', value: '1' }, // 自然人
+        { label: '自然人二手车实名认证', value: '2' }, // 自然人
+        { label: '企业新车实名认证', value: '3' }, // 企业实名
+        { label: '车企新车实名认证', value: '4' }, // 企业实名
+        { label: '企业责任人变更', value: '5' }, // 企业负责人变更
+        { label: '车主解绑', value: '6' }, // 自然人
+        { label: '二手车主解绑', value: '7' }, // 自然人
+        { label: '车企实名解绑', value: '8' },
+        { label: '设备更换', value: '9' },
+        { label: '一车多卡绑定', value: '10' },
+        { label: '重新绑定', value: '11' },
+        { label: '企业解绑', value: '12' }
+      ],
+      livenessType: [
+        { 'label': '唇语验证码', 'value': 'LIP' },
+        { 'label': '动作序列', 'value': 'ACTION' }
+      ],
+      livenessActionSeq: [
+        { 'label': '张嘴', 'value': '1' },
+        { 'label': '闭眼', 'value': '2' }
+      ],
+      userType: [
+        { label: '车企用户', value: 1 },
+        { label: '经销商用户', value: 2 }
+      ],
+      logType: [
+        { label: '登录日志', value: 1 },
+        { label: '管理日志', value: 2 },
+        { label: '实名日志', value: 3 },
+        { label: '其他日志', value: 4 }
+      ]
+    },
+    model: {
+      pad: ['X960_6762_66_P', 'ST010-A', 'ST020'],
+      aio: ['UW-M358', 'ST213-B']
+    },
+    logo: '',
+    companyName: '',
+    agreements: {},
+    isInitLogo: false,
+    logoExpires: 0
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_DICT: (state, dict) => {
+    if (dict) {
+      Object.keys(dict).forEach(key => {
+        state.dictionary[key] = dict[key]
+      })
+    }
+    // state.dictionary = dict
+  },
+  CHANGE_DICT: (state, { key, value }) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (state.dictionary.hasOwnProperty(key)) {
+      state.dictionary[key] = value
+    }
+  },
+  SET_LOGO(state, payload) {
+    state.logo = payload
+  },
+  SET_COMPANY_NAME(state, payload) {
+    state.companyName = payload
+  },
+  SET_AGREEMENT(state, payload) {
+    state.agreements = payload
+  }
+}
+
+const actions = {
+  // get dict
+  getDictionary({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      queryDictData(state.token).then(response => {
+        const data = response || {}
+        commit('SET_DICT', data)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove dict
+  resetDict({ commit }) {
+    return new Promise(resolve => {
+      commit('RESET_STATE')
+      resolve()
+    })
+  },
+
+  changeDict({ commit }, data) {
+    commit('CHANGE_DICT', data)
+  },
+
+  /**
+   * 获取logo
+   */
+  async getLogo({ commit, state }, data) {
+    // 如果当前查询过
+    if (state.isInitLogo) {
+      return
+    }
+    try {
+      const respData = await (getToken() ? queryPotocolManage({ orgId: store.getters.organId }) : queryLogo(data))
+      commit('SET_COMPANY_NAME', respData.organName || store.getters.organName)
+      commit('SET_LOGO', respData.logoPc.fileUrl)
+      commit('SET_AGREEMENT', respData)
+      state.isInitLogo = true
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/permission.js

+import Layout from '@/components/Layout'
+import asyncRoutes from '@/router/asyncRoutes'
+
+const permissionBtns = []
+
+function hasPermission(name, menus) {
+  const data = menus.filter(item => {
+    return item.resourceCode === name
+  })
+  return data[0] || {}
+}
+
+function generatePageRouteTable(routes, ret = []) {
+  routes.forEach(item => {
+    if (item.children && item.children.length) {
+      const route = { ...item }
+      delete route.children
+      ret.push(route)
+      generatePageRouteTable(item.children, ret)
+    } else {
+      ret.push(item)
+    }
+  })
+}
+
+/**
+ * Filter asynchronous menu tables by recursion
+ * @param menus asyncBtns
+ */
+export function filterAsyncBtns(menus) {
+  menus.forEach(menu => {
+    const tmp = { ...menu }
+    if (tmp.resourceType === 1) {
+      permissionBtns.push(tmp.resourceCode)
+    }
+  })
+  return permissionBtns
+}
+
+/**
+ * Filter asynchronous routing tables by recursion
+ * @param routes asyncRoutes
+ * @param roles
+ */
+export function filterAsyncRoutes(routes, menus) {
+  const res = []
+  // 权限接口为空则不过滤接口
+  if (menus.length === 0) {
+    return routes
+  }
+  routes.forEach(route => {
+    const tmp = { ...route }
+    const data = hasPermission(tmp.name, menus)
+    if (data.resourceCode) {
+      if (tmp.children) {
+        tmp.children = filterAsyncRoutes(tmp.children, menus)
+      }
+      tmp.meta.title = data.resourceName
+      if (data.icon) {
+        tmp.meta.icon = data.icon
+      }
+      res.push(tmp)
+    }
+  })
+  return res
+}
+
+const state = {
+  routes: [],
+  addRoutes: [],
+  currentChildRoute: [],
+  currentRouteTitle: '',
+  permissionBtns: []
+}
+
+const mutations = {
+  SET_ROUTES: (state, routes) => {
+    state.addRoutes = routes
+  },
+  SET_CHILD_ROUTES: (state, data) => {
+    state.currentChildRoute = data.route
+    state.currentRouteTitle = data.title
+  },
+  SET_PERMISSION_BTNS: (state, permissionBtns) => {
+    state.permissionBtns = permissionBtns
+  }
+}
+
+const actions = {
+  generateRoutes({ commit }, menus) {
+    return new Promise(resolve => {
+      filterAsyncBtns(menus)
+      // 获取当前有权限的路由
+      const accessedRoutes = filterAsyncRoutes(asyncRoutes, menus)
+      commit('SET_ROUTES', accessedRoutes)
+      // 将页面路由转换为二级
+      const pageRouteTable = [
+        {
+          path: '/',
+          component: Layout,
+          redirect: '/home',
+          name: 'Home',
+          children: []
+        },
+        { path: '*', redirect: '/404' }
+      ]
+      generatePageRouteTable(accessedRoutes, pageRouteTable[0].children)
+      resolve(pageRouteTable)
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/stepView.js

+
+const getDirectParentView = (route) => {
+  if (!route) {
+    return null
+  }
+  const matched = route.matched
+  if (matched.length <= 1) {
+    return null
+  }
+  return matched[matched.length - 2]
+}
+
+const state = {
+  cachedViews: []
+}
+
+const mutations = {
+  ADD_CACHED_VIEW: (state, [toView, fromView]) => {
+    if (toView.meta.keepAlive) {
+      const toViewParent = getDirectParentView(toView)
+      const fromViewParent = getDirectParentView(fromView)
+      if (toViewParent && fromViewParent && toViewParent.name === fromViewParent.name) {
+        // 在同一个步骤流程内跳转
+        if (state.cachedViews.includes(toView.name)) return
+        state.cachedViews.push(toView.name)
+      } else {
+        // 从一个步骤流程跳转到另外一个步骤流程
+        // 或从一个步骤流程跳转到非步骤流程
+        state.cachedViews = [toView.name]
+      }
+    } else {
+      state.cachedViews = []
+    }
+  }
+}
+
+const actions = {
+  addCachedView({ commit }, toView, fromView) {
+    commit('ADD_CACHED_VIEW', toView, fromView)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

+import { login, loginUserName, logout, queryMenus } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import service from '@/components/Device/service'
+import bridge, { isInApp } from '@/utils/bridge'
+import store from '../index'
+
+export const FIRM = {
+  SR: 'SR',
+  KT: 'KT'
+}
+
+const getDefaultState = () => {
+  const userInfo = JSON.parse(localStorage.getItem('login-user'))
+  return {
+    token: getToken(),
+    tenantNo: '',
+    name: '',
+    avatar: '',
+    roles: [],
+    device: {
+      firm: FIRM.SR,
+      showTakePhoto: false,
+      showReadCard: false
+    },
+    deviceType: 'pc',
+    organId: '',
+    organName: '',
+    initDevice: false,
+    ...userInfo
+  }
+}
+
+const state = getDefaultState()
+
+// app的参数
+const appParamExt = {
+  appKey: '61E27E40712A40E09A96F047130E8B4F',
+  appSecret: 'B3D31A1301124E708BE2C37FFCA3653E',
+  appPassword: 'FB0881949A814D6FAAF672F739409675'
+}
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles
+  },
+  SET_DEVICE: (state, device) => {
+    state.device = device
+  },
+  SET_ORGAN_ID: (state, organId) => {
+    state.organId = organId
+  },
+  SET_ORGAN_NAME: (state, organName) => {
+    state.organName = organName
+  }
+}
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { type } = userInfo // type：'msg'：验证码登录；'password': 密码登录
+    delete userInfo.type
+    const { phone, sms, tenantNo } = userInfo
+    const params = type === 'msg' ? { phone: phone.trim(), tenantNo, sms, platformSource: 'Web' } : userInfo
+    return new Promise((resolve, reject) => {
+      (type === 'msg' ? login : loginUserName)(params).then(response => {
+        const data = response || {}
+        // 将数据保存到缓存中
+        localStorage.setItem('login-user', JSON.stringify({
+          name: data.loginName,
+          avatar: '',
+          tenantNo,
+          organId: data.organId,
+          organName: data.organName
+        }))
+        commit('SET_TOKEN', data.accessToken)
+        commit('SET_NAME', data.loginName)
+        commit('SET_AVATAR', require('@/assets/img/default-avatar.png'))
+        commit('SET_ORGAN_ID', data.organId)
+        commit('SET_ORGAN_NAME', data.organName)
+        setToken(data.accessToken)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // get user menus
+  getMenus({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      queryMenus(state.token).then(response => {
+        const data = response.list || []
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  },
+
+  getDeviceInfo({ commit, state }) {
+    // 如果当前初始化过数据了，则不在初始化
+    if (state.initDevice) {
+      return
+    }
+    // 标记当前已经初始化过设备了
+    state.initDevice = true
+    return new Promise(resolve => {
+      // 如果当前在pad内
+      if (isInApp) {
+        bridge.geOtgReadType(code => {
+          console.log('当前app设备type:', code)
+          const { model } = store.getters
+          // 如果当前是pad设备
+          if (model.pad.includes(code.toUpperCase())) {
+            state.deviceType = 'pad'
+          }
+          // 如果当前是一体机设备
+          if (model.aio.includes(code.toUpperCase())) {
+            state.deviceType = 'aio'
+          }
+          commit('SET_DEVICE', {
+            firm: FIRM.SR,
+            showTakePhoto: false,
+            showReadCard: state.deviceType !== 'pc'
+          })
+          resolve()
+        })
+        return
+      }
+      // 设置秘钥
+      // 获取森瑞的设备
+      Promise.all([
+        service.getVideoInfo(),
+        service.setAppParamEx(appParamExt.appKey, appParamExt.appSecret, appParamExt.appPassword)
+      ]).then(data => {
+        if (data[0].length === 2) {
+          commit('SET_DEVICE', {
+            firm: FIRM.SR,
+            showTakePhoto: true,
+            showReadCard: true
+          })
+          resolve()
+        } else {
+          service.listCard().then(card => {
+            commit('SET_DEVICE', {
+              firm: FIRM.SR,
+              showTakePhoto: false,
+              showReadCard: !!card
+            })
+            resolve()
+          })
+        }
+      }).catch(err => {
+        // 标记当前已经初始化过设备了
+        state.initDevice = false
+        console.error(err)
+        resolve()
+      })
+      // 卡尔的设备
+      service.listKtCard().then(data => {
+        // 如果读取到设备了
+        if (data.length > 0) {
+          commit('SET_DEVICE', {
+            firm: FIRM.KT,
+            showTakePhoto: false,
+            showReadCard: true
+          })
+        }
+      })
+    })
+  },
+
+  // 退出登录
+  logout({ dispatch }) {
+    // 退出登录接口调用成功后清空token
+    logout().then(() => dispatch('resetToken'))
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/styles/dialog.scss

+.rnr-dialog {
+  .el-dialog__header {
+    color: #333333;
+    font-family: PingFangSC-Medium;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 16px 20px;
+    height: 56px;
+  }
+  .el-dialog__body {
+    font-family: PingFangSC-Regular;
+    padding: 24px;
+    .el-form {
+      .el-form-item {
+        .el-form-item__label {
+          color: #71747B;
+          font-size: 14px;
+          height: 20px;
+          font-weight: 400;
+          line-height: 20px;
+          margin-bottom: 10px;
+        }
+        .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .el-form-item__field-tip {
+          color: #71747B;
+          font-size: 12px;
+          line-height: 16px;
+          padding-top: 4px;
+        }
+        &.is-error {
+          .el-form-item__field-tip {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    box-shadow: 0px 0px 12px 0px rgba(196, 198, 207, 0.21);
+    padding: 16px 24px;
+    text-align: right;
+    .el-button {
+      border-radius: 4px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 24px;
+    }
+  }
+  .el-row {
+    margin-top: 24px;
+  }
+}
\ No newline at end of file

src/styles/element-ui.scss

+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+.el-link{
+  margin-right: 8px;
+}
+
+.el-cascader-menu__wrap{
+  height: 135%;
+  overflow-y: scroll;
+  min-height: 45px;
+  max-height: 204px;
+  .el-cascader-menu__list{
+    min-height: 45px;
+  }
+}
+.el-dialog__footer{
+  text-align: center;
+}
+.el-form-item__content {
+  line-height: 36px;
+}
+.el-input__inner {
+  height: 36px;
+  line-height: 36px;
+}
+.el-container.is-vertical {
+  background-color: #f7f8fa;
+  height: 100%;
+}
\ No newline at end of file

src/styles/iconfont.scss

+@font-face {
+  font-family: 'iconfont';  /* Project id 2954970 */
+  src: url('//at.alicdn.com/t/font_2954970_nl4poc6r9hf.woff2?t=1640846129617') format('woff2'),
+       url('//at.alicdn.com/t/font_2954970_nl4poc6r9hf.woff?t=1640846129617') format('woff'),
+       url('//at.alicdn.com/t/font_2954970_nl4poc6r9hf.ttf?t=1640846129617') format('truetype');
+}
+
+.el-button [class*=iconfont]+span {
+  margin-left: 5px;
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+}
+
+.icon-plus:before { content: "\e61b"; }
+.icon-arrow-up:before { content: "\e61a"; }
+.icon-clear:before { content: "\e619"; }
+.icon-selected:before { content: "\e621"; }
+.icon-transfer:before { content: "\e626"; }
+.icon-sync:before { content: "\e627"; }
+.icon-search:before { content: "\e629"; }
+.icon-download:before { content: "\e62a"; }
+.icon-import:before { content: "\e62b"; }
+.icon-tag:before { content: "\e62c"; }
+// .icon-car:before { content: "\e633"; }
+// .icon-cust-care:before { content: "\e632"; }
+// .icon-service:before { content: "\e631"; }
+// .icon-sms:before { content: "\e630"; }
+// .icon-order:before { content: "\e62f"; }
+// .icon-sim:before { content: "\e62e"; }
+// .icon-people:before { content: "\e62d"; }
+// .icon-close:before { content: "\e634"; }

src/styles/index.scss

+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './iconfont.scss';
+@import './search.scss';
+body {
+  background-color: #f7f8fa;
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, PingFangSC-Regular, PingFang SC, Microsoft YaHei, Arial, sans-serif;
+}
+
+ul, li, dl, dt, dd {
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  list-style: none;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+// main-container global css
+.app-container {
+  padding: 30px 24px 10px;
+}
+
+.el-table__fixed, .el-table__fixed-right {
+  z-index: 2;
+}
+
+// 滚动条的宽度
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #FAFAFA;
+  border-radius: 4px;
+}
+// 滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #E8E8E9;
+  border-radius: 4px;
+}
+
+// 遮罩层
+.v-modal {
+  opacity: .2;
+}
+// loading遮罩
+.el-loading-parent--hidden {
+  overflow: auto !important;
+}
+.el-loading-mask {
+  background-color: rgba(255,255,255,0.5);
+  top: 0;
+}
+.page-loading {
+  background: url(../assets/img/loading.svg) no-repeat center center;
+  animation: loading-rotate 1.5s linear infinite;
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+}
+
+.el-input__suffix {
+  .el-input__suffix-inner {
+    .el-icon-circle-close:before {
+      content: '\e634' !important;
+      font-size: 12px;
+      font-family: 'iconfont';
+    }
+  }
+}
+
+// 弹窗样式优化
+.el-dialog {
+  border-radius: 8px;
+  box-shadow: none;
+  .el-dialog__header {
+    padding: 18px 20px;
+    height: 60px;
+    border-bottom: 1px solid #F0F0F0;
+  }
+  .el-dialog__title {
+    font-size: 16px;
+  }
+  .el-dialog__close {
+    font-weight: bold;
+    color: #bfbfbf;
+  }
+  .el-dialog__body {
+    padding: 15px 20px;
+  }
+  .el-dialog__footer {
+    padding: 18px 20px;
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-bottom: 0;
+  }
+  &.show-shadow {
+    .el-dialog__footer {
+      box-shadow: 0px 0px 12px 0px rgba(196, 198, 207, 0.21);
+    }
+  }
+}
+// 树形表格
+.el-table--enable-row-hover .el-table__body tr:hover>td {
+  background: #F7FAFF;
+}
+.el-table__body tr.current-row>td {
+  background: none;
+}
+// 表格
+.el-table {
+  .el-table__body-wrapper {
+    position: initial;
+  }
+  .el-table__empty-block {
+    min-height: 168px;
+  }
+  .el-table__empty-text {
+    padding-top: 94px;
+    box-sizing: border-box;
+    line-height: 1;
+    background: url(../assets/img/table-empty.png) no-repeat center 0 / 90px 90px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+  .cell {
+    padding: 0 20px;
+  }
+  &:before {
+    height: .5px;
+  }
+  thead {
+    background: #F7F8FA;
+    color: #73767B;
+    font-size: 14px;
+  }
+  th {
+    font-weight: inherit;
+    background: #F7F8FA !important;
+    user-select: inherit;
+    >.cell {
+      padding: 0 20px;
+    }
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+    &.is-leaf {
+      border-bottom: 0 none;
+    }
+  }
+  tr.hover-row>td {
+    background: #F7FAFF;
+  }
+  td {
+    color: #313131;
+    border-bottom-color: #F3F4F6;
+  }
+  .el-tag {
+    padding: 0 8px;
+    line-height: 23px;
+    height: 23px;
+    border: 0 none;
+    min-width: 44px;
+    text-align: center;
+    color: #2A68FF;
+    background: #f7f9ff;
+    &.el-tag--success {
+      background: #F5FCF3;
+      color: #31CC31;
+    }
+    &.el-tag--danger {
+      background: rgba(255,77,79,0.06);
+      color: #FF4D4F;
+    }
+    &.el-tag--info {
+      background: #f4f4f5;
+      color: #909399;
+    }
+    &.el-tag--warning {
+      background: #fdf6ec;
+      color: #e6a23c;
+    }
+  }
+  .el-link {
+    margin: 0 5px;
+    font-size: 14px;
+    &:first-child {
+      margin-left: 0;
+    }
+    &.el-link--primary {
+      &.is-disabled {
+        color: #2A68FF;
+        opacity: .5;
+      }
+    }
+  }
+}
+
+// 表格固定列阴影
+// .el-table__fixed, .el-table__fixed-right {
+//   box-shadow: 0 0 20px rgb(0 0 0 / 10%);
+// }
+// 表格分页
+.table-list {
+  .el-pagination {
+    text-align: right;
+    margin-top: 20px;
+    padding: 2px 0;
+    .el-input {
+      display: inline-block;
+    }
+  }
+}
+
+// tab样式
+.el-tabs__item {
+  &.is-active,
+  &:hover {
+    color: #2A68FF;
+  }
+  &:focus.is-active.is-focus:not(:active) {
+    box-shadow: none;
+  }
+}
+.el-tabs__active-bar {
+  background: #2A68FF;
+}
+
+// 分页
+.el-pager li {
+  &:hover,
+  &.active {
+    color: #2A68FF;
+  }
+}
+
+// el-link样式
+.el-link {
+  &.el-link--primary {
+    color: #2A68FF;
+    &:hover {
+      color: #1C40DF;
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+// 弹窗关闭样式
+.el-dialog__headerbtn {
+  &:focus,
+  &:hover {
+    .el-dialog__close {
+      color: #2A68FF;
+    }
+  }
+}
+// 日历
+.el-picker-panel {
+  .el-date-picker__header-label.active,
+  .el-date-picker__header-label:hover,
+  .el-picker-panel__icon-btn:hover,
+  .el-year-table td.today .cell,
+  .el-year-table td .cell:hover,
+  .el-year-table td.current:not(.disabled) .cell,
+  .el-month-table td .cell:hover,
+  .el-time-panel__btn.confirm,
+  td.available:hover,
+  td.today span,
+  .el-button--text  {
+    color: #2A68FF;
+  }
+  td.current:not(.disabled) span {
+    background: #2A68FF;
+  }
+}
+
+// input number去掉上下箭头
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+// 表单元素
+.el-input,
+.el-select,
+.el-cascader {
+  display: block;
+}
+
+/* 报错选中时颜色 */
+.el-form-item.is-error .el-input__inner,
+.el-form-item.is-error .el-textarea__inner,
+.el-message-box__input input.invalid {
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, .15);
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(245, 108, 108, .15);
+  }
+}
+// 正常选中时颜色
+.el-input.is-active .el-input__inner {
+  border-color: #2A68FF;
+  box-shadow: 0 0 0 2px rgba(217, 230, 255, .79);
+}
+.el-input__inner,
+.el-textarea__inner  {
+  // 正常选中时颜色
+  &:focus {
+    border-color: #2A68FF;
+    box-shadow: 0 0 0 2px rgba(217, 230, 255, .79);
+  }
+  // placehoder颜色
+  &::placeholder {
+    color: #cacaca;
+  }
+}
+.el-input--small {
+  .el-input__inner {
+    height: 34px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #313131;
+  }
+  .el-input__icon {
+    line-height: 34px;
+  }
+}
+// 输入框边框
+.el-input__inner {
+  border-color: #E7E9ED;
+}
+/* 日期选择器icon */
+.el-range-editor--small {
+  &.el-input__inner {
+    height: 34px;
+  }
+  .el-range__close-icon,
+  .el-range__icon  {
+    line-height: 26px;
+  }
+}
+
+
+.el-form-item.is-error .el-input__inner,
+.el-form-item.is-error .el-input__inner:focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-message-box__input input.invalid,
+.el-message-box__input input.invalid:focus {
+  border-color: #FF4D4F;
+}
+.el-form-item__error {
+  color: #FF4D4F;
+}
+
+.el-form-item--small {
+  .el-form-item__error {
+    padding-top: 4px;
+  }
+  .el-form-item__content,
+  .el-form-item__label {
+    line-height: 34px;
+  }
+}
+
+// 隐藏级联下拉父级可选时radio
+.el-cascader-panel {
+  .el-radio {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    opacity: 0;
+  }
+  .el-cascader-node {
+    &.in-active-path,
+    &.is-active,
+    &.is-selectable.in-checked-path {
+      color: #2A68FF;
+      font-weight: normal;
+    }
+  }
+  .el-cascader-node__label {
+    padding: 0;
+  }
+  .el-cascader-node {
+    padding-left: 24px;
+  }
+  .el-icon-check:before {
+    position: absolute;
+    left: 0;
+    top: -5px;
+    font-family: 'iconfont';
+    content: "\e621";
+    font-size: 12px;
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+// select下拉箭头边框
+.el-select {
+  .el-input__inner:focus {
+    border-color: #2A68FF;
+  }
+}
+.el-select .el-input,
+.el-cascader .el-input {
+  .el-icon-arrow-up,
+  .el-icon-arrow-down {
+    transform: rotateZ(0);
+    &.is-reverse {
+      transform: rotateZ(180deg);
+    }
+    &:before {
+      font-family: 'iconfont';
+      font-size: 12px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      content: '\e61a';
+      color: #39393a;
+    }
+  }
+  &.is-focus {
+    .el-input__inner {
+      border-color: #2A68FF;
+    }
+  }
+}
+// select已选中option
+.el-select-dropdown__item {
+  height: 36px;
+  line-height: 36px;
+  &.selected {
+    color: #2A68FF !important;
+    font-weight: normal;
+    background: rgba(42, 104, 255, .08);
+    // &:before {
+    //   position: absolute;
+    //   left: 8px;
+    //   font-family: 'iconfont';
+    //   content: "\e621";
+    //   font-size: 12px;
+    //   font-weight: 700;
+    //   -webkit-font-smoothing: antialiased;
+    //   -moz-osx-font-smoothing: grayscale;
+    // }
+    // &:after {
+    //   display: none;
+    // }
+  }
+}
+// select多选内容过长处理
+.el-select {
+  .el-tag {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 20px;
+    position: relative;
+  }
+  .el-tag__close.el-icon-close {
+    position: absolute;
+    top: 3px;
+    right: 2px;
+  }
+}
+
+// 复选框
+.el-checkbox__inner {
+  width: 16px;
+  height: 16px;
+  border-color: #9EA2AD;
+}
+.el-checkbox__input {
+  &.is-checked,
+  &.is-indeterminate {
+    .el-checkbox__inner {
+      background-color: #3D7FFF;
+      border-color: #3D7FFF;
+      // 半选
+      &::before {
+        height: 4px;
+        top: 5px;
+      }
+    }
+    +.el-checkbox__label {
+      color: inherit;
+    }
+  }
+}
+.el-checkbox__inner::after {
+  border-width: 2px;
+  left: 5px;
+}
+// 单选框
+.el-radio__inner {
+  width: 16px;
+  height: 16px;
+  border-color: #9EA2AD;
+}
+.el-radio__input {
+  &.is-checked {
+    .el-radio__inner {
+      background-color: #fff;
+      border-color: #3D7FFF;
+    }
+    +.el-radio__label {
+      color: inherit;
+    }
+  }
+}
+.el-radio__inner::after {
+  width: 10px;
+  height: 10px;
+  background-color: #3D7FFF;
+}
+
+
+
+.el-button {
+  transition: all ease .2s;
+}
+.el-button--primary {
+  border-color: #2A68FF;
+  background: linear-gradient(133deg, #2A68FF 0%, #2A68FF 100%);
+  &:hover {
+    border-color: #4667FE;
+    background: linear-gradient(133deg, #4667FE 0%, #3458F1 100%);
+  }
+  &:active {
+    border-color: #2A68FF;
+    background: linear-gradient(133deg, #2A68FF 0%, #2A68FF 100%);
+  }
+  &:focus {
+    border-color: #2B4EEA;
+    background: linear-gradient(133deg, #2B4EEA 0%, #2B4EEA 100%);
+  }
+  &.is-disabled {
+    opacity: .5;
+  }
+}
+
+.el-button--default {
+  background: #fff;
+  border-color: #DCDFE6;
+  color: #111;
+  &:hover {
+    color: #111;
+    background: #F7F8FA;
+    border-color: #DCDFE6;
+  }
+  &:focus {
+  background: #fff;
+  border-color: #DCDFE6;
+  color: #111;
+  }
+  &:active {
+    color: #111;
+    background: #ECEEEF;
+    border-color: #DCDFE6;
+  }
+  &.is-disabled {
+    opacity: .5;
+  }
+}
+
+.el-button--gray,
+.el-button--info {
+  background: #fff;
+  border-color: #DCDFE6;
+  color: #999;
+  &:hover {
+    color: #999;
+    background: #F7F8FA;
+    border-color: #DCDFE6;
+  }
+  &:focus {
+    background: #fff;
+    border-color: #DCDFE6;
+    color: #999;
+  }
+  &:active {
+    color: #999;
+    background: #ECEEEF;
+    border-color: #DCDFE6;
+  }
+  &.is-disabled {
+    opacity: .5;
+  }
+}
+
+// .el-button--info {
+//   border-color: #F2F4F7;
+//   background: #F2F4F7;
+//   color: #444951;
+//   &:hover {
+//     border-color: #E7EBF0;
+//     background: #E7EBF0;
+//     color: #444951;
+//   }
+//   &:focus {
+//     border-color: #F2F4F7;
+//     background: #F2F4F7;
+//     color: #444951;
+//   }
+//   &:active {
+//     border-color: #D9DDE4;
+//     background: #D9DDE4;
+//     color: #444951;
+//   }
+//   &.is-disabled {
+//     opacity: .5;
+//   }
+// }
+
+
+/* 按钮最小宽度 */
+.el-button--small {
+  &.is-round {
+    padding: 9px 15px;
+  }
+  padding: 9px 15px;
+  min-width: 76px;
+  font-size: 14px;
+}
+
+// confirm button
+.el-message-box__btns {
+  .el-button {
+    border-radius: 20px;
+    padding: 10px 15px;
+    &.el-button--primary {
+      color: #fff;
+      border-color: #2A68FF;
+      background: linear-gradient(133deg, #2A68FF 0%, #2A68FF 100%);
+      &:hover {
+        color: #fff;
+        border-color: #4667FE;
+        background: linear-gradient(133deg, #4667FE 0%, #3458F1 100%);
+      }
+      &:active,
+      &:focus {
+        color: #fff;
+        border-color: #2B4EEA;
+        background: linear-gradient(133deg, #2B4EEA 0%, #2B4EEA 100%);
+      }
+    }
+  }
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background: none;
+  color: #2A68FF;
+}
+
+.el-date-editor .el-range-input, .el-date-editor .el-range-separator {
+  vertical-align: top;
+}
+
+// label字体颜色
+.el-form-item__label {
+  font-weight: normal;
+  color: #313131;
+}
+
+// 日期组件宽度
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: auto;
+}
+
+// 必填星号对齐
+.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
+  background: url(../assets/img/star.svg) no-repeat 0 center;
+  content: '';
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  margin-right: 2px;
+}
+
+// 列表查询
+.search-form {
+  margin-bottom: 10px;
+  .el-card__body {
+    padding-bottom: 0;
+  }
+  .el-form-item__label {
+    font-weight: normal;
+    &:before {
+      display: none !important;
+    }
+  }
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner,
+  .el-date-editor--daterange.el-input,
+  .el-date-editor--daterange.el-input__inner,
+  .el-date-editor--timerange.el-input,
+  .el-date-editor--timerange.el-input__inner {
+    width: 100%;
+  }
+}
+
+
+.el-date-editor {
+  .el-icon-time {
+    width: 14px;
+    height: 14px;
+    background: url(../assets/image/icon_date.png) no-repeat 0 0 / 14px 14px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -7px;
+    &:before {
+      display: none;
+    }
+  }
+  .el-range__close-icon {
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    line-height: 1;
+    height: 16px;
+    &:before {
+      background: #fff;
+    }
+  }
+  .el-range-input {
+    text-align: left;
+    font-size: 14px;
+  }
+}
+
+.page {
+  padding-bottom: 84px;
+}
+.next-step {
+  width: 100%;
+  height: 64px;
+  background: #fff;
+  box-shadow: 0px 0px 12px 0px rgba(196, 198, 207, 0.21);
+  border-radius: 0px 0px 0px 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+.el-form--label-top .el-form-item__label {
+  padding-bottom: 0;
+}
+
+.file-uploader {
+  background: #F7F8FA;
+  border-radius: 4px;
+  padding: 20px;
+  &.tip-nowrap {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    .el-upload__tip {
+      margin-left: 12px;
+    }
+  }
+  .el-upload__tip {
+    margin-top: 10px;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(132, 133, 138, 0.7);
+  }
+  .el-upload-list {
+    padding-top: 2px;
+    flex: none;
+    width: 70%;
+    .el-upload-list__item {
+      padding-left: 8px;
+      background: #fff;
+      border-radius: 2px;
+      height: 32px;
+      line-height: 32px;
+      transition: none;
+      .el-progress {
+        left: 0;
+      }
+      .el-progress__text {
+        top: -10px;
+        margin-right: 35px;
+      }
+      .el-icon-close {
+        &:before {
+          display: none;
+        }
+        top: 9px;
+        right: 10px;
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        vertical-align: middle;
+        background: url(../assets/image/icon_trash.png) no-repeat 0 0 / 16px 16px;
+      }
+      .el-icon-close-tip {
+        display: none !important;
+      }
+    }
+    .el-icon-document {
+      &:before {
+        display: none;
+      }
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      vertical-align: middle;
+      background: url(../assets/image/icon_attachment.png) no-repeat 0 0 / 16px 16px;
+    }
+    .el-icon-circle-check {
+      &:before {
+        display: none;
+      }
+    }
+  }
+}
+
+.container {
+  max-width: 1920px;
+  margin: 0 auto;
+}
+
+.icon-device-card,
+.icon-device-video {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  cursor: pointer;
+}
+.icon-device-card {
+  background: url(../assets/image/icon_device_card.svg) no-repeat 0 0 / 24px 24px;
+}
+.icon-device-video {
+  background: url(../assets/image/icon_device_video.svg) no-repeat 0 0 / 24px 24px;
+}
+.device-wrap {
+  display: flex;
+  align-items: flex-end;
+}

src/styles/mixin.scss

+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/styles/search.scss

+.page-search {
+
+  .manage-title {
+    margin-bottom: 16px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333841;
+  }
+  .search-title {
+    font-size: 16px;
+    margin-bottom: 25px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #212026;
+  }
+  .search-form {
+    margin: 0 auto 12px;
+    padding: 24px 24px 8px;
+    background: #fff;
+    border-radius: 8px;
+    box-sizing: border-box;
+  }
+  .search-body {
+    margin: 0 auto;
+    padding: 18px 24px 20px;
+    min-height: 480px;
+    background: #fff;
+    border-radius: 8px;
+    .empty-data {
+      margin: 40px auto;
+      padding-top: 200px;
+      text-align: center;
+      width: 368px;
+      height: 200px;
+      background: url(../assets/image/empty.png) no-repeat 0 0 / 368px 200px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #84858A;
+    }
+    .auth-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      .auth-date {
+        width: 90px;
+        font-size: 20px;
+        font-weight: 400;
+        color: rgba(132, 133, 138, 0.7);
+      }
+    }
+    .auth-step {
+      padding-left: 40px;
+      position: relative;
+      border-left: 2px dashed #DCDFE6;
+    }
+    .step-item {
+      margin-bottom: 24px;
+      width: 872px;
+      position: relative;
+      &:before {
+        content: '';
+        width: 13px;
+        height: 13px;
+        background: #fff;
+        border: 3px solid #2A68FF;
+        border-radius: 7px;
+        position: absolute;
+        left: -48px;
+        top: 0;
+      }
+    }
+    .step-cont {
+      padding: 20px 24px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      box-sizing: border-box;
+    }
+    .step-time {
+      margin-bottom: 8px;
+      padding-left: 20px;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(132, 133, 138, 0.7);
+      background: url(../assets/image/icon_time.svg) no-repeat 0 center / 14px 14px;
+    }
+    .step-head {
+      display: flex;
+      justify-content: flex-start;
+      .step-name {
+        margin-right: 8px;
+        font-size: 16px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #212026;
+      }
+      .el-tag {
+        padding: 0 8px;
+        height: 20px;
+        line-height: 20px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #fff;
+        &.el-tag--warning {
+          background: #FF9C00;
+        }
+        &.el-tag--success {
+          background: #25C343;
+        }
+        &.el-tag--fail {
+          background: #FF4D4F;
+        }
+      }
+    }
+    .step-body {
+      padding-top: 5px;
+      display: flex;
+      flex-wrap: wrap;
+      li {
+        margin-top: 10px;
+        width: 33.33%;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #71747A;
+        flex: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}

src/styles/transition.scss

+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .3s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  // transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  // transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/styles/variables.scss

+// light
+$menuText:#3F3F59;
+$menuActiveText:#2A68FF;
+$subMenuActiveText:#2A68FF;
+$menuActiveBg: #e6f7ff;
+$menuActiveBorder: #2A68FF;
+
+$menuBg:#fff;
+$menuHoverBg:rgba(255, 255, 255, 0.04);
+
+$subMenuBg:#fff;
+$headerText: #fff;
+$headerBg: #001529;
+
+
+
+// night
+// $menuText:rgba(255,255,255,.65);
+// $menuActiveText:#fff;
+// $subMenuActiveText:#fff;
+// $menuActiveBg: #1890ff;
+// $menuActiveBorder: rgba(255, 255, 255, 0.6);
+
+// $menuBg:#001529;
+// $menuHoverBg:rgba(255, 255, 255, 0.04);
+
+// $subMenuBg:#000c17;
+// $headerText: #fff;
+// $headerBg: #001529;
+
+
+
+$sideBarWidth: 136px;
+$leftNavWidth: 72px;
+$headerHeight: 48px;
+$leftNavBg: #001529;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHoverBg: $menuHoverBg;
+  subMenuBg: $subMenuBg;
+  sideBarWidth: $sideBarWidth;
+  headerHeight: $headerHeight;
+  headerText: $headerText;
+  leftNavWidth: $leftNavWidth;
+  leftNavBg: $leftNavBg;
+  headerBg: $headerBg;
+  menuActiveBg: $menuActiveBg;
+  menuActiveBorder: $menuActiveBorder;
+}

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'token-rnr-pc'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/bridge.js

+import { Message } from 'element-ui'
+
+// 蓝牙
+export const BLUETOOTH = 'BLUETOOTH'
+// 扫码
+export const SCAN_CODE = 'SCAN_CODE'
+// 调用相册
+export const PHOTO = 'PHOTO'
+// 相机
+export const CAMERA = 'CAMERA'
+
+// 当前是否在app中
+export const isInApp = !!window.android
+
+// 调用js-bridge
+function JsBridge() {
+  this.onShowCallback = null
+  this.onHideCallback = null
+  this.bluetoothCallback = []
+
+  window.callJSAPPStatus = (result) => {
+    // 如果当前是展示状态，则展示onshow方法
+    if (result) {
+      this.onShowCallback && this.onShowCallback()
+    } else {
+      this.onHideCallback && this.onHideCallback()
+    }
+  }
+
+  /**
+   * 监听报错信息
+   * @param errorMessage 报错信息
+   */
+  window.callJSErrorInfo = errorMessage => {
+    errorMessage && Message.error(errorMessage.msg)
+  }
+}
+
+/**
+ * 将base64转换成文件
+ * @param dataurl base64地址
+ * @param filename 文件名
+ */
+export const base64toFile = (dataurl, filename = 'file') => {
+  const arr = dataurl.split(',')
+  const mime = arr[0].match(/:(.*?);/)[1]
+  const suffix = mime.split('/')[1]
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], `${filename}.${suffix}`, { type: mime })
+}
+
+/**
+ * 调用相机
+ * @param callback 回调方法
+ */
+JsBridge.prototype.getCamera = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 回调函数
+  window.callJSImages = async(result) => {
+    try {
+      // 执行回调
+      callback(base64toFile(`data:image/jpeg;base64,${result.imageBase64}`))
+      // 清空回调函数
+      window.callJSImages = null
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  // 调用bridge方法
+  window.android.getAndroidCamera()
+}
+
+/**
+ * uvc的方式调用相机
+ */
+JsBridge.prototype.getUvcCamera = function(callback) {
+  if (!isInApp) {
+    return
+  }
+  // 执行回调方法
+  window.callJSUvcCameras = ({ type, file }) => {
+    // 文件类型
+    const fileType = type === 'MODE_CAPTURE_VIDEO' ? 'video' : 'image'
+    console.log('当前文件类型：', fileType)
+    try {
+      callback(
+        file
+          ? base64toFile(`${fileType === 'video' ? 'data:video/mp4;base64,' : 'data:image/jpeg;base64,'}${file}`)
+          : null,
+        fileType
+      )
+      window.callJSUvcCameras = null
+    } catch (error) {
+      console.error('callJSUvcCameras: ', error)
+    }
+  }
+  // 调用bridge方法
+  window.android.openUvcCamera()
+}
+
+/**
+ * 获取设备列表
+ */
+JsBridge.prototype.getUvcCameraList = function(callback) {
+  // 设备列表
+  let cameraList = []
+  try {
+    cameraList = JSON.parse(window.android.getUvcCameraList())
+  } catch (error) {
+    console.error(error)
+  }
+  callback(cameraList)
+}
+
+/**
+ * 打开指定的相机
+ */
+JsBridge.prototype.openTargetUvcCamera = function(device, callback) {
+  // 执行回调方法
+  window.callJSUvcCameras = ({ type, file }) => {
+    // 文件类型
+    const fileType = type === 'MODE_CAPTURE_VIDEO' ? 'video' : 'image'
+    try {
+      callback(
+        file
+          ? base64toFile(`${fileType === 'video' ? 'data:video/mp4;base64,' : 'data:image/jpeg;base64,'}${file}`)
+          : null,
+        fileType
+      )
+      window.callJSUvcCameras = null
+    } catch (error) {
+      console.error('callJSUvcCameras: ', error)
+    }
+  }
+  window.android.openTargetUvcCamera(JSON.stringify(device))
+}
+
+/**
+ * 调用相册
+ * @param callback 回调方法
+ */
+JsBridge.prototype.getPhoto = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 回调函数
+  window.callJSImages = async(result) => {
+    // 执行回调
+    callback(base64toFile(`data:image/jpeg;base64,${result.imageBase64}`))
+    // 清空回调函数
+    window.callJSImages = null
+  }
+  // 调用bridge方法
+  window.android.getAndroidPhoto(1)
+}
+
+/**
+ * 调用相册
+ * @param isFace 是否是人脸面
+ * @param callback 回调方法
+ */
+JsBridge.prototype.takeIDCardPhoto = function(isFace = true, callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 回调函数
+  window.callJSImages = async(result) => {
+    // 执行回调
+    callback(base64toFile(`data:image/jpeg;base64,${result.imageBase64}`))
+    // 清空回调函数
+    window.callJSImages = null
+  }
+  // 调用bridge方法
+  window.android.takeIDCardPhoto(isFace)
+}
+
+/**
+ * 调用相机，扫条形码二维码
+ * @param callback 回调方法
+ */
+JsBridge.prototype.scanCode = function(isBarcode, callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 先创建回调
+  window.callJSCodeScan = result => {
+    callback(result)
+    window.callJSCodeScan = null
+  }
+  // 调用bridge方法
+  window.android.getAndroidCodeScan(true, -1)
+}
+
+/**
+ * 从设备获取数据
+ * @param callback 回调方法
+ */
+JsBridge.prototype.getDeviceData = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 设备链接状态
+  window.callJSBluetooth = (result) => {
+    // 执行回调
+    callback(result)
+    // 清空回调
+    window.callJSBluetooth = null
+  }
+  // 调用bridge方法
+  window.android.getAndroidBluetooth()
+}
+
+/**
+ * 查看设备链接状态
+ * @param callback 回调方法
+ */
+JsBridge.prototype.deviceConnectStatus = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 设备链接状态
+  window.callJSDeviceStatus = (appstatus) => {
+    // 执行回调
+    callback(appstatus)
+    // 清空回调
+    window.callJSDeviceStatus = null
+  }
+  // 校验设备状态
+  window.android.getAndroidDeviceStatus()
+}
+
+/**
+ * 页面处于展示状态
+ * @param callback 回调方法
+ */
+JsBridge.prototype.onShow = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  this.onShowCallback = callback
+  // 默认先执行一次onshow事件
+  this.onShowCallback()
+}
+
+/**
+ * 页面处于隐藏状态
+ * @param callback 回调方法
+ */
+JsBridge.prototype.onHide = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 绑定页面离开方法
+  this.onHideCallback = callback
+}
+
+/**
+ * 获取当前nfc设备的设备数据
+ */
+JsBridge.prototype.readIDCardByOTG = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 设备链接状态
+  window.callJSBluetooth = (result) => {
+    // 执行回调
+    callback(result)
+    // 清空回调
+    window.callJSBluetooth = null
+  }
+  // 调用bridge方法
+  window.android.readIDCardByOTG()
+}
+
+/**
+ * 获取当前nfc设备的设备数据
+ */
+JsBridge.prototype.geOtgReadType = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 调用bridge方法
+  callback(window.android.geOtgReadType())
+}
+
+/**
+ * 选择蓝牙设备
+ */
+JsBridge.prototype.chooseBluetoothDevice = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 设备链接状态
+  window.callJSBluetooth = (result) => {
+    // 执行回调
+    callback(result)
+    // 清空回调
+    window.callJSBluetooth = null
+  }
+  // 调用bridge方法
+  window.android.choiceBluetoothDevice()
+}
+
+JsBridge.prototype.takeVideo = function(callback) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  // 回调函数
+  window.callJSVideos = (result) => {
+    try {
+      // 执行回调
+      callback(result.file ? base64toFile(`data:video/mp4;base64,${result.file}`) : null)
+      // 清空回调函数
+      window.callJSVideos = null
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  // 调用bridge方法
+  window.android.getAndroidVideo()
+}
+
+/**
+ * 将base64的文件保存到本地
+ * @param base64 文件的base64编码
+ * @param fileName 文件名
+ */
+JsBridge.prototype.saveFileByBase64 = function(base64, fileName) {
+  // 如果不在app中
+  if (!isInApp) {
+    return
+  }
+  window.android.saveFile(base64, fileName)
+}
+
+export default new JsBridge()

src/utils/bus.js

+import Vue from 'vue'
+const bus = new Vue()
+export default bus

src/utils/cache.js

+function Cache() {
+  try {
+    this.data = JSON.parse(sessionStorage.getItem('cached-data')) || []
+  } catch (error) {
+    this.data = []
+  }
+}
+
+/**
+ * 向缓存中塞值
+ * @param key 字段key
+ * @param value 字段值
+ */
+Cache.prototype.set = function(key, value) {
+  // 如果值不存在
+  if (!value) {
+    this.data.push(key)
+  }
+  // 将键值对的值保存
+  this.data[key] = value
+  // 将数据保存到storage中
+  sessionStorage.setItem(`cached-data`, JSON.stringify(this.data))
+}
+
+/**
+ * 从缓存中获取值
+ * @param key 字段key
+ * @param defaultKey 没取到值的默认值
+ */
+Cache.prototype.get = function(key, defaultValue) {
+  return this.data[key] || defaultValue
+}
+
+/**
+ * 从缓存中移除值
+ * @param key 字段key
+ */
+Cache.prototype.remove = function(key) {
+  // 删除值
+  delete this.data[key]
+  // 将数据保存到storage中
+  sessionStorage.setItem(`cached-data`, JSON.stringify(this.data))
+}
+
+export default new Cache()

src/utils/cards.js

+import { Message } from 'element-ui'
+
+/**
+ * 用jsonp的方式读取数据
+ * @param {String} url 接口url链接
+ * @param {String} callback 回调方法
+ */
+export function jsonp({ url, callback }) {
+  return new Promise((resolve, reject) => {
+    // 这里的 "jsonCallBack" ，和调用的 jsonp 的 url 中的 callback 值相对应（见粗体字）
+    window[callback] = ({ resultFlag, resultContent, errorMsg }) => {
+      // 如果当前读取失败
+      if (resultFlag === -1) {
+        Message({ message: errorMsg, type: 'error', duration: 3 * 1000 })
+        resolve({})
+        return
+      }
+      // 如果读取成功
+      resolve(resultContent)
+    }
+
+    const JSONP = document.createElement('script')
+    JSONP.type = 'text/javascript'
+    JSONP.src = url
+    document.getElementsByTagName('head')[0].appendChild(JSONP)
+    setTimeout(() => document.getElementsByTagName('head')[0].removeChild(JSONP), 500)
+  })
+}
+
+/**
+ * 读取SVIDCard读卡器的内容
+ * @return { address: "", dateOfBirth: "", effectiveDate: "", expireDate: "", gender: "", idCardNo: "", issueAt: "", name: "", nation: "", picture: ""}
+ */
+export async function readSvidCard() {
+  const respData = await jsonp({
+    url: `http://127.0.0.1:8918/IDCard?time=${Date.now()}`,
+    callback: 'jsonpCallback'
+  })
+  return respData
+}

src/utils/device.js

+/**
+ * 获取已经连接的设备id
+ * @param label 设备label
+ */
+export async function getConnectDeviceId(label = 'Slave') {
+  // 申请权限
+  await applyPermission()
+  // 获取当前设备
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  // 取出当前需要展示的数据
+  const filtered = devices.find(device => device.label.indexOf(label) >= 0)
+  console.log('当前已连接的设备：', devices)
+  // 获取当前设备id
+  return filtered ? filtered.deviceId : ''
+}
+
+const PERMISSION = {
+  VIDEO_AUDIO: 'VIDEO_AUDIO',
+  VIDEO: 'VIDEO',
+  AUDIO: 'AUDIO'
+}
+
+/**
+ * 申请权限
+ * @param permissionCode 权限码
+ */
+export async function applyPermission(permissionCode = PERMISSION.VIDEO_AUDIO) {
+  // 检测是否是第一次打开
+  const notFirstIn = localStorage.getItem('not-first-inf')
+  // 如果是第一次打开，则拉起是否打开视频的确认框
+  if (notFirstIn) {
+    return
+  }
+  // 媒体参数
+  const constraints = {}
+  // 判断权限码
+  switch (permissionCode) {
+    case PERMISSION.AUDIO:
+      constraints['audio'] = true
+      break
+    case PERMISSION.VIDEO:
+      constraints['video'] = true
+      break
+    case PERMISSION.VIDEO_AUDIO:
+      constraints['video'] = true
+      constraints['audio'] = true
+      break
+  }
+  // 申请权限
+  await navigator.mediaDevices.getUserMedia(constraints)
+  // 标记当前非第一次打开
+  localStorage.setItem('not-first-inf', 'true')
+}