GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
hanfei
/
VueSharedPrinting
Browse code
han
master
1 parent
6826f42
commit
4e18e30e83c498ba13ed6b78ab7a77cbd2e55108
hanfei
authored
on 20 Dec 2023
Patch
Showing
5 changed files
babel.config.js
src/views/argument.vue
src/views/operationGuide.vue
src/views/selectFile.vue
vue.config.js
Ignore Space
Show notes
View
babel.config.js
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], }
// 引入等比适配插件 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
src/views/argument.vue
<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>
<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/operationGuide.vue
<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 flex-center" 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>
<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/selectFile.vue
<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 v-for="(item,index) in UpFile" v-bind:key="index">{{item.name}}</div> <input type="file" @change="handleFileChange" /> </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 flex-between"> <div class="smfyData"> <div v-for="(item,index) in imgList" v-bind:key="index" :class="['flex-center',{'act': smfyIndex==index}]" @click="onChange(index,'smfyIndex')"> <div class="name">{{index+1}}</div> <span @click="onCancel(index,'imgList')">删除</span> </div> </div> <img :src="imgList[smfyIndex]" alt="" style="width: 25rem;height: 100%;"> </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" @click="paiz()">继续扫描</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, path:"ws://127.0.0.1:7000/", socket: '', imgList: [], smfyIndex: 0, UpFile: [] } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, onChange(index,name) { this[name] = index }, onCancel(index,name) { this[name].splice(index, 1) }, paiz() { this.socket.send("Capture@2"); }, init: function () { if(typeof(WebSocket) === "undefined"){ alert("您的浏览器不支持socket") }else{ // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send("RotateRight"); this.socket.send("Deskew"); }, error: function () { console.log("连接错误") }, getMessage: function (msg) { if (typeof msg.data == "string") { if (msg.data.indexOf("GetDevCount") == 0) { let s = msg.data.substring(12); if ('1' == s || '2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert("检测到已经连接上摄像头"); } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8); if(s) { this.imgList.push("data:image/jpeg;base64," + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send("Capture@2"); } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send("UnFaceDetect"); } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11); if ('1' == s) { this.socket.send("GetIdCardResult@||"); this.socket.send("GetIdCardImage@2"); } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16); let info = document.getElementById('info'); info.value = s; } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11); let info = document.getElementById('info'); info.value = s; } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15); let arr = s.split("#"); let faceImg = arr[0]; let myimg = document.getElementById("myCanvas3"); myimg.src = "data:image/jpeg;base64," + faceImg; } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10); let myimg = document.getElementById("myCanvas2"); myimg.src = "data:image/jpeg;base64," + s; alert(s); } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27); let info = document.getElementById('info'); info.value = s; } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19); let info = document.getElementById('info'); info.value = s; } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11); let info = document.getElementById('info'); info.value = s; } } else { let reader = new FileReader(); reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { // let url = msg.target.result; // document.getElementById('myCanvas').src = url; } } reader.readAsDataURL(msg.data); } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket='' }, handleFileChange(event) { let file = event.target.files[0]; if(file) { this.UpFile.push(file) } }, }, destroyed () { // 销毁监听 this.close() }, mounted() { if(this.$route.params.name=='扫描复印') { this.init() } } } </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; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52A39D; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>
<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
vue.config.js
0 → 100644
// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } }, }
Show line notes below
GitBucket
4.23.0