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.
2349 lines
81 KiB
2349 lines
81 KiB
<template> |
|
<div class="wrap"> |
|
<back-Button /> |
|
<!-- <img class="sth bg" src="" alt="" />--> |
|
<!-- <img class="sth guide" src="@/assets/img/guide.png" alt="" /> --> |
|
<img class="sth man cp" src="@/assets/img/man.png" alt="" @click="showData('客户签字',0)"/> |
|
<img class="sth counter" src="@/assets/img/counter.png" alt="" /> |
|
<img class="sth glass" src="@/assets/img/glass.png" alt="" /> |
|
|
|
<!-- 系统录入 --> |
|
<el-tooltip placement="top" popper-class="sth-popper"> |
|
<div slot="content"> |
|
<img style="height: 178px;position:relative;top:-450px;right:20px" src="@/assets/img/tooltip/system.png" alt="" /> |
|
</div> |
|
<img @click="showManage" class="sth computer cp" src="@/assets/img/computer.png" alt="" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/cpl.png" alt="" /> |
|
</div> |
|
<img class="sth summons cp" src="@/assets/img/summons.png" alt="" @click="showData('传票箱',1)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/ptpzx.png" alt="" /> |
|
</div> |
|
<img class="sth voucher-box cp" src="@/assets/img/voucher-box.png" alt="" @click="showData('普通凭证箱',2)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/zk.png" alt="" /> |
|
</div> |
|
<img class="sth important cp" src="@/assets/img/important.png" alt="" @click="showData('重要空白凭证箱',3)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="left-start" popper-class="sth-popper"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/qx.png" alt="" /> |
|
</div> |
|
<img class="sth money-box cp" src="@/assets/img/money-box.png" alt="" @click="showData('钱箱',4)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/yzh.png" alt="" /> |
|
</div> |
|
<img class="sth seal-box cp" src="@/assets/img/seal-box.png" @click="showData('印章盒',5)" alt="" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/ycj.png" alt="" /> |
|
</div> |
|
<img class="sth currency-detector cp" src="@/assets/img/currency-detector.png" @click="showData('验钞机',6)" alt="" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-400"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/dyj.png" alt="" /> |
|
</div> |
|
<img class="sth printer cp" src="@/assets/img/printer.png" alt="" @click="showData('打印机',7)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/mmq.png" alt="" /> |
|
</div> |
|
<img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" @click="showData('密码器',8)" alt="" /> |
|
</el-tooltip> |
|
|
|
<img class="sth employee" src="@/assets/img/employee.png" alt="" /> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-50"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/data.png" alt="" /> |
|
</div> |
|
<p class="employeeText" @click="showData('资料',9)">资料</p> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="00"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/skj.png" alt="" /> |
|
</div> |
|
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="" @click="showData('刷卡器',10)" /> |
|
</el-tooltip> |
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> |
|
<div slot="content"> |
|
<img src="@/assets/img/tooltip/sfz.png" alt="" /> |
|
</div> |
|
<img class="sth idCard-scanner cp" src="@/assets/img/idCard-scanner.png" @click="showData('身份证扫描仪',11)" alt="" /> |
|
</el-tooltip> |
|
|
|
<!-- 物品栏 --> |
|
<div ref="goods" class="goods-dia" :class="{ active: showGoods }"> |
|
<div :id="item.name" v-for="(item, index) in goodsShelfTotalData" :key="index" class=" justify-center" :class="{ checked: checkList.includes(item.id),file:true }" @click="dblClickFn(item,'goods')"> |
|
<img :style="item.name==='开户申请书'?'margin-top:10px;':''" :src="item.src" alt="" /> |
|
<p>{{item.name}}</p> |
|
</div> |
|
</div> |
|
<div class="goods" :class="{ active: showGoods }" @click="toggleGoods"> |
|
<span>物品栏</span> |
|
<img class="icon" src="@/assets/svg/arrow-right.svg" alt="" /> |
|
</div> |
|
|
|
<!-- 硬件交互--弹框 --> |
|
<div v-show="showPop" width="1120px" class="data-dia"> |
|
<div class="dia-header"> |
|
<div class="data-title">{{ popText }}</div> |
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closePop" /> |
|
</div> |
|
<p v-if="popText=='密码器'" class="tips"></p> |
|
<p v-else-if="popText=='重要空白凭证箱'||popText=='普通凭证箱'" class="tips">- 请从以下物品中选取所需材料 -</p> |
|
<p v-else class="tips">- 请从物品栏选中或拖拽所需材料 -</p> |
|
|
|
<div v-if="popText==='密码器'" style="width:800px;padding-right:150px;padding-top:80px"> |
|
<el-form :model="passwordForm" :rules="passwordRules" ref="form" label-width="180px"> |
|
<el-form-item label="密码" prop="password"> |
|
<el-input v-focus show-password v-model="passwordForm.password" maxlength="6" onkeyup="{this.value=this.value.replace(/\D/g,'')}" autocomplete="off"></el-input> |
|
</el-form-item> |
|
<el-form-item label="确认密码" prop="passwordAgain"> |
|
<el-input show-password v-model="passwordForm.passwordAgain" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" autocomplete="off"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
|
|
<div v-else-if="popText==='印章盒'" class="seal" style="width:1200px;"> |
|
<div class="left"> |
|
<div v-for="(item, index) in sealArr" :key="index" :class="{ checked: sealChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
<img :src="item.src" alt="" /> |
|
<p>{{item.name}}</p> |
|
</div> |
|
</div> |
|
<div class="box right" ref="goods"> |
|
<!-- <div v-for="(item, index) in goods" :key="index" :class="{ checked: checkList.includes(item.id),file:true }" @click="dblClickFn(item)">--> |
|
<!-- <img :src="item.src" alt="" />--> |
|
<!-- <p>{{item.name}}</p>--> |
|
<!-- </div>--> |
|
</div> |
|
</div> |
|
|
|
<div v-else-if="popText==='重要空白凭证箱'" class="seal" style="width:1200px;"> |
|
<div class="left else"> |
|
<div v-for="(item, index) in importanceArr" :key="index" :class="{ checked: importantChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
<img :src="item.src" alt="" /> |
|
<p>{{item.name}}</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;"> |
|
<div class="left else"> |
|
<div v-for="(item, index) in commonArr" :key="index" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
<img :src="item.src" alt="" /> |
|
<p>{{item.name}}</p> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 暂时未确定是否公共使用一个弹框 --> |
|
<div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框 --> |
|
<div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' v-for="(item, index) in receptionList" :key="index" v-if="receptionList.length" > |
|
<img :src="item.src" class="file" alt="" /> |
|
<p class="text">{{item.name}}</p> |
|
</div> |
|
</div> |
|
|
|
<div class="dia-footer"> |
|
<button v-throttle @click="popSure" type="button">确定</button> |
|
</div> |
|
</div> |
|
|
|
<!-- 蒙版 --> |
|
<div v-show="showPop" class="masking"></div> |
|
|
|
<!-- 商业银行系统的全屏功能实现 --> |
|
<div :class="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible"> |
|
<router-view></router-view> |
|
</div> |
|
<el-dialog |
|
custom-class="data-dia" |
|
:visible.sync="showImg" |
|
width="45%" |
|
> |
|
<img :src="imgSrc" class="imgPop" alt=""> |
|
</el-dialog> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapState, mapMutations } from 'vuex'; |
|
import Sortable from 'sortablejs' |
|
import manage from '../../manage/index'; |
|
import { addOperation, getOperation } from '@/api/http'; |
|
import backButton from '@/components/backButton' |
|
|
|
export default { |
|
name: 'index', |
|
components: { |
|
manage: manage, |
|
backButton |
|
}, |
|
data() { |
|
var validatePass = (rule, value, callback) => { |
|
if (value === '') { |
|
callback(new Error('请输入密码')); |
|
} else { |
|
if (this.passwordForm.password&&/^[0-9]*$/.test(this.passwordForm.password)&&this.passwordForm.password.length===6) { |
|
// this.$refs.passwordForm.validateField('password'); |
|
callback(); |
|
}else{ |
|
callback(new Error('请注意密码格式以及密码长度')) |
|
} |
|
} |
|
}; |
|
var validatePass2 = (rule, value, callback) => { |
|
if (value === '') { |
|
callback(new Error('请再次输入密码')); |
|
} else if (value.length < 6) { |
|
callback(new Error('两次输入密码不一致!')); |
|
} else if(value !== this.passwordForm.password){ |
|
callback(new Error('两次输入密码不一致!')); |
|
}else{ |
|
callback(); |
|
} |
|
}; |
|
return { |
|
manageVisible: false, // 显示系统录入 |
|
checkList: [],// 物品栏选中 |
|
elseBoxCheck:[],/* 所有其他可从物品栏拖拽物品进入的弹框 */ |
|
//身份证扫描仪//审核资料//验钞机//选择重要空白凭证 |
|
auditGoodsShelf:[ |
|
{name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13}, |
|
{name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14}, |
|
{name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15}, |
|
{name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23}, |
|
], |
|
//系统录入 //选择普通空白凭证 |
|
systemInputGoodsShelf:[ |
|
{name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13}, |
|
{name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14}, |
|
{name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15}, |
|
{name:'银行卡', src:require('@/assets/img/goods/bankCard.png'), id:16}, |
|
{name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23}, |
|
], |
|
//打印资料 //客户签字 //印章盒 |
|
printoutGoodsShelf:[ |
|
{name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13}, |
|
{name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14}, |
|
{name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15}, |
|
{name:'银行卡', src:require('@/assets/img/goods/bankCard.png'), id:16}, |
|
{name:'存款凭条', src:require('@/assets/img/goods/ckpt.png'), id:17}, |
|
{name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23}, |
|
], |
|
//钱箱 |
|
cashboxGoodsShelf:[ |
|
{name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13}, |
|
{name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15}, |
|
{name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23}, |
|
], |
|
// 总盒子里面的东西 |
|
goodsShelfTotalData:[ |
|
{name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13}, |
|
{name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14}, |
|
{name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15}, |
|
{name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23}, |
|
], |
|
// goods:[/* 物品栏物品 */ |
|
// ], |
|
popArr:[/* 弹窗展示的物品 */ |
|
{name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16}, |
|
{name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19}, |
|
{name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'}, |
|
{name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'}, |
|
{name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30}, |
|
{name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'}, |
|
// {name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:'存款凭条'}, |
|
{name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'}, |
|
{name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'}, |
|
{name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'}, |
|
{name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'}, |
|
{name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'}, |
|
{name:'身份证',src:require('@/assets/img/goods/idcard.png'),id:13}, |
|
{name:'身份证复印件',src:require('@/assets/img/idCard-copy-sm.png'),id:23}, |
|
{name:'开户申请书',src:require('@/assets/img/goods/khsqs.png'),id:14}, |
|
{name:'现金',src:require('@/assets/img/goods/cash-sm.png'),id:15}, |
|
{name:'存款凭条',src:require('@/assets/img/goods/ckpt.png'),id:17}, |
|
], |
|
receptionList:[ |
|
|
|
], |
|
sealArr:[/* 印章盒物品 */ |
|
{name:'收讫章',src:require('@/assets/img/seal/paid.png'),id:'收讫章'}, |
|
{name:'销户章',src:require('@/assets/img/seal/closing.png'),id:'销户章'}, |
|
{name:'私章',src:require('@/assets/img/seal/personal.png'),id:'私章'}, |
|
{name:'附件章',src:require('@/assets/img/seal/accessory.png'),id:'附件章'}, |
|
{name:'付讫章',src:require('@/assets/img/seal/paid.png'),id:'付讫章'}, |
|
{name:'业务专用章',src:require('@/assets/img/seal/business.png'),id:'业务专用章'}, |
|
{name:'转讫章',src:require('@/assets/img/seal/Transfer.png'),id:'转讫章'}, |
|
], |
|
importanceArr:[/* 重要空白凭证 */ |
|
{name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16}, |
|
{name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19}, |
|
{name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'}, |
|
{name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'}, |
|
{name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30}, |
|
{name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'}, |
|
], |
|
commonArr:[/* 普通凭证箱 */ |
|
{name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:17}, |
|
{name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'}, |
|
{name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'}, |
|
{name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'}, |
|
{name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'}, |
|
{name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'}, |
|
], |
|
sealChecked:[],/* 印章盒选中 */ |
|
importantChecked:[],// 重要凭证选中 |
|
commonChecked:[],// 普通凭证选中 |
|
passwordForm:{ |
|
password:'', |
|
}, |
|
passwordRules:{ |
|
password:[ |
|
{ validator: validatePass, trigger: 'blur' }, |
|
], |
|
passwordAgain:[ |
|
{ validator: validatePass2, trigger: 'blur' }, |
|
] |
|
}, |
|
clickNum:0, |
|
showImg:false, |
|
imgSrc:'', |
|
nbm:0, |
|
}; |
|
}, |
|
computed: { |
|
full: function () {// 全屏 |
|
return this.$store.state.system.fullScreen; |
|
}, |
|
showPop:function(){/* 展示弹框 */ |
|
this.receptionList = [] |
|
if(this.$store.state.system.popText == '刷卡器'){ |
|
if (this.$store.state.system.id == '62,1'){ |
|
this.nbm = 62 |
|
let param= { |
|
parentId: '0,5,26,57,62,75' |
|
} |
|
getOperation(param).then((data)=> { |
|
if (data.data.status == 200) { |
|
var list = data.data.judgmentRuleReqs |
|
for(var j=0;j<list.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(list[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
}else{ |
|
let accountVoucher = sessionStorage.getItem('accountVoucher') |
|
this.receptionList = JSON.parse(accountVoucher); |
|
if(this.receptionList == null){ |
|
this.receptionList = [] |
|
} |
|
} |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.$store.state.system.id == '63'){ |
|
this.nbm = 63 |
|
let param= { |
|
parentId: '0,5,26,57,63,78' |
|
} |
|
getOperation(param).then((data)=> { |
|
if (data.data.status == 200) { |
|
var list = data.data.judgmentRuleReqs |
|
for(var j=0;j<list.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(list[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
}else{ |
|
let nomBusinessDepositCard = sessionStorage.getItem('nomBusinessDepositCard') |
|
this.receptionList = JSON.parse(nomBusinessDepositCard); |
|
if(this.receptionList == null){ |
|
this.receptionList = [] |
|
} |
|
} |
|
}).catch((error)=>{ |
|
}) |
|
}else{ |
|
let dataList = JSON.parse(sessionStorage.getItem('dataList')); |
|
if (dataList){ |
|
this.receptionList = [] |
|
for(var j=0;j<dataList.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(dataList[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
if(this.$store.state.system.popText == '密码器'){ |
|
let accountPasswordAll = sessionStorage.getItem('accountPasswordAll'); |
|
if(accountPasswordAll){ |
|
this.passwordForm.password = accountPasswordAll |
|
this.passwordForm.passwordAgain = accountPasswordAll |
|
} |
|
} |
|
if(this.$store.state.system.popText == '身份证扫描仪'){ |
|
if (this.$store.state.system.id == '33'){ |
|
this.nbm = 33 |
|
let param= { |
|
parentId: '0,5,25,33,41' |
|
} |
|
getOperation(param).then((data)=> { |
|
if (data.data.status == 200) { |
|
var list = data.data.judgmentRuleReqs |
|
for(var j=0;j<list.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(list[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
}else{ |
|
let nomClientIdentity = sessionStorage.getItem('nomClientIdentity') |
|
this.receptionList = JSON.parse(nomClientIdentity); |
|
if(this.receptionList == null){ |
|
this.receptionList = [] |
|
} |
|
} |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.$store.state.system.id == '34'){ |
|
console.log('===========') |
|
this.nbm = 34 |
|
let param= { |
|
parentId: '0,5,25,34,54' |
|
} |
|
getOperation(param).then((data)=> { |
|
if (data.data.status == 200) { |
|
var list = data.data.judgmentRuleReqs |
|
for(var j=0;j<list.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(list[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
}else{ |
|
let firmClientIdentity = sessionStorage.getItem('firmClientIdentity') |
|
this.receptionList = JSON.parse(firmClientIdentity); |
|
if(this.receptionList == null){ |
|
this.receptionList = [] |
|
} |
|
} |
|
}).catch((error)=>{ |
|
}) |
|
}else{ |
|
let dataList = JSON.parse(sessionStorage.getItem('dataList')); |
|
if (dataList){ |
|
this.receptionList = [] |
|
for(var j=0;j<dataList.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(dataList[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
if(!this.showGoods) this.checkList = [] |
|
return this.$store.state.system.showPop; |
|
}, |
|
popText:function(){/* 文字 */ |
|
return this.$store.state.system.popText; |
|
}, |
|
id:function(){/* 文字 */ |
|
return this.$store.state.system.id; |
|
}, |
|
goods:function () {/* 物品栏的物品 */ |
|
return this.$store.state.system.goods |
|
}, |
|
showGoods:function() { |
|
return this.$store.state.system.showGoods |
|
} |
|
}, |
|
watch: { |
|
'$route.path': function (val) { |
|
// 控制弹框显隐 |
|
let arr = val.split('/').slice(-2); |
|
if (arr.pop() === 'manage' || arr[0] === 'manage') { |
|
this.manageVisible = true; |
|
} else { |
|
this.manageVisible = false; |
|
} |
|
}, |
|
manageVisible(newVal) { |
|
if(newVal === false) { |
|
this.changeShowGoods(false) |
|
} |
|
} |
|
}, |
|
created() { |
|
let arr = this.$route.path.split('/').slice(-2); |
|
if (arr.pop() === 'manage' || arr[0] === 'manage') { |
|
this.manageVisible = true; |
|
} else { |
|
this.manageVisible = false; |
|
} |
|
}, |
|
mounted(){ |
|
let that = this |
|
// 拖拽-物品栏 |
|
new Sortable(this.$refs.goods, { |
|
animation: 150, |
|
group: { |
|
name:'shared', |
|
pull:'clone',// 是否可以被移出或克隆 |
|
put:false// 禁止拖入 |
|
}, |
|
sort: false,// 禁止排序 |
|
onEnd: function (/**Event*/evt) { // 结束拖拽 |
|
// 判断拖拽的地址 |
|
if(!that.$refs.popUp) return that.$message.warning('非可拖拽的交互！') |
|
let targetDom = that.$refs.popUp.getBoundingClientRect() |
|
if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){ |
|
if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){ |
|
/* oldindex识别是拖拽了哪个文件 */ |
|
console.log(that.goodsShelfTotalData[evt.oldIndex].name,'执行拖拽2'); |
|
that.checkList.push(that.goodsShelfTotalData[evt.oldIndex].name) |
|
let ifElse = 0; |
|
for(var i=0;i<that.popArr.length;i++){ |
|
if (that.goodsShelfTotalData[evt.oldIndex].name == that.popArr[i].name){ |
|
if (that.receptionList == null){ |
|
that.receptionList = [] |
|
} |
|
if (that.receptionList.length){ |
|
for(var j=0;j< that.receptionList.length;j++){ |
|
if (that.receptionList[j].name == that.goodsShelfTotalData[evt.oldIndex].name){ |
|
ifElse = ifElse+1 |
|
} |
|
} |
|
if(ifElse > 0){ |
|
|
|
}else{ |
|
that.receptionList.push(that.popArr[i]) |
|
} |
|
}else{ |
|
that.receptionList.push(that.popArr[i]) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
}); |
|
// 拖拽-弹框 |
|
new Sortable(this.$refs.popUp, { |
|
animation: 150, |
|
group: { |
|
name:'shared', |
|
pull:'clone',// 是否可以被移出或克隆 |
|
put:false |
|
}, |
|
sort: false,// 禁止排序 |
|
// 结束拖拽 |
|
onEnd: function (/**Event*/evt) { |
|
// console.log(refParamBox,'目标dom',refParamBox.getBoundingClientRect()); |
|
// 判断拖拽的地址 |
|
let targetDom = that.$refs.goods.getBoundingClientRect() |
|
if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){ |
|
if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){ |
|
console.log(evt) |
|
// this.importanceArr[evt.oldIndex] |
|
// this.importanceArr |
|
alert('拉入到弹框') |
|
} |
|
} |
|
}, |
|
}); |
|
}, |
|
methods: { |
|
...mapMutations({ |
|
changeShowGoods: 'system/changeShowGoods' |
|
}), |
|
dislodgeItem(index){ |
|
this.receptionList.splice(index,1); |
|
}, |
|
toggleGoods() { |
|
this.changeShowGoods(!this.showGoods) |
|
}, |
|
showData(type,nbm) {/* 展示弹窗-type为弹窗标题文字 */ |
|
this.nbm = nbm |
|
if(type == '普通凭证箱' || type == '系统'){ |
|
this.goodsShelfTotalData = this.systemInputGoodsShelf |
|
let parentId = '' |
|
if(type == '普通凭证箱'){ |
|
parentId = '0,3' |
|
} |
|
if(type == '系统'){ |
|
parentId = '0,5' |
|
} |
|
}else if(type == '身份证扫描仪' || type == '验钞机' || type == '资料' || type == '重要空白凭证箱'){ |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
let parentId = '' |
|
if(type == '重要空白凭证箱'){ |
|
parentId = '0,2' |
|
} |
|
if(type == '资料'){ |
|
parentId = '0,11' |
|
} |
|
if(type == '验钞机'){ |
|
parentId = '0,9' |
|
} |
|
if(type == '身份证扫描仪'){ |
|
parentId = '0,7' |
|
} |
|
let param= { |
|
parentId: parentId |
|
} |
|
}else if(type == '打印机' || type == '客户签字' || type == '印章盒'){ |
|
this.goodsShelfTotalData = this.printoutGoodsShelf |
|
let parentId = '' |
|
if(type == '打印机'){ |
|
parentId = '0,10' |
|
} |
|
if(type == '客户签字'){ |
|
parentId = '0,12' |
|
} |
|
if(type == '印章盒'){ |
|
parentId = '0,8' |
|
} |
|
}else if(type == '钱箱'){ |
|
this.goodsShelfTotalData = this.cashboxGoodsShelf; |
|
let param= { |
|
parentId: '0,1' |
|
} |
|
getOperation(param).then((data)=> { |
|
if (data.data.status == 200) { |
|
var list = data.data.judgmentRuleReqs |
|
for(var j=0;j<list.length;j++){ |
|
for(var i=0;i<this.goodsShelfTotalData.length;i++){ |
|
if(list[j].answerId == this.goodsShelfTotalData[i].id){ |
|
this.receptionList.push(this.goodsShelfTotalData[i]) |
|
} |
|
} |
|
} |
|
}else{ |
|
this.receptionList = [] |
|
} |
|
}).catch((error)=>{ |
|
}) |
|
} |
|
this.changeShowGoods(true) |
|
if(type !== '系统') { |
|
this.$store.commit('system/changePop',{show:true,text:type}) |
|
} |
|
}, |
|
checkData(item) {/* 选中物品 */ |
|
let _this = this |
|
_this.clickNum++; |
|
if (_this.clickNum === 2) { |
|
_this.clickNum = 0; |
|
// 处理双击事件... |
|
_this.showImg = true |
|
_this.imgSrc = item.src |
|
} |
|
setTimeout(function () { |
|
if (_this.clickNum === 1) { |
|
_this.clickNum = 0; |
|
// 处理单击事件... |
|
console.log('单击事件'); |
|
_this.checkList.includes(item.id) ? _this.checkList.splice(_this.checkList.indexOf(item.id), 1) : _this.checkList.push(item.id); |
|
} |
|
}, 200) |
|
}, |
|
dblClickFn(item,val){/* 选中/预览 单/双击函数 */ |
|
console.log(item) |
|
let that = this |
|
this.clickNum++ |
|
if (this.clickNum === 2) { // 处理双击事件 |
|
this.clickNum = 0; |
|
this.showImg = true |
|
this.imgSrc = item.src |
|
} |
|
setTimeout(function () { |
|
let arr |
|
switch (that.popText) { |
|
case '普通凭证箱': arr = that.commonChecked |
|
break; |
|
case '印章盒':arr = that.sealChecked |
|
break; |
|
case '重要空白凭证箱':arr = that.importantChecked |
|
break; |
|
default: |
|
break; |
|
} |
|
if(val==='goods') arr = that.checkList |
|
if (that.clickNum === 1) {// 处理单击事件 |
|
that.clickNum = 0; |
|
if(that.popText==='印章盒'){ |
|
arr.splice(0,1,item.id) |
|
}else if(val==='goods'&&that.popText==='印章盒'){ |
|
that.checkList.length=0 |
|
that.checkList.push(item.id) |
|
}else{ |
|
arr.includes(item.id) ? arr.splice(arr.indexOf(item.id), 1) : arr.push(item.id); |
|
} |
|
} |
|
}, 200) |
|
}, |
|
checkSeal(id) {/* 选中印章 */ |
|
this.sealChecked.includes(id) ? this.sealChecked.splice(this.sealChecked.indexOf(id), 1) : this.sealChecked.push(id); |
|
}, |
|
checkImportant(id){/* 选中重空凭证 */ |
|
this.importantChecked.includes(id) ? this.importantChecked.splice(this.importantChecked.indexOf(id), 1) : this.importantChecked.push(id); |
|
}, |
|
checkCommon(item){/* 选中普通凭证 */ |
|
this.commonChecked.includes(id) ? this.commonChecked.splice(this.commonChecked.indexOf(id), 1) : this.commonChecked.push(id); |
|
}, |
|
closePop() {// 关闭弹窗 |
|
this.receptionList = []; |
|
this.changeShowGoods(false) |
|
this.$store.commit('system/changePop',{show:false,text:''}) |
|
}, |
|
closeData() { |
|
this.checkList = []; |
|
}, |
|
showManage() {// 展示系统管理 |
|
this.manageVisible = true; |
|
this.$router.push('/counter/list/manage/consumerClient'); |
|
}, |
|
popSure(){/* 弹框-确定 */ |
|
/* |
|
添加文件：处理选中的文件，commit到stor里，提示。 |
|
印章：添加一个字段，判断已盖章的图表 |
|
其他：直接展示已处理，或已完成，且添加处理过的文件到物品栏 |
|
*/ |
|
let arr = [] |
|
if(this.popText==='重要空白凭证箱'||this.popText==='普通凭证箱'){ |
|
let goods,clickList |
|
this.popText==='重要空白凭证箱'?(goods=this.importanceArr,clickList=this.importantChecked):(goods=this.commonArr ,clickList = this.commonChecked) |
|
if(clickList.length===0) return this.$message.warning(`请选择物品后再确定！`) |
|
// 把确定的数据传输进物品栏 |
|
goods.map(e=>{ |
|
clickList.map(el=>{ |
|
if(el===e.id){ |
|
arr.push(e) |
|
} |
|
}) |
|
}) |
|
this.$store.commit('system/changeGoods',{push:arr}) |
|
clickList.length = 0 |
|
}else{ |
|
if (this.$store.state.system.id == '33'){ |
|
this.nbm = 33 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('nomClientIdentity', JSON.stringify(this.receptionList)) |
|
} |
|
} |
|
if (this.$store.state.system.id == '34'){ |
|
this.nbm = 34 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('firmClientIdentity', JSON.stringify(this.receptionList)) |
|
} |
|
} |
|
if (this.$store.state.system.id == '63'){ |
|
this.nbm = 63 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('nomBusinessDepositCard', JSON.stringify(this.receptionList)) |
|
} |
|
} |
|
if (this.$store.state.system.id == '62,1'){ |
|
this.nbm = 62 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('accountVoucher', JSON.stringify(this.receptionList)) |
|
} |
|
if (this.passwordForm.passwordAgain){ |
|
let accountPassword = ''; |
|
accountPassword = this.passwordForm.passwordAgain |
|
sessionStorage.setItem('accountPassword', accountPassword) |
|
} |
|
} |
|
if (this.$store.state.system.id == '62,2'){ |
|
this.nbm = 62 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('accountVoucherTwo', JSON.stringify(this.receptionList)) |
|
} |
|
if (this.passwordForm.passwordAgain){ |
|
let accountPasswordTwo = '' |
|
accountPasswordTwo = this.passwordForm.passwordAgain |
|
sessionStorage.setItem('accountPasswordTwo', accountPasswordTwo) |
|
} |
|
} |
|
if (this.$store.state.system.id == '62,3'){ |
|
this.nbm = 62 |
|
this.goodsShelfTotalData = this.auditGoodsShelf |
|
if (this.receptionList.length >0){ |
|
sessionStorage.setItem('accountVoucherThree', JSON.stringify(this.receptionList)) |
|
} |
|
if (this.passwordForm.passwordAgain){ |
|
let accountPasswordThree = '' |
|
accountPasswordThree = this.passwordForm.passwordAgain |
|
sessionStorage.setItem('accountPasswordThree', accountPasswordThree) |
|
} |
|
} |
|
} |
|
// this.toggleGoods() |
|
if(this.popText == '密码器'){ |
|
if (this.nbm == 8){ |
|
let formList = [] |
|
let ruleReqs = sessionStorage.getItem('ruleReqs') |
|
if (ruleReqs){formList = JSON.parse(ruleReqs);}else{formList = []} |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"emptyOne": "18", "emptyTwo": this.passwordForm.passwordAgain, "operationIds": "0,282,"+this.receptionList[i].id,"type": "3"})} |
|
sessionStorage.setItem('ruleReqs', JSON.stringify(formList)) |
|
} |
|
if(this.passwordForm.password && this.passwordForm.passwordAgain){ |
|
if(this.passwordForm.password.length >=6 && this.passwordForm.passwordAgain.length >=6){ |
|
if(this.passwordForm.password == this.passwordForm.passwordAgain) { |
|
this.$store.commit('system/changePop', {show: false, text: ''}) |
|
this.$message.success(`${this.popText}操作成功！`) |
|
} |
|
} |
|
}else{ |
|
this.$message.error('请输入密码和确认密码'); |
|
} |
|
}else{ |
|
if (this.receptionList.length >0){ |
|
let formList = [] |
|
this.toggleGoods() |
|
this.$message.success(`${this.popText}操作成功！`) |
|
if (this.nbm == 0){ //用户 |
|
}else if (this.nbm == 1){ //传票箱 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id,"emptyOne": "", "emptyTwo": "", "operationIds": "0,4,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,4', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 2){ //普通凭证箱 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({ "answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,3,"+this.receptionList[i].id, "type": "" })} |
|
let params= { |
|
parentId:'0,3', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 3){ //重要空白凭证箱 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({ "answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,2,"+this.receptionList[i].id, "type": "" })} |
|
let params= { |
|
parentId:'0,2', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 4){ //钱箱 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
let formList = []; |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({ |
|
"answerId":this.receptionList[i].id, |
|
"emptyOne": "", |
|
"emptyTwo": "", |
|
"operationIds": "0,1,"+this.receptionList[i].id, |
|
"type": "" })} |
|
let params= { |
|
parentId:'0,1', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 5){ //印章盒 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,8,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,8', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 6){ //验钞机 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,9,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,9', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 7){ //打印机 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,10,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,10', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 9){//资料 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,11,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,11', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 10){ //刷卡器 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,6,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,6', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else if (this.nbm == 11){ //身份证扫描仪 |
|
let projectId = sessionStorage.getItem('projectId') |
|
let startTime = sessionStorage.getItem('startTime') |
|
for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "0,7,"+this.receptionList[i].id,"type": ""})} |
|
let params= { |
|
parentId:'0,7', |
|
lcJudgmentRuleReq:formList, |
|
projectId:+projectId, |
|
startTime:startTime, |
|
} |
|
addOperation(params).then((data)=>{ |
|
this.$message({ |
|
message: '提交成功', |
|
type: 'success' |
|
}); |
|
}).catch((error)=>{ |
|
}) |
|
}else{ |
|
|
|
} |
|
this.$store.commit('system/changePop',{show:false,text:''}) |
|
this.receptionList = []; |
|
}else{ |
|
this.$message.error('请从物品栏中拖拽所需资料'); |
|
} |
|
} |
|
|
|
}, |
|
toPart(){ |
|
this.$router.push('/index') |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.wrap { |
|
.bg { |
|
top: 0; |
|
left: 0; |
|
// width: 100%; |
|
height: calc(100vh - 60px); |
|
} |
|
|
|
|
|
|
|
// 公共样式-------------------兼容1400*900 |
|
|
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 16vh; |
|
left: 50vw; |
|
width: 38vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 50vh; |
|
left: 40vw; |
|
width: 23vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 64vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 10vh; |
|
left: 70vw; |
|
width: 23vw; |
|
height: 50vh; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 57vh; |
|
left: 18vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 52vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 38vh; |
|
left: 34vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 40vh; |
|
left: 40vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 44vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 47vh; |
|
left: 52vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 52vh; |
|
left: 54vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 56vh; |
|
left: 62vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 62vh; |
|
left: 66vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 70vh; |
|
left: 72vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 50vh; |
|
left: 68vw; |
|
width: 6vw; |
|
} |
|
|
|
|
|
// 公共样式------------------- |
|
|
|
@media screen and (min-width: 1920px) { |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 116px; |
|
left: 357px; |
|
width: 1555px; |
|
} |
|
.glass { |
|
top: -145px; |
|
left: 964px; |
|
width: 855px; |
|
} |
|
.employee { |
|
top: 371px; |
|
left: 920px; |
|
width: 388px; |
|
} |
|
.employeeText { |
|
position: absolute; |
|
top: 503px; |
|
left: 1229px; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
text-align: center; |
|
line-height: 100px; |
|
cursor: pointer; |
|
} |
|
.man { |
|
top: 82px; |
|
right: 150px; |
|
width: 262px; |
|
} |
|
.money-box { |
|
top: 406px; |
|
left: 445px; |
|
width: 197px; |
|
} |
|
.important { |
|
top: 372px; |
|
left: 582px; |
|
width: 175px; |
|
} |
|
.voucher-box { |
|
top: 216px; |
|
left: 718px; |
|
width: 160px; |
|
} |
|
.summons { |
|
top: 250px; |
|
left: 844px; |
|
width: 139px; |
|
} |
|
.computer { |
|
top: 120px; |
|
left: 955px; |
|
width: 219px; |
|
} |
|
.card-machine { |
|
top: 377px; |
|
left: 1147px; |
|
width: 110px; |
|
} |
|
.idCard-scanner { |
|
top: 443px; |
|
left: 1229px; |
|
width: 82px; |
|
} |
|
.seal-box { |
|
top: 486px; |
|
left: 1340px; |
|
width: 97px; |
|
} |
|
.currency-detector { |
|
top: 492px; |
|
left: 1421px; |
|
width: 151px; |
|
} |
|
.printer { |
|
top: 550px; |
|
left: 1531px; |
|
width: 205px; |
|
} |
|
.cipher-machine { |
|
top: 324px; |
|
left: 1298px; |
|
width: 100px; |
|
} |
|
.el-tooltip__popper.sth-popper { |
|
padding: 0; |
|
// background-color: transparent; |
|
background-color: #fff; |
|
img { |
|
height: 78px; |
|
} |
|
.popper__arrow { |
|
display: none; |
|
} |
|
} |
|
} |
|
@media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 850px) and (max-height: 950px) { |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 16vh; |
|
left: 50vw; |
|
width: 38vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 50vh; |
|
left: 40vw; |
|
width: 23vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 64vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 10vh; |
|
left: 70vw; |
|
width: 23vw; |
|
height: 50vh; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 57vh; |
|
left: 18vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 52vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 38vh; |
|
left: 34vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 40vh; |
|
left: 40vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 44vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 47vh; |
|
left: 52vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 52vh; |
|
left: 54vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 56vh; |
|
left: 62vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 62vh; |
|
left: 66vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 70vh; |
|
left: 72vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 50vh; |
|
left: 68vw; |
|
width: 6vw; |
|
} |
|
} |
|
@media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 950px) and (max-height: 1100px) { |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 20vh; |
|
left: 50vw; |
|
width: 38vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 48vh; |
|
left: 40vw; |
|
width: 23vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 59vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 10vh; |
|
left: 70vw; |
|
width: 23vw; |
|
height: 50vh; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 54vh; |
|
left: 20vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 52vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 38vh; |
|
left: 34vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 40vh; |
|
left: 40vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 44vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 45vh; |
|
left: 52vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 50vh; |
|
left: 56vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 54vh; |
|
left: 64vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 58vh; |
|
left: 68vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 66vh; |
|
left: 74vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 46vh; |
|
left: 68vw; |
|
width: 6vw; |
|
} |
|
} |
|
@media screen and (min-width: 1298px) and (max-width: 1390px){ |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 16vh; |
|
left: 50vw; |
|
width: 38vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 54vh; |
|
left: 40vw; |
|
width: 23vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 68vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 10vh; |
|
left: 70vw; |
|
width: 23vw; |
|
height: 50vh; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 60vh; |
|
left: 18vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 56vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 40vh; |
|
left: 32vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 42vh; |
|
left: 38vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 44vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 47vh; |
|
left: 52vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 52vh; |
|
left: 54vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 56vh; |
|
left: 60vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 62vh; |
|
left: 66vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 70vh; |
|
left: 72vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 50vh; |
|
left: 68vw; |
|
width: 6vw; |
|
} |
|
} |
|
@media screen and (min-width: 1250px) and (max-width: 1290px){ |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 22vh; |
|
left: 50vw; |
|
width: 38vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 46vh; |
|
left: 40vw; |
|
width: 23vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 57vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 10vh; |
|
left: 70vw; |
|
width: 23vw; |
|
height: 50vh; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 52vh; |
|
left: 20vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 50vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 40vh; |
|
left: 32vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 40vh; |
|
left: 38vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 44vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 47vh; |
|
left: 54vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 51vh; |
|
left: 58vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 54vh; |
|
left: 64vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 56vh; |
|
left: 68vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 62vh; |
|
left: 74vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 48vh; |
|
left: 68vw; |
|
width: 6vw; |
|
} |
|
} |
|
@media screen and (min-width: 1500px) and (max-width: 1550px) { |
|
.wrap { |
|
width: 100%; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30vh; |
|
left: 15vw; |
|
width: 80vw; |
|
position: absolute; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 4vh; |
|
left: 46vw; |
|
width: 43vw; |
|
position: absolute; |
|
} |
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 62vh; |
|
left: 44vw; |
|
width: 18vw; |
|
position: absolute; |
|
} |
|
// 先放着 |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 77vh; |
|
left: 58vw; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
height: 100px; |
|
cursor: pointer |
|
} |
|
.man { |
|
// 人 |
|
top: 16vh; |
|
left: 70vw; |
|
width: 18vw; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 68vh; |
|
left: 20vw; |
|
width: 8vw; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 64vh; |
|
left: 26vw; |
|
width: 8vw; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 46vh; |
|
left: 32vw; |
|
width: 8vw; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 46vh; |
|
left: 38vw; |
|
width: 8vw; |
|
} |
|
.computer { |
|
top: 28vh; |
|
left: 42vw; |
|
width: 10vw; |
|
} |
|
.card-machine { |
|
top: 52vh; |
|
left: 50vw; |
|
width: 6vw; |
|
} |
|
.idCard-scanner { |
|
top: 60vh; |
|
left: 54vw; |
|
width: 6vw; |
|
} |
|
.seal-box { |
|
top: 63vh; |
|
left: 60vw; |
|
width: 6vw; |
|
} |
|
.currency-detector { |
|
top: 70vh; |
|
left: 69vw; |
|
width: 8vw; |
|
} |
|
.printer { |
|
top: 80vh; |
|
left: 76vw; |
|
width: 8vw; |
|
} |
|
.cipher-machine { |
|
top: 50vh; |
|
left: 64vw; |
|
width: 6vw; |
|
} |
|
} |
|
@media screen and (min-width: 1551px) and (max-width: 1919px) { |
|
.wrap{ |
|
width: 1550px; |
|
position: relative; |
|
//width: 100%; |
|
height: calc(100vh - 68px); |
|
overflow: hidden; |
|
background:url("../../../assets/img/integrated-counter-bg.png"); |
|
} |
|
.counter { |
|
top: 30%; |
|
left: 8%; |
|
height: 63vh; |
|
} |
|
.glass { |
|
// 玻璃窗 |
|
top: 15vh; |
|
left: 35vw; |
|
width: 35vw; |
|
} |
|
|
|
.employee { |
|
// 柜员 |
|
// top: 57%; |
|
// left: 42%; |
|
// width: 23%; |
|
top: 430px; |
|
left: 490px; |
|
width: 283px; |
|
position: relative; |
|
} |
|
.employeeText { |
|
// 资料文字 |
|
position: absolute; |
|
top: 580px; |
|
left: 710px; |
|
color: #000; |
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
font-size: 18px; |
|
width: 100px; |
|
text-align: center; |
|
height: 100px; |
|
line-height: 100px; |
|
cursor: pointer |
|
|
|
} |
|
.man { |
|
// 人 |
|
top: 191px; |
|
left: 846px; |
|
width: 199px; |
|
} |
|
.money-box { |
|
// 钱箱 |
|
top: 540px; |
|
left: 190px; |
|
width: 129px; |
|
} |
|
.important { |
|
// 重空箱 |
|
top: 48vh; |
|
left: 18vw; |
|
width: 118px; |
|
} |
|
.voucher-box { |
|
// 普通箱 |
|
top: 35vh; |
|
left: 24vw; |
|
width: 112px; |
|
} |
|
.summons { |
|
// 传票栏 |
|
top: 35vh; |
|
left: 30vw; |
|
width: 112px; |
|
} |
|
.computer { |
|
top: 30vh; |
|
left: 35vw; |
|
width: 148px; |
|
} |
|
.card-machine { |
|
top: 50vh; |
|
left: 43vw; |
|
width: 66px; |
|
} |
|
.idCard-scanner { |
|
top: 53vh; |
|
left: 46vw; |
|
width: 46px; |
|
} |
|
.seal-box { |
|
top: 55vh; |
|
left: 49vw; |
|
width: 50px; |
|
} |
|
.currency-detector { |
|
top: 55vh; |
|
left: 51vw; |
|
width: 117px; |
|
} |
|
.printer { |
|
top: 60vh; |
|
left: 56vw; |
|
width: 149px; |
|
} |
|
.cipher-machine { |
|
top: 391px; |
|
left: 711px; |
|
width: 79px; |
|
} |
|
} |
|
|
|
// 配合公共样式--------------- |
|
|
|
|
|
|
|
.goods { |
|
position: fixed; |
|
bottom: 0; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
width: 94px; |
|
height: 200px; |
|
cursor: pointer; |
|
z-index: 998; |
|
background: url(../../../assets/img/sth-bg.png) 0 0 / cover no-repeat; |
|
span { |
|
width: 30px; |
|
margin-bottom: 10px; |
|
color: #fff; |
|
font-size: 30px; |
|
text-align: center; |
|
} |
|
.icon { |
|
width: 30px; |
|
transition: all 0.5s; |
|
} |
|
&:hover { |
|
opacity: 0.9; |
|
} |
|
&.active { |
|
|
|
.icon { |
|
transform: rotate(180deg); |
|
|
|
} |
|
} |
|
} |
|
.goods-dia { |
|
display: flex; |
|
justify-content: center; |
|
width: 100%; |
|
white-space: nowrap; |
|
overflow-x: auto; |
|
position: fixed; |
|
bottom: 0; |
|
left: -100%; |
|
padding: 20px 300px 20px 300px; |
|
transition: all 0.5s; |
|
background-color: rgba(255, 255, 255, 0.7); |
|
.file { |
|
position: relative; |
|
min-width: 160px; |
|
height: 160px; |
|
text-align: center; |
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
cursor: pointer; |
|
margin: 0 10px; |
|
img { |
|
width: 99px; |
|
max-height: 105px; |
|
margin: auto; |
|
margin-top: 40px; |
|
} |
|
p { |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
line-height: 54px; |
|
text-align: center; |
|
font-size: 18px; |
|
color: #000; |
|
} |
|
&.checked { |
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat; |
|
p { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
&.active { |
|
left: 0; |
|
z-index: 998; |
|
} |
|
img { |
|
cursor: pointer; |
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
// 兼容小屏幕的goods-dia |
|
@media screen and (min-width: 1200px) and (max-width: 1919px) { |
|
.goods-dia { |
|
height: 15vh; |
|
width: 100%; |
|
.justify-center { |
|
max-height: 13vh; |
|
} |
|
.file { |
|
top: 0; |
|
max-height: 13vh; |
|
img { |
|
max-height: 8vh; |
|
margin: auto; |
|
margin-top: 1vh; |
|
} |
|
p { |
|
top: 9vh; |
|
line-height: 3vh; |
|
font-size: 3vh; |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
.imgPop{ |
|
width: 100%; |
|
} |
|
.masking{ |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
right: 0; |
|
opacity: .5; |
|
background: #e6e6e6; |
|
z-index: 99; |
|
} |
|
.data-dia { |
|
border-radius: 16px; |
|
margin-top: 4vh !important; |
|
background: #fff; |
|
position: fixed; |
|
top: 7%; |
|
left: 50%; |
|
transform: translate(-50%, 0); |
|
padding: 0 15px 15px; |
|
z-index: 997; |
|
border: 1px solid #e6e6e6; |
|
max-height: 600px; |
|
overflow: auto; |
|
.dia-header { |
|
position: relative; |
|
.data-title { |
|
height:70px; |
|
width: 300px; |
|
margin: 0 auto; |
|
line-height: 72px; |
|
text-align: center; |
|
color: #fff; |
|
font-size: 24px; |
|
background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat; |
|
} |
|
.close { |
|
position: absolute; |
|
top: 15px; |
|
right: 15px; |
|
cursor: pointer; |
|
} |
|
} |
|
.tips { |
|
margin: 20px 0 50px; |
|
text-align: center; |
|
font-size: 20px; |
|
color: #000; |
|
} |
|
.list { |
|
width: 940px; |
|
min-height: 204px; |
|
max-height: 360px; |
|
overflow: auto; |
|
margin: 0 auto; |
|
display: flex; |
|
align-items: center; |
|
.img-wrap{ |
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
width: 200px; |
|
height: 200px; |
|
display: flex; |
|
justify-content: center; |
|
margin: 5px 10px; |
|
position: relative; |
|
cursor: pointer; |
|
.file { |
|
position: relative; |
|
max-width: 180px; |
|
max-height: 140px; |
|
text-align: center; |
|
margin: 10px 10px ; |
|
img { |
|
margin-top: 45px; |
|
} |
|
p { |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
line-height: 54px; |
|
text-align: center; |
|
font-size: 18px; |
|
color: #000; |
|
} |
|
} |
|
.text{ |
|
font-size: 18px; |
|
white-space:nowrap; |
|
position: absolute; |
|
bottom: 15px; |
|
left: 50%; |
|
transform: translate(-50%,0); |
|
} |
|
&.checked { |
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat; |
|
p { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
.seal{ |
|
width: 1100px; |
|
padding: 0 5%; |
|
display: flex; |
|
justify-content: space-between; |
|
.box{ |
|
border: 2px solid #e6e6e6; |
|
width: 45%; |
|
min-height: 300px; |
|
border-radius: 10px; |
|
padding: 10px; |
|
} |
|
.left{ |
|
display: flex; |
|
width: 50%; |
|
flex-wrap: wrap; |
|
.file { |
|
position: relative; |
|
width: 164px; |
|
height: 164px; |
|
text-align: center; |
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
cursor: pointer; |
|
margin: 5px 7px; |
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
&:nth-child(n>1){ |
|
margin-top: 0; |
|
} |
|
img { |
|
width: 130px; |
|
max-height: 108px; |
|
margin: 10px auto 0; |
|
z-index: 9; |
|
} |
|
p { |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
line-height: 54px; |
|
text-align: center; |
|
font-size: 18px; |
|
color: #000; |
|
} |
|
&.checked { |
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
url(../../../assets/svg/checked.svg) 163px 7% / auto no-repeat; |
|
|
|
p { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
&.active { |
|
left: 0; |
|
z-index: 9999; |
|
} |
|
img { |
|
cursor: pointer; |
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
.right{ |
|
margin-left: 5%; |
|
} |
|
.else{ |
|
width: 100%; |
|
} |
|
} |
|
.dia-footer { |
|
margin-top: 140px; |
|
text-align: center; |
|
button { |
|
width: 300px; |
|
line-height: 60px; |
|
color: #fff; |
|
font-size: 24px; |
|
background-color: rgb(81, 147, 255); |
|
border: 0; |
|
border-radius: 20px; |
|
cursor: pointer; |
|
&:hover { |
|
opacity: 0.9; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 兼容小的data-dia |
|
@media screen and (min-width: 1200px) and (max-width: 1919px) { |
|
.data-dia { |
|
top: 7%; |
|
left: 50%; |
|
min-height: 75vh; |
|
.seal{ |
|
margin-top: -5vh; |
|
.left{ |
|
.file { |
|
height: 10vh; |
|
img { |
|
height: 10vh; |
|
width: 5vw; |
|
margin: 10px auto 0; |
|
z-index: 9; |
|
} |
|
p { |
|
line-height: 5vh; |
|
} |
|
} |
|
} |
|
.box{ |
|
background-color: red; |
|
border: 2px solid #e6e6e6; |
|
height: 2vh; |
|
width: 45%; |
|
min-height: 300px; |
|
border-radius: 10px; |
|
padding: 10px; |
|
} |
|
.else{ |
|
width: 100%; |
|
} |
|
} |
|
.dia-footer { |
|
position: absolute; |
|
bottom: 1vh; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
} |
|
} |
|
.system { |
|
margin-top: -8vh; |
|
position: absolute; |
|
top: 12%; |
|
left: 50%; |
|
z-index: 9; |
|
transform: translate(-50%, 0); |
|
width: 1280px; |
|
} |
|
.fullScreenSystem { |
|
width: 100vw; |
|
margin-top: 0; |
|
position: absolute; |
|
top: 0%; |
|
left: 50%; |
|
z-index: 9; |
|
transform: translate(-50%, 0); |
|
} |
|
/deep/ .view .el-dialog__body { |
|
padding: 0 !important; |
|
} |
|
.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; |
|
} |
|
} |
|
</style> |