柜台系统

src/layouts/home/index.vue

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

src/pages/index/list/index.vue

@@ -124,9 +124,9 @@
                 <button type="button">确定</button>
             </div>
         </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>
-        </el-dialog>
+        </div>
 
     </div>
 </template>
@@ -150,7 +150,8 @@ export default {
     },
     watch: {
         '$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
             }else{
                 this.manageVisible = false
@@ -158,10 +159,13 @@ export default {
         }
     },
     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
+        }else{
+            this.manageVisible = false
         }
+    
     },
     mounted() {
         
@@ -186,7 +190,7 @@ export default {
         // 展示系统管理
         showManage(){
             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>
     .wrap{
-        // position: relative;
+        position: relative;
-        // min-height: calc(100vh - 68px);
+        width: 100%;
-
+        height: calc(100vh - 68px);
+        overflow: hidden;
         .sth{
             position: absolute;
             &.cp{
@@ -348,6 +353,7 @@ export default {
     }
     /deep/.data-dia{
         border-radius: 16px;
+        margin-top: 11vh!important;
         .el-dialog__header{
             padding: 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>

src/pages/manage/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="box">
         <div class="nav">
             <div class="top">
                 <p style="margin:auto">商业银行系统</p>
@@ -7,6 +7,9 @@
             <navbar class="body"></navbar>
         </div>
         <div class="manage-layout">
+            <div class="top">
+                <i @click="close" class="el-icon-close"></i>
+            </div>
             <div class="manage-content">
                 <router-view class="manage-view"></router-view>
             </div>
@@ -27,21 +30,23 @@ export default {
     components: {
         navbar,
     },
-    mounted() {
+    created() {
         
     },
     methods: {
-        
+        close(){
+            this.$router.push('/index/list/')
+        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-    .wrap{
+    .box{
         display: flex;
         min-width: 1300px;
-        min-height: 100%;
+        height: 80vh;
-        // overflow: hidden;
+        overflow: auto;
         .nav{
             width: 270px;
             border-top-left-radius: 20px;
@@ -63,13 +68,28 @@ export default {
         }
         .manage-layout{
             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{
-                height: calc(100vh - 80px);
                 padding: 24px 24px 0;
-                overflow: auto;
+                flex: 1;
-                .view{
+                position: relative;
-                    min-height: calc(100% - 60px);
-                }
             }
         }
     }

src/pages/manage/list/client/consumerClient.vue

@@ -1,7 +1,95 @@
 // 个人客户
 <template>
     <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>
 </template>
 
@@ -11,6 +99,13 @@ export default {
     name: 'index',
     data() {
         return {
+            form:{
+
+            },
+            visible:false,
+            options:[]
+
+
             
         }
     },
@@ -24,5 +119,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    
+    .wrap{
+        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>

src/pages/manage/list/client/corporateClient.vue

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

src/pages/manage/list/personal/currentAccount.vue

@@ -1,7 +1,99 @@
 // 活期业务
+// 个人客户
 <template>
     <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>
 </template>
 
@@ -11,6 +103,13 @@ export default {
     name: 'index',
     data() {
         return {
+            form:{
+
+            },
+            visible:false,
+            options:[]
+
+
             
         }
     },
@@ -24,5 +123,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    
+    .wrap{
+        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>

src/pages/manage/navbar/index.vue

@@ -1,5 +1,5 @@
 <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-if="item.children">
                 <el-submenu :index="item.index" :key="item.index">
@@ -189,6 +189,7 @@ export default {
     .sidebar-el-menu:not(.el-menu--collapse) {
         width: 100%;
         border: 0;
+        border-bottom-left-radius: 20px;
     }
     .sidebar > ul {
         height: 100%;

src/styles/layout/index.scss

@@ -14,3 +14,19 @@ body {
     font-size: 14px;
     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;
+    }
+    
+}