cube-ui组件Form自定义

矫情吗；* 2023-06-30 01:41 18阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1][]

HTML部分代码：

<cube-form-group style="background: #FFFFFF;">
                <cube-form-item :field="fields[0]"></cube-form-item>
                <cube-form-item :field="fields[1]"></cube-form-item>
                <cube-form-item :field="fields[2]" class="cube-form-none-border">
                  <div class="upload-box">
                    <p>上传营业执照照片</p>
                    <cube-upload
                      ref="businessLicenseUrl"
                      v-model="model.businessLicenseUrl"
                      :action="action + '?type=3&code=企业统一社会信用代码'"
                      @files-added="addedHandler('businessLicenseUrl')"
                      @file-error="errHandler"
                    >
                      <div class="clear-fix">
                        <cube-upload-file
                          v-for="(file, i) in model.businessLicenseUrl"
                          :file="file"
                          :key="i"
                        ></cube-upload-file>
                        <cube-upload-btn :multiple="false">
                          <div>
                            <i></i>
                            <p>上传营业执照照片</p>
                          </div>
                        </cube-upload-btn>
                      </div>
                    </cube-upload>
                  </div>
                </cube-form-item>
                <div class="form-cap"></div>
                <cube-form-item :field="fields[3]"></cube-form-item>
                <cube-form-item :field="fields[4]"></cube-form-item>
                <div class="upload-double">
                  <cube-form-item :field="fields[5]">
                    <div class="upload-box">
                      <p>上传法人身份证</p>
                      <cube-upload
                        ref="legalPersonIdCardFrontUrl"
                        v-model="model.legalPersonIdCardFrontUrl"
                        :action="action + '?type=1&code=企业统一社会信用代码'"
                        @files-added="addedHandler('legalPersonIdCardFrontUrl')"
                        @file-error="errHandler"
                      >
                        <div class="clear-fix">
                          <cube-upload-file
                            v-for="(file, i) in model.legalPersonIdCardFrontUrl"
                            :file="file"
                            :key="i"
                          ></cube-upload-file>
                          <cube-upload-btn :multiple="false">
                            <div>
                              <i></i>
                              <p>上传法人身份证正面照片</p>
                            </div>
                          </cube-upload-btn>
                        </div>
                      </cube-upload>
                    </div>
                  </cube-form-item>
                  <cube-form-item :field="fields[6]">
                    <cube-upload
                      ref="legalPersonIdCardBackUrl"
                      v-model="model.legalPersonIdCardBackUrl"
                      :action="action + '?type=2&code=企业统一社会信用代码'"
                      @files-added="addedHandler('legalPersonIdCardBackUrl')"
                      @file-error="errHandler"
                    >
                      <div class="clear-fix">
                        <cube-upload-file
                          v-for="(file, i) in model.legalPersonIdCardBackUrl"
                          :file="file"
                          :key="i"
                        ></cube-upload-file>
                        <cube-upload-btn :multiple="false">
                          <div>
                            <i></i>
                            <p>上传法人身份证反面照片</p>
                          </div>
                        </cube-upload-btn>
                      </div>
                    </cube-upload>
                  </cube-form-item>
                </div>
                <div class="form-cap"></div>
                <cube-form-item :field="fields[7]"></cube-form-item>
                <cube-form-item :field="fields[8]"></cube-form-item>
                <cube-form-item :field="fields[9]"></cube-form-item>
                <cube-form-item :field="fields[10]"></cube-form-item>
                <cube-form-item :field="fields[11]" class="cube-form-none-border">
                  <cube-upload
                    ref="controlPersonIdCardFrontUrl"
                    v-model="model.controlPersonIdCardFrontUrl"
                    :action="action + '?type=4&code=企业统一社会信用代码'"
                    @files-added="addedHandler('controlPersonIdCardFrontUrl')"
                    @file-error="errHandler"
                    class="cube-upload-big"
                  >
                    <div class="clear-fix">
                      <cube-upload-file
                        v-for="(file, i) in model.controlPersonIdCardFrontUrl"
                        :file="file"
                        :key="i"
                      ></cube-upload-file>
                      <cube-upload-btn :multiple="false">
                        <div>
                          <i></i>
                          <p>上传实际控制人身份证正面照片（控制人为企业，上传营业执照正本）</p>
                        </div>
                      </cube-upload-btn>
                    </div>
                  </cube-upload>
                </cube-form-item>
                <cube-form-item :field="fields[12]" class="cube-form-none-border">
                  <cube-upload
                    ref="controlPersonIdCardBackUrl"
                    v-model="model.controlPersonIdCardBackUrl"
                    :action="action + '?type=5&code=企业统一社会信用代码'"
                    @files-added="addedHandler('controlPersonIdCardBackUrl')"
                    @file-error="errHandler"
                    class="cube-upload-big"
                  >
                    <div class="clear-fix">
                      <cube-upload-file
                        v-for="(file, i) in model.controlPersonIdCardBackUrl"
                        :file="file"
                        :key="i"
                      ></cube-upload-file>
                      <cube-upload-btn :multiple="false">
                        <div>
                          <i></i>
                          <p>上传实际控制人身份证反面照片（控制人为企业，上传营业执照副本）</p>
                        </div>
                      </cube-upload-btn>
                    </div>
                  </cube-upload>
                </cube-form-item>
                <div class="form-cap"></div>
                <cube-form-item :field="fields[13]"></cube-form-item>
                <cube-form-item :field="fields[14]">
                  <drawer-address @drawerChange="getDrawerVal" :placeholder="companyOfficeAddress"></drawer-address>
                </cube-form-item>
                <cube-form-item :field="fields[15]"></cube-form-item>
                <cube-form-item :field="fields[16]"></cube-form-item>
                <cube-form-item :field="fields[17]">
                  <drawer-address @drawerChange="getDrawerVal" :placeholder="companyRegisterAddress"></drawer-address>
                </cube-form-item>
                <cube-form-item :field="fields[18]"></cube-form-item>
                <cube-form-item :field="fields[19]" class="data-button-box">
                  <cube-button
                    :light="true"
                    @click="showStartDatePicker"
                    :class="model.businessStart ? '' : 'data-button'"
                  >{
       { model.businessStart || '经营期限（起）' }}</cube-button>
                  <span class="data-line"></span>
                  <cube-button
                    :light="true"
                    @click="showEndDatePicker"
                    :class="model.businessStart ? '' : 'data-button'"
                  >{
       { model.businessEnd || '经营期限（止）' }}</cube-button>
                  <date-picker
                    ref="startDatePicker"
                    :min="[2010, 1, 1]"
                    :max="[2030, 1, 1]"
                    :placeholder="model.businessStart || '经营期限（起）'"
                    @select="dateStartSelectHandler"
                  ></date-picker>
                  <date-picker
                    ref="endDatePicker"
                    :min="[2010, 1, 1]"
                    :max="[2030, 1, 1]"
                    :placeholder="model.businessEnd || '经营期限（止）'"
                    @select="dateEndSelectHandler"
                  ></date-picker>
                </cube-form-item>
                <cube-form-item :field="fields[20]"></cube-form-item>
                <cube-form-item>
                  <div
                    @click="goinInstitutions"
                    :class="openOutlets ? '' : 'form-institutions'"
                  >{
       { getInstitutionsVal || institutionsText }}</div>
                </cube-form-item>
                <cube-form-item :field="fields[21]"></cube-form-item>
                <cube-form-item :field="fields[22]"></cube-form-item>
                <cube-form-item :field="fields[23]"></cube-form-item>
                <div class="upload-double">
                  <cube-form-item :field="fields[24]">
                    <div class="upload-box">
                      <p>上传经办人身份证</p>
                      <cube-upload
                        ref="operatorPersonIdCardFrontUrl"
                        v-model="model.operatorPersonIdCardFrontUrl"
                        :action="action + '?type=6&code=企业统一社会信用代码'"
                        @files-added="addedHandler('operatorPersonIdCardFrontUrl')"
                        @file-error="errHandler"
                      >
                        <div class="clear-fix">
                          <cube-upload-file
                            v-for="(file, i) in model.operatorPersonIdCardFrontUrl"
                            :file="file"
                            :key="i"
                          ></cube-upload-file>
                          <cube-upload-btn :multiple="false">
                            <div>
                              <i></i>
                              <p>上传经办人身份证正面照片</p>
                            </div>
                          </cube-upload-btn>
                        </div>
                      </cube-upload>
                    </div>
                  </cube-form-item>
                  <cube-form-item :field="fields[25]">
                    <cube-upload
                      ref="operatorPersonIdCardBackUrl"
                      v-model="model.operatorPersonIdCardBackUrl"
                      :action="action + '?type=7&code=企业统一社会信用代码'"
                      @files-added="addedHandler('operatorPersonIdCardBackUrl')"
                      @file-error="errHandler"
                    >
                      <div class="clear-fix">
                        <cube-upload-file
                          v-for="(file, i) in model.operatorPersonIdCardBackUrl"
                          :file="file"
                          :key="i"
                        ></cube-upload-file>
                        <cube-upload-btn :multiple="false">
                          <div>
                            <i></i>
                            <p>上传经办人身份证反面照片</p>
                          </div>
                        </cube-upload-btn>
                      </div>
                    </cube-upload>
                  </cube-form-item>
                </div>
                <div class="form-cap"></div>
                <cube-form-item :field="fields[26]"></cube-form-item>
                <cube-form-item :field="fields[27]" class="security-input">
                  <cube-input v-model="model.securityCode"></cube-input>
                  <span
                    :class="showCode ? 'appoint-form-butnot' : ''"
                    v-show="showCode"
                    @click="getCode"
                  >获取验证码</span>
                  <span v-show="!showCode" class="count" style="color: #666666;">{
       { count }} s</span>
                </cube-form-item>
              </cube-form-group>
    
              <cube-form-item class="agreement-box cube-form-none-border">
                <label for="input">
                  <input id="input" type="radio" @input="changeFlag" /> 同意签署
                </label>
                <span class="agreement-span" @click="goinCFCA">《CFCA数字证书服务协议》</span>
                <span class="agreement-span" @click="goinAgreement">《安心签平台服务协议》</span>
                <span class="agreement-span" @click="goinClause">《安心签平台隐私条款》</span>
                <span class="agreement-span" @click="goinAccredit">《安心签开户及管理授权书》</span>
              </cube-form-item>          
              <cube-form-group>
                
                <div class="approve-form-submit">
                  <cube-button type="submit" @click="submitClick">立即申请</cube-button>
                </div>
              </cube-form-group>
            </cube-form>

