han

hanfei / VueSharedPrinting

Browse code han master
1 parent acab6ff commit 6826f42c055cf457877bd7d5285637001afab582 hanfei authored on 18 Dec 2023

Patch

Showing 43 changed files

Ignore Space Show notes View .gitignore 0 → 100644
.DS_Store node_modules /dist # local env files .env.local .env..local # Log files npm-debug.log yarn-debug.log* yarn-error.log* pnpm-debug.log* # Editor directories and files .idea .vscode .suo .ntvs* .njsproj .sln *.sw?

Ignore Space Show notes View babel.config.js 0 → 100644
// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } }

Ignore Space Show notes View package-lock.json 0 → 100644
Not supported

Ignore Space Show notes View package.json 0 → 100644
{ "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "vue": "^2.6.11", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

Ignore Space Show notes View

package.json 0 → 100644

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Ignore Space Show notes View public/favicon.ico 0 → 100644

Ignore Space Show notes View public/index.html 0 → 100644
<!DOCTYPE html> <html lang=""> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

public/index.html 0 → 100644

Ignore Space Show notes View src/App.vue 0 → 100644
<template> <div id="app"> <top/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' export default { name: 'Home', components: { top } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } * { margin: 0; padding: 0; } body { background: #FAFAFA; } .flex-center{ display:flex; flex-direction: row; align-items:center; justify-content:center; } .flex-start{ display:flex; flex-direction: row; align-items:center; justify-content:flex-start; } .flex-end{ display:flex; flex-direction: row; align-items:center; justify-content:flex-end; } .flex-between{ display:flex; flex-direction: row; align-items:center; justify-content:space-between; } </style>

Ignore Space Show notes View

src/App.vue 0 → 100644

Ignore Space Show notes View src/assets/complete.png 0 → 100644

Ignore Space Show notes View src/assets/demo1.png 0 → 100644

Ignore Space Show notes View src/assets/demo10.png 0 → 100644

Ignore Space Show notes View src/assets/demo11.png 0 → 100644

Ignore Space Show notes View src/assets/demo12.png 0 → 100644

Ignore Space Show notes View src/assets/demo13.png 0 → 100644

Ignore Space Show notes View src/assets/demo14.png 0 → 100644

Ignore Space Show notes View src/assets/demo15.png 0 → 100644

Ignore Space Show notes View src/assets/demo16.png 0 → 100644

Ignore Space Show notes View src/assets/demo2.png 0 → 100644

Ignore Space Show notes View src/assets/demo3.png 0 → 100644

Ignore Space Show notes View src/assets/demo4.png 0 → 100644

Ignore Space Show notes View src/assets/demo5.png 0 → 100644

Ignore Space Show notes View src/assets/demo6.png 0 → 100644

Ignore Space Show notes View src/assets/demo7.png 0 → 100644

Ignore Space Show notes View src/assets/demo8.png 0 → 100644

Ignore Space Show notes View src/assets/demo9.png 0 → 100644

Ignore Space Show notes View src/assets/logo.png 0 → 100644

Ignore Space Show notes View src/assets/logo2.png 0 → 100644

Ignore Space Show notes View src/assets/points.png 0 → 100644

Ignore Space Show notes View src/assets/typeSFZ.png 0 → 100644

Ignore Space Show notes View src/assets/typeSMFY.png 0 → 100644

Ignore Space Show notes View src/assets/typeUp.png 0 → 100644

Ignore Space Show notes View src/components/nav.vue 0 → 100644
<template> <div class="nav flex-between"> <div class="back flex-center" @click="_goHome()"> <img src="../assets/demo10.png" alt=""> 返回首页 </div> <div class="name flex-center">{{ title }}</div> <div class="type">【{{ type }}】</div> </div> </template> <script> export default { name: "nav", inject: ['title','type'], methods: { _goHome() { this.$router.push({ name: 'device' }) } } } </script> <style scoped lang="less"> .nav { height: 10.88rem; padding: 0 5.56rem 0 2.06rem; position: relative; font-size: 34px; font-weight: bold; color: #323232; line-height: 48px; .back { width: 21.88rem; height: 6.44rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; img { width: 2.65rem; margin-right: 1.25rem; } } .name { position: absolute; height: 100%; font-size: 3.5rem; font-weight: 400; color: #323232; line-height: 3.69rem; left: 50%; width: 30rem; margin-left: -15rem; } } </style>

Ignore Space Show notes View

src/components/nav.vue 0 → 100644

<template>
  <div class="nav flex-between">
    <div class="back flex-center" @click="_goHome()">
      <img src="../assets/demo10.png" alt="">
      返回首页
    </div>
    <div class="name flex-center">{{ title }}</div>
    <div class="type">【{{ type }}】</div>
  </div>
</template>

Ignore Space Show notes View src/components/top.vue 0 → 100644
<template> <div class="top flex-between"> <div class="logo flex-start" @click="_goHome()"> <img src="../assets/logo.png" /> <span></span> <div>自助打印</div> </div> <div class="time flex-start"> <div> <div>{{ time.week }}</div> <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div> </div> <div class="info">{{ time.h }}:{{ time.m }}</div> </div> </div> </template> <script> export default { name: "top", data() { return { time: {} } }, mounted() { this.format() }, methods: { add(t) { if(t<10) { return '0' + t } return t }, format() { let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": this.add(date.getMonth() + 1), //月份 "d": this.add(date.getDate()), //日 "h": this.add(date.getHours()), //小时 "m": this.add(date.getMinutes()), //分 "week": '', }; let str = "星期"; switch (date.getDay()) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } o.week = str this.time = o setTimeout(() =>{ this.format() },1000) }, _goHome() { this.$router.push({ name: 'device' }) } } } </script> <style scoped lang="less"> .top { width: 100%; height: 9.81rem; background: #52A39D; .logo { padding-left: 5.5rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; img { width: 5.56rem; height: 5.56rem; } span { width: 0; height: 4.43rem; border-left: 1px solid #FFFFFF; margin: 0 1.94rem; } } .time { padding-right: 3.88rem; font-size: 1.38rem; font-weight: 400; color: #FFFFFF; line-height: 1.94rem; text-align: right; .info { font-weight: bold; color: #FFFFFF; margin-left: 1.13rem; font-size: 3.69rem; line-height: 5.2rem; } } } </style>

Ignore Space Show notes View

src/components/top.vue 0 → 100644

setTimeout(() =>{
        this.format()
      },1000)
    },
    _goHome() {
      this.$router.push({
        name: 'device'
      })
    }
  }
}
</script>

Ignore Space Show notes View src/main.js 0 → 100644
import Vue from 'vue' import App from './App.vue' import router from './router' import './utils/rem' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')

Ignore Space Show notes View src/router/index.js 0 → 100644
import Vue from 'vue' import VueRouter from 'vue-router' import device from '../views/device.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'device', component: device }, { path: '/operationGuide', name: 'operationGuide', component: () => import('../views/operationGuide.vue') }, { path: '/selectFile', name: 'selectFile', component: () => import('../views/selectFile.vue') }, { path: '/transcoding', name: 'transcoding', component: () => import('../views/transcoding.vue') }, { path: '/argument', name: 'argument', component: () => import('../views/argument.vue') }, { path: '/expense', name: 'expense', component: () => import('../views/expense.vue') }, { path: '/pay', name: 'pay', component: () => import('../views/pay.vue') }, { path: '/complete', name: 'complete', component: () => import('../views/complete.vue') } ] const router = new VueRouter({ routes }) export default router

Ignore Space Show notes View

src/router/index.js 0 → 100644

import Vue from 'vue'
import VueRouter from 'vue-router'
import device from '../views/device.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'device',
    component: device
  },
  {
    path: '/operationGuide',
    name: 'operationGuide',
    component: () => import('../views/operationGuide.vue')
  },
  {
    path: '/selectFile',
    name: 'selectFile',
    component: () => import('../views/selectFile.vue')
  },
  {
    path: '/transcoding',
    name: 'transcoding',
    component: () => import('../views/transcoding.vue')
  },
  {
    path: '/argument',
    name: 'argument',
    component: () => import('../views/argument.vue')
  },
  {
    path: '/expense',
    name: 'expense',
    component: () => import('../views/expense.vue')
  },
  {
    path: '/pay',
    name: 'pay',
    component: () => import('../views/pay.vue')
  },
  {
    path: '/complete',
    name: 'complete',
    component: () => import('../views/complete.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

Ignore Space Show notes View src/utils/rem.js 0 → 100644
const baseSize = 16 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }

Ignore Space Show notes View

src/utils/rem.js 0 → 100644

Ignore Space Show notes View src/views/argument.vue 0 → 100644
<template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <div class="flex-between name">{{ pageData.name }}</div> <div class="flex-between"> <div>纸张规格</div><div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.colour==0?'act':''" @click="onChange('colour',0)">黑白</div> <div class="flex-center" :class="pageData.colour==1?'act':''" @click="onChange('colour',1)">彩色</div> </div> </div> <div class="flex-between"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.singledihedral==0?'act':''" @click="onChange('singledihedral',0)">单面</div> <div class="flex-center" :class="pageData.singledihedral==1?'act':''" @click="onChange('singledihedral',1)">双面</div> </div> </div> <div class="flex-between"> <div>方向</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.direction==0?'act':''" @click="onChange('direction',0)">横向</div> <div class="flex-center" :class="pageData.direction==1?'act':''" @click="onChange('direction',1)">纵向</div> </div> </div> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt=""> <input :value="pageData.copies" type="number" min="1"> <img src="../assets/demo15.png" alt=""> </div> </div> <div class="flex-between"> <div>打印范围（共13页）</div> <div class="flex-center print"> <input :value="pageData.minPrint" type="number" min="1"> <div>至</div> <input :value="pageData.maxPrint" type="number" min="1"> </div> </div> <div class="flex-between"> <div>缩印（多合一）</div> <div class="optionBox"> <select> <option value="1">1页/张</option> <option value="2">2页/张</option> <option value="3">3页/张</option> </select> </div> </div> <div class="btn flex-center" @click="skip('pay',name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "argument", components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, pageData: { name: '文件名称……文件名称.doc',//文件名称 specification: 'A4',//纸张规格 colour: 0,//颜色 singledihedral: 0,//单双面 direction: 0,//方向 copies: 1,//份数 maxPrint: 13,//打印范围最大 minPrint: 1,//打印范围最小 minimo: 0,//缩印 } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, onChange(name,val) { this.pageData[name] = val }, }, } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #FFFFFF; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61AA8F; color: #FFFFFF; } } .import { img { width: 2.75rem; height: 2.75rem; } } input { width: 6.38rem; height: 3.19rem; background: #FFFFFF; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 .94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url("../assets/demo16.png") no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand{display: none;} } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } </style>

Ignore Space Show notes View

src/views/argument.vue 0 → 100644

<template>

  <div class="transcoding">
    <navbar :name="name"/>
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、列印方向、份数，以及打印范围（如果需要打印全部页码，可忽略不用修改）/缩印格式等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        <div class="flex-between name">{{ pageData.name }}</div>
        <div class="flex-between">
          <div>纸张规格</div><div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.colour==0?'act':''" @click="onChange('colour',0)">黑白</div>
            <div class="flex-center" :class="pageData.colour==1?'act':''" @click="onChange('colour',1)">彩色</div>
          </div>
        </div>
        <div class="flex-between">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.singledihedral==0?'act':''" @click="onChange('singledihedral',0)">单面</div>
            <div class="flex-center" :class="pageData.singledihedral==1?'act':''" @click="onChange('singledihedral',1)">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>方向</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.direction==0?'act':''" @click="onChange('direction',0)">横向</div>
            <div class="flex-center" :class="pageData.direction==1?'act':''" @click="onChange('direction',1)">纵向</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="">
            <input :value="pageData.copies" type="number" min="1">
            <img src="../assets/demo15.png" alt="">
          </div>
        </div>
        <div class="flex-between">
          <div>打印范围（共13页）</div>
          <div class="flex-center print">
            <input :value="pageData.minPrint" type="number" min="1">
            <div>至</div>
            <input :value="pageData.maxPrint" type="number" min="1">
          </div>
        </div>
        <div class="flex-between">
          <div>缩印（多合一）</div>
          <div class="optionBox">
            <select>
              <option value="1">1页/张</option>
              <option value="2">2页/张</option>
              <option value="3">3页/张</option>
            </select>
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay',name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "argument",
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      pageData: {
        name: '文件名称……文件名称.doc',//文件名称
        specification: 'A4',//纸张规格
        colour: 0,//颜色
        singledihedral: 0,//单双面
        direction: 0,//方向
        copies: 1,//份数
        maxPrint: 13,//打印范围最大
        minPrint: 1,//打印范围最小
        minimo: 0,//缩印
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name,val) {
      this.pageData[name] = val
    },
  },
}
</script>

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0;
}
</style>

Ignore Space Show notes View src/views/complete.vue 0 → 100644
<template> <!--打印完成--> <div class="complete"> <div class="box flex-center"> <div class="left"> <img src="../assets/complete.png" alt=""> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt=""><span>28积分</span> </div> </div> </div> </div> </div> </template> <script> export default { name: "complete" } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } } </style>

