FE-V2-PC/src/views/mine/index.vue

<template>
  <div class="mine">
    <!--<navbar />-->
    <div class="mine-page">
      <div class="left-max-box scrollbar-box">
        <p class="left-title">个人中心</p>
        <div class="left-user-img">
          <userAvatar :user="user" />
        </div>
        <p class="left-name">{{user.nickName}}</p>
        <p class="left-num">{{user.userType=='11'?'工号：':(user.userType=='22'?'学号：':'其他：')}}{{user.userName}}</p>
        <div class="left-text-max-box">
          <div class="left-text-big-box">
            <div class="left-text-big-box-left">
              <img v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_xl.png">
              <img v-else src="@/assets/ZDimages/mine/icon_grzx_zc.png">
              <p>{{user.education?user.education:'未设置'}}</p>
            </div>
            <div class="left-text-big-box-right">
              <img class="img-two" v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_zy.png">
              <img class="img-one" v-else src="@/assets/ZDimages/mine/icon_grzx_zw.png">
              <p>{{user.major?user.major:'未设置'}}</p>
            </div>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_sjh.png">
            <p>{{user.phonenumber?user.phonenumber:'未设置'}}</p>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_yx.png">
            <p>{{user.email?user.email:'未设置'}}</p>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_bgl.png">
            <p>{{user.deptName?user.deptName:'未设置'}}</p>
          </div>
        </div>
        <div class="left-type-text-max-box">
          <div>
            <p>联系方式</p>
            <p :class="user.phonenumber?'p-color-a':'p-color-b'">{{user.phonenumber?'已设置':'未设置'}}</p>
          </div>
          <div>
            <p>系统头像</p>
            <p :class="user.avatar?'p-color-a':'p-color-b'">{{user.avatar?'已设置':'未设置'}}</p>
          </div>
          <div>
            <p>人脸照片</p>
            <p :class="user.faceImg?'p-color-a':'p-color-b'">{{user.faceImg?'已设置':'未设置'}}</p>
          </div>
          <div>
            <p>电子签名</p>
            <p :class="user.signature?'p-color-a':'p-color-b'">{{user.signature?'已设置':'未设置'}}</p>
          </div>
        </div>
      </div>
      <div class="right-max-box scrollbar-box">
        <div class="right-title-box">
          <div class="title-button-min-box" @click="buttonTypeClick(1)">
            <p :class="buttonType == '1'?'bottomColor':''">基本资料</p>
            <p :class="buttonType == '1'?'bottomBack':''"></p>
          </div>
          <div class="title-button-min-box" @click="buttonTypeClick(2)">
            <p :class="buttonType == '2'?'bottomColor':''">安全设置</p>
            <p :class="buttonType == '2'?'bottomBack':''"></p>
          </div>
          <p class="right-null-p"></p>
          <!--<p class="reset-button-one right-out-button" @click="outButton">返回</p>-->
        </div>
        <div v-if="buttonType == 1">
          <el-form :model="userform" ref="userform" :rules="rules" :inline="true" >
            <div>
              <el-form-item class="form-item-min input-number-none-box" label="联系方式：" prop="phonenumber" label-width="120px">
                <el-input-number
                  :max="19999999999"
                  v-model="userform.phonenumber"
                  placeholder="请输入联系方式"
                  clearable/>
              </el-form-item>
              <el-form-item class="form-item-min" label="邮箱：" prop="email" label-width="120px">
                <el-input
                  maxlength="40"
                  v-model="userform.email"
                  placeholder="请输入邮箱"
                  clearable
                  style="width:200px;"
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="出生年月：" prop="dateBirth" label-width="120px">
                <el-date-picker
                  v-model="userform.dateBirth"
                  value-format="yyyy-MM-dd"
                  type="date"
                  style="width:200px;"
                  placeholder="请选择出生日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <div>
              <el-form-item class="form-item-min" label="人脸照片：" prop="searchValue" label-width="120px">
                <div class="up-data-box" style="width:200px;">
                  <div class="up-data-min-box" style="display: flex;">
                    <div class="up-data-button" v-if="!user.faceImg" @click="upFaceOpenClick(2)">
                      <p>+</p>
                      <p>上传</p>
                    </div>
                    <img class="img-one" :src="user.faceImg" v-if="user.faceImg" @click="upFaceOpenClick(2)">
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="form-item-min" label="电子签名：" prop="searchValue" label-width="120px">
                <div class="up-data-box">
                  <div class="up-data-min-box" style="display: flex;">
                    <el-upload
                      class="position-button"
                      :action="uploadImgUrlTwo"
                      :show-file-list="false"
                      :auto-upload="false"
                      :on-change="signatureChange"
                      accept="image/jpeg,image/gif,image/png"
                      :headers="headers"
                      :before-upload="beforeAvatarUpload">
                      <div class="up-data-button" v-if="!user.signature">
                        <p>+</p>
                        <p>上传</p>
                      </div>
                      <img class="img-two" :src="user.signature" v-if="user.signature">
                    </el-upload>
                  </div>
                </div>
              </el-form-item>
              <fingerprintSubPagePublic  v-if="versionField !== 'suZhouDaXue'" :Quantity="Quantity"></fingerprintSubPagePublic>
            </div>
          </el-form>
          <p class="type-one-max-box add-button-one-120" @click="upDataProfile">保存</p>
        </div>
        <div v-if="buttonType == 2">
          <el-form :model="form" ref="form" :inline="true" :rules="rules">
            <div>
              <el-form-item class="form-item-min" label="原始密码：" prop="oldPassword" label-width="120px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.oldPassword"
                  placeholder="请输入原始密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="新密码：" prop="newPassword" label-width="120px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.newPassword"
                  placeholder="请输入新密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="确认密码：" prop="confirmPassword" label-width="120px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.confirmPassword"
                  placeholder="请确认密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <span class="type-one-max-box add-button-one-120" style="margin-left:20px;display: inline-block;" @click="submit">保存</span>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <!--电子签名-->
    <el-dialog class="up-img-box" title="上传电子签名" :visible.sync="upImgOpen" width="600px" append-to-body>
      <p>示例</p>
      <img class="img-one" src="@/assets/ZDimages/icon_scdzqm_sl.png">
      <p>正楷签名</p>
      <div class="cropper-box">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="realTime"
          @imgLoad="imgLoad"
        ></vueCropper>
        <p class="cropper-button" @click="upImgButton">保存查看</p>
        <el-upload
          class="position-button"
          :action="uploadImgUrl"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="signatureChange"
          accept="image/jpeg,image/gif,image/png"
          :headers="headers"
          :before-upload="beforeAvatarUpload">
          <p style="position: absolute;right:100px;top:10px;z-index:1;color:#fff;background:#14AE10;cursor: pointer;padding:5px 10px;margin:0;border-radius:6px;">选择签名</p>
        </el-upload>
      </div>
      <p style="color:#999;">请将签名置于选择框内以便提高识别度</p>
      <img class="cropper-img" v-if="signatureData" :src="signatureData">
      <div slot="footer" class="dialog-footer">
        <el-button @click="upImgOpenClick(1)">取 消</el-button>
        <el-button type="primary" @click="upSignatureData">确 定</el-button>
      </div>
    </el-dialog>
    <!--上传照片-->
    <el-dialog class="up-img-box" title="上传照片" :visible.sync="upFaceOpen" width="600px" append-to-body>
      <el-upload
        ref="faceUpLoad"
        class="position-button"
        :action="uploadImgUrl"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="faceChange"
        accept="image/jpeg,image/gif,image/png"
        :on-success="(res)=>handleAvatarSuccess(res)"
        :headers="headers"
        :before-upload="beforeAvatarUpload">
        <div v-if="!upFaceUrl" style="width:300px;height:300px;border: 1px dashed #E0E0E0;cursor: pointer;margin:20px 130px 0;">
          <p style="text-align: center;color:#999;font-weight:500;font-size: 20px;line-height:300px;margin:0;">+</p>
        </div>
        <div v-if="upFaceUrl" class="scrollbar-box" style="width:560px;margin:0 auto;max-height:700px;overflow-y: scroll">
          <img :src="upFaceUrl" style="max-width:560px;border: 1px dashed #E0E0E0;cursor: pointer;margin:0 auto;">
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="faceButton(1)">取 消</el-button>
        <el-button type="primary" @click="faceButton(2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Navbar } from '@/layout/components'