JS部分代码：

/* eslint-disable */
    
    let fields = {
      input: function inputForm(modelKey, props, pattern) {
        return {
          type: "input",
          modelKey: modelKey,
          props,
          rules: {
            required: true,
            pattern: pattern
          }
        };
      },
      upload: function uploadForm(modelKey, props) {
        return {
          type: "upload",
          modelKey: modelKey,
          props,
          events: {
            "file-removed": (...args) => {
              console.log("file removed", args);
            }
          },
          rules: {
            required: true,
            uploaded: (val, config) => {
              // console.log(val.length)
              return Promise.all(
                val.length &&
                  val.map((file, i) => {
                    return new Promise((resolve, reject) => {
                      if (file.uploadedUrl) {
                        return resolve();
                      }
                      // fake request
                      setTimeout(() => {
                        if (i % 2) {
                          reject(new Error());
                        } else {
                          file.uploadedUrl = "uploaded/url";
                          resolve();
                        }
                      }, 1000);
                    });
                  })
              ).then(() => {
                return true;
              });
            }
          },
          messages: {
            uploaded: "上传失败"
          }
        };
      },
      select: function selectForm(modelKey, props) {
        return {
          type: "select",
          modelKey: modelKey,
          props,
          rules: {
            required: true
          }
        };
      },
      textarea: function textareaForm(modelKey, props) {
        return {
          type: "textarea",
          modelKey: modelKey,
          props,
          rules: {
            required: true
          },
          debounce: 200
        };
      },
      radio: function radioForm(modelKey, props) {
        return {
          type: "radio-group",
          modelKey: modelKey,
          // label: 'Radio',
          props,
          rules: {
            required: true
          }
        };
      }
    };
    
    export default fields;

< script type = "text/ecmascript-6" >
    	/* eslint-disable */
    	import utils from "../../assets/utils.js";
    import CubePage from "../../components/cube-page.vue";
    import DatePicker from "../../components/date-picker.vue";
    import DrawerAddress from "../../components/drawer-address.vue";
    import Global from "../../assets/global.js";
    import fields from "../../common/fields.js";
    let cardReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
    let creditReg = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
    let cardCreditReg = /^[0-9A-Z]{2}\d{6}[0-9A-Z]{10}$/;
    let emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
    let chineseReg = /^[\u4e00-\u9fa5]+$/;
    let addressReg = /[^\s]/;
    let phoneReg = /^1(3|4|5|7|8)\d{9}$/;
    let securityReg = /^\d{6}$/;
    export default {
    	data() {
    		return {
    			action: "***place/appointment/upload",
    			hasData: true,
    			list: [],
    			affixList: ["同意签署"],
    			title: "在线预约",
    			preventTap: true, //防止多次点击
    			isIPhoneX: Global.config.isIPhoneX(),
    			isIOS: !!Global.config.ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
    			showCustomTitle: true,
    			showWhiteTitle: false,
    			toastText: "",
    			showToast: false,
    			validity: {},
    			valid: undefined,
    			companyOfficeAddress: "请选择企业办公地址",
    			companyRegisterAddress: "请选择企业注册地址",
    			model: {
    				entName: "",
    				organizationCode: "",
    				businessLicenseUrl: [],
    				legalPersonName: "",
    				legalCertCode: "",
    				legalPersonIdCardFrontUrl: [],
    				legalPersonIdCardBackUrl: [],
    				controlPersonType: "",
    				controlPersonName: "",
    				controlPersonCertType: "",
    				controlPersonCertCode: "",
    				controlPersonIdCardFrontUrl: [],
    				controlPersonIdCardBackUrl: [],
    				entSize: "",
    				companyOfficeAddress: "",
    				businessAddress: "",
    				companyRegisterAddress: "",
    				legalAddress: "",
    				manageDate: "",
    				businessStart: "",
    				businessEnd: "",
    				businessScope: "",
    				entEmail: "",
    				operatorPersonName: "",
    				operatorCertCode: "",
    				operatorPersonIdCardFrontUrl: [],
    				operatorPersonIdCardBackUrl: [],
    				operatorMobile: "",
    				securityCode: ""
    			},
    			fields: [
    				fields.input(
    					"entName", {
    						placeholder: "请输入准确的企业名称",
    						maxlength: 50
    					},
    					/^[a-zA-Z\u4e00-\u9fa5]+$/
    				),
    				fields.input(
    					"organizationCode", {
    						placeholder: "请输入准确的统一社会信用代码",
    						maxlength: 18
    					},
    					creditReg
    				),
    				fields.upload("businessLicenseUrl", {
    					multiple: false,
    					max: 1
    				}),
    				fields.input(
    					"legalPersonName", {
    						placeholder: "请输入准确的法人姓名",
    						maxlength: 20
    					},
    					chineseReg
    				),
    				fields.input(
    					"legalCertCode", {
    						placeholder: "请输入准确的法人身份证",
    						maxlength: 18
    					},
    					cardReg
    				),
    				fields.upload("legalPersonIdCardFrontUrl", {
    					multiple: false,
    					max: 1
    				}),
    				fields.upload("legalPersonIdCardBackUrl", {
    					multiple: false,
    					max: 1
    				}),
    				fields.select("controlPersonType", {
    					options: [{
    							value: "01",
    							text: "个人"
    						},
    						{
    							value: "02",
    							text: "企业"
    						}
    					],
    					placeholder: "请选择准确的实际控制人性质"
    				}),
    				fields.input(
    					"controlPersonName", {
    						placeholder: "请输入准确的实际控制人名称",
    						maxlength: 20
    					},
    					chineseReg
    				),
    				fields.select("controlPersonCertType", {
    					options: [{
    							value: 1,
    							text: "居民身份证"
    						},
    						{
    							value: 2,
    							text: "统一社会信用代码"
    						}
    					],
    					placeholder: "请选择准确的实际控制人证件类型"
    				}),
    				fields.input(
    					"controlPersonCertCode", {
    						placeholder: "请输入准确的实际控制人证件号码",
    						maxlength: 18
    					},
    					cardCreditReg
    				),
    				fields.upload("controlPersonIdCardFrontUrl", {
    					multiple: false,
    					max: 1
    				}),
    				fields.upload("controlPersonIdCardBackUrl", {
    					multiple: false,
    					max: 1
    				}),
    				fields.select("entSize", {
    					options: [{
    							value: 0,
    							text: "大型企业"
    						},
    						{
    							value: 1,
    							text: "中型企业"
    						},
    						{
    							value: 2,
    							text: "小型企业"
    						},
    						{
    							value: 3,
    							text: "微型企业"
    						},
    						{
    							value: 4,
    							text: "其它"
    						}
    					],
    					placeholder: "请选择准确的企业规模"
    				}),
    			]
    		},
    		methods: {
    			addedHandler(val) {
    				let file = this.model[val];
    				file && this.$refs[val].removeFile(file);
    			},
    			errHandler(file) {
    				this.$createToast({
    					type: "warn",
    					txt: "Upload fail",
    					time: 1000
    				}).show();
    			},
    		}
    	}

CSS部分代码：

>>> input::-webkit - input - placeholder {
    		color: #CCCCCC;
    		font - family: PingFangSC - Regular;
    	}
    
    	>>>
    	textarea::-webkit - input - placeholder {
    		color: #CCCCCC;
    		font - family: PingFangSC - Regular;
    	}
    
    	.CustomerApprove {
    		background: #FAFAFA;
    
    		button {
    			background: #FFFFFF;
    			box - shadow: none;
    		}
    
    		.appoint - banner {
    			width: 100 % ;
    			height: 150 px;
    			background: url('https://img.cdn.zhaoshang800.com/img/2019/10/28/broker/5d49ff75-f5f0-4c44-8e68-6b574ae72bec.png') no - repeat;
    			background - size: cover;
    			padding - top: 45 px;
    			box - sizing: border - box;
    
    			p {
    				font - size: 18 px;
    				color: #FFFFFF;
    				line - height: 28 px;
    				padding - left: 21 px;
    				letter - spacing: 1 px;
    				padding - bottom: 5 px;
    			}
    		}
    
    		.radio - box {
    			top: -10 px;
    
    			.radio - top {
    				padding - top: 10 px;
    				background: #FFFFFF;
    				border - top - left - radius: 10 px;
    				border - top - right - radius: 10 px;
    			}
    
    			.upload - box {
    				p {
    					padding - top: 10 px;
    				}
    			}
    
    			.upload - double {
    				display: flex;
    				align - items: flex - end;
    				justify - content: space - between;
    				margin: 0 0.4 rem;
    				background: #FFFFFF;
    
    				.cube - form - item {
    					margin: 0;
    					padding: 0;
    				}
    
    				.cube - form - item::after {
    					border: none;
    				}
    			}
    
    			.data - button {
    				color: #ccc;
    			}
    
    			.form - institutions {
    				color: #ccc;
    			}
    
    			.agreement - box {
    				margin - top: 20 px!important;
    				background: none!important;
    
    				.agreement - span {
    					color: #6C8DAA;
            cursor: pointer;
          }
        }
    
        .agreement-box ::after {
          border: none;
        }
    
        .approve-form-submit {
          width: 100%;
          margin-top: 40px;
          margin-bottom: 75px;
          text-align: center;
    
          button {
            background-image: linear-gradient(135deg, # FC5D6A 0 % ,
    					#DD2534 100 % );
    				border - radius: 50 px;
    				width: 80 % ;
    				margin - left: 10 % ;
    			}
    		}
    	}
    
    	>>>
    	.cube - form {
    		background: none;
    
    		.cube - drawer {
    			position: fixed;
    		}
    
    		.cube - form - item {
    			background: #FFFFFF;
    			padding: 0;
    			margin: 0 0.4 rem;
    		}
    
    		.cube - form - item::after {
    			border: 1 px solid# D8D8D8;
    		}
    
    		.cube - form - none - border::after {
    			border: none;
    		}
    
    		.data - button - box {
    			.cube - validator - content {
    					display: flex;
    					align - items: center;
    					justify - content: space - between;
    				}
    
    				.cube - btn {
    					padding: 10 px 10 px;
    					width: 40 % ;
    					background: #FAFAFA;
    				}
    
    				.data - line {
    					display: block;
    					width: 20 px;
    					height: 2 px;
    					background: #000000;
          }
        }
    
        .cube-validator-content {
          display: flex;
          align-items: center;
        }
    
        .cube-select {
          width: 100%;
        }
    
        .cube-btn {
          font-size: 14px;
        }
    
        .cube-input {
          width: 100%;
        }
    
        .security-input .cube-input {
          width: 70%;
        }
    
        .security-input span {
          display: inline-block;
          width: 30%;
          text-align: center;
        }
      }
    
      >>>.cube-textarea-wrapper {
        width: 100%;
      }
    
      >>>.cube-upload {
        width: 168px;
        height: 105px;
        // width 100%
        margin: 10px 0;
        border: 1px dashed # DFDBDB;
    
    					.clear - fix {
    						width: 168 px;
    						height: 105 px;
    
    						.cube - upload - file,
    						.cube - upload - btn {
    							margin: 0;
    							height: 105 px;
    						}
    
    						.cube - upload - file {
    							margin: 0;
    
    							+
    							.cube - upload - btn {
    								margin - top: -105 px;
    								opacity: 0;
    							}
    						}
    
    						.cube - upload - file - def {
    							width: 100 % ;
    							height: 100 % ;
    
    							.cubeic - wrong {
    								display: none;
    							}
    						}
    
    						.cube - upload - btn {
    							display: flex;
    							align - items: center;
    							justify - content: center;
    
    							>
    							div {
    								text - align: center;
    								width: 100 % ;
    							}
    
    							i {
    								display: inline - flex;
    								align - items: center;
    								justify - content: center;
    								width: 56 px;
    								height: 41 px;
    								margin - bottom: 10 px;
    								font - size: 32 px;
    								line - height: 1;
    								font - style: normal;
    								color: #fff;
    								background: url('https://img.cdn.zhaoshang800.com/img/2020/01/02/broker/95fd0077-8e3c-4885-8ffb-614eb6568747.png');
    								background - size: 100 % 100 % ;
    							}
    
    							p {
    								color: #999999;
              font-size: 12px;
              width: 80%;
              margin-left: 10%;
              padding-top: 0;
            }
          }
        }
      }
    
      .cube-upload-big {
        width: 100%;
        height: 210px;
    
        .clear-fix {
          width: 100%;
          height: 210px;
    
          .cube-upload-file, .cube-upload-btn {
            margin: 0;
            height: 210px;
          }
    
          .cube-upload-btn {
            p {
              width: 60%;
              margin-left: 20%;
            }
          }
    
          .cube-upload-file {
            margin: 0;
    
            + .cube-upload-btn {
              margin-top: -210px;
              opacity: 0;
            }
          }
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200113165807159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200113165835543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk=,size_16,color_FFFFFF,t_70