|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <!-- 提交信息 -->
|
|
|
+ <HeaderNav headerText="提交信息"></HeaderNav>
|
|
|
+ <div class="commit-message">
|
|
|
+ <div class="message-name">
|
|
|
+ <div class="name-left">
|
|
|
+ <div class="left-text pf500 fs14 fc333333">法定名</div>
|
|
|
+ <div class="left-input">
|
|
|
+ <input type="text" class="input pf400 fs14 fc333333" placeholder="名" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="name-right">
|
|
|
+ <div class="left-text pf500 fs14 fc333333">法定姓</div>
|
|
|
+ <div class="left-input">
|
|
|
+ <input type="text" class="input pf400 fs14 fc333333" placeholder="姓" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-type">
|
|
|
+ <div class="card-text pf500 fs14 fc333333">证件类型</div>
|
|
|
+ <div class="type-select pf400 fs14 fc333333">
|
|
|
+ 身份证
|
|
|
+ <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-number">
|
|
|
+ <div class="card-text pf500 fs14 fc333333">证件号码</div>
|
|
|
+ <div class="number-input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="input pf400 fs14 fc333333"
|
|
|
+ placeholder="请输入证件号码" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-type">
|
|
|
+ <div class="card-text pf500 fs14 fc333333">所在地区</div>
|
|
|
+ <div class="type-select pf400 fs14 fc333333">
|
|
|
+ 请选择
|
|
|
+ <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address">
|
|
|
+ <div class="pf500 fs14 fc333333">详细地址</div>
|
|
|
+ <textarea
|
|
|
+ name=""
|
|
|
+ id=""
|
|
|
+ class="address-textarea pf400 fs14 fc333333"
|
|
|
+ placeholder="请输入"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="upload-card">
|
|
|
+ <div class="upload-title pf600 fs18 fc121212">上传证件照</div>
|
|
|
+ <div class="upload-desc pf400 fs14 fc999999">确保证件照清晰可见</div>
|
|
|
+ <div class="card-front">
|
|
|
+ <div class="desc1 pf400 fs12 fc999999">确保证件照清晰可见</div>
|
|
|
+ <div class="desc2 pf500 fs20 fc333333">身份证人像面</div>
|
|
|
+ <div class="btn pf600 fs14 fcFFFFFF">
|
|
|
+ 上传
|
|
|
+ <img src="../../../assets/icon/index/upload.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-back">
|
|
|
+ <div class="desc1 pf400 fs12 fc999999">确保证件照清晰可见</div>
|
|
|
+ <div class="desc2 pf500 fs20 fc333333">身份证国徽面</div>
|
|
|
+ <div class="btn pf600 fs14 fcFFFFFF">
|
|
|
+ 上传
|
|
|
+ <img src="../../../assets/icon/index/upload.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="upload-remarks pf500 fs12 fc999999">
|
|
|
+ 支持小于8M的JPG、JPGE或PNG格式的图片 <br />
|
|
|
+ 上传您身份证件的完整照片，<br />
|
|
|
+ 请确保上传图片中的所有细节都清晰可见 <br />
|
|
|
+ 请确保证件为原件并在有效期内 <br />
|
|
|
+ 请将证件置于纯色背景下 <br />
|
|
|
+ </div>
|
|
|
+ <div class="submit pf600 fs14 fcFFFFFF" @click="submit">提交</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import HeaderNav from "../components/HeaderNav.vue";
|
|
|
+ import { useRoute, useRouter } from "vue-router";
|
|
|
+
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const submit = () => {
|
|
|
+ router.push("/contractTerms");
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .commit-message {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 100px;
|
|
|
+ margin-top: 48px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .message-name {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .name-left,
|
|
|
+ .name-right {
|
|
|
+ width: 165px;
|
|
|
+
|
|
|
+ .left-text {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-input {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 165px;
|
|
|
+ height: 45px;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ padding-left: 11px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-type {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .type-select {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
+ padding: 0 11px;
|
|
|
+ width: 345px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-number {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .number-input {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 345px;
|
|
|
+ height: 45px;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ padding-left: 11px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .address-textarea {
|
|
|
+ padding-top: 13px;
|
|
|
+ padding-left: 11px;
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 345px;
|
|
|
+ height: 90px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-card {
|
|
|
+ margin-top: 18px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .upload-title {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-desc {
|
|
|
+ margin-top: 6px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-front,
|
|
|
+ .card-back {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 17px;
|
|
|
+ width: 345px;
|
|
|
+ height: 175px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ background: #f5f5f5;
|
|
|
+
|
|
|
+ .desc1 {
|
|
|
+ margin-top: 34px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc2 {
|
|
|
+ margin-top: 9px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 25px;
|
|
|
+ padding-left: 16px;
|
|
|
+ width: 88px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 64px;
|
|
|
+ background: #df384c;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-remarks {
|
|
|
+ margin-top: 15px;
|
|
|
+ width: 345px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0.2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ margin-top: 21px;
|
|
|
+ width: 311px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 100px;
|
|
|
+ background: #df384c;
|
|
|
+ letter-spacing: 0.2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
jhaoG
