|
|
<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> |
