FE_bankTeaching/src/pages/counter/list/index.vue

<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="">
        <p class="employeeText">资料</p>
        <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="fullScreen?'':'system'" :style="fullScreen?'margin-top:10vh':'margin-top:-8vh'" v-if="manageVisible" :width="fullScreen?'100vw':'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: [],
            fullScreen: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
        }
    
    },
    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;
            position: relative;
        }
        .employeeText{
            position: absolute;
            top: 541px;
            left: 1263px;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
        }
        
        .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>