You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

857 lines
36 KiB

<template>
<div class="wrap">
<!-- src="@/assets/img/manager.png" -->
<img class="sth manager" v-lazy="lazy1" alt="">
<div class="sth guide" @click="toPart" alt="">
返回
</div>
<div class="actions">
<ul class="btns">
<li @click="showTake" class=" duration-1000">取号</li>
<li @click="showData" class=" duration-1000">填单</li>
<li @click="showCopy" class=" duration-1000">复印</li>
<li @click="showRecaption" class=" duration-1000">取回</li>
</ul>
</div>
<el-dialog :visible.sync="takeVisible" style="width: 100%" @close="closeTake" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
<div slot="title" class="dia-header">
<div class="data-title">取号机</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeTakeDia">
</div>
<p class="tips">- 请选择办理的业务 -</p>
<ul class="take-list">
<!-- @click="checkTake(index)" -->
<li v-for="(item, index) in handleBusiness" :class="{checked: takeCheck == index}" :key="item.key" @click="checkTake(index)">
<img :src="item.img" :alt="item.name" :title="item.name">
<p>{{ item.name }}</p>
</li>
<!-- <li :class="{checked: takeCheck == 400}" @click="checkTake(400)">
<img src="@/assets/svg/cash.svg" alt="">
<p>现金业务</p>
</li>
<li :class="{checked: takeCheck == 401}" @click="checkTake(401)">
<img src="@/assets/svg/non-cash.svg" alt="">
<p>个人非现金业务</p>
</li>
<li :class="{checked: takeCheck == 402}" @click="checkTake(402)">
<img src="@/assets/svg/company.svg" alt="">
<p>公司业务</p>
</li>
<li :class="{checked: takeCheck == 403}" @click="checkTake(403)">
<img src="@/assets/svg/financial.svg" alt="">
<p>理财业务</p>
</li> -->
</ul>
<div class="dia-footer">
<button type="button" @click="confirmTake" v-throttle>确定</button>
</div>
</el-dialog>
<!-- :visible.sync="takeResultVisible" -->
<el-dialog :visible.sync="takeResultVisible" width="400px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
<div slot="title" class="dia-header">
<div class="data-title">{{ workingName + '机'}}</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false">
</div>
<div class="result">
<div style='width: 60px;height: 60px;margin: auto'>
<img src="@/assets/img/finish.png" alt="">
</div>
<h6>{{ workingName + '成功'}}</h6>
<p v-if="workingName === '取号'" class="text">您选择了{{ handleBusiness[takeCheck]? handleBusiness[takeCheck].name: ''}}</p>
</div>
</el-dialog>
<el-dialog :visible.sync="dataVisible" style="width: 100%;margin-top: -90px;" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
<div slot="title" class="dia-header">
<div class="data-title">银行单据</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia">
</div>
<p class="tips">- 请单击选中所需材料、双击可放大预览 -</p>
<ul class="list">
<li :class="{checked: checkList.includes(elImg[0].key)}" @click="checkData(elImg[0].key)">
<el-image
:src="elImg[0].img"
:fit="elImgFit"
:title="elImg[0].name"
:alt="elImg[0].name"
></el-image>
<!-- <img style='width: 100%;height: 154px' src="@/assets/img/goods/accountApplyBook.jpg" alt=""> -->
<p>{{ elImg[0].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[1].key)}" @click="checkData(elImg[1].key)">
<img :src="elImg[1].img" :alt="elImg[1].name" :title="elImg[1].name">
<p>{{ elImg[1].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[2].key)}" @click="checkData(elImg[2].key)">
<el-image
style="margin-top: 0"
:src="elImg[2].img"
:fit="elImgFit"
></el-image>
<p>{{ elImg[2].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[3].key)}" @click="checkData(elImg[3].key)">
<!-- <img class="" :src="elImg[3].img" :alt="elImg[3].name" :title="elImg[3].name"> -->
<el-image
style="margin-top: 0"
:src="elImg[3].img"
:fit="elImgFit"
></el-image>
<p style="font-size: 14px;line-height: 15px">{{ elImg[3].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[4].key)}" @click="checkData(elImg[4].key)">
<img :src="elImg[4].img" :alt="elImg[4].name" :title="elImg[4].name">
<p>{{ elImg[4].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[5].key)}" @click="checkData(elImg[5].key)">
<img :src="elImg[5].img" :alt="elImg[5].name" :title="elImg[5].name">
<p>{{ elImg[5].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[6].key)}" @click="checkData(elImg[6].key)">
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
<el-image
:src="elImg[6].img"
:fit="elImgFit"
:title="elImg[6].name"
:alt="elImg[6].name"
lazy></el-image>
<p>{{ elImg[6].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[7].key)}" @click="checkData(elImg[7].key)">
<img style="margin-top: 10px" :src="elImg[7].img" :alt="elImg[7].name" :title="elImg[7].name">
<p>{{ elImg[7].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[8].key)}" @click="checkData(elImg[8].key)">
<img :src="elImg[8].img" :alt="elImg[8].name" :title="elImg[8].name">
<p>{{ elImg[8].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[9].key)}" @click="checkData(elImg[9].key)">
<!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
<el-image
:src="elImg[9].img"
:fit="elImgFit"
:title="elImg[9].name"
:alt="elImg[9].name"
lazy></el-image>
<p>{{ elImg[9].name }}</p>
</li>
<li :class="{checked: checkList.includes(elImg[10].key)}" @click="checkData(elImg[10].key)">
<img style="margin-top: 10px" :src="elImg[10].img" :alt="elImg[10].name" :title="elImg[10].name">
<p>{{ elImg[10].name }}</p>
</li>
<!-- 这个是占位的! -->
<li class="sitting2"></li>
</ul>
<div class="dia-footer">
<button type="button" v-throttle @click="fillIt">确定</button>
</div>
</el-dialog>
<el-dialog :visible.sync="copyVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
<div slot="title" class="dia-header">
<div class="data-title">复印</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeCopyDia">
</div>
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
<ul class="flex justify-center">
<div v-for="item in elImg2" class="list flex-col spacialStyle" @click="checkData(item.key, item.copyState)" :key="item.key">
<li :class="{checked: checkList.includes(item.key)}">
<!-- <img :src="item.img" :title="item.name" :alt="item.name"> -->
<el-image
style="margin-top: -10"
:src="item.img"
:fit="elImgFit"
></el-image>
<p>{{ item.name }}</p>
</li>
<p>{{ item.copyState?'已复印': '待复印' }}</p>
</div>
</ul>
<div class="dia-footer">
<button type="button" v-throttle @click="sureCopy">确定</button>
</div>
</el-dialog>
<el-dialog :visible.sync="recaptionVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
<div slot="title" class="dia-header">
<div class="data-title">取回</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeRecaption">
</div>
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
<ul class="flex justify-center" >
<div v-for="item in elImg2" class="list flex-col spacialStyle" @click="checkData(item.key, item.returnState)" :key="item.key">
<li :class="{checked: checkList.includes(item.key)}">
<!-- <img :src="item.img" :title="item.name" :alt="item.name"> -->
<el-image
:src="item.img"
:fit="elImgFit"
></el-image>
<p>{{ item.name }}</p>
</li>
<p>{{ item.returnState? '已取回': '待取回' }}</p>
</div>
</ul>
<div class="dia-footer">
<button type="button" v-throttle @click="takeBack">确定</button>
</div>
</el-dialog>
<!-- <el-dialog :visible.sync="recaptionVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
<div slot="title" class="dia-header">
<div class="data-title">取回</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeRecaption">
</div>
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
<ul class="list">
<li :class="{checked: checkList.includes(13)}" @click="checkData(13)">
<img src="@/assets/img/idCard-sm.png" alt="">
<p>身份证</p>
</li>
<li :class="{checked: checkList.includes(405)}" @click="checkData(405)">
<el-image
style="margin-top: -10"
:src="elImg[0].img"
:fit="elImgFit"
></el-image>
<p>开户申请书</p>
</li>
</ul>
<div class="dia-footer">
<button type="button" v-throttle @click="takeBack">确定</button>
</div>
</el-dialog> -->
<!-- 图片查看器 -->
<el-dialog
custom-class="data-dia imgIndex"
:visible.sync="showImg"
width="634px"
>
<img :src="imgSrc" class="imgPop imgIndex min-w-full " alt="">
</el-dialog>
</div>
</template>
<script>
import { mapState } from 'vuex'
const projectId = sessionStorage.getItem('projectId')
const startTime = sessionStorage.getItem('startTime')
import { addOperation, getOperation } from '@/api/http'
import saveSystemModule from '@/mixins/saveSystemModule'
export default {
name: 'index',
data() {
return {
workingName: '', // 正在工作的机器
clickNum: 0, // 点击次数
imgSrc: '',
showImg: false,
takeCheck: -1,
takeVisible: false,
takeResultVisible: false,
dataVisible: false,
checkList: [],
copyVisible: false,
recaptionVisible: false,
elImgFit: 'contain',
handleBusiness: [
{ key: 400, name: '现金业务', img: require('@/assets/svg/cash.svg') },
{ key: 401, name: '个人非现金业务', img: require('@/assets/svg/non-cash.svg') },
{ key: 402, name: '公司业务', img: require('@/assets/svg/company.svg') },
{ key: 403, name: '理财业务', img: require('@/assets/svg/financial.svg') }
],
elImg: [
{ img: require('@/assets/img/goods/accountApplyBook.jpg'), name: '开户申请书', key: 405 },
{ img: require('@/assets/img/idCard-copy-sm.png'), name: '密码挂失申请书', key: 406 },
{ img: require('@/assets/img/goods/businessSpecialApplication.png'), name: '特殊业务申请书', key: 407 },
{ img: require('@/assets/img/goods/ApplicationBankSettlement.png'), name: '开立单位银行结算账户申请书', key: 408 },
{ img: require('@/assets/img/goods/CashCertificate.png'), name: '现金存款凭证', key: 409 },
{ img: require('@/assets/img/goods/zzpt.png'), name: '转账凭证', key: 410 },
{ img: require('@/assets/img/goods/xjzp.png'), name: '现金支票', key: 411 },
{ img: require('@/assets/img/goods/sy-zzzp.png'), name: '转账支票', key: 412 },
{ img: require('@/assets/img/goods/CheckCoupons.png'), name: '支票领购单', key: 413 },
{ img: require('@/assets/img/goods/cash-sm.png'), name: '现金缴款单', key: 414 },
{ img: require('@/assets/img/goods/cash-sm.png'), name: '境外汇款申请书', key: 415 },
],
elImg2: [
{ img: require('@/assets/img/goods/accountApplyBook.jpg'), name: '开户申请书', key: 405, copyState: false, returnState: false },
{ img: require('@/assets/img/idCard-sm.png'), name: '身份证', key: 13, copyState: false, returnState: false },
],
listLi1 : [
{checked: 1, click: 1, src: require('@/assets/img/goods/accountApplyBook.jpg'), title: '开户申请书'},
{checked: 2, click: 2, src: require('@/assets/img/idCard-copy-sm.png'), title: '密码挂失申请书'},
{checked: 3, click: 3, src: require('@/assets/img/goods/businessSpecialApplication.png'), title: '特殊业务申请书'},
{checked: 4, click: 4, src: require('@/assets/img/goods/cash-sm.png'), title: '开立单位银行结算账户申请书'},
{checked: 1, click: 5, src: require('@/assets/img/goods/CashCertificate.png'), title: '现金存款凭证'},
{checked: 2, click: 6, src: require('@/assets/img/goods/zzpt.png'), title: '转账凭证'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金支票'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '转账支票'},
{checked: 2, click: 6, src: require('@/assets/img/idCard-copy-sm.png'), title: '支票领购单'},
{checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金缴款单'},
{checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
],
lazy1: require('@/assets/img/manager.png')
}
},
created() {
const parentId = '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,416'
let param= {
parentId
}
getOperation(param).then((data)=>{
console.log('缓存的data')
console.log(data)
})
},
mixins: [saveSystemModule],
mounted() {
},
methods: {
showTake(type){
this.workingName = '取号'
this.takeVisible = true
},
checkTake(index){
if(this.takeCheck === index) {
this.takeCheck = -1
}else {
this.takeCheck = index
}
},
closeTakeDia(){
this.takeVisible = false
},
closeTake(){
// this.takeCheck = 0
},
// 取号
confirmTake(){
if(this.takeCheck < 0) {
this.$message({
message: '请选择一个您要办理的业务',
type: 'warning',
center: true
});
return
}
// "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id +",287,5,25,33,43"
const formList = [];
formList.push({"answerId":this.handleBusiness[this.takeCheck].key,"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,399,' + this.handleBusiness[this.takeCheck].key, "type": ""})
const params= {
parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,399',
lcJudgmentRuleReq:formList,
projectId:+projectId,
startTime:startTime,
}
addOperation(params).then((data)=>{
this.takeVisible = false
this.takeResultVisible = true
setTimeout(() => {
if(this.takeResultVisible) {
this.takeResultVisible = false
}
}, 700)
}).catch((error)=>{
this.$message({
showClose: true,
message: '网络可能有问题哦,取号失败',
type: 'warning',
center: true
});
})
},
// 填单
fillIt() {
const formList = [];
let checkList = [...this.checkList]
if(this.checkList.length <= 0) {
this.$message({
message: '请选择至少一个填单',
type: 'warning',
center: true
});
return
}
const tmp = sessionStorage.getItem('isFill')
if(tmp) {
checkList = [...new Set([...JSON.parse(tmp), ...checkList])]
}
for(let i=0; i<checkList.length; i++) {
formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,404,' + checkList[i], "type": ""})
}
const params= {
parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286, 404',
lcJudgmentRuleReq:formList,
projectId:+projectId,
startTime:startTime,
}
addOperation(params).then((data)=>{
// ...
this.dataVisible = false
const isFill = [...this.checkList]
sessionStorage.setItem('isFill', JSON.stringify(isFill))
this.checkList = []
this.takeResultVisible = true
setTimeout(() => {
if(this.takeResultVisible) {
this.takeResultVisible = false
}
}, 700)
}).catch((error)=>{
this.$message({
showClose: true,
message: '网络可能有问题哦,填单失败',
type: 'warning',
center: true
});
})
},
// 复印
sureCopy() {
const formList = [];
const checkList = [...this.checkList]
if(this.checkList.length <= 0) {
this.$message({
message: '请选择至少一个文件进行复印',
type: 'warning',
center: true
});
return
}
for(let i=0; i<checkList.length; i++) {
formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,416,' + checkList[i], "type": ""})
}
this.elImg2.map(item=> {
if(item.copyState) {
formList.push({"answerId":item.key,"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,416,' + item.key, "type": ""})
}
})
const params= {
parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286, 416',
lcJudgmentRuleReq:formList,
projectId:+projectId,
startTime:startTime,
}
addOperation(params).then((data)=>{
// ...
this.copyVisible = false
this.elImg2.map(item => {
if(this.checkList.findIndex(item2 => item2 === item.key ) !== -1) {
item.copyState = true
}
})
this.checkList = []
this.takeResultVisible = true
setTimeout(() => {
if(this.takeResultVisible) {
this.takeResultVisible = false
}
}, 700)
}).catch((error)=>{
this.$message({
showClose: true,
message: '网络可能有问题,填单失败',
type: 'warning',
center: true
});
})
},
// 取回
takeBack() {
const formList = [];
const checkList = [...this.checkList]
if(this.checkList.length <= 0) {
this.$message({
message: '请取回至少一个文件',
type: 'warning',
center: true
});
return
}
for(let i=0; i<checkList.length; i++) {
formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,553,' + checkList[i], "type": ""})
}
this.elImg2.map(item=> {
if(item.returnState) {
formList.push({"answerId":item.key,"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286,553,' + item.key, "type": ""})
}
})
const params= {
parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',286, 553',
lcJudgmentRuleReq:formList,
projectId:+projectId,
startTime:startTime,
}
addOperation(params).then((data)=>{
// ...
this.recaptionVisible = false
this.elImg2.map(item => {
if(this.checkList.findIndex(item2 => item2 === item.key ) !== -1) {
item.returnState = true
}
})
this.checkList = []
this.takeResultVisible = true
setTimeout(() => {
if(this.takeResultVisible) {
this.takeResultVisible = false
}
}, 700)
}).catch((error)=>{
this.$message({
showClose: true,
message: '网络可能有问题哦,填单失败',
type: 'warning',
center: true
});
})
},
// 返回跳转路由 没啥好看的
toPart(){
this.$router.push('/index/list')
// let token = sessionStorage.getItem('token')
// let cid = sessionStorage.getItem('cid')
// let systemId = sessionStorage.getItem('systemId')
// let projectId = sessionStorage.getItem('projectId')
// let assessmentId = sessionStorage.getItem('assessmentId')
// let classId = sessionStorage.getItem('classId')
// if (projectId){
// //线上
// // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
// //测试服
// location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
// //本地
// // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
// }else{
// //线上
// // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
// //测试服
// location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
// // 本地
// // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
// }
},
dblClickFn(item,val){/* 选中/预览 单/双击函数 */
let that = this
this.clickNum++
if (this.clickNum === 2) { // 处理双击事件
this.clickNum = 0;
this.showImg = true
this.imgSrc = item.img
}
setTimeout(function () {
if (that.clickNum === 1) {// 处理单击事件
that.clickNum = 0;
}
}, 200)
},
showData(){
this.workingName = '填单'
this.dataVisible = true
},
checkData(id, state){
if(state) {
return
}
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id)
this.clickNum++
if (this.clickNum === 2) { // 处理双击事件
let itemIndex = -1
if(this.workingName === '填单') {
itemIndex = this.elImg.findIndex(item => item.key === id)
this.imgSrc = this.elImg[itemIndex].img
}else if(this.workingName === '复印') {
itemIndex = this.elImg2.findIndex(item => item.key === id)
this.imgSrc = this.elImg2[itemIndex].img
}else if(this.workingName === '取回') {
itemIndex = this.elImg2.findIndex(item => item.key === id)
this.imgSrc = this.elImg2[itemIndex].img
}
this.clickNum = 0;
this.showImg = true
}
setTimeout(() => {
if (this.clickNum === 1) {// 处理单击事件
this.clickNum = 0;
}
}, 200)
},
closeDataDia(){
this.dataVisible = false
},
closeData(){
this.checkList = []
},
showCopy(){
this.workingName = '复印'
this.copyVisible = true
},
closeCopyDia(){
this.copyVisible = false
},
showRecaption() {
this.workingName = '取回'
this.recaptionVisible = true
},
closeRecaption() {
this.recaptionVisible = false
},
}
};
</script>
<style lang="scss" scoped>
.imgPop{
max-width: 100%;
margin-top: 20px;
}
.wrap{
background: rgb(245,246,248);
width:100%;
//min-height:900px;
overflow:hidden;
.sth{
position: absolute;
&.cp{
cursor: pointer;
}
}
.guide{
top: 80px;
left: 10px;
width: 150px;
cursor: pointer;
background:url(../../../assets/img/lobby-btn-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 50px;
font-size: 24px;
text-align: center;
color: #fff;
&:hover{
opacity: .9;
}
}
.manager{
top: 68px;
left: 10%;
width: 80%;
height: calc(100% - 68px);
}
}
.actions{
position: fixed;
bottom: 0;
left: 50%;
padding: 55px;
transform: translateX(-50%);
background-color: rgba(255,255,255,.7);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
.btns{
display: flex;
justify-content: space-between;
li{
width: 200px;
margin-right: 50px;
text-align: center;
color: #fff;
font-size: 28px;
line-height: 70px;
background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat;
background-size: 100% 100%;
cursor: pointer;
&:last-child{
margin-right: 0;
}
}
}
}
/deep/.data-dia{
// width:80%;
width: 800px;
min-width:400px;
margin: auto;
.scannerImg {
background-color: red;
margin-top: 20px;
max-height: 95%;
}
.take-list{
width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li{
display: inline-flex;
align-items: center;
width: 250px;
height: 120px;
border: 4px solid #DBDBDB;
border-radius: 20px;
cursor: pointer;
background-color: rgba(216,216,216,0.10);
&:first-child{
margin: 0 0px 30px 0;
}
&:last-child{
//margin-left: 30px;
}
img{
margin-left: 10px;
width: 30%;
}
p{
font-size: 18px;
color: #000;
text-align: center;
font-weight: bold;
padding: 0 15px;
}
&.checked{
background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
border-color: #6191FF;
}
}
}
.result{
margin: 30px 0 20px;
text-align: center;
img{
width: 136px;
}
h6{
margin: 30px 0 10px;
font-size: 30px;
color: #000;
}
.text{
font-size: 22px;
color: #797979;
}
}
.list {
min-width: 5vw;
overflow: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
li {
width: 140px;
height: 140px;
margin: 10px 10px;
// 这里和common.js混了!
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
// &>img {
// width: 100%;
// //max-width: 90%;
// }
&>.el-image {
width: 100%;
max-height: 80px;
overflow: hidden;
img {
//transform: translateY(-35%);
// width: 100%;
}
}
p{
font-size: 14px;
line-height: 40px;
}
}
}
.list2 {
max-height: 30vh;
min-width: 5vw;
overflow: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
li {
width: 140px;
height: 140px;
margin: 10px 10px;
// 这里和common.js混了!
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
// &>img {
// width: 100%;
// //max-width: 90%;
// }
&>.el-image {
width: 100%;
max-height: 80px;
overflow: hidden;
img {
//transform: translateY(-35%);
// width: 100%;
}
}
p{
font-size: 14px;
line-height: 40px;
}
}
}
.dia-footer23 {
background-color: red;
}
}
.sitting2 {
opacity: 0;
cursor: default!important;
}
.spacialStyle {
margin: 0;
width: auto!important;
}
</style>