You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

177 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/assets/css/element-ui.css">
</head>
<body>
<div id="app">
<el-container>
<el-header class="page-header">
<!-- <div class="page-logo">logo</div>-->
<div class="page-title">确认投标</div>
</el-header>
<el-main>
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="24">
<div class="warning-row">
<div class="warning-label">温馨提示</div>
<div class="warning-content">
<div class="warning-item">尊敬的投保企业,投保时还请注意</div>
<div class="warning-item">1. 检查企业信息及开票信息是否有误</div>
<div class="warning-item">2. 第一次申请保函的企业如发现金额不正确请取消订单后重新下单即可,感谢您的信任。</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="24">
<el-descriptions title="投保人信息" :column="2">
<el-descriptions-item label="企业名称">kooriookami</el-descriptions-item>
<el-descriptions-item label="统一社会信用代码">18100000000</el-descriptions-item>
<el-descriptions-item label="联系人姓名">苏州市</el-descriptions-item>
<el-descriptions-item label="联系人手机号">苏州市</el-descriptions-item>
<el-descriptions-item label="开户行(基本户)">测试</el-descriptions-item>
<el-descriptions-item label="银行账号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="24">
<el-descriptions title="项目信息" :column="2">
<el-descriptions-item label="企业名称">kooriookami</el-descriptions-item>
<el-descriptions-item label="统一社会信用代码">18100000000</el-descriptions-item>
<el-descriptions-item label="联系人姓名">苏州市</el-descriptions-item>
<el-descriptions-item label="联系人手机号">苏州市</el-descriptions-item>
<el-descriptions-item label="开户行(基本户)">测试</el-descriptions-item>
<el-descriptions-item label="银行账号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="12">
<el-descriptions title="保函信息" :column="1">
<el-descriptions-item label="企业名称">kooriookami</el-descriptions-item>
<el-descriptions-item label="统一社会信用代码">18100000000</el-descriptions-item>
<el-descriptions-item label="联系人姓名">苏州市</el-descriptions-item>
<el-descriptions-item label="联系人手机号">苏州市</el-descriptions-item>
<el-descriptions-item label="开户行(基本户)">测试</el-descriptions-item>
<el-descriptions-item label="银行账号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="12">
<el-descriptions title="开票信息" :column="1">
<el-descriptions-item label="企业名称">kooriookami</el-descriptions-item>
<el-descriptions-item label="统一社会信用代码">18100000000</el-descriptions-item>
<el-descriptions-item label="联系人姓名">苏州市</el-descriptions-item>
<el-descriptions-item label="联系人手机号">苏州市</el-descriptions-item>
<el-descriptions-item label="开户行(基本户)">测试</el-descriptions-item>
<el-descriptions-item label="银行账号">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="24">
<div class="next-step-row">
<el-checkbox v-model="checked">确认并同意<el-link type="primary">《客户告知书》</el-link></el-checkbox>
<el-button type="primary">下一步</el-button>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="/assets/js/vue.js"></script>
<!-- import JavaScript -->
<script src="/assets/js/element-ui.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
<style>
body {
padding: 0px;
margin: 0px;
}
.page-header {
text-align: center;
border-bottom: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
/*.page-logo {
height: 100%;
width: 150px;
display: inline-block;
}*/
.page-title {
display: inline-block;
height: 100%;
line-height: 60px;
}
.el-descriptions {
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
padding: 20px 25px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.warning-row {
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
text-align: left;
height: 80px;
line-height: 80px;
}
.warning-label {
display: inline-block;
background-color: #409EFF;
color: #FFFFFF;
padding: 0px 20px;
top: -21px;
position: relative;
}
.warning-content {
display: inline-block;
margin-left: 10px;
height: 100%;
}
.warning-content .warning-item {
font-size: 13px;
line-height: 15px;
margin-top: 8px;
}
.next-step-row {
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
text-align: right;
height: 60px;
line-height: 60px;
}
.next-step-row button {
border-radius: 0px;
height: 60px;
width: 150px;
border: none;
}
</style>
</html>