银行系统

20240205
e 3 years ago
parent 27991ef931
commit 75438c6215
  1. 12
      src/assets/svg/fullscreen.svg
  2. 12
      src/assets/svg/shrink.svg
  3. 2
      src/components/case/index.vue
  4. 22
      src/libs/resize/index.js
  5. 747
      src/pages/counter/list/index.vue
  6. 2
      src/pages/index/list/index.vue
  7. 27
      src/pages/manage/index/index.vue
  8. 25
      src/pages/manage/list/client/consumerClient.vue
  9. 23
      src/pages/manage/list/personal/currentAccount/accountCancellation.vue
  10. 75
      src/pages/manage/list/personal/currentAccount/deposit.vue
  11. 59
      src/pages/manage/list/personal/currentAccount/index.vue
  12. 228
      src/pages/manage/list/personal/currentAccount/openAccount.vue
  13. 23
      src/pages/manage/list/personal/currentAccount/settle.vue
  14. 23
      src/pages/manage/list/personal/currentAccount/transferAccounts.vue
  15. 23
      src/pages/manage/list/personal/currentAccount/withdrawal.vue
  16. 2
      src/router/modules/counter.js
  17. 1
      src/store/modules/layout.js

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59 (86127) - https://sketch.com -->
<title>图标 / 系统录入 / 全屏</title>
<desc>Created with Sketch.</desc>
<g id="图标-/-系统录入-/-全屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<path d="M19.8232193,20.8000205 L14.9304136,20.8000205 L14.9304136,18.8464182 L18.8376182,18.8464182 L18.8376182,14.9392137 L20.8000205,14.9392137 L20.8000205,20.8000205 L19.8232193,20.8000205 Z M20.8000205,4.17680114 L20.8000205,3.2 L14.9304136,3.2 L14.9304136,5.15360227 L18.8376182,5.15360227 L18.8376182,9.06080682 L20.8000205,9.06080682 L20.8000205,4.17680114 Z M3.2,19.8232193 L3.2,20.8000205 L9.06960683,20.8000205 L9.06960683,18.8464182 L5.15360227,18.8464182 L5.15360227,14.9392137 L3.2,14.9392137 L3.2,19.8232193 L3.2,19.8232193 Z M4.17680114,3.2 L9.06960683,3.2 L9.06960683,5.15360227 L5.15360227,5.15360227 L5.15360227,9.06080682 L3.2,9.06080682 L3.2,3.2 L4.17680114,3.2 Z" id="形状" fill="#7F7F7F" fill-rule="nonzero"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59 (86127) - https://sketch.com -->
<title>图标 / 系统录入 / 缩小</title>
<desc>Created with Sketch.</desc>
<g id="图标-/-系统录入-/-缩小" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="图标-/-系统录入-/-全屏">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<path d="M15.9072148,14.9392137 L20.8000205,14.9392137 L20.8000205,16.8928159 L16.8928159,16.8928159 L16.8928159,20.8000205 L14.9304136,20.8000205 L14.9304136,14.9392137 L15.9072148,14.9392137 Z M14.9304136,8.08400568 L14.9304136,9.06080682 L20.8000205,9.06080682 L20.8000205,7.10720455 L16.8928159,7.10720455 L16.8928159,3.2 L14.9304136,3.2 L14.9304136,8.08400568 Z M9.06960683,15.9160148 L9.06960683,14.9392137 L3.2,14.9392137 L3.2,16.8928159 L7.11600456,16.8928159 L7.11600456,20.8000205 L9.06960683,20.8000205 L9.06960683,15.9160148 L9.06960683,15.9160148 Z M8.09280569,9.06080682 L3.2,9.06080682 L3.2,7.10720455 L7.11600456,7.10720455 L7.11600456,3.2 L9.06960683,3.2 L9.06960683,9.06080682 L8.09280569,9.06080682 Z" id="形状" fill="#7F7F7F" fill-rule="nonzero"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -131,7 +131,7 @@ export default {
systemId: Setting.systemId, systemId: Setting.systemId,
workbench: [], workbench: [],
test: [], test: [],
caseVisible: true, caseVisible: false,
grade: "00", grade: "00",
exampleData: "", exampleData: "",
codeid: "", codeid: "",

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

@ -1,122 +1,128 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<img class="sth bg" src="@/assets/img/integrated-counter-bg.png" alt=""> <img class="sth bg" src="@/assets/img/integrated-counter-bg.png" alt="" />
<img class="sth guide" src="@/assets/img/guide.png" alt=""> <img class="sth guide" src="@/assets/img/guide.png" alt="" />
<img class="sth man" src="@/assets/img/man.png" alt=""> <img class="sth man" src="@/assets/img/man.png" alt="" />
<img class="sth counter" src="@/assets/img/counter.png" alt=""> <img class="sth counter" src="@/assets/img/counter.png" alt="" />
<img class="sth glass" src="@/assets/img/glass.png" alt=""> <img class="sth glass" src="@/assets/img/glass.png" alt="" />
<!-- 系统录入 --> <!-- 系统录入 -->
<el-tooltip placement="top" popper-class="sth-popper"> <el-tooltip placement="top" popper-class="sth-popper">
<div slot="content"> <div slot="content">
<img style="height: 145px" src="@/assets/img/tooltip/system.png" alt=""> <img style="height: 178px" src="@/assets/img/tooltip/system.png" alt="" />
</div> </div>
<img @click="showManage" class="sth computer cp" src="@/assets/img/computer.png" alt=""> <img @click="showManage" class="sth computer cp" src="@/assets/img/computer.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> <el-tooltip placement="top" popper-class="sth-popper" offset="50">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/cpl.png" alt=""> <img src="@/assets/img/tooltip/cpl.png" alt="" />
</div> </div>
<img class="sth summons cp" src="@/assets/img/summons.png" alt=""> <img class="sth summons cp" src="@/assets/img/summons.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/ptpzx.png" alt=""> <img src="@/assets/img/tooltip/ptpzx.png" alt="" />
</div> </div>
<img class="sth voucher-box cp" src="@/assets/img/voucher-box.png" alt=""> <img class="sth voucher-box cp" src="@/assets/img/voucher-box.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/zk.png" alt=""> <img src="@/assets/img/tooltip/zk.png" alt="" />
</div> </div>
<img class="sth important cp" src="@/assets/img/important.png" alt=""> <img class="sth important cp" src="@/assets/img/important.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="left-start" popper-class="sth-popper"> <el-tooltip placement="left-start" popper-class="sth-popper">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/qx.png" alt=""> <img src="@/assets/img/tooltip/qx.png" alt="" />
</div> </div>
<img class="sth money-box cp" src="@/assets/img/money-box.png" alt="" @click="showData('钱箱')"> <img class="sth money-box cp" src="@/assets/img/money-box.png" alt="" @click="showData('钱箱')" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/yzh.png" alt=""> <img src="@/assets/img/tooltip/yzh.png" alt="" />
</div> </div>
<img class="sth seal-box cp" src="@/assets/img/seal-box.png" alt=""> <img class="sth seal-box cp" src="@/assets/img/seal-box.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/ycj.png" alt=""> <img src="@/assets/img/tooltip/ycj.png" alt="" />
</div> </div>
<img class="sth currency-detector cp" src="@/assets/img/currency-detector.png" alt=""> <img class="sth currency-detector cp" src="@/assets/img/currency-detector.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="-400"> <el-tooltip placement="top" popper-class="sth-popper" offset="-400">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/dyj.png" alt=""> <img src="@/assets/img/tooltip/dyj.png" alt="" />
</div> </div>
<img class="sth printer cp" src="@/assets/img/printer.png" alt=""> <img class="sth printer cp" src="@/assets/img/printer.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> <el-tooltip placement="top" popper-class="sth-popper" offset="50">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/mmq.png" alt=""> <img src="@/assets/img/tooltip/mmq.png" alt="" />
</div> </div>
<img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" alt=""> <img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" alt="" />
</el-tooltip> </el-tooltip>
<img class="sth employee" src="@/assets/img/employee.png" alt=""> <img class="sth employee" src="@/assets/img/employee.png" alt="" />
<p class="employeeText">资料</p> <p class="employeeText">资料</p>
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> <el-tooltip placement="top" popper-class="sth-popper" offset="00">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/skj.png" alt=""> <img src="@/assets/img/tooltip/skj.png" alt="" />
</div> </div>
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt=""> <img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
<div slot="content"> <div slot="content">
<img src="@/assets/img/tooltip/sfz.png" alt=""> <img src="@/assets/img/tooltip/sfz.png" alt="" />
</div> </div>
<img class="sth idCard-scanner cp" src="@/assets/img/idCard-scanner.png" alt=""> <img class="sth idCard-scanner cp" src="@/assets/img/idCard-scanner.png" alt="" />
</el-tooltip> </el-tooltip>
<div class="goods-dia" :class="{active: showGoods}"> <div class="goods-dia" :class="{ active: showGoods }">
<img src="@/assets/img/idCard.png" alt=""> <img src="@/assets/img/idCard.png" alt="" />
<img src="@/assets/img/open-account.png" alt=""> <img src="@/assets/img/open-account.png" alt="" />
<img src="@/assets/img/cash.png" alt=""> <img src="@/assets/img/cash.png" alt="" />
</div> </div>
<div class="goods" :class="{active: showGoods}" @click="toggleGoods"> <div class="goods" :class="{ active: showGoods }" @click="toggleGoods">
<span>物品栏</span> <span>物品栏</span>
<img class="icon" src="@/assets/svg/arrow-right.svg" alt=""> <img class="icon" src="@/assets/svg/arrow-right.svg" alt="" />
</div> </div>
<el-dialog :visible.sync="dataVisible" width="1280px" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> <el-dialog
:visible.sync="dataVisible"
width="1280px"
@close="closeData"
:close-on-click-modal="false"
:show-close="false"
custom-class="data-dia"
>
<div slot="title" class="dia-header"> <div slot="title" class="dia-header">
<div class="data-title">{{dataTitle}}</div> <div class="data-title">{{ dataTitle }}</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia"> <img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia" />
</div> </div>
<p class="tips">- 请单击选中所需材料双击可放大预览 -</p> <p class="tips">- 请单击选中所需材料双击可放大预览 -</p>
<ul class="list"> <ul class="list">
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)"> <li :class="{ checked: checkList.includes(1) }" @click="checkData(1)">
<img src="@/assets/img/idCard-sm.png" alt=""> <img src="@/assets/img/idCard-sm.png" alt="" />
<p>身份证</p> <p>身份证</p>
</li> </li>
<li :class="{checked: checkList.includes(2)}" @click="checkData(2)"> <li :class="{ checked: checkList.includes(2) }" @click="checkData(2)">
<img src="@/assets/img/idCard-copy-sm.png" alt=""> <img src="@/assets/img/idCard-copy-sm.png" alt="" />
<p>身份证复印件</p> <p>身份证复印件</p>
</li> </li>
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)"> <li :class="{ checked: checkList.includes(3) }" @click="checkData(3)">
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="" />
<p>开户申请书</p> <p>开户申请书</p>
</li> </li>
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)"> <li :class="{ checked: checkList.includes(4) }" @click="checkData(4)">
<img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt=""> <img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="" />
<p>现金</p> <p>现金</p>
</li> </li>
</ul> </ul>
@ -125,123 +131,128 @@
</div> </div>
</el-dialog> </el-dialog>
<!-- 商业银行系统的全屏功能实现 --> <!-- 商业银行系统的全屏功能实现 -->
<div :class="fullScreen?'':'system'" :style="fullScreen?'margin-top:10vh':'margin-top:-8vh'" v-if="manageVisible" :width="fullScreen?'100vw':'1280px'"> <div :class="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible">
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex';
import manage from '../../manage/index' import manage from '../../manage/index';
export default { export default {
name: 'index', name: 'index',
components:{ components: {
manage:manage manage: manage
}, },
data() { data() {
return { return {
showGoods: false, showGoods: false,
dataTitle: '', dataTitle: '',
dataVisible: false, dataVisible: false,
manageVisible:false,// manageVisible: false, //
checkList: [], checkList: []
fullScreen:true,// -- // fullScreen:this.$store.state.layout.fullScreen,// --
};
},
computed: {
full: function () {
console.log(this.$store.state.layout.fullScreen, '当前full');
return this.$store.state.layout.fullScreen;
} }
}, },
watch: { watch: {
'$route.path':function(val){ // '$route.path': function (val) {
let arr = val.split('/').slice(-2) //
if(arr.pop()==="manage"||arr[0]==='manage'){ let arr = val.split('/').slice(-2);
this.manageVisible = true if (arr.pop() === 'manage' || arr[0] === 'manage') {
}else{ this.manageVisible = true;
this.manageVisible = false } else {
this.manageVisible = false;
} }
} }
}, },
created(){ created() {
let arr = this.$route.path.split('/').slice(-2) let arr = this.$route.path.split('/').slice(-2);
if(arr.pop()==="manage"||arr[0]==='manage'){ if (arr.pop() === 'manage' || arr[0] === 'manage') {
this.manageVisible = true this.manageVisible = true;
}else{ } else {
this.manageVisible = false this.manageVisible = false;
} }
},
mounted() {
}, },
mounted() {},
methods: { methods: {
toggleGoods(){ toggleGoods() {
this.showGoods = !this.showGoods this.showGoods = !this.showGoods;
}, },
showData(type){ showData(type) {
this.dataTitle = type this.dataTitle = type;
this.dataVisible = true this.dataVisible = true;
}, },
checkData(id){ checkData(id) {
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id) this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id), 1) : this.checkList.push(id);
}, },
closeDataDia(){ closeDataDia() {
this.dataVisible = false this.dataVisible = false;
}, },
closeData(){ closeData() {
this.checkList = [] this.checkList = [];
}, },
// //
showManage(){ showManage() {
this.manageVisible=true this.manageVisible = true;
this.$router.push('/counter/list/manage/consumerClient') this.$router.push('/counter/list/manage/consumerClient');
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{ .wrap {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100vh - 68px); height: calc(100vh - 68px);
overflow: hidden; overflow: hidden;
.sth{ .sth {
position: absolute; position: absolute;
&.cp{ &.cp {
cursor: pointer;
}
}
.guide{
top: 90px;
left: 0;
width: 222px;
cursor: pointer; cursor: pointer;
&:hover{
opacity: .9;
}
} }
.bg{ }
top: 0; .guide {
left: 0; top: 90px;
width: 100%; left: 0;
width: 222px;
cursor: pointer;
&:hover {
opacity: 0.9;
} }
.counter{ }
.bg {
top: 0;
left: 0;
// width: 100%;
height: calc(100vh - 60px);
}
// 1920
@media screen and (min-width: 1920px) {
.counter {
top: 116px; top: 116px;
left: 357px; left: 357px;
width: 1555px; width: 1555px;
} }
.glass{ .glass {
top: -135px; top: -145px;
left: 956px; left: 964px;
width: 50%; width: 855px;
} }
.employee {
.employee{
top: 371px; top: 371px;
left: 920px; left: 920px;
width: 388px; width: 388px;
position: relative;
} }
.employeeText{ .employeeText {
position: absolute; position: absolute;
top: 541px; top: 541px;
left: 1263px; left: 1263px;
@ -249,213 +260,431 @@ export default {
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px; font-size: 18px;
} }
.man {
.man{
top: 82px; top: 82px;
right: 150px; right: 150px;
width: 262px; width: 262px;
} }
.money-box{ .money-box {
top: 406px; top: 406px;
left: 445px; left: 445px;
width: 197px; width: 197px;
} }
.important{ .important {
top: 372px; top: 372px;
left: 582px; left: 582px;
width: 175px; width: 175px;
} }
.voucher-box{ .voucher-box {
top: 216px; top: 216px;
left: 718px; left: 718px;
width: 160px; width: 160px;
} }
.summons{ .summons {
top: 250px; top: 250px;
left: 844px; left: 844px;
width: 139px; width: 139px;
} }
.computer{ .computer {
top: 120px; top: 120px;
left: 955px; left: 955px;
width: 219px; width: 219px;
} }
.card-machine{ .card-machine {
top: 377px; top: 377px;
left: 1147px; left: 1147px;
width: 110px; width: 110px;
} }
.idCard-scanner{ .idCard-scanner {
top: 443px; top: 443px;
left: 1229px; left: 1229px;
width: 82px; width: 82px;
} }
.seal-box{ .seal-box {
top: 486px; top: 486px;
left: 1340px; left: 1340px;
width: 97px; width: 97px;
} }
.currency-detector{ .currency-detector {
top: 492px; top: 492px;
left: 1421px; left: 1421px;
width: 151px; width: 151px;
} }
.printer{ .printer {
top: 550px; top: 550px;
left: 1531px; left: 1531px;
width: 205px; width: 205px;
} }
.cipher-machine{ .cipher-machine {
top: 324px; top: 324px;
left: 1298px; left: 1298px;
width: 100px; width: 100px;
} }
.el-tooltip__popper.sth-popper {
.goods{ padding: 0;
position: fixed; // background-color: transparent;
bottom: 0; background-color: #fff;
display: flex; img {
flex-direction: column; height: 78px;
justify-content: center;
align-items: center;
width: 94px;
height: 200px;
cursor: pointer;
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 .5s;
}
&:hover{
opacity: .9;
} }
&.active{ .popper__arrow {
.icon{ display: none;
transform: rotate(180deg);
}
} }
} }
.goods-dia{ }
display: flex; // 1440-1550
position: fixed; @media screen and (max-width: 1550px) {
bottom: 0; .counter {
left: -100%; top: 35%;
justify-content: center; left: 10%;
align-items: center; height: 61vh;
width: 100%; }
padding: 20px 0; .glass {
transition: all .5s; //
background-color: rgba(255,255,255,.7); top: 185px;
&.active{ left: 716px;
left: 0; width: 690px;
} }
img{
margin-right: 50px; .employee {
&:last-child{ //
margin-right: 0; // top: 57%;
} // left: 42%;
} // width: 23%;
top: 617px;
left: 610px;
width: 333px;
position: relative;
}
.employeeText {
//
position: absolute;
top: 746px;
left: 925px;
color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px;
}
.man {
//
top: 278px;
left: 1075px;
width: 267px;
}
.money-box {
//
top: 637px;
left: 195px;
width: 164px;
}
.important {
//
top: 621px;
left: 314px;
width: 149px;
}
.voucher-box {
//
top: 482px;
left: 434px;
width: 134px;
}
.summons {
//
top: 500px;
left: 548px;
width: 112px;
}
.computer {
top: 395px;
left: 652px;
width: 170px;
}
.card-machine {
top: 596px;
left: 800px;
width: 100px;
}
.idCard-scanner {
top: 656px;
left: 861px;
width: 100px;
}
.seal-box {
top: 680px;
left: 966px;
width: 86px;
}
.currency-detector {
top: 693px;
left: 1035px;
width: 142px;
}
.printer {
top: 758px;
left: 1162px;
width: 187px;
}
.cipher-machine {
top: 551px;
left: 977px;
width: 122px;
} }
} }
/deep/.data-dia{ // 1550-1919
border-radius: 16px; @media screen and (min-width: 1550px) and (max-width: 1919px) {
margin-top: 11vh!important; .counter {
.el-dialog__header{ top: 33%;
padding: 0; left: 8%;
border-bottom: 0; height: 63vh;
.dia-header{
position: relative;
.data-title{
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{ .glass {
margin: 20px 0 100px; //
text-align: center; top: 185px;
font-size: 20px; left: 716px;
width: 690px;
}
.employee {
//
// top: 57%;
// left: 42%;
// width: 23%;
top: 617px;
left: 610px;
width: 333px;
position: relative;
}
.employeeText {
//
position: absolute;
top: 739px;
left: 925px;
color: #000; color: #000;
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
font-size: 18px;
} }
.list{ .man {
width: 940px; //
margin: 0 auto; top: 278px;
display: flex; left: 1075px;
justify-content: space-between; width: 267px;
align-items: center;
li{
position: relative;
width: 204px;
height: 204px;
text-align: center;
background: url(../../../assets/img/data-frame.png) 0 0/cover no-repeat;
cursor: pointer;
img{
margin-top: 45px;
}
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;
}
}
}
} }
.dia-footer{ .money-box {
margin-top: 140px; //
top: 628px;
left: 195px;
width: 164px;
}
.important {
//
top: 606px;
left: 312px;
width: 149px;
}
.voucher-box {
//
top: 474px;
left: 429px;
width: 134px;
}
.summons {
//
top: 496px;
left: 548px;
width: 112px;
}
.computer {
top: 381px;
left: 654px;
width: 170px;
}
.card-machine {
top: 583px;
left: 800px;
width: 100px;
}
.idCard-scanner {
top: 640px;
left: 867px;
width: 100px;
}
.seal-box {
top: 667px;
left: 966px;
width: 86px;
}
.currency-detector {
top: 676px;
left: 1036px;
width: 142px;
}
.printer {
top: 747px;
left: 1162px;
width: 187px;
}
.cipher-machine {
top: 551px;
left: 977px;
width: 122px;
}
}
.goods {
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 94px;
height: 200px;
cursor: pointer;
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; text-align: center;
button{ }
.icon {
width: 30px;
transition: all 0.5s;
}
&:hover {
opacity: 0.9;
}
&.active {
.icon {
transform: rotate(180deg);
}
}
}
.goods-dia {
display: flex;
position: fixed;
bottom: 0;
left: -100%;
justify-content: center;
align-items: center;
width: 100%;
padding: 20px 0;
transition: all 0.5s;
background-color: rgba(255, 255, 255, 0.7);
&.active {
left: 0;
}
img {
margin-right: 50px;
&:last-child {
margin-right: 0;
}
}
}
}
/deep/.data-dia {
border-radius: 16px;
margin-top: 11vh !important;
.el-dialog__header {
padding: 0;
border-bottom: 0;
.dia-header {
position: relative;
.data-title {
width: 300px; width: 300px;
line-height: 60px; margin: 0 auto;
line-height: 72px;
text-align: center;
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
background-color: rgb(81,147,255); background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
border: 0; }
border-radius: 20px; .close {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer; cursor: pointer;
&:hover{
opacity: .9;
}
} }
} }
} }
.system{ .tips {
position: absolute; margin: 20px 0 100px;
top: 12%; text-align: center;
left: 50%; font-size: 20px;
z-index: 9; color: #000;
transform: translate(-50%,0);
// display: flex;
} }
/deep/ .view .el-dialog__body{ .list {
padding: 0!important; width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
li {
position: relative;
width: 204px;
height: 204px;
text-align: center;
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
cursor: pointer;
img {
margin-top: 45px;
}
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;
}
}
}
}
.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;
}
}
} }
}
.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;
}
</style> </style>