import userAvatar from "./userAvatar";
import { getUserProfile,updateUserPwd,changePhone,genSign,updateSignature,upDataProfile,fingerprintQuantity} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import fingerprintSubPagePublic from './differenceComponent/fingerprintSubPagePublic.vue'
export default {
  name: "mine",
  components: {
    Navbar,
    userAvatar,
    fingerprintSubPagePublic
  },
  data(){
    const equalToPassword = (rule, value, callback) => {
      if (this.form.confirmPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const equalToPasswordTwo = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      let reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/
      console.log("reg.test(value)",reg.test(value))
      if(reg.test(value)){
        callback()
      }else{
        return callback(new Error('密码应在8-16位包括数字和字母与特殊字符'));
      }
    };
    return{
      versionField:process.env.VUE_APP_VERSION_DIFFERENCE_FIELD,
      buttonType:'1',
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
      uploadImgUrlTwo: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pageType:false,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "resetPwd",
      form:{
        oldPassword:"",
        newPassword:"",
        confirmPassword:""
      },
      userform:{},
      userformData:{},
      open:false,
      phoneForm:{
        phone:"",
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
          { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
          { required: true, validator: equalToPasswordTwo, trigger: "blur" },
          { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
        ],
        phonenumber: [
          { required: true, message: "请输入11位手机号码", trigger: "blur" },
          { validator: this.checkPhone, trigger: 'blur' },
          // { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          { required: true, message: "请输入11位手机号码", validator: this.spaceJudgment, trigger: "blur" }
        ],
        // phone: [
        //   { required: true, message: "请输入手机号码", trigger: "blur" },
        //   { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
        // ],
        // email: [
        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
        //   { required: true, message: "请输入正确的邮箱地址", type: 'email'},
        //   { required: true, message: "请输入邮箱地址", validator: this.spaceJudgment, trigger: "blur" }
        // ],
        // dateBirth: [
        //   { required: true, message: "请选择出生日期", trigger: "blur" }
        // ],
      },
      //上传签名开关
      upImgOpen:false,
      option:{
        img: '', // 裁剪图片的地址
        outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
        info: true,          //图片大小信息
        canScale: true,      //图片是否允许滚轮缩放
        autoCrop: true,      //是否默认生成截图框
        autoCropWidth: 240,  //默认生成截图框宽度
        autoCropHeight: 80, //默认生成截图框高度
        fixed: true,         //是否开启截图框宽高固定比例
        fixedNumber: [3, 1], //截图框的宽高比例
        full: false,         //false按原比例裁切图片，不失真
        fixedBox: true,      //固定截图框大小，不允许改变
        canMove: false,      //上传图片是否可以移动
        canMoveBox: true,    //截图框能否拖动
        original: false,     //上传图片按照原始比例渲染
        centerBox: false,    //截图框是否被限制在图片里面
        height: true,        //是否按照设备的dpr 输出等比例图片
        infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000,    //限制图片最大宽度和高度
        enlarge: 1,          //图片根据截图框输出比例倍数
        mode: '560px 400px'  //图片默认渲染方式
      },
      previews:{},
      //上传人脸
      upFaceOpen:false,
      upFaceUrl:"",
      //临时签名数据
      signatureData:"",
      Quantity:0,//指纹录取数量
    }
  },
  created() {
    this.getUser();
    this.fingerprintQuantityFun();
  },
  methods: {
    //修改用户信息
    upDataProfile(){
      this.$refs["userform"].validate(valid => {
        if (valid) {
          if(!this.userform.phonenumber&&!this.userform.email&&!this.userform.dateBirth){
            this.msgError('联系方式/邮箱/出生年月,请至少填写一项进行修改')
            return
          }
          if((this.userform.phonenumber == this.userformData.phonenumber)&&
            (this.userform.email == this.userformData.email)&&
            (this.userform.dateBirth == this.userformData.dateBirth)){
            this.msgError('联系方式/邮箱/出生年月,请至少修改一项再进行保存操作')
            return
          }
          // let obj = JSON.parse(JSON.stringify(this.userform));
          let obj = {};
          obj.phonenumber = this.userform.phonenumber;
          if(this.userform.email){
            let regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!regex.test(this.userform.email)){
              this.msgError('请输入正确的邮箱地址')
              return
            }else{
              obj.email = this.userform.email;
            }
          }else {
            obj.email = '';
          }
          if(this.userform.dateBirth){
            obj.dateBirth = this.userform.dateBirth;
          }else{
            obj.dateBirth = '';
          }
          obj.userId = this.user.userId;
          upDataProfile(obj).then(response => {
            this.msgSuccess('操作成功');
            this.getUser();
          });
        }
      })
    },
    //手机号验证
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error('手机号码不能为空'))
      } else {
        if(value == '19999999999'){
          return callback(new Error('请输入正确的手机号码'))
        }
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号码'))
        }
      }
    },
    //修改按钮密码
    submit() {
      let self = this;
      self.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm('确定要修改吗', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.updateUserPwd();
          }).then(() => {
          }).catch(() => {});
        }
      });
    },
    //指纹-查询用户指纹录取数量
    fingerprintQuantityFun(){
      let _this=this;
      fingerprintQuantity(localStorage.getItem('userId')).then(response => {
          if(response.code == 200){
            _this.Quantity=response.data;
          }
        }
      );
    },
    //修改密码接口
    updateUserPwd(){
      updateUserPwd(this.form.oldPassword, this.form.newPassword).then(
        response => {
          this.form.oldPassword = "";
          this.form.newPassword = "";
          this.form.confirmPassword = "";
          this.msgSuccess("修改成功");
        }
      );
    },
    //返回按钮
    outButton(){
      this.$router.go(-1)
    },
    //页面按钮点击
    buttonTypeClick(type){
      if(this.buttonType != type){
        this.buttonType = type;
      }
    },
    //获取信息
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
        let obj = {
          phonenumber:response.data.phonenumber,
          email:response.data.email,
          dateBirth:response.data.dateBirth,
        }
        this.$set(this,'userform',JSON.parse(JSON.stringify(obj)));
        this.$set(this,'userformData',JSON.parse(JSON.stringify(obj)));
        this.pageType = true;
      });
    },
    //上传签名
    upSignatureData(){
      if(!this.signatureData){
        this.msgError('请先选择签名上传并保存查看')
      }
      var blob = this.dataURLtoBlob(this.signatureData);
      var file = this.blobToFile(blob, 'dx.jpg');
      let formData = new FormData();
      formData.append('file',file,"DX.jpg")
      console.log("formData",formData);
      updateSignature(formData).then(response => {
        if(response.code == 200){
          this.msgSuccess("操作成功");
          this.upImgOpen = false;
          this.getUser();
        }
      });
    },
    //照片页面开关
    upFaceOpenClick(type){
      if(type == 1){
        this.upFaceOpen = false;
      }else if (type == 2){
        this.upFaceUrl = this.user.faceImg;
        this.upFaceOpen = true;
      }
    },
    //签名页面开关
    upImgOpenClick(type){
      if(type == 1){
        this.upImgOpen = false;
      }else if (type == 2){
        this.option.img = this.user.signature;
        this.signatureData = this.user.signature;
        this.upImgOpen = true;
      }
    },
    //确定签名
    upImgButton(){
      let self = this;
      this.$refs.cropper.getCropBlob(async (data) => {
        let formData = new FormData();
        formData.append('file',data,"DX.jpg")
        genSign(formData).then(response => {
          if(response.code == 200){
            this.signatureData = 'data:image/png;base64,'+response.data;
          } else {
            this.msgError(response.msg)
          }
        });
      })
    },
    //照片选择
    faceChange(val){
      const windowURL = window.URL || window.webkitURL;
      this.upFaceUrl = windowURL.createObjectURL(val.raw)
    },
    //签名选择
    signatureChange(val){
      const windowURL = window.URL || window.webkitURL;
      this.option.img = windowURL.createObjectURL(val.raw)
      this.signatureData = "";
      this.upImgOpen = true;
    },
    // 照片上传按钮
    faceButton(type){
      if(type==1){
        this.upFaceOpen = false;
      }else if(type == 2){
        this.$refs.faceUpLoad.submit();
      }
    },
    //上传
    handleAvatarSuccess(res, type) {
      if(res.code == 200){
        this.user.faceImg = res.data.cardUrl;
        this.upFaceOpen = false;
        this.getUser();
        this.msgSuccess(res.msg)
        this.$forceUpdate()
      }else{
        this.msgError(res.msg)
      }
    },
    beforeAvatarUpload(file) {
      let type = false;
      if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
        type = true;
      }else{
        this.$message.error('只能上传png/jpeg/gif格式图片');
        type = false;
      }
      return type;
    },
    // 实时预览函数
    realTime(data) {
      console.log("实时预览函数",data)
      this.previews = data;
    },
    //图片加载的回调 imgLoad 返回结果success, error
    imgLoad (msg) {
      console.log("图片加载的回调",msg)
      // console.log('imgLoad')
      // console.log(msg)
    },
    //将base64转换为blob
    dataURLtoBlob: function(dataurl) {
      var  arr = dataurl.split(',')
      var  mime = arr[0].match(/:(.*?);/)[1]
      var  bstr = atob(arr[1])
      var  n = bstr.length
      var  u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //将blob转换为file
    blobToFile: function(theBlob, fileName){
      theBlob.lastModifiedDate = new Date();
      theBlob.name = fileName;
      return theBlob;
    },
  }
}
</script>

