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: 178px" 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="00">
            <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="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible">
            <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:this.$store.state.layout.fullScreen,// 是否全屏显示--未写完
        };
    },
    computed: {
        full: function () {
            console.log(this.$store.state.layout.fullScreen, '当前full');
            return this.$store.state.layout.fullScreen;
        }
    },
    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: 0.9;
        }
    }
    .bg {
        top: 0;
        left: 0;
        // width: 100%;
        height: calc(100vh - 60px);
    }

    // 1920
    @media screen and (min-width: 1920px) {
        .counter {
            top: 116px;
            left: 357px;
            width: 1555px;
        }
        .glass {
            top: -145px;
            left: 964px;
            width: 855px;
        }
        .employee {
            top: 371px;
            left: 920px;
            width: 388px;
        }
        .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;
        }
        .el-tooltip__popper.sth-popper {
            padding: 0;
            // background-color: transparent;
            background-color: #fff;
            img {
                height: 78px;
            }
            .popper__arrow {
                display: none;
            }
        }
    }
    // 1440-1550
    @media screen and (max-width: 1550px) {
        .counter {
            top: 35%;
            left: 10%;
            height: 61vh;
        }
        .glass {
            // 玻璃窗
            top: 185px;
            left: 716px;
            width: 690px;
        }

        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 617px;
            left: 610px;
            width: 333px;
            position: relative;
        }
        .employeeText {
            // 资料文字
            position: absolute;
            top: 746px;
            left: 925px;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
        }
        .man {
            // 人
            top: 278px;
            left: 1075px;
            width: 267px;
        }
        .money-box {
            // 钱箱
            top: 637px;
            left: 195px;
            width: 164px;
        }
        .important {
            // 重空箱
            top: 621px;
            left: 314px;
            width: 149px;
        }
        .voucher-box {
            // 普通箱
            top: 482px;
            left: 434px;
            width: 134px;
        }
        .summons {
            // 传票栏
            top: 500px;
            left: 548px;
            width: 112px;
        }
        .computer {
            top: 395px;
            left: 652px;
            width: 170px;
        }
        .card-machine {
            top: 596px;
            left: 800px;
            width: 100px;
        }
        .idCard-scanner {
            top: 656px;
            left: 861px;
            width: 100px;
        }
        .seal-box {
            top: 680px;
            left: 966px;
            width: 86px;
        }
        .currency-detector {
            top: 693px;
            left: 1035px;
            width: 142px;
        }
        .printer {
            top: 758px;
            left: 1162px;
            width: 187px;
        }
        .cipher-machine {
            top: 551px;
            left: 977px;
            width: 122px;
        }
    }
    // 1550-1919
    @media screen and (min-width: 1550px) and (max-width: 1919px) {
        .counter {
            top: 33%;
            left: 8%;
            height: 63vh;
        }
        .glass {
            // 玻璃窗
            top: 185px;
            left: 716px;
            width: 690px;
        }

        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 617px;
            left: 610px;
            width: 333px;
            position: relative;
        }
        .employeeText {
            // 资料文字
            position: absolute;
            top: 739px;
            left: 925px;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
        }
        .man {
            // 人
            top: 278px;
            left: 1075px;
            width: 267px;
        }
        .money-box {
            // 钱箱
            top: 628px;
            left: 195px;
            width: 164px;
        }
        .important {
            // 重空箱
            top: 606px;
            left: 312px;
            width: 149px;
        }
        .voucher-box {
            // 普通箱
            top: 474px;
            left: 429px;
            width: 134px;
        }
        .summons {
            // 传票栏
            top: 496px;
            left: 548px;
            width: 112px;
        }
        .computer {
            top: 381px;
            left: 654px;
            width: 170px;
        }
        .card-machine {
            top: 583px;
            left: 800px;
            width: 100px;
        }
        .idCard-scanner {
            top: 640px;
            left: 867px;
            width: 100px;
        }
        .seal-box {
            top: 667px;
            left: 966px;
            width: 86px;
        }
        .currency-detector {
            top: 676px;
            left: 1036px;
            width: 142px;
        }
        .printer {
            top: 747px;
            left: 1162px;
            width: 187px;
        }
        .cipher-machine {
            top: 551px;
            left: 977px;
            width: 122px;
        }
    }
    .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 0.5s;
        }
        &:hover {
            opacity: 0.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 0.5s;
        background-color: rgba(255, 255, 255, 0.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: 0.9;
            }
        }
    }
}
.system {
    margin-top: -8vh;
    position: absolute;
    top: 12%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
    width: 1280px;
}
.fullScreenSystem {
    width: 100vw;
    margin-top: 0;
    position: absolute;
    top: 0%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
}
/deep/ .view .el-dialog__body {
    padding: 0 !important;
}
</style>