newBank/code/vue/vue3.2/src/views/three-bt-people.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">
                        <router-link to="/loan-system" class="leftfix">
                            <img src="../image/返回2.png"
                            alt="">回到上一个页面
                        </router-link>
                    </div>
                    <div class="top2 leftfix">
                        <span>个人贷款</span>
                    </div>
                    <div class="top3 leftfix"></div>
                </div>
                <!-- 主内容框架 -->
                <div class="main-content control-bottom">
                    <!-- 第一块 -->
                    <div class="content-block-1">
                        <div class="apply-img">
                        </div>
                        <router-link to="/apply" target="_blank"><button type="button">申请贷款</button></router-link>
                    </div>
                    <!-- 第二块 -->
                    <div class="content-block-1">
                        <img src="../image/ic_pay.svg" class="image" alt="贷款审评图标">
                        <router-link to="/personal-approval" target="_blank"><button type="button">贷款审批</button></router-link>
                    </div>
                    <!-- 第三块 -->
                    <div class="content-block-1">
                        <img src="../image/zfb_nav6.svg" class="image" alt="放款图标">
                        <router-link to="/lending" target="_blank"><button type="button">放款</button></router-link>
                    </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>.main-content{
    display: flex;
    width: 100%;
    overflow: auto;
}
.main>.main-box>.control>.main-content>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.main>.main-box>.control>.main-content>div>img{
    width: clamp(200px,4vw,400px);
    height: clamp(200px,4vw,400px);
    border-radius: clamp(100px,2vw,200px);
    /* 图片和按钮之间添加间距 */
    margin-bottom: 50px; 
}
.main>.main-box>.control>.main-content .apply-img{
    width: clamp(200px,4vw,400px);
    height: clamp(200px,4vw,400px);
    border-radius: clamp(100px,2vw,200px);
    /* 图片和按钮之间添加间距 */
    margin-bottom: 50px; 
    background-image: url(../image/zfb_nav15_more.svg);
    background-size: clamp(225px,4.5vw,450px) clamp(150px,3vw,300px);
    background-position: center;
    background-repeat: no-repeat;
}
/* .main>.main-box>.control>.main-content .apply-img>img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(225px,4.5vw,450px);
    height: clamp(150px,3vw,300px);
} */
/* .main>.main-box>.control>.main-content>div:first-child>img{
    width: clamp(225px,4.5vw,450px);
    height: clamp(150px,3vw,300px);
    border-radius: clamp(50px,1vw,100px);
}
.main>.main-box>.control>.main-content>div:first-child>button{
    
} */
.content-block-1 button {
    /* 按钮内边距 */
    padding: 12px 20px; 
    /* 按钮背景颜色 */
    background-color: #4CAF50; 
    /* 去除按钮边框 */
    border: none; 
    /* 按钮圆角 */
    border-radius: 4px; 
    /* 鼠标悬停时显示指针样式 */
    cursor: pointer; 
    /* 让按钮宽度充满内容块 */
    width: clamp(200px,4vw,400px); 
    /* 按钮过渡效果 */
    transition: background-color 0.3s ease; 
    color: white; 
}
/* 按钮悬停效果 */
.content-block-1 button:hover {
    background-color: #45a049; 
}
</style>