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

柜台系统

Browse Source
20240205
e 3 years ago
parent e3d1fce8ee
commit 317639088d
8 changed files with 392 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/layouts/home/index.vue
  2. 33
      src/pages/index/list/index.vue
  3. 42
      src/pages/manage/index/index.vue
  4. 160
      src/pages/manage/list/client/consumerClient.vue
  5. 2
      src/pages/manage/list/client/corporateClient.vue
  6. 164
      src/pages/manage/list/personal/currentAccount.vue
  7. 3
      src/pages/manage/navbar/index.vue
  8. 18
      src/styles/layout/index.scss

2
src/layouts/home/index.vue
Unescape View File

@ -57,6 +57,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main{ .main{
min-height: 100%; min-height: 100vh;
} }
</style> </style>

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

@ -124,9 +124,9 @@
<button type="button">确定</button> <button type="button">确定</button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog class="view" :visible.sync="manageVisible" width="1280px" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia"> <div class="system" style="margin-top:-8vh" v-if="manageVisible" width="1280px">
<router-view></router-view> <router-view></router-view>
</el-dialog> </div>
</div> </div>
</template> </template>
@ -150,7 +150,8 @@ export default {
}, },
watch: { watch: {
'$route.path':function(val){ // 控制弹框显隐 '$route.path':function(val){ // 控制弹框显隐
if(val.split('/').pop()==="manage"){ let arr = val.split('/').slice(-2)
if(arr.pop()==="manage"||arr[0]==='manage'){
this.manageVisible = true this.manageVisible = true
}else{ }else{
this.manageVisible = false this.manageVisible = false
@ -158,10 +159,13 @@ export default {
} }
}, },
created(){ created(){
console.log(this.$route.path.split('/').pop(),'path'); let arr = this.$route.path.split('/').slice(-2)
if(this.$route.path.split('/').pop()==="manage"){// 使用children当组件 if(arr.pop()==="manage"||arr[0]==='manage'){
this.manageVisible = true this.manageVisible = true
}else{
this.manageVisible = false
} }
}, },
mounted() { mounted() {
@ -186,7 +190,7 @@ export default {
// 展示系统管理 // 展示系统管理
showManage(){ showManage(){
this.manageVisible=true this.manageVisible=true
this.$router.push('/index/list/manage') this.$router.push('/index/list/manage/consumerClient')
} }
} }
}; };
@ -194,9 +198,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{ .wrap{
// position: relative; position: relative;
// min-height: calc(100vh - 68px); width: 100%;
height: calc(100vh - 68px);
overflow: hidden;
.sth{ .sth{
position: absolute; position: absolute;
&.cp{ &.cp{
@ -348,6 +353,7 @@ export default {
} }
/deep/.data-dia{ /deep/.data-dia{
border-radius: 16px; border-radius: 16px;
margin-top: 11vh!important;
.el-dialog__header{ .el-dialog__header{
padding: 0; padding: 0;
border-bottom: 0; border-bottom: 0;
@ -428,7 +434,12 @@ export default {
} }
} }
} }
/deep/ .view .el-dialog__body{ .system{
padding: 0!important; position: absolute;
top: 12%;
left: 50%;
z-index: 9;
transform: translate(-50%,0);
// display: flex;
} }
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="wrap"> <div class="box">
<div class="nav"> <div class="nav">
<div class="top"> <div class="top">
<p style="margin:auto">商业银行系统</p> <p style="margin:auto">商业银行系统</p>
@ -7,6 +7,9 @@
<navbar class="body"></navbar> <navbar class="body"></navbar>
</div> </div>
<div class="manage-layout"> <div class="manage-layout">
<div class="top">
<i @click="close" class="el-icon-close"></i>
</div>
<div class="manage-content"> <div class="manage-content">
<router-view class="manage-view"></router-view> <router-view class="manage-view"></router-view>
</div> </div>
@ -27,21 +30,23 @@ export default {
components: { components: {
navbar, navbar,
}, },
mounted() { created() {
}, },
methods: { methods: {
close(){
this.$router.push('/index/list/')
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{ .box{
display: flex; display: flex;
min-width: 1300px; min-width: 1300px;
min-height: 100%; height: 80vh;
// overflow: hidden; overflow: auto;
.nav{ .nav{
width: 270px; width: 270px;
border-top-left-radius: 20px; border-top-left-radius: 20px;
@ -63,13 +68,28 @@ export default {
} }
.manage-layout{ .manage-layout{
width: calc(100% - 270px); width: calc(100% - 270px);
background: #fff;
display: flex;
flex-direction: column;
.top{
height: 50px;
font-size: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
color: #000;
background: #e6e6e6;
border-top-right-radius: 20px;
i{
margin-right: 10px;
cursor: pointer;
}
}
.manage-content{ .manage-content{
height: calc(100vh - 80px);
padding: 24px 24px 0; padding: 24px 24px 0;
overflow: auto; flex: 1;
.view{ position: relative;
min-height: calc(100% - 60px);
}
} }
} }
} }

160
src/pages/manage/list/client/consumerClient.vue
Unescape View File

@ -1,7 +1,95 @@
// 个人客户 // 个人客户
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="title">
<p>客户信息</p>
<i class="el-icon-arrow-right"></i>
<p>个人客户信息建立</p>
</div>
<div class="body">
<el-row :gutter="20">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="1">
<el-form-item label="证件类型">
<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-date-picker
v-model="form.value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</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>
<div class="idCard">
<p>请刷身份证</p>
</div>
</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-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-col>
</el-form>
</el-row>
</div>
<el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button>
<el-dialog
style="margin-top:10vh"
:visible.sync="visible"
:modal="false"
width="40%"
:close-on-click-modal="false"
:show-close="false"
custom-class="data-dia"
>
<div slot="title" class="dia-header">
<div class="data-title">提交</div>
</div>
<div class="popBody">
<h2>本业务需要授权</h2>
</div>
<div class="popBtns">
<el-button class="close btn" @click="visible = false">取 消</el-button>
<el-button class="sure btn" type="primary" @click="visible = false">确 定</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
@ -11,6 +99,13 @@ export default {
name: 'index', name: 'index',
data() { data() {
return { return {
form:{
},
visible:false,
options:[]
} }
}, },
@ -24,5 +119,64 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{
</style> width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.title{
height: 60px;
display: flex;
align-items: center;
font-size: 20px;
padding-left: 50px;
}
.body{
margin-top: 50px;
.idCard{
border-radius: 5px;
background: #CFDDFF;
text-align: center;
height: 68px;
line-height: 68px;
font-size: 18px;
color: #6191FF;
}
}
.submitBtn{
position: absolute;
width: 300px;
font-size: 18px;
height: 68px;
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>

2
src/pages/manage/list/client/corporateClient.vue
Unescape View File

@ -1,7 +1,7 @@
// 企业客户 // 企业客户
<template> <template>
<div class="wrap"> <div class="wrap">
<p>公司客户</p>
</div> </div>
</template> </template>

164
src/pages/manage/list/personal/currentAccount.vue
Unescape View File

@ -1,7 +1,99 @@
// 活期业务 // 活期业务
// 个人客户
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="title">
<p>客户信息</p>
<i class="el-icon-arrow-right"></i>
<p>个人客户信息建立</p>
</div>
<div class="body">
<el-row :gutter="20">
<el-form ref="form" :model="form" label-width="120px">
<el-col :span="10" :offset="1">
<el-form-item label="证件类型">
<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-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>
<div class="idCard">
<p>请刷身份证</p>
</div>
</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-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-col>
</el-form>
</el-row>
</div>
<el-button @click="visible=true" type="primary" class="submitBtn">提交</el-button>
<el-dialog
style="margin-top:10vh"
:visible.sync="visible"
:modal="false"
width="40%"
:close-on-click-modal="false"
:show-close="false"
custom-class="data-dia"
>
<div slot="title" class="dia-header">
<div class="data-title">提交</div>
</div>
<div class="popBody">
<h2>本业务需要授权</h2>
</div>
<div class="popBtns">
<el-button class="close btn" @click="visible = false">取 消</el-button>
<el-button class="sure btn" type="primary" @click="visible = false">确 定</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
@ -11,6 +103,13 @@ export default {
name: 'index', name: 'index',
data() { data() {
return { return {
form:{
},
visible:false,
options:[]
} }
}, },
@ -24,5 +123,64 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{
</style> width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.title{
height: 60px;
display: flex;
align-items: center;
font-size: 20px;
padding-left: 50px;
}
.body{
margin-top: 50px;
.idCard{
border-radius: 5px;
background: #CFDDFF;
text-align: center;
height: 68px;
line-height: 68px;
font-size: 18px;
color: #6191FF;
}
}
.submitBtn{
position: absolute;
width: 300px;
font-size: 18px;
height: 68px;
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>

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

@ -1,5 +1,5 @@
<template> <template>
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#313540" text-color="#fff" active-text-color="#fff" unique-opened> <el-menu class="sidebar-el-menu" :default-active="onRoutes" router background-color="#313540" text-color="#fff" active-text-color="#ffd04b" unique-opened>
<template v-for="item in menus"> <template v-for="item in menus">
<template v-if="item.children"> <template v-if="item.children">
<el-submenu :index="item.index" :key="item.index"> <el-submenu :index="item.index" :key="item.index">
@ -189,6 +189,7 @@ export default {
.sidebar-el-menu:not(.el-menu--collapse) { .sidebar-el-menu:not(.el-menu--collapse) {
width: 100%; width: 100%;
border: 0; border: 0;
border-bottom-left-radius: 20px;
} }
.sidebar > ul { .sidebar > ul {
height: 100%; height: 100%;

18
src/styles/layout/index.scss
Unescape View File

@ -13,4 +13,20 @@ body {
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
font-size: 14px; font-size: 14px;
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
} }
#app .body{
.el-input .el-input__inner{
border: 2px solid #EDEDED;
height: 68px!important;
font-size: 18px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner,.el-select{
width: 100%;
}
.el-form-item__label{
line-height: 68px;
font-size: 18px;
}
}
Write Preview
Loading…
Cancel
Save