FE-V2-PC/src/views/studentViews/studentMine/index.vue

<template>
    <div class="mine">
      <!--<navbar />-->
      <div class="mine-page">
        <div class="left-max-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">
          <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="110px">
                  <el-input
                    maxlength="40"
                    v-model="userform.email"
                    placeholder="请输入邮箱"
                    clearable
                    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"
                    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:210px;">
                    <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>
              </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="110px">
                  <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 } from "@/api/system/user";
  import { getToken } from "@/utils/auth";
  export default {
    name: "mine",
    components: {
      Navbar,
      userAvatar
    },
    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{
        buttonType:'1',
        uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
        uploadImgUrlTwo: this.uploadUrl(), // 上传的图片服务器地址
        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" }
          ],
          // phone: [
          //   { 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" }
          // ],
          // phonenumber: [
          //   { 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:"",
      }
    },
    created() {
      this.getUser();
    },
    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 = {};
            if(this.userform.phonenumber){
              let regex = /^1[23456789]\d{9}$/;
              if(!regex.test(this.userform.phonenumber)){
                this.msgError('请输入正确的联系方式')
                return
              }else{
                obj.phonenumber = this.userform.phonenumber;
              }
            }else {
              obj.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();
            });
          }
        })
      },
      //修改按钮密码
      submit() {
        let self = this;
        self.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('确定要修改吗', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.updateUserPwd();
            }).then(() => {
            }).catch(() => {});
          }
        });
      },
      //修改密码接口
      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) => {
          const file = new File([data], 'userImg.jpg', { type: 'image/jpeg', lastModified: Date.now() });
          let formData = new FormData();
          formData.append('file',file,"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;
    *{
      margin:0;
    }
    .mine-page{
      flex:1;
      display: flex;
      .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 0;
        }
        .up-data-box{
          display: inline-block;
          width:380px;
          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;
            }
          }
        }
        .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>