<style scoped lang="scss">
.mine{
  height:100%;
  width:100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  *{
    margin:0;
  }
  .mine-page{
    flex:1;
    display: flex;
    overflow: hidden;
    .left-max-box{
      width:300px;
      /*margin:20px;*/
      margin:5px 20px 20px 10px;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      border-radius:10px;
      .left-title{
        font-size:18px;
        text-align: center;
        line-height: 30px;
        margin-top:30px;
        color:#0045af;
      }
      .left-user-img{
        width:130px;
        height:130px;
        overflow: hidden;
        border-radius:50%;
        margin:30px auto 20px;
      }
      .left-name{
        font-size:20px;
        line-height:43px;
        text-align: center;
      }
      .left-num{
        font-size:16px;
        line-height:38px;
        text-align: center;
      }
      .left-text-max-box{
        border-top:1px dashed #dedede;
        border-bottom:1px dashed #dedede;
        margin:24px 10px 0;
        padding:20px 0;
        .left-text-big-box{
          display: flex;
          .left-text-big-box-left{
            width:100px;
            height:38px;
            display: flex;
            margin-right:10px;
            img{
              width:16px;
              height:16px;
              margin:11px 10px 0;
            }
            p{
              flex:1;
              font-size:14px;
              line-height:38px;
            }
          }
          .left-text-big-box-right{
            height:38px;
            flex:1;
            display: flex;
            .img-one{
              width:16px;
              height:14px;
              margin:12px 10px 0;
            }
            .img-two{
              width:16px;
              height:16px;
              margin:11px 10px 0;
            }
            p{
              flex:1;
              font-size:14px;
              line-height:38px;
            }
          }
        }
        .left-text-min-box{
          display: flex;
          height:38px;
          img{
            width:16px;
            height:16px;
            margin:11px 10px 0;
          }
          p{
            flex:1;
            font-size:14px;
            line-height:38px;
          }
        }
      }
      .left-type-text-max-box{
        padding:20px 0;
        div{
          display: flex;
          p{
            flex:1;
            font-size:14px;
            color:#333;
            line-height:40px;
          }
          p:nth-child(1){
            text-align: left;
            margin-left:32px;
          }
          p:nth-child(2){
            text-align: right;
            margin-right:48px;
          }
          .p-color-a{
            color:#06B924;
          }
          .p-color-b{
            color:#FF9735;
          }
        }
      }
    }
    .right-max-box{
      flex:1;
      /*margin:20px 20px 20px 0;*/
      margin:5px 20px 20px 0;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      border-radius:10px;
      display: flex;
      flex-direction: column;
      .right-title-box{
        display: flex;
        border-bottom:1px solid #dedede;
        .title-button-min-box{
          height:90px;
          margin:0 20px;
          cursor: pointer;
          p:nth-child(1){
            margin-top:6px;
            line-height:78px;
            font-size:16px;
          }
          p:nth-child(2){
            height:6px;
            border-radius:4px;
          }
          .bottomColor{
            color:#0045AF;
          }
          .bottomBack{
            background:#0045AF ;
          }
        }
        .right-null-p{
          flex:1;
        }
        .right-out-button{
          margin:20px;
        }
      }
      .type-one-max-box{
        width:100px;
        margin:40px auto;
      }
      .up-data-box{
        display: inline-block;
        width:280px;
        line-height:20px;
        margin-bottom:30px;
        .up-data-min-box{
          .up-data-title{
            font-size:15px;
            color:#333;
          }
          .up-data-button{
            width:120px;
            height:120px;
            border: 1px dashed #E0E0E0;
            cursor: pointer;
            p{
              text-align: center;
              color:#999;
              font-weight:500;
            }
            p:nth-child(1){
              font-size: 20px;
              line-height:40px;
              margin-top:20px;
            }
            p:nth-child(2){
              font-size: 16px;

            }
          }
          .img-one{
            width:120px;
            height:120px;
          }
          .img-two{
            width: 240px;
            height:80px;
          }
        }
      }
      .fingerprint_no{
        >p:nth-of-type(1){
          color: #666666;
        }
        >p:nth-of-type(2){
          color: #F56C6C;
        }
      }
      .fingerprint_yes{
        .fingerprint_yes_img{
          width: 122px;
          height: 142px;
          position: relative;
          >img:nth-of-type(1){
            width: 122px;
            height: 142px;
            position: absolute;
          }
          >img:nth-of-type(2){
            width: 65px;
            height: 88px;
            position: absolute;
            left: 29px;
            top: 29px;
          }
        }
        >p{
          color: #666;
          text-align: center;
        }
      }
      .form-item-min{
        margin-top:40px;
      }
    }
  }
}
</style>
<style lang="scss">
.up-img-box{
  .el-dialog__body{
    padding-top:0;
  }
  .img-one{
    width:560px;
    height:150px;
  }
  .cropper-img{
    display: block;
    border:1px solid #e0e0e0;
    width:360px;
    height:120px;
    margin:0 auto;
  }
  .cropper-box{
    width:560px;
    height:270px;
    position: relative;
    .cropper-button{
      position: absolute;
      right:10px;top:10px;
      z-index:1;
      background: #0183FA;
      color:#fff;
      cursor: pointer;
      padding:5px 10px;
      margin:0;
      border-radius:6px;
    }
  }
}
.mine{
  .mine-page{
    .input-number-none-box{
      input{
        text-align: left;
      }
    }
  }
}
</style>