@ -14,7 +14,6 @@
<img class="sth company-finance cp" src="@/assets/img/company-finance.png" alt="" @click="showComing"> <img class="sth company-finance cp" src="@/assets/img/company-finance.png" alt="" @click="showComing">
<img class="sth personal-finance cp" src="@/assets/img/personal-finance.png" alt="" @click="showComing"> <img class="sth personal-finance cp" src="@/assets/img/personal-finance.png" alt="" @click="showComing">
<!-- <vCase></vCase> -->
<div class="coming" :class="{active: comingVisible}"> <div class="coming" :class="{active: comingVisible}">
<img src="@/assets/svg/coming.svg" alt=""> <img src="@/assets/svg/coming.svg" alt="">
@ -77,7 +76,6 @@ export default {
margin-top: -10px; margin-top: -10px;
} }
} }
.name{ .name{
position: absolute; position: absolute;
top: 43%; top: 43%;

@ -1,13 +1,15 @@
<template> <template>
<div class="box" :style="fullscreen?'height:calc(100vh - 60px)':'height:80vh'"> <div class="box" :style="full?'height:calc(100vh - 60px);':'height: 80vh;'">
<div class="nav"> <div class="nav">
<div class="top"> <div class="top" :style="full?'border-radius:0':'border-top-left-radius: 20px;'">
<p style="margin:auto">商业银行系统</p> <p style="margin:auto">商业银行系统</p>
</div> </div>
<navbar class="body"></navbar> <navbar class="body"></navbar>
</div> </div>
<div class="manage-layout"> <div class="manage-layout">
<div class="top"> <div class="top" :style="full?'border-radius:0':'border-top-right-radius: 20px;'">
<img v-show="!full" src="../../../assets/svg/fullscreen.svg" alt="" @click="handleFullscreen">
<img v-show="full" src="../../../assets/svg/shrink.svg" alt="" @click="shrink">
<i @click="close" class="el-icon-close"></i> <i @click="close" class="el-icon-close"></i>
</div> </div>
<div class="manage-content"> <div class="manage-content">
@ -24,19 +26,32 @@ export default {
name: 'index', name: 'index',
data() { data() {
return { return {
fullscreen:false,// --store fullscreen:this.$store.state.layout.fullScreen,// --store
} }
}, },
components: { components: {
navbar, navbar,
}, },
computed:{
full:function(){
return this.$store.state.layout.fullScreen
}
},
created() { created() {
}, },
methods: { methods: {
close(){ close(){
this.$router.push('/counter/list/') this.$router.push('/counter/list/')
} },
handleFullscreen(){
this.fullscreen = true
this.$store.commit('layout/changeFullscreen',true)
},
shrink(){
this.fullscreen = false
this.$store.commit('layout/changeFullscreen',false)
},
} }
}; };
</script> </script>
@ -45,7 +60,7 @@ export default {
.box{ .box{
display: flex; display: flex;
min-width: 1300px; min-width: 1300px;
height: 80vh;
overflow: auto; overflow: auto;
.nav{ .nav{
width: 270px; width: 270px;

@ -13,10 +13,10 @@
<el-form-item label="证件类型"> <el-form-item label="证件类型">
<el-select v-model="form.x" placeholder="请选择"> <el-select v-model="form.x" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="(item,index) in papers"
:key="item.value" :key="index"
:label="item.label" :label="item.name"
:value="item.value"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -43,10 +43,10 @@
<el-form-item label="性别" required> <el-form-item label="性别" required>
<el-select v-model="form.x" placeholder="请选择"> <el-select v-model="form.x" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="(item,key) in gender"
:key="item.value" :key="key"
:label="item.label" :label="item.name"
:value="item.value"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -103,7 +103,14 @@ export default {
}, },
visible:false, visible:false,
options:[] papers:[
{name:'身份证',id:1}
],
options:[],
gender:[
{name:'男',id:1},
{name:'女',id:2},
],

@ -0,0 +1,23 @@
<template>
<div>
<h1>销户</h1>
</div>
</template>
<script>
export default{
name:'',
props:{},
data(){
return{
}
},
methods:{
},
}
</script>
<style lang='scss' scoped>
</style>

@ -0,0 +1,75 @@
<template>
<div class="body">
<el-row :gutter="20" style="margin: 0">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="卡号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="币种" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="金额">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="客户姓名" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="钞汇标识" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年利率" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="21" :offset="2">
<el-form-item label="摘要" required>
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-button @click="visible = true" type="primary" class="submitBtn">提交</el-button>
</div>
</template>
<script>
export default{
name:'',
props:{},
data(){
return{
form:{}
}
}
}
</script>
<style lang='scss' scoped>
.body{
margin-top: 50px;
overflow: auto;
.idCard{
border-radius: 5px;
background: #CFDDFF;
text-align: center;
height: 68px;
line-height: 68px;
font-size: 18px;
color: #6191FF;
}
.submitBtn{
position: relative;
width: 300px;
font-size: 18px;
height: 68px;
margin-top: 50px;
border-radius: 10px;
bottom: 10px;
left: 50%;
transform: translate(-50%,-50%);
}
}
</style>

@ -16,9 +16,10 @@
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
<p>活期业务</p> <p>活期业务</p>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
<p>开户</p> <p>{{text}}</p>
</div> </div>
<div class="body">
<!-- <div class="body">
<el-row :gutter="20" style="margin:0"> <el-row :gutter="20" style="margin:0">
<el-form ref="form" :model="form" label-width="120px"> <el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2"> <el-col :span="10" :offset="2">
@ -93,11 +94,10 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
<el-button type="primary" class="addBtn" circle icon="el-icon-plus"></el-button> <el-button @click="openAccount" type="primary" class="addBtn" circle icon="el-icon-plus"></el-button>
</el-row> </el-row>
</div> </div>
<!-- 二级证件,最多三张逻辑上一张二级为填完信息不可添加第三张 v-for="(item,index) in second" :key="index" --> <div class="add" v-for="(item,index) in second" :key="index">
<div class="add">
<el-row :gutter="20" style="margin:0;margin-top:10px"> <el-row :gutter="20" style="margin:0;margin-top:10px">
<el-form ref="form" :model="form" label-width="120px"> <el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2"> <el-col :span="10" :offset="2">
@ -145,10 +145,25 @@
</el-col> </el-col>
</el-form> </el-form>
</el-row> </el-row>
<el-button class="addBtn" circle icon="el-icon-close"></el-button> <el-button @click="deleteSecond(index)" class="addBtn" circle icon="el-icon-close"></el-button>
</div> </div>
<el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button> <el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button>
</div> </div> -->
<!-- 开户 -->
<open-account v-if="activeIndex==='1'"></open-account>
<!-- 存款 -->
<deposit v-if="activeIndex==='2'"></deposit>
<!-- 取款 -->
<withdrawal v-if="activeIndex==='3'"></withdrawal>
<!-- 转账 -->
<transferAccounts v-if="activeIndex==='4'"></transferAccounts>
<!-- 结清 -->
<settle v-if="activeIndex==='5'"></settle>
<!-- 销户 -->
<accountCancellation v-if="activeIndex==='6'"></accountCancellation>
<el-dialog <el-dialog
style="margin-top:10vh" style="margin-top:10vh"
@ -175,10 +190,34 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import openAccount from './openAccount.vue'
import deposit from './deposit.vue'
import withdrawal from './withdrawal.vue'
import transferAccounts from './transferAccounts.vue'
import settle from './settle.vue'
import accountCancellation from './settle.vue'
export default { export default {
name: 'index', name: 'index',
components:{
openAccount,
deposit,
withdrawal,
transferAccounts,
settle,
accountCancellation
},
data() { data() {
return { return {
text:'',/* 顶部文字 */
textObj:{
'1':'开户',
'2':'存款',
'3':'取款',
'4':'转账',
'5':'结清',
'6':'销户',
},
form:{ form:{
}, },
@ -198,9 +237,13 @@ export default {
}, },
methods: { methods: {
handleSelect(val){ handleSelect(val){
console.log(val,'xuanze'); console.log(typeof(val),this.activeIndex,'xuanze');
this.text = this.textObj[val]
this.activeIndex = val
}, },
} }
}; };
</script> </script>

@ -0,0 +1,228 @@
<template>
<div class="body">
<el-row :gutter="20" style="margin: 0">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="客户号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="币种" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="客户姓名" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="钞汇标识" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div class="add">
<el-row :gutter="20" style="margin: 0">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="账户性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账户类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="支取方式" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="凭证类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
<el-button @click="openAccount" type="primary" class="addBtn" circle icon="el-icon-plus"></el-button>
</el-row>
</div>
<!-- 二级证件,最多三张逻辑上一张二级为填完信息不可添加第三张 v-for="(item,index) in second" :key="index" -->
<div class="add" v-for="(item, index) in second" :key="index">
<el-row :gutter="20" style="margin: 0; margin-top: 10px">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="2">
<el-form-item label="账户性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账户类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="支取方式" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="凭证类型" required>
<el-select v-model="form.x" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="凭证号码" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-button @click="deleteSecond(index)" class="addBtn" circle icon="el-icon-close"></el-button>
</div>
<el-button @click="visible = true" type="primary" class="submitBtn">提交</el-button>
</div>
</template>
<script>
export default {
data(){
return{
form:{
},
second:[//
],
options:[]
}
},
methods:{
detectionObjKeys(obj,keys){/* obj-传入对象,keys-传入检测的key值 */
let boolean = true
keys.map(e=>{
if(!obj[e]){
boolean = false
}
})
},
openAccount(){
if(this.second.length){/* 检测已有二级卡是否填写完整 */
return this.$message('请把已有的二级卡填写完整再执行新增操作!')
for (let i= 0; i< this.second.length; i++) {
if(!this.detectionObjKeys(e,[])){/* 写入定义的二级卡字段 */
return this.$message('请把已有的二级卡填写完整再执行新增操作!')
}
}
}
let obj = {/* 二级卡定义空属性 */
}
this.second.push(obj)``
},
deleteSecond(index){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.second.splice(index,1)
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
</script>
<style lang="scss" scoped>
.body{
margin-top: 50px;
overflow: auto;
.idCard{
border-radius: 5px;
background: #CFDDFF;
text-align: center;
height: 68px;
line-height: 68px;
font-size: 18px;
color: #6191FF;
}
.add{
position: relative;
&::after{
content: '';
display: block;
position: absolute;
right: 3%;
top: -4%;
border: 1px dashed #CFDDFF;
width: 88%;
height: 268px;
}
.addBtn{
position: absolute;
left: 0;
top: 50%;
transform: translate(50%,-50%);
font-size: 22px;
}
}
}
.submitBtn{
position: relative;
width: 300px;
font-size: 18px;
height: 68px;
margin-top: 50px;
border-radius: 10px;
bottom: 10px;
left: 50%;
transform: translate(-50%,-50%);
}
.popBody{
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.popBtns{
display: flex;
justify-content: space-between;
align-items: center;
.btn{
width: 180px;
border-radius: 10px;
font-size: 18px;
}
.close{
background: #CFDEFF;
color: #6191FF;
}
.sure{
background: #6191FF;
color: #fff;
}
}
</style>

@ -0,0 +1,23 @@
<template>
<div>
<h1>结清</h1>
</div>
</template>
<script>
export default{
name:'',
props:{},
data(){
return{
}
},
methods:{
},
}
</script>
<style lang='scss' scoped>
</style>

@ -0,0 +1,23 @@
<template>
<div>
<h1>取款</h1>
</div>
</template>
<script>
export default{
name:'',
props:{},
data(){
return{
}
},
methods:{
},
}
</script>
<style lang='scss' scoped>
</style>

@ -0,0 +1,23 @@
<template>
<div>
<h1>取款</h1>
</div>
</template>
<script>
export default{
name:'',
props:{},
data(){
return{
}
},
methods:{
},
}
</script>
<style lang='scss' scoped>
</style>

@ -42,7 +42,7 @@ export default {
{ {
name: `${pre}currentAccount`, name: `${pre}currentAccount`,
path: `currentAccount`, path: `currentAccount`,
component: () => import('@/pages/manage/list/personal/currentAccount.vue'), component: () => import('@/pages/manage/list/personal/currentAccount/index.vue'),
meta: { title: '活期业务' }, meta: { title: '活期业务' },
}, },
{ {

@ -19,6 +19,7 @@ export default {
state.isIE = val state.isIE = val
}, },
changeFullscreen:(state,val) => { changeFullscreen:(state,val) => {
console.log(val,state,'dayin--val')
state.fullScreen = val state.fullScreen = val
} }
}, },

Loading…
Cancel
Save