newBank/code/vue/vue3.2/src/views/loan-system.vue

<template>
        <!-- 头部框架 -->
        <div class="fra-head clearfix">
        <!-- 左边银行、图标 -->
        <div class="fra-head-left leftfix">
            <div class="left-box clearfix">
                <div class="box-img leftfix"></div>
                <div class="box-word leftfix">
                    <span>X X 银行</span>
                </div>
            </div>
        </div>
        <!-- 右边头像、退出键 -->
        <div class="fra-head-right rightfix">
            <div class="right-box clearfix">
                <span>李艺彤</span>
                <div class="box-img"></div>
                <router-link to="/" target="_blank"><button id="exit-button" @click="handleLogout"></button></router-link>
            </div>
        </div>
    </div>
    <!-- 主页面框架 -->
    <div class="main clearfix">
        <!-- 左边信息栏 -->
        <div class="information leftfix">
            <ul class="clearfix">
                <li class="infor-right">12221119</li>
                <li>工号</li>
                <li class="infor-right">李艺彤</li>
                <li>姓名</li>
                <li class="infor-right">管理员</li>
                <li>权限</li>

            </ul>
        </div>
        <!-- 大页面 -->
        <div class="main-box leftfix">
            <!-- 控制页面 -->
            <div class="control">
                <!-- 返回和标题 -->
                <div class="control-top clearfix">
                    <div class="top1 leftfix">
                        <a href="#" class="leftfix"><img src="../image/返回2.png" alt="">回到上一个页面</a>
                    </div>
                    <div class="top2 leftfix">
                        <span>贷款系统</span>
                    </div>
                    <div class="top3 leftfix"></div>
                </div>
                <!-- 主内容框架 -->
                <div class="loan-four control-bottom clearfix">
                    <div class="check leftfix">
                        <div class="item">
                            <router-link to="/chaxun" target="_blank">
                                <button class="box1"></button>
                            </router-link>
                            <p>贷款查询</p>
                        </div>
                    </div>
                    <div class="person leftfix">
                        <div class="item">
                            <router-link to="/three-bt-people" target="_blank">
                                <button class="box2"></button>
                            </router-link>
                            <p>个人贷款</p>
                        </div>
                    </div>
                    <div class="enterprise leftfix">
                        <div class="item">
                            <router-link to="/three-bt-enterprise" target="_blank">
                                <button class="box3"></button>
                            </router-link>
                            <p>企业贷款</p>
                        </div>
                    </div>
                    <div class="pay-back leftfix">
                        <div class="item">
                            <router-link to="/pay-back" target="_blank">
                                <button class="box4"></button>
                            </router-link>
                            <p>还款</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部时间栏 -->
            <div class="bottom-time clearfix">
                <div id="time">{{ timeStr }}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                timeStr: ''
            };
        },
        mounted() {
            this.updateTime();
            this.timer = setInterval(this.updateTime, 1000);
        },
        beforeUnmount() {
            clearInterval(this.timer);
        },
        methods: {
            updateTime() {
                const date = new Date();
                let h = date.getHours().toString().padStart(2, '0');
                let m = date.getMinutes().toString().padStart(2, '0');
                let s = date.getSeconds().toString().padStart(2, '0');
                this.timeStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}`;  // 数据驱动视图更新‌:ml-citation{ref="1,2" data="citationList"}
            },
            handleLogout() {
                alert('你已退出系统');
            }
        }
    }
</script>


<style>
.main>.main-box>.control>.loan-four{
    display: flex;
    width: 100%;
    overflow: auto;
}
.main>.main-box>.control>.loan-four>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main>.main-box>.control>.loan-four>div button{
    width: clamp(200px,4vw,400px);
    height: clamp(200px,4vw,400px);
    background-color: rgb(177, 247, 247);
    border-radius: clamp(100px,2vw,200px);
}
.main>.main-box>.control>.loan-four>div button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.main>.main-box>.control>.loan-four .item{
    text-align: center;
}
.main>.main-box>.control>.loan-four .box1{
    background-image: url(../image/zfb_head_search.svg);
    background-size: clamp(180px,3.6vw,360px) clamp(180px,3.6vw,360px);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}
.main>.main-box>.control>.loan-four .box2{
    background-image: url(../image/zfb_tab_me.svg);
    background-size: clamp(180px,3.6vw,360px) clamp(180px,3.6vw,360px);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}
.main>.main-box>.control>.loan-four .box3{
    background-image: url(../image/ic_dianpu.svg);
    background-size: clamp(180px,3.6vw,360px) clamp(180px,3.6vw,360px);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}
.main>.main-box>.control>.loan-four .box4{
    background-image: url(../image/zfb_tab_money.svg);
    background-size: clamp(180px,3.6vw,360px) clamp(180px,3.6vw,360px);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}
.main>.main-box>.control>.loan-four .item>p{
    font-size: clamp(30px,0.6vw,60px);
}

</style>