首页模块完成

src/pages/bank/list/index.vue

@@ -0,0 +1,232 @@
+<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="">
+
+        <div class="case-dia" v-show="caseVisible">
+            <img src="@/assets/svg/close.svg" alt="" class="close" @click="caseVisible = false">
+            <ul class="tab">
+                <li :class="{active: caseType == 1}" @click="typeClick(1)">练习</li>
+                <li :class="{active: caseType == 2}" @click="typeClick(2)">考核</li>
+            </ul>
+
+            <div class="table">
+                <ul class="thead">
+                    <li class="serial">序号</li>
+                    <li class="name">项目案例名称</li>
+                    <li class="action">操作</li>
+                </ul>
+                <ul class="tbody">
+                    <li>
+                        <div class="serial">01</div>
+                        <div class="name">个人活期业务</div>
+                        <div class="action">
+                            <button type="button">开始</button>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'index',
+    data() {
+        return {
+            caseVisible: true,
+            caseType: 1
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        typeClick(id){
+            this.caseType = id
+        }
+    }
+};
+</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;
+        }
+    }
+    .case-dia{
+        position: absolute;
+        top: 200px;
+        left: 40px;
+        width: 600px;
+        background-color: #fff;
+        border-radius: 20px;
+        overflow: hidden;
+        .close{
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            cursor: pointer;
+        }
+        .tab{
+            display: flex;
+            background: url(../../../assets/img/case-tab-bg.png) 0 0 /auto 100% repeat-x;
+                    border-top-left-radius: 20px;
+                    border-top-right-radius: 20px;
+            li{
+                flex: 1;
+                line-height: 72px;
+                font-size: 24px;
+                text-align: center;
+                cursor: pointer;
+                &.active{
+                    background: #fff;
+                }
+            }
+        }
+        .table{
+            $serial-width: 20%;
+            $name-width: 50%;
+            .thead{
+                display: flex;
+                line-height: 60px;
+                border-bottom: 2px solid #F2F3F9;
+                li{
+                    text-align: center;
+                    font-size: 16px;
+                }
+                .serial{
+                    width: $serial-width;
+                }
+                .name{
+                    width: $name-width;
+                }
+                .action{
+                    flex: 1;
+                }
+            }
+            .tbody{
+                li{
+                    display: flex;
+                    padding: 15px 0;
+                    .serial{
+                        width: $serial-width;
+                        color: #5583FF;
+                        font-size: 20px;
+                        font-weight: bold;
+                        text-align: center;
+                    }
+                    .name{
+                        width: $name-width;
+                        font-size: 18px;
+                    }
+                    .action{
+                        flex: 1;
+                        text-align: center;
+                        button{
+                            padding: 0 30px;
+                            color: #fff;
+                            line-height: 36px;
+                            font-size: 18px;
+                            text-align: center;
+                            background-color: #5583FF;
+                            border: 0;
+                            border-radius: 18px;
+                            cursor: pointer;
+                            &:hover{
+                                opacity: .9;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

src/router/modules/bank.js

@@ -2,11 +2,11 @@ import BasicLayout from '@/layouts/home';
 
 const meta = {};
 
-const pre = 'data-';
+const pre = 'bank-';
 
 export default {
-    path: '/data',
+    path: '/bank',
-    name: 'data',
+    name: 'bank',
     redirect: {
         name: `${pre}list`
     },
@@ -16,8 +16,8 @@ export default {
         {
             name: `${pre}list`,
             path: `list`,
-            component: () => import('@/pages/data/list'),
+            component: () => import('@/pages/bank/list'),
-            meta: { title: '数据' }
+            meta: { title: '首页' }
         },
     ]
 };

src/router/modules/role.js

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

src/router/modules/setting.js

@@ -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: '个人中心' }
-        },
-    ]
-};

src/router/modules/stat.js

@@ -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: '数据统计' }
-        },
-    ]
-};

src/router/modules/user.js

@@ -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: '用户管理' }
-        },
-    ]
-};

src/router/routes.js

@@ -1,4 +1,5 @@
 import index from './modules/index'
+import bank from './modules/bank'
 
 import BasicLayout from '@/layouts/home'
 
@@ -14,6 +15,7 @@ const frameIn = [
         children: []
     },
     index,
+    bank
 ]
 
 /**