Merge branches 'master' and 'master' of https://git.czcyedu.com/huoran/FE_bankTeaching
e
3 years ago
commit
f1e2e120c8
27 changed files with 1306 additions and 253 deletions
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 31 MiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,122 @@ |
|||||||
|
<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> |
||||||
@ -0,0 +1,306 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<img class="sth manager" src="@/assets/img/manager.png" alt=""> |
||||||
|
<img class="sth guide" src="@/assets/img/guide.png" alt=""> |
||||||
|
|
||||||
|
<div class="actions"> |
||||||
|
<ul class="btns"> |
||||||
|
<li @click="showTake">取号</li> |
||||||
|
<li @click="showData">填单</li> |
||||||
|
<li @click="showCopy">复印</li> |
||||||
|
<li>返回</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog :visible.sync="takeVisible" width="1280px" @close="closeTake" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
||||||
|
<div slot="title" class="dia-header"> |
||||||
|
<div class="data-title">取号机</div> |
||||||
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeTakeDia"> |
||||||
|
</div> |
||||||
|
<p class="tips">- 请选择办理的业务 -</p> |
||||||
|
<ul class="take-list"> |
||||||
|
<li :class="{checked: takeCheck == 1}" @click="checkTake(1)"> |
||||||
|
<img src="@/assets/svg/cash.svg" alt=""> |
||||||
|
<p>现金业务</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: takeCheck == 2}" @click="checkTake(2)"> |
||||||
|
<img src="@/assets/svg/non-cash.svg" alt=""> |
||||||
|
<p>个人非现金业务</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: takeCheck == 3}" @click="checkTake(3)"> |
||||||
|
<img src="@/assets/svg/company.svg" alt=""> |
||||||
|
<p>公司业务</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: takeCheck == 4}" @click="checkTake(4)"> |
||||||
|
<img src="@/assets/svg/financial.svg" alt=""> |
||||||
|
<p>理财业务</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="dia-footer"> |
||||||
|
<button type="button" @click="confirmTake">确定</button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog :visible.sync="takeResultVisible" width="580px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> |
||||||
|
<div slot="title" class="dia-header"> |
||||||
|
<div class="data-title">取号机</div> |
||||||
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false"> |
||||||
|
</div> |
||||||
|
<div class="result"> |
||||||
|
<img src="@/assets/img/finish.png" alt=""> |
||||||
|
<h6>取号成功</h6> |
||||||
|
<p class="text">您选择了现金业务</p> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<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">银行单据</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 style="font-size: 12px">开立单位银行结算账户申请书</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: checkList.includes(1)}" @click="checkData(5)"> |
||||||
|
<img src="@/assets/img/idCard-sm.png" alt=""> |
||||||
|
<p>现金存款凭证</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: checkList.includes(2)}" @click="checkData(6)"> |
||||||
|
<img src="@/assets/img/idCard-copy-sm.png" alt=""> |
||||||
|
<p>转账凭证</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(7)"> |
||||||
|
<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(8)"> |
||||||
|
<img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt=""> |
||||||
|
<p>转账支票</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: checkList.includes(2)}" @click="checkData(6)"> |
||||||
|
<img src="@/assets/img/idCard-copy-sm.png" alt=""> |
||||||
|
<p>支票领购单</p> |
||||||
|
</li> |
||||||
|
<li :class="{checked: checkList.includes(3)}" @click="checkData(7)"> |
||||||
|
<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(8)"> |
||||||
|
<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> |
||||||
|
|
||||||
|
<el-dialog :visible.sync="copyVisible" 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">复印</div> |
||||||
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeCopyDia"> |
||||||
|
</div> |
||||||
|
<p class="tips">- 请单击选中复印材料、双击可放大预览 -</p> |
||||||
|
<ul class="list" style="justify-content: center"> |
||||||
|
<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(3)}" @click="checkData(3)"> |
||||||
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> |
||||||
|
<p>开户申请书</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="dia-footer"> |
||||||
|
<button type="button">确定</button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { mapState } from 'vuex' |
||||||
|
export default { |
||||||
|
name: 'index', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
takeCheck: '', |
||||||
|
takeVisible: false, |
||||||
|
takeResultVisible: false, |
||||||
|
dataVisible: false, |
||||||
|
checkList: [], |
||||||
|
copyVisible: false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showTake(type){ |
||||||
|
this.takeVisible = true |
||||||
|
}, |
||||||
|
checkTake(id){ |
||||||
|
this.takeCheck = id |
||||||
|
}, |
||||||
|
closeTakeDia(){ |
||||||
|
this.takeVisible = false |
||||||
|
}, |
||||||
|
closeTake(){ |
||||||
|
this.takeCheck = '' |
||||||
|
}, |
||||||
|
confirmTake(){ |
||||||
|
this.takeVisible = false |
||||||
|
this.takeResultVisible = true |
||||||
|
}, |
||||||
|
|
||||||
|
showData(){ |
||||||
|
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 = [] |
||||||
|
}, |
||||||
|
|
||||||
|
showCopy(){ |
||||||
|
this.copyVisible = true |
||||||
|
}, |
||||||
|
closeCopyDia(){ |
||||||
|
this.copyVisible = false |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.wrap{ |
||||||
|
.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%; |
||||||
|
} |
||||||
|
.manager{ |
||||||
|
top: 68px; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.actions{ |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 50%; |
||||||
|
padding: 55px; |
||||||
|
transform: translateX(-50%); |
||||||
|
background-color: rgba(255,255,255,.7); |
||||||
|
border-top-left-radius: 20px; |
||||||
|
border-top-right-radius: 20px; |
||||||
|
.btns{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
li{ |
||||||
|
width: 280px; |
||||||
|
margin-right: 50px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 32px; |
||||||
|
line-height: 94px; |
||||||
|
background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat; |
||||||
|
cursor: pointer; |
||||||
|
&:hover{ |
||||||
|
opacity: .9; |
||||||
|
} |
||||||
|
&:last-child{ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.data-dia{ |
||||||
|
.take-list{ |
||||||
|
width: 810px; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
li{ |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
width: 380px; |
||||||
|
height: 180px; |
||||||
|
border: 4px solid #DBDBDB; |
||||||
|
border-radius: 20px; |
||||||
|
cursor: pointer; |
||||||
|
background-color: rgba(216,216,216,0.10); |
||||||
|
&:first-child{ |
||||||
|
margin: 0 50px 50px 0; |
||||||
|
} |
||||||
|
&:last-child{ |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
img{ |
||||||
|
margin: 0 45px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 22px; |
||||||
|
color: #000; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
&.checked{ |
||||||
|
background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat; |
||||||
|
border-color: #6191FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.result{ |
||||||
|
margin: 30px 0 20px; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: 136px; |
||||||
|
} |
||||||
|
h6{ |
||||||
|
margin: 30px 0 10px; |
||||||
|
font-size: 30px; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.text{ |
||||||
|
font-size: 22px; |
||||||
|
color: #797979; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,23 +0,0 @@ |
|||||||
import BasicLayout from '@/layouts/home'; |
|
||||||
|
|
||||||
const meta = {}; |
|
||||||
|
|
||||||
const pre = 'setting-'; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: '/setting', |
|
||||||
name: 'setting', |
|
||||||
redirect: { |
|
||||||
name: `${pre}person` |
|
||||||
}, |
|
||||||
meta, |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `${pre}person`, |
|
||||||
path: `person`, |
|
||||||
component: () => import('@/pages/setting/person'), |
|
||||||
meta: { title: '个人中心' } |
|
||||||
}, |
|
||||||
] |
|
||||||
}; |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
import BasicLayout from '@/layouts/home'; |
|
||||||
|
|
||||||
const meta = {}; |
|
||||||
|
|
||||||
const pre = 'stat-'; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: '/stat', |
|
||||||
name: 'stat', |
|
||||||
redirect: { |
|
||||||
name: `${pre}list` |
|
||||||
}, |
|
||||||
meta, |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `${pre}list`, |
|
||||||
path: `list`, |
|
||||||
component: () => import('@/pages/stat/list'), |
|
||||||
meta: { title: '数据统计' } |
|
||||||
}, |
|
||||||
] |
|
||||||
}; |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
import BasicLayout from '@/layouts/home'; |
|
||||||
|
|
||||||
const meta = {}; |
|
||||||
|
|
||||||
const pre = 'user-'; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: '/user', |
|
||||||
name: 'user', |
|
||||||
redirect: { |
|
||||||
name: `${pre}list` |
|
||||||
}, |
|
||||||
meta, |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `${pre}list`, |
|
||||||
path: `list`, |
|
||||||
component: () => import('@/pages/user/list'), |
|
||||||
meta: { title: '用户管理' } |
|
||||||
}, |
|
||||||
] |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue