zhanghuiqing
/
OpenPlatForm
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
开放平台
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
1 提交
1 分支
1.1 MiB
 
 
 
目录树: 660933366a
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '660933366a'
${ noResults }
OpenPlatForm/pages/domain/control/registration/from.vue

751 行
23 KiB
原始文件 Blame 文件历史 

  1. <template>

  2.   <div class="from-box">

  3.     <div class="from-title">实名认证</div>

  4.     <div class="head-content">

  5.       <p class="content-p">开发者实名认证信息资料填写规范如下：</p>

  6.       <div class="content-div">

  7.         1. 保证所填写的全部信息真实且与实际信息对应，否则出示驳回意见。<br />

  8.         2.与入件资质相关字段填写正确，特别的：企业名称、注册地址、统一社会信用代码、营业期限、法人代表人姓名、证件号码、证件有效期要与上传的证件照片保持一致，否则出示驳回意见。<br />

  9.         3. 相关资质上传要求如下，如若不符，出示驳回意见。<br />

  10.         【1】图片清晰且边框完整；<br />

  11.         【2】提供资质附件如为复印件，须加盖公章。<br />

  12.       </div>

  13.       <img class="jinggao" src="@/static/icons/svg/jinggao.svg" alt="" />

  14.     </div>

  15. 

  16.     <div style="margin-top: 28px">

  17.       <el-form

  18.         label-position="top"

  19.         :model="realForm"

  20.         :rules="rules"

  21.         ref="realForm"

  22.         label-width="100px"

  23.         class="demo-ruleForm"

  24.         inline

  25.       >

  26.         <el-form-item label="公司/个人标识" prop="mark">

  27.           <el-radio-group v-model="realForm.mark">

  28.             <el-radio label="公司"></el-radio>

  29.             <el-radio label="个人"></el-radio>

  30.           </el-radio-group>

  31.           <div class="p-div">

  32.             公司认证能够获得更多功能和权限，建议进行公司认证

  33.           </div>

  34.         </el-form-item>

  35.         <el-form-item label="境内/境外标识" prop="resource">

  36.           <el-radio-group v-model="ruleForm.resource">

  37.             <el-radio label="境内"></el-radio>

  38.             <el-radio label="境外"></el-radio>

  39.           </el-radio-group>

  40.           <div class="p-div">暂不支持境外</div>

  41.         </el-form-item>

  42.         <!-- 个人资料填写 -->

  43.         <transition name="el-fade-in">

  44.           <div v-show="realForm.mark === '个人'" class="transition-box">

  45.             <el-form-item label="联系地址" prop="region">

  46.               <el-cascader :props="AddressProps" v-model="realForm.address1" placeholder="请选择您的联系地址"></el-cascader>

  47.             </el-form-item>

  48. 

  49.             <el-form-item style="padding-top: 40px" prop="name">

  50.               <el-input

  51.                 v-model="ruleForm.name"

  52.                 placeholder="请输入您的详细地址，以便有需要时给您寄送书面文件"

  53.               ></el-input>

  54.             </el-form-item>

  55. 

  56.             <el-form-item label="联系人姓名" required>

  57.               <el-input v-model="ruleForm.name"></el-input>

  58.             </el-form-item>

  59.             <el-form-item label="联系人证件类型" prop="region">

  60.               <el-select placeholder="请选择证件类型" v-model="ruleForm.name">

  61.                 <el-option

  62.                   v-for="(item, index) in certificate"

  63.                   :key="index"

  64.                   :label="item.name"

  65.                   :value="item.id"

  66.                 ></el-option>

  67.               </el-select>

  68.             </el-form-item>

  69. 

  70.             <el-form-item label="联系人证件号码" required>

  71.               <el-input v-model="ruleForm.name"></el-input>

  72.             </el-form-item>

  73. 

  74.             <el-form-item label="证件有效期" required>

  75.               <div class="picker-box">

  76.                 <el-form-item prop="date1">

  77.                   <el-date-picker

  78.                     type="date"

  79.                     placeholder="选择日期"

  80.                     v-model="ruleForm.date1"

  81.                   ></el-date-picker>

  82.                 </el-form-item>

  83. 

  84.                 <div class="line" :span="2" style="margin-right: 10px">至</div>

  85. 

  86.                 <el-form-item prop="date2">

  87.                   <el-date-picker

  88.                     type="date"

  89.                     placeholder="选择日期"

  90.                     v-model="ruleForm.date2"

  91.                   ></el-date-picker>

  92.                 </el-form-item>

  93.                 <div>

  94.                   <el-checkbox v-model="checked">长期</el-checkbox>

  95.                 </div>

  96.               </div>

  97. 

  98.               <div class="p-div1" style="float: left">

  99.                 请仔细核对，需与证件上的时间一致

  100.               </div>

  101.             </el-form-item>

  102.           </div>

  103.         </transition>

  104.         <!-- 企业资料填写 -->

  105. 

  106.         <transition name="el-fade-in">

  107.           <div v-show="realForm.mark === '公司'" class="transition-box">

  108.             <el-form-item label="企业登记类型" prop="mark">

  109.               <el-radio-group v-model="realForm.enterprise">

  110.                 <el-radio label="企业三证"></el-radio>

  111.                 <el-radio label="三证合一"></el-radio>

  112.               </el-radio-group>

  113.             </el-form-item>

  114.             <el-form-item

  115.               :label="

  116.                 realForm.enterprise === '企业三证'

  117.                   ? '营业执照注册号'

  118.                   : '统一社会信用代码'

  119.               "

  120.               required

  121.             >

  122.               <el-input

  123.                 v-model="ruleForm.name"

  124.                 :placeholder="

  125.                   realForm.enterprise === '企业三证'

  126.                     ? '请输入营业执照上的注册号'

  127.                     : '请输入营业执照上的统一社会信用代码并逐字核对'

  128.                 "

  129.               ></el-input>

  130.             </el-form-item>

  131. 

  132.             <el-form-item label="企业地址" prop="region">

  133.               <el-cascader :props="AddressProps" v-model="realForm.address2" placeholder="请选择省/市/区"></el-cascader>

  134.             </el-form-item>

  135. 

  136.             <el-form-item style="padding-top: 40px" prop="name">

  137.               <el-input

  138.                 v-model="ruleForm.name"

  139.                 placeholder="请输入营业执照上的公司地址并逐字核对"

  140.               ></el-input>

  141.             </el-form-item>

  142. 

  143.             <el-form-item label="企业名称" required>

  144.               <el-input

  145.                 v-model="ruleForm.name"

  146.                 placeholder="请输入营业执照上的企业名称并逐字核对"

  147.               ></el-input>

  148.             </el-form-item>

  149. 

  150.             <el-form-item label="企业简称" required>

  151.               <el-input

  152.                 v-model="ruleForm.name"

  153.                 placeholder="请输入企业简称"

  154.               ></el-input>

  155.             </el-form-item>

  156. 

  157.             <el-form-item label="营业执照" required

  158.               ><el-upload

  159.                 class="avatar-uploader"

  160.                 action="https://jsonplaceholder.typicode.com/posts/"

  161.                 :show-file-list="false"

  162.                 :on-success="handleAvatarSuccess"

  163.                 :before-upload="beforeAvatarUpload"

  164.               >

  165.                 <img v-if="imageUrl" :src="imageUrl" class="avatar" />

  166.                 <i

  167.                   v-else

  168.                   class="el-icon-plus avatar-uploader-icon"

  169.                 ></i> </el-upload

  170.             ></el-form-item>

  171. 

  172.             <el-form-item label="营业执照示例">

  173.               <div class="avatar-uploader">

  174.                 <img src="@/static/img/zhizhao.png" alt="" />

  175.               </div>

  176.             </el-form-item>

  177.             <el-form-item label="营业期限" required>

  178.               <div class="picker-box">

  179.                 <el-form-item prop="date1">

  180.                   <el-date-picker

  181.                     type="date"

  182.                     placeholder="选择日期"

  183.                     v-model="ruleForm.date1"

  184.                   ></el-date-picker>

  185.                 </el-form-item>

  186.                 <div class="line" :span="2" style="margin-right: 10px">至</div>

  187.                 <el-form-item prop="date2">

  188.                   <el-date-picker

  189.                     type="date"

  190.                     placeholder="选择日期"

  191.                     v-model="ruleForm.date2"

  192.                   ></el-date-picker>

  193.                 </el-form-item>

  194.                 <div>

  195.                   <el-checkbox v-model="checked">长期</el-checkbox>

  196.                 </div>

  197.               </div>

  198.               <div class="p-div1" style="float: left">

  199.                 请仔细核对，需与营业执照上的时间一致

  200.               </div>

  201.             </el-form-item>

  202.             <transition name="el-fade-in">

  203.               <!-- 企业三证 -->

  204.               <el-form-item

  205.                 label="组织机构代码"

  206.                 required

  207.                 v-show="realForm.enterprise === '企业三证'"

  208.               >

  209.                 <el-input

  210.                   v-model="ruleForm.name"

  211.                   placeholder="请输入9位组织机构代码"

  212.                 ></el-input>

  213.               </el-form-item>

  214.             </transition>

  215.             <transition name="el-fade-in">

  216.               <div v-show="realForm.enterprise === '企业三证'">

  217.                 <el-form-item label="组织机构代码证" required

  218.                   ><el-upload

  219.                     class="avatar-uploader"

  220.                     action="https://jsonplaceholder.typicode.com/posts/"

  221.                     :show-file-list="false"

  222.                     :on-success="handleAvatarSuccess"

  223.                     :before-upload="beforeAvatarUpload"

  224.                   >

  225.                     <img v-if="imageUrl" :src="imageUrl" class="avatar" />

  226.                     <i

  227.                       v-else

  228.                       class="el-icon-plus avatar-uploader-icon"

  229.                     ></i> </el-upload

  230.                 ></el-form-item>

  231.                 <el-form-item label="营业期限" required>

  232.                   <div class="picker-box">

  233.                     <el-form-item prop="date1">

  234.                       <el-date-picker

  235.                         type="date"

  236.                         placeholder="选择日期"

  237.                         v-model="ruleForm.date1"

  238.                       ></el-date-picker>

  239.                     </el-form-item>

  240. 

  241.                     <div class="line" :span="2" style="margin-right: 10px">

  242.                       至

  243.                     </div>

  244. 

  245.                     <el-form-item prop="date2">

  246.                       <el-date-picker

  247.                         type="date"

  248.                         placeholder="选择日期"

  249.                         v-model="ruleForm.date2"

  250.                       ></el-date-picker>

  251.                     </el-form-item>

  252.                     <div>

  253.                       <el-checkbox v-model="checked">长期</el-checkbox>

  254.                     </div>

  255.                   </div>

  256.                   <div class="p-div1" style="float: left">

  257.                     请仔细核对，需与营业执照上的时间一致

  258.                   </div>

  259.                 </el-form-item>

  260.               </div>

  261.             </transition>

  262. 

  263.             <div>

  264.               <el-form-item label="法人/实际控制人姓名" required>

  265.                 <el-input v-model="ruleForm.name"></el-input>

  266.               </el-form-item>

  267.               <el-form-item label="法人/实际控制人证件类型" prop="region">

  268.                 <el-select placeholder="请选择证件类型" v-model="ruleForm.name">

  269.                   <el-option

  270.                     v-for="(item, index) in certificate"

  271.                     :key="index"

  272.                     :label="item.name"

  273.                     :value="item.id"

  274.                   ></el-option>

  275.                 </el-select>

  276.               </el-form-item>

  277. 

  278.               <el-form-item label="请输入证件上的号码并确认核对" required>

  279.                 <el-input v-model="ruleForm.name"></el-input>

  280.               </el-form-item>

  281. 

  282.               <el-form-item label="证件有效期" required>

  283.                 <div class="picker-box">

  284.                   <el-form-item prop="date1">

  285.                     <el-date-picker

  286.                       type="date"

  287.                       placeholder="选择日期"

  288.                       v-model="ruleForm.date1"

  289.                     ></el-date-picker>

  290.                   </el-form-item>

  291. 

  292.                   <div class="line" :span="2" style="margin-right: 10px">

  293.                     至

  294.                   </div>

  295. 

  296.                   <el-form-item prop="date2">

  297.                     <el-date-picker

  298.                       type="date"

  299.                       placeholder="选择日期"

  300.                       v-model="ruleForm.date2"

  301.                     ></el-date-picker>

  302.                   </el-form-item>

  303.                   <div>

  304.                     <el-checkbox v-model="checked">长期</el-checkbox>

  305.                   </div>

  306.                 </div>

  307.                 <div class="p-div1" style="float: left">

  308.                   请仔细核对，需与营业执照上的时间一致

  309.                 </div>

  310.               </el-form-item>

  311.             </div>

  312.           </div>

  313.         </transition>

  314. 

  315.         <div class="upload-box">

  316.           <el-form-item label="证件照正面" required

  317.             ><el-upload

  318.               class="avatar-uploader"

  319.               action="https://jsonplaceholder.typicode.com/posts/"

  320.               :show-file-list="false"

  321.               :on-success="handleAvatarSuccess"

  322.               :before-upload="beforeAvatarUpload"

  323.             >

  324.               <img v-if="imageUrl" :src="imageUrl" class="avatar" />

  325.               <i

  326.                 v-else

  327.                 class="el-icon-plus avatar-uploader-icon"

  328.               ></i> </el-upload

  329.           ></el-form-item>

  330. 

  331.           <el-form-item label="证件照正面" required

  332.             ><el-upload

  333.               class="avatar-uploader"

  334.               action="https://jsonplaceholder.typicode.com/posts/"

  335.               :show-file-list="false"

  336.               :on-success="handleAvatarSuccess"

  337.               :before-upload="beforeAvatarUpload"

  338.             >

  339.               <img v-if="imageUrl" :src="imageUrl" class="avatar" />

  340.               <i

  341.                 v-else

  342.                 class="el-icon-plus avatar-uploader-icon"

  343.               ></i> </el-upload

  344.           ></el-form-item>

  345. 

  346.           <el-form-item label="证件照正面" required

  347.             ><el-upload

  348.               class="avatar-uploader"

  349.               action="https://jsonplaceholder.typicode.com/posts/"

  350.               :show-file-list="false"

  351.               :on-success="handleAvatarSuccess"

  352.               :before-upload="beforeAvatarUpload"

  353.             >

  354.               <img v-if="imageUrl" :src="imageUrl" class="avatar" />

  355.               <i

  356.                 v-else

  357.                 class="el-icon-plus avatar-uploader-icon"

  358.               ></i> </el-upload

  359.           ></el-form-item>

  360.           <el-form-item label="证件照正面示例">

  361.             <img src="@/static/img/zhengmian.png" alt="" />

  362.           </el-form-item>

  363.           <el-form-item label="证件照背面示例">

  364.             <img src="@/static/img/fanmian.png" alt="" />

  365.           </el-form-item>

  366.           <el-form-item label="手持证件照示例">

  367.             <img src="@/static/img/shouchi.png" alt="" />

  368.           </el-form-item>

  369.         </div>

  370.         <div class="replenish">

  371.           <el-form-item label="补充信息">

  372.             <el-upload

  373.               class="upload-demo"

  374.               drag

  375.               action="https://jsonplaceholder.typicode.com/posts/"

  376.               multiple

  377.             >

  378.               <i class="el-icon-upload"></i>

  379.               <div class="el-upload__text">上传文件</div>

  380.               <div class="el-upload__tip" slot="tip">

  381.                 请仔细核对，需a请上传认证审核的补充文件

  382.                 必须为彩色图片（文档请截图后上传），最多5张，单张小于2M，格式为bmp、png、jpeg、jpg或gif证件上的时间一致

  383.               </div>

  384.             </el-upload>

  385.           </el-form-item>

  386.         </div>

  387. 

  388.         <div>

  389.           <el-form-item label="网站ICP备案号">

  390.             <el-input

  391.               v-model="ruleForm.name"

  392.               placeholder="请输入网站经营许可证编号"

  393.             ></el-input>

  394.           </el-form-item>

  395. 

  396.           <el-form-item label="公司网站">

  397.             <el-input

  398.               v-model="ruleForm.name"

  399.               placeholder="请输入公司地址。以http(s)://开头"

  400.             ></el-input>

  401.           </el-form-item>

  402.           <el-form-item label="常用联系人姓名" required>

  403.             <el-input

  404.               v-model="ruleForm.name"

  405.               placeholder="请输入联系人姓名用于平台相关事宜通知"

  406.             ></el-input>

  407.           </el-form-item>

  408. 

  409.           <el-form-item label="联系人手机号码" required>

  410.             <el-input

  411.               v-model="ruleForm.name"

  412.               placeholder="请输入联系人手机号码用于接受相关事宜"

  413.             ></el-input>

  414.           </el-form-item>

  415.           <el-form-item label="客服电话" required>

  416.             <el-input

  417.               v-model="ruleForm.name"

  418.               placeholder="接收通知，若应用上架应用市场会对外展示"

  419.             ></el-input>

  420.           </el-form-item>

  421.         </div>

  422. 

  423.         <div class="agreement-bar">

  424.           <el-checkbox v-model="checked">我已阅读</el-checkbox

  425.           ><span>《智莺支付开户及服务协议》</span

  426.           ><span>《智莺支付隐私政策》</span

  427.           ><span>《智莺开放平台服务协议》</span>

  428.         </div>

  429. 

  430.         <div class="button-box">

  431.           <el-button>返回</el-button>

  432. 

  433.           <el-button type="primary" @click="onSubmit('realForm')"

  434.             >提交</el-button

  435.           >

  436.         </div>

  437.       </el-form>

  438.     </div>

  439.   </div>

  440. </template>

  441. 

  442. <script>

  443. import { districtList } from "@/api/webServiceDistrict";

  444. 

  445. export default {

  446.   meta: { title: "实名认证" },

  447.   data() {

  448.     return {

  449.       options: [], // 地址

  450.       certificate: [

  451.         // 证件

  452.         {

  453.           name: "居民身份证",

  454.           id: "1",

  455.         },

  456.         {

  457.           name: "临时身份证",

  458.           id: "2",

  459.         },

  460.         {

  461.           name: "军官证",

  462.           id: "3",

  463.         },

  464.         {

  465.           name: "武警警官证",

  466.           id: "4",

  467.         },

  468.         {

  469.           name: "士兵证",

  470.           id: "5",

  471.         },

  472.         {

  473.           name: "军队学员证",

  474.           id: "6",

  475.         },

  476.         {

  477.           name: "军队文职干部证",

  478.           id: "7",

  479.         },

  480.         {

  481.           name: "军队离退休干部证",

  482.           id: "8",

  483.         },

  484.         {

  485.           name: "军队职工证",

  486.           id: "9",

  487.         },

  488.         {

  489.           name: "护照",

  490.           id: "10",

  491.         },

  492.         {

  493.           name: "港澳同胞回乡证",

  494.           id: "11",

  495.         },

  496.         {

  497.           name: "港澳居民来往内地通行证",

  498.           id: "12",

  499.         },

  500.         {

  501.           name: "中华人民共和国来往港澳通行证",

  502.           id: "13",

  503.         },

  504.         {

  505.           name: "外国人居留证",

  506.           id: "14",

  507.         },

  508.         {

  509.           name: "外国人出入境证",

  510.           id: "15",

  511.         },

  512.         {

  513.           name: "外交官证",

  514.           id: "16",

  515.         },

  516.         {

  517.           name: "领事馆证",

  518.           id: "17",

  519.         },

  520.         {

  521.           name: "海员证",

  522.           id: "18",

  523.         },

  524.       ],

  525.       AddressProps: {

  526.         // 异步加载地区名称

  527.         lazy: true,

  528.         async lazyLoad(node, resolve) {

  529.         const { level } = node;

  530.           if (level === 0) {

  531.             let nodes = await districtList();

  532.             nodes.forEach((element) => {

  533.               element.label = element.name || element.fullname;

  534.               element.leaf = level >= 2;

  535.               element.value = element.id;

  536.             });

  537.             resolve(nodes);

  538.           } else {

  539.             let nodes = await districtList(node.data.id);

  540.             nodes.forEach((element) => {

  541.               element.label = element.name || element.fullname;

  542.               element.leaf = level >= 2;

  543.               element.value = element.id;

  544.             });

  545.             resolve(nodes);

  546.           }

  547.         },

  548.       },

  549.       checked: false,

  550.       imageUrl: "",

  551.       realForm: {

  552.         mark: "个人",

  553.         enterprise: "企业三证",

  554.         address1: null,

  555.       },

  556.       ruleForm: {

  557.         name: "",

  558.         region: "",

  559.         date1: "",

  560.         date2: "",

  561.         delivery: false,

  562.         type: [],

  563.         resource: "",

  564.         desc: "",

  565.       },

  566.       rules: {

  567.         name: [

  568.           { required: true, message: "请输入活动名称", trigger: "blur" },

  569.           { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },

  570.         ],

  571.         region: [

  572.           { required: true, message: "请选择活动区域", trigger: "change" },

  573.         ],

  574.         date1: [

  575.           {

  576.             type: "date",

  577.             required: true,

  578.             message: "请选择日期",

  579.             trigger: "change",

  580.           },

  581.         ],

  582.         date2: [

  583.           {

  584.             type: "date",

  585.             required: true,

  586.             message: "请选择时间",

  587.             trigger: "change",

  588.           },

  589.         ],

  590.         type: [

  591.           {

  592.             type: "array",

  593.             required: true,

  594.             message: "请至少选择一个活动性质",

  595.             trigger: "change",

  596.           },

  597.         ],

  598.         resource: [

  599.           { required: true, message: "请选择活动资源", trigger: "change" },

  600.         ],

  601.         desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],

  602. 

  603.         mark: [

  604.           {

  605.             required: true,

  606.             message: "请选择实名认证标识： 公司/个人标识",

  607.             trigger: "change",

  608.           },

  609.         ],

  610.       },

  611.     };

  612.   },

  613.   methods: {

  614.     handleAvatarSuccess: function () {},

  615.     beforeAvatarUpload: function () {},

  616.     // 表单提交

  617.     onSubmit: function (formName) {

  618.       console.log(this.realForm)

  619.       this.$refs[formName].validate((valid) => {

  620.         if (valid) {

  621.           alert("submit!");

  622.         } else {

  623.           console.log("error submit!!");

  624.           return false;

  625.         }

  626.       });

  627.     },

  628.   },

  629.   created() {},

  630. };

  631. </script>

  632. 

  633. <style lang="scss" scoped>

  634. .from-box {

  635.   padding: 20px 20px 40px 20px;

  636. 

  637.   background: #fff;

  638.   box-sizing: border-box;

  639.   overflow: hidden;

  640.   border-radius: 14px;

  641.   .from-title {

  642.     color: #333333;

  643.     font-size: 20px;

  644.     height: 20px;

  645.     line-height: 20px;

  646.     border-left: 4px solid #1890ff;

  647.     padding-left: 10px;

  648.   }

  649.   .head-content {

  650.     background: #fffcec;

  651.     border: 1px solid #feeebb;

  652.     padding: 12px 124px 12px 12px;

  653.     position: relative;

  654.     margin-top: 28px;

  655.     box-sizing: border-box;

  656.     .content-p {

  657.       color: #6a3904;

  658.       font-size: 16px;

  659.       font-weight: bold;

  660.       margin: 0;

  661.       padding-bottom: 5px;

  662.     }

  663.     .content-div {

  664.       color: #a07d49;

  665.       font-size: 12px;

  666.       line-height: 18px;

  667.     }

  668.     .jinggao {

  669.       position: absolute;

  670.       width: 115px;

  671.       height: 115px;

  672.       right: -1px;

  673.       bottom: -2px;

  674.     }

  675.   }

  676. }

  677. 

  678. .el-form-item {

  679.   width: 48%;

  680. }

  681. 

  682. .replenish {

  683.   .el-form-item {

  684.     width: 100%;

  685.   }

  686. }

  687. 

  688. .p-div {

  689.   color: #999999;

  690.   font-size: 12px;

  691.   line-height: 12px;

  692.   margin-top: 9px;

  693.   height: 12px;

  694. }

  695. .p-div1 {

  696.   color: #999999;

  697.   font-size: 12px;

  698.   line-height: 12px;

  699.   height: 12px;

  700. }

  701. 

  702. .el-cascader,

  703. .el-select {

  704.   width: 100%;

  705. }

  706. 

  707. .upload-box {

  708.   .el-form-item {

  709.     width: 31.8%;

  710.   }

  711.   .el-form-item__content {

  712.     display: flex;

  713.     justify-content: center;

  714.     align-items: center;

  715.     height: 170px;

  716.   }

  717. }

  718. 

  719. .picker-box {

  720.   display: flex;

  721.   width: 100%;

  722.   padding-right: 20px;

  723.   box-sizing: border-box;

  724.   line-height: 40px;

  725.   color: #999999;

  726.   font-size: 14px;

  727.   .el-input__inner {

  728.     width: 92%;

  729.   }

  730.   .line {

  731.     width: 30px;

  732.     text-align: center;

  733.   }

  734. }

  735. .agreement-bar {

  736.   text-align: center;

  737.   margin-top: 20px;

  738.   font-size: 14px;

  739.   color: #333333;

  740. 

  741.   span {

  742.     color: #1890ff;

  743.     cursor: pointer;

  744.   }

  745. }

  746. 

  747. .button-box {

  748.   text-align: center;

  749.   margin-top: 20px;

  750. }

  751. </style>