huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

页面路由修改

Browse Source
20240205
yujialong 3 years ago
parent afd039c117
commit 4365ca211c
9 changed files with 609 additions and 607 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 122
      src/pages/bank/list/index.vue
  2. 448
      src/pages/counter/list/index.vue
  3. 454
      src/pages/index/list/index.vue
  4. 2
      src/pages/manage/index/index.vue
  5. 16
      src/pages/manage/navbar/index.vue
  6. 23
      src/router/modules/bank.js
  7. 77
      src/router/modules/counter.js
  8. 56
      src/router/modules/index.js
  9. 4
      src/router/routes.js

122
src/pages/bank/list/index.vue
Unescape View File

@ -1,122 +0,0 @@
<template>
<div class="wrap">
<img class="sth bg" src="@/assets/img/index-bg.png" alt="">
<div class="case">项目案例</div>
<div class="sth integrated-counter">
<img width="100%" src="@/assets/img/integrated-counter.png" alt="">
<div class="name">综合柜台</div>
</div>
<img class="sth international" src="@/assets/img/international.png" alt="">
<img class="sth manager" src="@/assets/img/manager.png" alt="">
<img class="sth credit-dep" src="@/assets/img/credit-dep.png" alt="">
<img class="sth company-finance" src="@/assets/img/company-finance.png" alt="">
<img class="sth personal-finance" src="@/assets/img/personal-finance.png" alt="">
<vCase></vCase>
</div>
</template>
<script>
import vCase from '@/components/case'
export default {
name: 'index',
data() {
return {
caseVisible: true,
}
},
components: {
vCase
},
mounted() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.wrap{
.sth{
position: absolute;
&.cp{
cursor: pointer;
}
}
.bg{
top: 0;
left: 0;
width: 100%;
}
.integrated-counter{
top: 0;
left: 20%;
width: 35%;
img{
transition: all .5s;
&:hover{
margin-top: -10px;
}
}
.name{
position: absolute;
top: 43%;
left: -23%;
width: 280px;
height: 100px;
line-height: 94px;
text-align: center;
color: #fff;
font-size: 28px;
background: url(../../../assets/img/index-btn-bg.png) 0 0/cover no-repeat;
}
}
.international{
top: 0;
left: 72%;
width: 28%;
}
.manager{
top: 57%;
left: 65%;
width: 34%;
transition: all .5s;
&:hover{
top: calc(57% - 10px);
}
}
.credit-dep{
top: 38%;
left: 0;
width: 21%;
}
.company-finance{
top: 62%;
left: 10%;
width: 30%;
}
.personal-finance{
top: 80%;
left: 31%;
width: 30%;
}
.case{
position: absolute;
top: 80px;
left: 40px;
width: 250px;
height: 106px;
line-height: 106px;
text-align: center;
color: #fff;
font-size: 26px;
background: url(../../../assets/img/case.png) 0 0 /cover no-repeat;
cursor: pointer;
}
}
</style>

448
src/pages/counter/list/index.vue
Unescape View File

@ -0,0 +1,448 @@
<template>
<div class="wrap">
<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 man" src="@/assets/img/man.png" alt="">
<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: 145px" 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="">
</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="">
</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="">
</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('钱箱')">
</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" 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" 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="">
</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" 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/skj.png" alt="">
</div>
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="">
</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" alt="">
</el-tooltip>
<div class="goods-dia" :class="{active: showGoods}">
<img src="@/assets/img/idCard.png" alt="">
<img src="@/assets/img/open-account.png" alt="">
<img src="@/assets/img/cash.png" alt="">
</div>
<div class="goods" :class="{active: showGoods}" @click="toggleGoods">
<span>物品栏</span>
<img class="icon" src="@/assets/svg/arrow-right.svg" alt="">
</div>
<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 class="data-title">{{dataTitle}}</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia">
</div>
<p class="tips">- 请单击选中所需材料、双击可放大预览 -</p>
<ul class="list">
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)">
<img src="@/assets/img/idCard-sm.png" alt="">
<p>身份证</p>
</li>
<li :class="{checked: checkList.includes(2)}" @click="checkData(2)">
<img src="@/assets/img/idCard-copy-sm.png" alt="">
<p>身份证复印件</p>
</li>
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)">
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
<p>开户申请书</p>
</li>
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)">
<img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="">
<p>现金</p>
</li>
</ul>
<div class="dia-footer">
<button type="button">确定</button>
</div>
</el-dialog>
<div class="system" style="margin-top:-8vh" v-if="manageVisible" width="1280px">
<router-view></router-view>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import manage from '../../manage/index'
export default {
name: 'index',
components:{
manage:manage
},
data() {
return {
showGoods: false,
dataTitle: '',
dataVisible: false,
manageVisible:false,// 显示系统录入
checkList: []
}
},
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
}
}
},
created(){
let arr = this.$route.path.split('/').slice(-2)
if(arr.pop()==="manage"||arr[0]==='manage'){
this.manageVisible = true
}else{
this.manageVisible = false
}
},
mounted() {
},
methods: {
toggleGoods(){
this.showGoods = !this.showGoods
},
showData(type){
this.dataTitle = type
this.dataVisible = true
},
checkData(id){
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id)
},
closeDataDia(){
this.dataVisible = false
},
closeData(){
this.checkList = []
},
// 展示系统管理
showManage(){
this.manageVisible=true
this.$router.push('/counter/list/manage/consumerClient')
}
}
};
</script>
<style lang="scss" scoped>
.wrap{
position: relative;
width: 100%;
height: calc(100vh - 68px);
overflow: hidden;
.sth{
position: absolute;
&.cp{
cursor: pointer;
}
}
.guide{
top: 90px;
left: 0;
width: 222px;
cursor: pointer;
&:hover{
opacity: .9;
}
}
.bg{
top: 0;
left: 0;
width: 100%;
}
.counter{
top: 116px;
left: 357px;
width: 1555px;
}
.glass{
top: -135px;
left: 956px;
width: 50%;
}
.employee{
top: 371px;
left: 920px;
width: 388px;
}
.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;
}
.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;
}
.icon{
width: 30px;
transition: all .5s;
}
&:hover{
opacity: .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 .5s;
background-color: rgba(255,255,255,.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;
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 100px;
text-align: center;
font-size: 20px;
color: #000;
}
.list{
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: .9;
}
}
}
}
.system{
position: absolute;
top: 12%;
left: 50%;
z-index: 9;
transform: translate(-50%,0);
// display: flex;
}
/deep/ .view .el-dialog__body{
padding: 0!important;
}
</style>

