han

hanfei / VueSharedPrinting

Browse code han master
1 parent 4e18e30 commit 43812ca0d242a5234b0371e8919db195008b3aac hanfei authored on 20 Dec 2023

Patch

Showing 4 changed files

Ignore Space Show notes View src/components/nav.vue
<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" v-if="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> <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

<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" v-if="type">【{{ type }}】</div>
  </div>
</template>

Ignore Space Show notes View src/router/index.js
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') }, { path: '/explain', name: 'explain', component: () => import('../views/explain.vue') } ] const router = new VueRouter({ routes }) export default router 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

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')
  },
  {
    path: '/explain',
    name: 'explain',
    component: () => import('../views/explain.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

Ignore Space Show notes View src/views/device.vue
<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" @click="skip('explain','使用教程')"> <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" @click="skip('explain','客服助手')"> <img src="../assets/demo7.png" />客服助手 </div> </div> <!-- 右边--> <div class="box2"> <div class="main3 flex-center" @click="skip('explain','打印价格')"> <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> <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

<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" @click="skip('explain','使用教程')">
        <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" @click="skip('explain','客服助手')">
        <img src="../assets/demo7.png" />客服助手
      </div>
    </div>

    <div class="box2">
      <div class="main3 flex-center" @click="skip('explain','打印价格')">
        <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>

<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/explain.vue 0 → 100644
<template> <!--说明--> <div class="explain"> <navbar :name="name"/> <div class="box"> <div v-if="name=='使用教程'"> <div class="content">使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程</div> </div> <div v-if="name=='打印价格'"> <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> </div> <div v-if="name=='客服助手'"> <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。</div> </div> </div> <div class="btn flex-center">确定</div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "explain", components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, } }, } </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 21rem; padding: 6rem 0; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 0 auto; .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } .btn { width: 114.06rem; 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: 3.19rem auto 0; } } </style>

Ignore Space Show notes View

src/views/explain.vue 0 → 100644

<template>

  <div class="explain">
    <navbar :name="name"/>
    <div class="box">
      <div v-if="name=='使用教程'">
        <div class="content">使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程</div>
      </div>
      <div v-if="name=='打印价格'">
        <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div>
        <div class="content">6寸相纸/热升华相纸 [照片、 证件照打印]:证件照: XXX 元/ 张(版)照 片: XXX元/张</div>
      </div>
      <div v-if="name=='客服助手'">
        <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。</div>
      </div>
    </div>
    <div class="btn flex-center">确定</div>
  </div>
</template>

export default {
  name: "explain",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.name,
      type: ''
    }
  },
  data() {
    return {
      name: this.$route.params.name,
    }
  },
}
</script>

Show line notes below