Ignore Space Show notes View

src/views/complete.vue 0 → 100644

<template>

  <div class="complete">
    <div class="box flex-center">
      <div class="left">
        <img src="../assets/complete.png" alt="">
        <div>打印完成</div>
        <div>感谢您使用天章自助打印服务</div>
      </div>
      <div class="right">
        <div class="title flex-center">温馨提示</div>
        <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div>
        <div class="tip">
          <div>本次打印您将获得：</div>
          <div class="flex-center">
            <img src="../assets/points.png" alt=""><span>28积分</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Ignore Space Show notes View src/views/device.vue 0 → 100644
<template> <div class="device flex-center"> <!-- 左边--> <div class="box"> <div class="main icon1"> <img src="../assets/demo1.png" /> <div class="flex-center">天章自助打印</div> </div> <div class="main icon3" @click="skip('operationGuide','扫描复印')"> <img src="../assets/demo3.png" /> <div class="flex-center">扫描复印</div> </div> <div class="main2 flex-center"> <img src="../assets/demo6.png" />使用教程 </div> </div> <!-- 中间--> <div class="box"> <div class="main icon2" @click="skip('operationGuide','U盘打印')"> <img src="../assets/demo2.png" /> <div class="flex-center">U盘打印</div> </div> <div class="main icon4" @click="skip('operationGuide','身份证打印')"> <img src="../assets/demo4.png" /> <div class="flex-center">身份证打印</div> </div> <div class="main2 flex-center"> <img src="../assets/demo7.png" />客服助手 </div> </div> <!-- 右边--> <div class="box2"> <div class="main3 flex-center"> <img src="../assets/demo6.png" />打印价格 </div> <div class="main4"> <span></span> <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div> </div> <div class="main3 flex-center"> <img src="../assets/demo8.png" />当前纸张情况 </div> </div> </div> </template> <script> export default { name: "device", data() { return { } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, } </script> <style scoped lang="less"> .device { margin-top: 2.5rem; .box { width: 37.5rem; margin-right: 1.88rem; } .box2 { width: 33rem; } .main { width: 100%; height: 21.25rem; border-radius: 1.63rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 17.69rem; margin-top: .69rem; } } .icon1 { background: linear-gradient(359deg, #3DBF51 0%, #47D1A9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120,229,217,0.45); } .icon2 { background: linear-gradient(180deg, #F2C952 0%, #DB572B 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255,147,128,0.57); } .icon3 { background: linear-gradient(180deg, #84B2F7 0%, #8774D2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150,135,232,0.3); } .icon4 { background: linear-gradient(180deg, #5BE7FF 0%, #309FD8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104,202,253,0.42); } .css1 { background: #FFFFFF; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: .38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: .88rem; } } .main4 { width: 100%; height: 30.25rem; margin: 1.25rem auto; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; span { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 1.44rem auto 0.5rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style>

Ignore Space Show notes View

src/views/device.vue 0 → 100644

<template>
  <div class="device flex-center">

    <div class="box">
      <div class="main icon1">
        <img src="../assets/demo1.png" />
        <div class="flex-center">天章自助打印</div>
      </div>
      <div class="main icon3" @click="skip('operationGuide','扫描复印')">
        <img src="../assets/demo3.png" />
        <div class="flex-center">扫描复印</div>
      </div>
      <div class="main2 flex-center">
        <img src="../assets/demo6.png" />使用教程
      </div>
    </div>

    <div class="box">
      <div class="main icon2" @click="skip('operationGuide','U盘打印')">
        <img src="../assets/demo2.png" />
        <div class="flex-center">U盘打印</div>
      </div>
      <div class="main icon4" @click="skip('operationGuide','身份证打印')">
        <img src="../assets/demo4.png" />
        <div class="flex-center">身份证打印</div>
      </div>
      <div class="main2 flex-center">
        <img src="../assets/demo7.png" />客服助手
      </div>
    </div>

    <div class="box2">
      <div class="main3 flex-center">
        <img src="../assets/demo6.png" />打印价格
      </div>
      <div class="main4">
        <span></span>
        <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
      </div>
      <div class="main3 flex-center">
        <img src="../assets/demo8.png" />当前纸张情况
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "device",
  data() {
    return {

}
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

Ignore Space Show notes View src/views/expense.vue 0 → 100644
<template> <!-- 费用支付--> <div class="expense"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div> </div> <div class="right"> <div class="code" @click="skip('complete',name)"></div> <div class="flex-center tip">提示：请在 120 秒内完成扫码支付</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "expense", components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; } } } </style>

Ignore Space Show notes View

src/views/expense.vue 0 → 100644

<template>

<div class="expense">
  <navbar :name="name"/>
  <div class="box flex-center">
    <div class="left">
      <div class="title">温馨提示</div>
      <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div>
    </div>
    <div class="right">
      <div class="code" @click="skip('complete',name)"></div>
      <div class="flex-center tip">提示：请在 120 秒内完成扫码支付</div>
    </div>
  </div>
</div>
</template>

export default {
  name: "expense",
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

Ignore Space Show notes View src/views/operationGuide.vue 0 → 100644
<template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name"/> <div class="box flex-between"> <div class="picture" v-show="name=='U盘打印'"> <img class="icon" src="../assets/typeUp.png" /> <div class="flex-between name"> <div>U盘</div> <div>USB接口</div> </div> </div> <div class="picture" v-show="name=='扫描复印'"> <img src="../assets/typeSMFY.png" /> </div> <div class="picture" v-show="name=='身份证打印'"> <img src="../assets/typeSFZ.png" /> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "operationGuide", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, mounted() { let name = this.$route.params.name if(name=='U盘打印') { this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择' this.btnName='选取文件' }else if(name=='扫描复印') { this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。' this.btnName='开始扫描' }else if(name=='身份证打印') { this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。' this.btnName='开始扫描' } } } </script> <style scoped lang="less"> .operationGuide { .box { width: 114.06rem; height: 42.13rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .picture { margin-left: 4.75rem; img { width: 29.06rem; margin-left: 11.81rem; } .icon { margin-left: 0; width: 56rem; margin-bottom: 2.69rem; } .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; div { width: 30%; text-align: center; } } } .tip { margin-right: 7.81rem; width: 40rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { margin: 3rem auto 3.69rem; text-align: center; } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } } } </style>

Ignore Space Show notes View

src/views/operationGuide.vue 0 → 100644

<template>

  <div class="operationGuide">
    <navbar :name="name"/>
    <div class="box flex-between">
      <div class="picture" v-show="name=='U盘打印'">
        <img class="icon" src="../assets/typeUp.png" />
        <div class="flex-between name">
          <div>U盘</div>
          <div>USB接口</div>
        </div>
      </div>
      <div class="picture" v-show="name=='扫描复印'">
        <img src="../assets/typeSMFY.png" />
      </div>
      <div class="picture" v-show="name=='身份证打印'">
        <img src="../assets/typeSFZ.png" />
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "operationGuide",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择'
      this.btnName='选取文件'
    }else if(name=='扫描复印') {
      this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。'
      this.btnName='开始扫描'
    }else if(name=='身份证打印') {
      this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。'
      this.btnName='开始扫描'
    }
  }
}
</script>