454
src/pages/index/list/index.vue
Unescape View File

@ -1,448 +1,124 @@
<template>
<div class="wrap">
<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 man" src="@/assets/img/man.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 bg" src="@/assets/img/index-bg.png" alt="">
<div class="case">项目案例</div>
<!-- 系统录入 -->
<el-tooltip placement="top" popper-class="sth-popper">
<div slot="content">
<img style="height: 145px" src="@/assets/img/tooltip/system.png" alt="">
<div class="sth integrated-counter">
<img width="100%" src="@/assets/img/integrated-counter.png" alt="" @click="toPart('/counter')">
<div class="name">综合柜台</div>
</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="">
</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="">
</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="">
</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('钱箱')">
</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" 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" 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="">
</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" 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/skj.png" alt="">
</div>
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="">
</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" alt="">
</el-tooltip>
<div class="goods-dia" :class="{active: showGoods}">
<img src="@/assets/img/idCard.png" alt="">
<img src="@/assets/img/open-account.png" alt="">
<img src="@/assets/img/cash.png" alt="">
</div>
<div class="goods" :class="{active: showGoods}" @click="toggleGoods">
<span>物品栏</span>
<img class="icon" src="@/assets/svg/arrow-right.svg" alt="">
</div>
<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 class="data-title">{{dataTitle}}</div>
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia">
</div>
<p class="tips">- 请单击选中所需材料、双击可放大预览 -</p>
<ul class="list">
<li :class="{checked: checkList.includes(1)}" @click="checkData(1)">
<img src="@/assets/img/idCard-sm.png" alt="">
<p>身份证</p>
</li>
<li :class="{checked: checkList.includes(2)}" @click="checkData(2)">
<img src="@/assets/img/idCard-copy-sm.png" alt="">
<p>身份证复印件</p>
</li>
<li :class="{checked: checkList.includes(3)}" @click="checkData(3)">
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
<p>开户申请书</p>
</li>
<li :class="{checked: checkList.includes(4)}" @click="checkData(4)">
<img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="">
<p>现金</p>
</li>
</ul>
<div class="dia-footer">
<button type="button">确定</button>
</div>
</el-dialog>
<div class="system" style="margin-top:-8vh" v-if="manageVisible" width="1280px">
<router-view></router-view>
</div>
<img class="sth international" src="@/assets/img/international.png" alt="">
<img class="sth manager" src="@/assets/img/manager.png" alt="" @click="toPart('/lobbyManager')">
<img class="sth credit-dep" src="@/assets/img/credit-dep.png" alt="">
<img class="sth company-finance" src="@/assets/img/company-finance.png" alt="">
<img class="sth personal-finance" src="@/assets/img/personal-finance.png" alt="">
<vCase></vCase>
</div>
</template>
<script>
import { mapState } from 'vuex'
import manage from '../../manage/index'
import vCase from '@/components/case'
export default {
name: 'index',
components:{
manage:manage
},
data() {
return {
showGoods: false,
dataTitle: '',
dataVisible: false,
manageVisible:false,// 显示系统录入
checkList: []
caseVisible: true,
}
},
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
}
}
},
created(){
let arr = this.$route.path.split('/').slice(-2)
if(arr.pop()==="manage"||arr[0]==='manage'){
this.manageVisible = true
}else{
this.manageVisible = false
}
components: {
vCase
},
mounted() {
},
methods: {
toggleGoods(){
this.showGoods = !this.showGoods
toPart(path){
this.$router.push(path)
},
showData(type){
this.dataTitle = type
this.dataVisible = true
},
checkData(id){
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id)
},
closeDataDia(){
this.dataVisible = false
},
closeData(){
this.checkList = []
},
// 展示系统管理
showManage(){
this.manageVisible=true
this.$router.push('/index/list/manage/consumerClient')
}
}
};
</script>
<style lang="scss" scoped>
.wrap{
position: relative;
width: 100%;
height: calc(100vh - 68px);
overflow: hidden;
.sth{
position: absolute;
&.cp{
cursor: pointer;
}
}
.guide{
top: 90px;
left: 0;
width: 222px;
cursor: pointer;
&:hover{
opacity: .9;
}
}
.bg{
top: 0;
left: 0;
width: 100%;
}
.counter{
top: 116px;
left: 357px;
width: 1555px;
}
.glass{
top: -135px;
left: 956px;
width: 50%;
}
.employee{
top: 371px;
left: 920px;
width: 388px;
}
.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;
}
.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;
}
.icon{
width: 30px;
.integrated-counter{
top: 0;
left: 20%;
width: 35%;
img{
transition: all .5s;
}
&:hover{
opacity: .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 .5s;
background-color: rgba(255,255,255,.7);
&.active{
left: 0;
}
img{
margin-right: 50px;
&:last-child{
margin-right: 0;
}
}
margin-top: -10px;
}
}
/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;
margin: 0 auto;
line-height: 72px;
.name{
position: absolute;
top: 43%;
left: -23%;
width: 280px;
height: 100px;
line-height: 94px;
text-align: center;
color: #fff;
font-size: 24px;
background: url(../../../assets/img/dia-title.png) 0 0/cover no-repeat;
font-size: 28px;
background: url(../../../assets/img/index-btn-bg.png) 0 0/cover no-repeat;
}
.close{
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
.international{
top: 0;
left: 72%;
width: 28%;
}
.manager{
top: 57%;
left: 65%;
width: 34%;
transition: all .5s;
&:hover{
top: calc(57% - 10px);
}
.tips{
margin: 20px 0 100px;
text-align: center;
font-size: 20px;
color: #000;
}
.list{
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;
}
.credit-dep{
top: 38%;
left: 0;
width: 21%;
}
.company-finance{
top: 62%;
left: 10%;
width: 30%;
}
.personal-finance{
top: 80%;
left: 31%;
width: 30%;
}
.dia-footer{
margin-top: 140px;
.case{
position: absolute;
top: 80px;
left: 40px;
width: 250px;
height: 106px;
line-height: 106px;
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;
font-size: 26px;
background: url(../../../assets/img/case.png) 0 0 /cover no-repeat;
cursor: pointer;
&:hover{
opacity: .9;
}
}
}
}
.system{
position: absolute;
top: 12%;
left: 50%;
z-index: 9;
transform: translate(-50%,0);
// display: flex;
}
/deep/ .view .el-dialog__body{
padding: 0!important;
}
</style>

2
src/pages/manage/index/index.vue
Unescape View File

@ -35,7 +35,7 @@ export default {
},
methods: {
close(){
this.$router.push('/index/list/')
this.$router.push('/counter/list/')
}
}
};

16
src/pages/manage/navbar/index.vue
Unescape View File

@ -45,7 +45,7 @@ import Setting from '@/setting';
export default {
data() {
return {
onRoutes:'/index/list/manage/consumerClient',
onRoutes:'/counter/list/manage/consumerClient',
menus: [
{
icon: 'menu-icon icon-index',
@ -53,10 +53,10 @@ export default {
title: '客户信息',
children: [
{
index: '/index/list/manage/consumerClient',
index: '/counter/list/manage/consumerClient',
title: '个人客户信息建立',
},{
index: '/index/list/manage/corporateClient',
index: '/counter/list/manage/corporateClient',
title: '公司客户信息建立',
},
]
@ -67,23 +67,23 @@ export default {
title: '个人业务',
children:[
{
index: '/index/list/manage/currentAccount',
index: '/counter/list/manage/currentAccount',
title: '活期业务',
},
{
index: '/index/list/manage/timeDeposit',
index: '/counter/list/manage/timeDeposit',
title: '整存整取',
},
{
index: '/index/list/manage/usefulPhrases',
index: '/counter/list/manage/usefulPhrases',
title: '零存整取',
},
{
index: '/index/list/manage/callDeposits',
index: '/counter/list/manage/callDeposits',
title: '通知存款',
},
{
index: '/index/list/manage/accountService',
index: '/counter/list/manage/accountService',
title: '账户服务',
},
]

23
src/router/modules/bank.js
Unescape View File

@ -1,23 +0,0 @@
import BasicLayout from '@/layouts/home';
const meta = {};
const pre = 'bank-';
export default {
path: '/bank',
name: 'bank',
redirect: {
name: `${pre}list`
},
meta,
component: BasicLayout,
children: [
{
name: `${pre}list`,
path: `list`,
component: () => import('@/pages/bank/list'),
meta: { title: '首页' }
},
]
};

77
src/router/modules/counter.js
Unescape View File

@ -0,0 +1,77 @@
import BasicLayout from '@/layouts/home';
const meta = {};
const pre = 'counter-';
export default {
path: '/counter',
name: 'counter',
redirect: {
name: `${pre}list`
},
meta,
component: BasicLayout,
children: [
{
name: `${pre}list`,
path: `list`,
component: () => import('@/pages/counter/list'),
meta: { title: '综合柜台' },
children:[
{
name: `${pre}manager`,
path: `manage`,
component: () => import('@/pages/manage/index'),
meta: { title: '系统管理' },
children:[
// 客户信息
{
name: `${pre}consumerClient`,
path: `consumerClient`,
component: () => import('@/pages/manage/list/client/consumerClient.vue'),
meta: { title: '个人客户信息建立' },
},
{
name: `${pre}corporateClient`,
path: `corporateClient`,
component: () => import('@/pages/manage/list/client/corporateClient.vue'),
meta: { title: '公司客户信息建立' },
},
// 个人业务
{
name: `${pre}currentAccount`,
path: `currentAccount`,
component: () => import('@/pages/manage/list/personal/currentAccount.vue'),
meta: { title: '活期业务' },
},
{
name: `${pre}timeDeposit`,
path: `timeDeposit`,
component: () => import('@/pages/manage/list/personal/timeDeposit.vue'),
meta: { title: '整存整取' }
},
{
name: `${pre}usefulPhrases`,
path: `usefulPhrases`,
component: () => import('@/pages/manage/list/personal/usefulPhrases.vue'),
meta: { title: '零存整取' },
},
{
name: `${pre}callDeposits`,
path: `callDeposits`,
component: () => import('@/pages/manage/list/personal/callDeposits.vue'),
meta: { title: '通知存款' },
},
{
name: `${pre}accountService`,
path: `accountService`,
component: () => import('@/pages/manage/list/personal/accountService.vue'),
meta: { title: '账户服务' },
},
]
}
]
},
]
};

56
src/router/modules/index.js
Unescape View File

@ -18,61 +18,7 @@ export default {
name: `${pre}list`,
path: `list`,
component: () => import('@/pages/index/list'),
meta: { title: '首页' },
children:[
{
name: `${pre}manager`,
path: `manage`,
component: () => import('@/pages/manage/index'),
meta: { title: '系统管理' },
children:[
// 客户信息
{
name: `${pre}consumerClient`,
path: `consumerClient`,
component: () => import('@/pages/manage/list/client/consumerClient.vue'),
meta: { title: '个人客户信息建立' },
},
{
name: `${pre}corporateClient`,
path: `corporateClient`,
component: () => import('@/pages/manage/list/client/corporateClient.vue'),
meta: { title: '公司客户信息建立' },
},
// 个人业务
{
name: `${pre}currentAccount`,
path: `currentAccount`,
component: () => import('@/pages/manage/list/personal/currentAccount.vue'),
meta: { title: '活期业务' },
},
{
name: `${pre}timeDeposit`,
path: `timeDeposit`,
component: () => import('@/pages/manage/list/personal/timeDeposit.vue'),
meta: { title: '整存整取' }
},
{
name: `${pre}usefulPhrases`,
path: `usefulPhrases`,
component: () => import('@/pages/manage/list/personal/usefulPhrases.vue'),
meta: { title: '零存整取' },
},
{
name: `${pre}callDeposits`,
path: `callDeposits`,
component: () => import('@/pages/manage/list/personal/callDeposits.vue'),
meta: { title: '通知存款' },
},
{
name: `${pre}accountService`,
path: `accountService`,
component: () => import('@/pages/manage/list/personal/accountService.vue'),
meta: { title: '账户服务' },
},
]
}
]
meta: { title: '首页' }
},
]
};

4
src/router/routes.js
Unescape View File

@ -1,5 +1,5 @@
import index from './modules/index'
import bank from './modules/bank'
import counter from './modules/counter'
import lobbyManager from './modules/lobbyManager'
import BasicLayout from '@/layouts/home'
@ -16,7 +16,7 @@ const frameIn = [
children: []
},
index,
bank,
counter,
lobbyManager
]

Write Preview
Loading…
Cancel
Save