newBank/code/vue/vue3.2/src/views/business.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="/three-bt-enterprise" 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-nav control-bottom clearfix">
                    <!-- 版心 -->
                    <!-- 上盒子 -->
                    <div class="main-top">
                        <form action="#" method="post" id="queryForm">
                            <div class="check1">
                                <p>
                                    企业编号：
                                    <input type="text" id="customer-id" name="customer_id" class="query-input">
                                </p>
                            </div>
                            <div class="check2">
                                <p>
                                    负责人身份证号：
                                    <input type="text" id="id-card" name="id_card" class="query-input">
                                </p>
                            </div>
                            <div class="check3">
                                <button type="submit" class="query-button">查询</button>
                            </div>
                        </form>
                    </div>
                    <hr>
                    <!-- 下盒子开始 -->
                    <div class="main-bottom">
                        <form action="#" id="applyForm">
                            <!-- 盒子一 -->
                            <div class="box1">
                                <div class="b1">
                                    <p>
                                        企业编号：
                                        <input type="text" id="b1-id" name="b1_id" class="b-input">
                                    </p>
                                </div>
                                <div class="b2">
                                    <p>
                                        证件类型：
                                        <select id="b2-id" name="b2_id">
                                            <option value="1">中国居民身份证</option>
                                            <option value="2">港澳居民身份证</option>
                                            <option value="3">台湾居民通行证</option>
                                            <option value="4">外籍居住证</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="b3">
                                    <p>
                                        负责人姓名：
                                        <input type="text" id="b3-id" name="b3_id" class="b-input">
                                    </p>
                                </div>
                            </div>

                            <!-- 盒子二 -->
                            <div class="box2">
                                <div class="b4">
                                    <p>
                                        企业名称：
                                        <input type="text" id="b4-id" name="b4_id" class="b-input">
                                    </p>
                                </div>
                                <div class="b5">
                                    <p>
                                        证 件 号 ：
                                        <input type="text" id="b6-id" name="b6_id" class="b-input">
                                    </p>
                                </div>
                                <div class="b6">
                                    <p>
                                        负责人性别：
                                        <select id="b5-id" name="b5_id">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </p>
                                </div>
                            </div>

                            <!-- 盒子三 -->
                            <div class="box3">
                                <div class="b7">
                                    <p>
                                        地址：
                                        <textarea id="b7-id" name="b7_id" class="b7-input"
                                         style="width: clamp(500px,10vw,1000px);
                                        height: clamp(2.5rem,3.5vw,5rem);" ></textarea>
                                    </p>
                                </div>
                                <div class="b7-2"></div>
                            </div>

                            <!-- 盒子四 -->
                            <div class="box4">
                                <div class="b8">
                                    <p>
                                        贷款类型：
                                        <select id="b8-id" name="b8_id">
                                            <option value="1">住房类</option>
                                            <option value="2">消费类</option>
                                            <option value="3">经营类</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="b9">
                                    <p>
                                        贷款银行：
                                        <select id="b9-id" name="b9_id">
                                            <option value="1">工商银行</option>
                                            <option value="2">农业银行</option>
                                            <option value="3">建设银行</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="b10">
                                    <p>
                                        贷款金额：
                                        <input type="text" id="b10-id" name="b10_id" class="b-input">
                                    </p>
                                </div>
                            </div>

                            <!-- 盒子五 -->
                            <div class="box5">
                                <div class="b11">
                                    <p>
                                        贷款期限：
                                        <select id="b11-id" name="b11_id">
                                            <option value="1">短期贷款</option>
                                            <option value="2">1-5年贷款</option>
                                            <option value="3">5年以上贷款</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="b12">
                                    <p>
                                        是否材料齐全：
                                        <select id="b12-id" name="b12_id">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="b13">
                                    <p>
                                        还款类型：
                                        <select id="b13-id" name="b13_id">
                                            <option value="1">等额本息</option>
                                            <option value="2">等额本金</option>
                                            <option value="3">一次性还本付息</option>
                                        </select>
                                    </p>
                                </div>
                            </div>
                            <div class="box6">
                                <div class="b14">
                                    <button type="submit" class="apply-button">提交申请</button>
                                </div>
                            </div>
                        </form>
                    </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 scoped>