Ignore Space Show notes View src/views/pay.vue 0 → 100644
<template> <!--支付确认--> <div class="pay"> <navbar :name="name"/> <div class="box"> <div class="flex-start name"> <img src="../assets/demo11.png" alt=""> <span>文件文件文件文件</span> </div> <div class="info flex-start">A4，黑白，单面，1份，1至13页，1页/张</div> </div> <div class="box2 flex-between"> <div class="flex-start price"> <span>费用合计：</span> <div>￥26.00</div> </div> <div class="flex-center btn" @click="skip('expense',name)">确认支付</div> </div> </div> </template> <script> import navbar from "@/components/nav"; export default { name: "pay", components: { navbar }, provide() { return { title: '支付', type: this.name } }, data() { return { name: this.$route.params.name, } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, }, } </script> <style scoped lang="less"> .pay { .css1 { width: 105.43rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; padding: 0 2.69rem; } .box { height: 23rem; .css1(); margin-bottom: 2.5rem; .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; padding: 3.25rem 0 2.56rem; img { width: 3.66rem; margin-right: 1.63rem; } } .info { width: 97.94rem; height: 9.44rem; background: #F6F6F6; border-radius: 1.63rem; font-size: 2.13rem; font-weight: bold; color: #989898; line-height: 3rem; padding: 0 3.75rem; } } .box2 { height: 12.44rem; .css1(); .price { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; align-items: flex-end; div { font-size: 4.13rem; font-weight: bold; color: #D51919; line-height: 5rem; margin-left: 3rem; } } .btn { width: 51.13rem; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; } } } </style>

Ignore Space Show notes View

src/views/pay.vue 0 → 100644

<template>

  <div class="pay">
    <navbar :name="name"/>
    <div class="box">
      <div class="flex-start name">
        <img src="../assets/demo11.png" alt="">
        <span>文件文件文件文件</span>
      </div>
      <div class="info flex-start">A4，黑白，单面，1份，1至13页，1页/张</div>
    </div>
    <div class="box2 flex-between">
      <div class="flex-start price">
        <span>费用合计：</span>
        <div>￥26.00</div>
      </div>
      <div class="flex-center btn" @click="skip('expense',name)">确认支付</div>
    </div>
  </div>
</template>

export default {
  name: "pay",
  components: {
    navbar
  },
  provide() {
    return {
      title: '支付',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
  },
}
</script>

Ignore Space Show notes View src/views/selectFile.vue 0 → 100644
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name"/> <!-- U盘打印--> <div class="box flex-center" v-show="name=='U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div> </div> <div class="file"> <div class="main"></div> <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div> </div> </div> <!-- 扫描复印--> <div class="box flex-center" v-show="name=='扫描复印'"> <div class="file2"> <div class="title">已完成扫描的版面</div> <div class="main"></div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content">宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。</div> <div class="flex-between but"> <div class="btn flex-center">继续扫描</div> <div class="btn flex-center" @click="skip('transcoding',name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-show="name=='身份证打印'"> <div class="file2 file3"> <div class="title">请核对您的信息</div> <div class="main"></div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。</div> <div class="btn flex-center" @click="skip('transcoding',name)">信息无误，继续</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "selectFile", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, mounted() { } } </script> <style scoped lang="less"> .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 15.31rem; width: 32.69rem; .main { width: 31.63rem; height: 28.56rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; text-align: left; } .main { width: 39.81rem; height: 31.31rem; background: #EEEEEE; margin: 1.38rem auto 0; } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } } </style>

Ignore Space Show notes View

src/views/selectFile.vue 0 → 100644

<template>
  
  <div class="selectFile">
    <navbar :name="name"/>

    <div class="box flex-center" v-show="name=='U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。</div>
      </div>
      <div class="file">
        <div class="main"></div>
        <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div>
      </div>
    </div>

    <div class="box flex-center" v-show="name=='扫描复印'">
      <div class="file2">
        <div class="title">已完成扫描的版面</div>
        <div class="main"></div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。</div>
        <div class="flex-between but">
          <div class="btn flex-center">继续扫描</div>
          <div class="btn flex-center" @click="skip('transcoding',name)">完成扫描</div>
        </div>
      </div>
    </div>

    <div class="box flex-center" v-show="name=='身份证打印'">
      <div class="file2 file3">
        <div class="title">请核对您的信息</div>
        <div class="main"></div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。</div>
        <div class="btn flex-center" @click="skip('transcoding',name)">信息无误，继续</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "selectFile",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
  mounted() {

}
}
</script>

Ignore Space Show notes View src/views/transcoding.vue 0 → 100644
<template> <!-- 文件上传转码--> <div class="transcoding"> <navbar :name="name"/> <div class="file2" v-if="name=='身份证打印'"> <div class="li"> <div class="title flex-center">转码处理中，请稍后</div> <div class="progressBar"></div> </div> </div> <div class="file" v-else> <div class="li flex-between"> <div class="flex-start"> <img src="../assets/demo11.png" alt="">文件文件文件文件 </div> <div class="progressBar"></div> </div> </div> <div class="box flex-between"> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('argument',name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "transcoding", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='身份证打印'?'信息转码处理':'文档列表', name: this.$route.params.name, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, mounted() { let name = this.$route.params.name if(name=='U盘打印') { this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。' }else if(name=='扫描复印') { this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。' }else if(name=='身份证打印') { this.content='请您耐心等候，信息转码处理完成后，可按“下一步”继续后操作。' } } } </script> <style scoped lang="less"> .transcoding { .file { width: 110.81rem; height: 17rem; margin: 0 auto 2.94rem; font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; overflow-y: auto; .li { padding: 0 2.56rem 0 2.69rem; height: 8.13rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin-bottom: 1.25rem; img { width: 3.66rem; margin-right: 1.63rem; } } } .file2 { width: 114.06rem; height: 18rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto 1.31rem; .title { font-size: 3.5rem; font-weight: 400; color: #D41212; line-height: 3.69rem; padding: 4.88rem 0 3rem; } .progressBar { margin: 0 auto; } } .progressBar { width: 35.75rem; height: 3rem; background: #FFFFFF; border: 0.06rem solid #707070; } .box { width: 114.06rem; height: 24.63rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .tip { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; width: 102.19rem; margin: 0 auto; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { margin: 0.81rem auto 3.81rem; text-align: left; } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } } } </style>

Ignore Space Show notes View

src/views/transcoding.vue 0 → 100644

<template>
  
  <div class="transcoding">
    <navbar :name="name"/>
    <div class="file2" v-if="name=='身份证打印'">
      <div class="li">
        <div class="title flex-center">转码处理中，请稍后</div>
        <div class="progressBar"></div>
      </div>
    </div>
    <div class="file" v-else>
      <div class="li flex-between">
        <div class="flex-start">
          <img src="../assets/demo11.png" alt="">文件文件文件文件
        </div>
        <div class="progressBar"></div>
      </div>
    </div>
    <div class="box flex-between">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('argument',name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "transcoding",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='身份证打印'?'信息转码处理':'文档列表',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。'
    }else if(name=='扫描复印') {
      this.content='当您处理多个文件或者文件体积较大时，有可能受设备所处的网络宽带影响，上传速度可能会略微缓慢，请您耐心等待。全部文件上传完成后，可按“下一步”继续后续操作。'
    }else if(name=='身份证打印') {
      this.content='请您耐心等候，信息转码处理完成后，可按“下一步”继续后操作。'
    }
  }
}
</script>

Show line notes below