input{
    border: 1px solid #817f8d;
    width: clamp(200px,4vw,400px);
    height: clamp(30px,0.6vw,60px);
    vertical-align: middle;
}
p{
    color: #52505a;
    font-family: "Alibaba PuHuiTi";
    font-size: clamp(1rem, 1.5vw, 2rem);
    font-style: normal;
    color: #52505a;
}
select{
    width: clamp(207px,4.14vw,414px);
    height: clamp(32px,0.64vw,64px);
}
input{
    padding-left: 5px;
}
textarea{
    resize: none;
}
button:active{
    background-color: #817f8d;
}
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 .main-top>form{
    display: flex;
}
.main>.main-box>.control .main-top div{
    flex: 1;
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-top .check1{
    justify-content: end;
}
.main>.main-box>.control .main-top .check2{
    justify-content: center;
}
.main>.main-box>.control .main-top .check3{
    justify-content: start;
    align-items: center;
}
.main>.main-box>.control .main-top div>button{
    width: clamp(70px,1.4vw,140px);
    height: clamp(32px,1.14vw,64px);
    border: 1px solid #817f8d;
}

/* 上盒子结束 */

/* 下盒子开始 */
/* 1 */
.main>.main-box>.control .main-bottom>form>.box1{
    display: flex;
}
.main>.main-box>.control .main-bottom .box1>div{
    flex: 1;
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-bottom .box1>.b1{
    justify-content: end;
}
.main>.main-box>.control .main-bottom .box1>.b2{
    justify-content: center;
}
.main>.main-box>.control .main-bottom .box1>.b3{
    justify-content: start;
}
/* 1 */
/* 2 */
.main>.main-box>.control .main-bottom>form>.box2{
    display: flex;
}
.main>.main-box>.control .main-bottom .box2>div{
    flex: 1;
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-bottom .box2>.b4{
    justify-content: end;
}
.main>.main-box>.control .main-bottom .box2>.b5{
    justify-content: center;
}
.main>.main-box>.control .main-bottom .box2>.b6{
    justify-content: start;
}
/* 2 */
/* 3 */
.main>.main-box>.control .main-bottom>form>.box3{
    display: flex;
}
.main>.main-box>.control .main-bottom .box3>div{
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-bottom .box3>.b7{
    justify-content: center;
    flex: 2;
}
.main>.main-box>.control .main-bottom .box3>.b7 textarea{
    vertical-align: middle;
    font-size: 20px;
}
.main>.main-box>.control .main-bottom .box3>.b7-2{
    flex: 1;
    justify-content: start;
}
/* 3 */
/* 4 */
.main>.main-box>.control .main-bottom>form>.box4{
    display: flex;
}
.main>.main-box>.control .main-bottom .box4>div{
    flex: 1;
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-bottom .box4>.b8{
    justify-content: end;
}
.main>.main-box>.control .main-bottom .box4>.b9{
    justify-content: center;
}
.main>.main-box>.control .main-bottom .box4>.b10{
    justify-content: start;
}
/* 4 */
/* 5 */
.main>.main-box>.control .main-bottom>form>.box5{
    display: flex;
}
.main>.main-box>.control .main-bottom .box5>div{
    flex: 1;
    padding-top: clamp(20px,0.4vw,40px);
    padding-bottom: clamp(20px,0.4vw,40px);
    display: flex;
}
.main>.main-box>.control .main-bottom .box5>.b11{
    justify-content: end;
}
.main>.main-box>.control .main-bottom .box5>.b12{
    justify-content: center;
}
.main>.main-box>.control .main-bottom .box5>.b113{
    justify-content: start;
}
/* 5 */
/* 6 */
.main>.main-box>.control .main-bottom .box6{
    text-align: center;
}
.main>.main-box>.control .main-bottom .box6 button{
    width: clamp(130px,2.6vw,260px);
    height: clamp(60px,1.2vw,120px);
    font-size: clamp(25px,0.5vw,50px);
    border: 1px solid #817f8d;
    color: #434244;
}
/* 6 */


/* 弹窗样式 */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(175, 242, 202);
    /* 增大内边距，让内容与边框距离更远 */
    padding: 30px;
    /* 增大宽度 */
    width: 450px;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.popup-content {
    max-height: 400px;
    overflow-y: auto;
    text-align: left; /* 文本水平左对齐 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 元素在主轴（垂直方向）上从起始位置开始排列 */
    align-items: flex-start; /* 元素在交叉轴（水平方向）上从起始位置开始排列 */
    font-size: 30px;
    /* font-weight: bold; */
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    /* 设置关闭按钮的字体大小 */
    font-size: 24px;
}

/* 按钮容器样式 */
.popup-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* 提交按钮样式 */
.popup-submit {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

/* 取消按钮样式 */
.popup-cancel {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 提交成功弹窗样式 */
.success-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(202, 248, 192);
    /* 增大内边距，让内容与边框距离更远 */
    padding: 70px;
    /* 增大宽度 */
    width: 650px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(10, 10, 10, 0.97);
    z-index: 1100;
    /* font-weight: bold; */

}
</style>