<template>
  <div class="mineMenuConfig">
    <div class="left-max-box">
      <div class="max-null-box"></div>
      <div class="phone-max-big-box">
        <div class="top-null-box"></div>
        <div class="center-max-box scrollbar-box">
          <div v-for="(item,index) in mineConfigData" :key="index" @click="buttonEdit(item,index)">
            <!--小型按钮模块-->
            <div class="min-icon-button-box" v-if="item.type === 'minBox'">
              <div v-for="(minItem,minIndex) in item.layout" :key="minIndex">
                <i class="el-icon-s-marketing"></i>
                <p>{{minItem.menuName}}</p>
              </div>
            </div>
            <!--大型按钮模块-->
            <div class="big-icon-button-box" v-if="item.type == 'bigBox'">
              <div class="imgBox" v-for="(minItem,minIndex) in item.layout" :key="minIndex">
                <p class="position-p">{{minItem.menuName}}</p>
                <p class="img-p el-icon-picture" :src="minItem.img"></p>
              </div>
            </div>
            <!--条形按钮模块-->
            <div class="grading-max-box" v-if="item.type == 'stripBox'">
              <div class="grading" v-for="(minItem,minIndex) in item.layout" :key="minIndex">
                <i class="grading_l el-icon-info"></i>
                <p class="grading_c">{{minItem.menuName}}</p>
                <p class="grading_r el-icon-d-arrow-right" ></p>
              </div>
            </div>
            <!--三格按钮模块-->
            <div class="three-big-icon-button-box" v-if="item.type == 'threeBox'">
              <div class="three-left-top-box">
                <p>{{item.layout[0].menuName}}</p>
                <i class="el-icon-picture"></i>
              </div>
              <div class="three-left-bottom-box">
                <p>{{item.layout[1].menuName}}</p>
                <i class="el-icon-picture"></i>
              </div>
              <div class="three-right-box">
                <p>{{item.layout[2].menuName}}</p>
                <i class="el-icon-picture"></i>
              </div>
            </div>
          </div>
          <!--添加模块按钮-->
          <p class="add-button-box" v-if="!mineConfigData[0]" @click="buttonAdd">+ 添加模块</p>
        </div>
        <div class="bottom-null-box"></div>
      </div>
      <div class="max-null-box"></div>
    </div>
    <div class="right-max-box">
      <div class="right-edit-box" v-if="editShowType">
        <p class="right-title">{{editTitle}}</p>
        <div class="edit-box">
          <el-form :model="editData" ref="form" label-width="100px" :rules="editRules">
            <el-form-item label="模块类型" prop="relationType" v-if="editIndex === null">
              <el-select v-model="editData.type" placeholder="请选择类型"
                         @change="rightSelectChange"
                         :disabled="mineMenuConfigDialogEditType">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in optionList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <div v-if="editData.type">
              <!--小型按钮模块-->
              <div class="min-icon-button-box" v-if="editData.type === 'minBox'">
                <div v-for="(minItem,minIndex) in editData.layout" :key="minIndex"
                     @click="rightEditButton(minItem,minIndex)">
                  <i class="img-i el-icon-s-marketing"></i>
                  <p>{{minItem.menuName}}</p>
                  <i class="del-i el-icon-error" @click.stop="rightDelButton(minIndex)"></i>
                </div>
                <div class="add-button" @click="rightAddButton">
                  <i class="img-i el-icon-circle-plus-outline"></i>
                  <p>添加</p>
                </div>
              </div>
              <!--大型按钮模块-->
              <div class="big-icon-button-box" v-if="editData.type == 'bigBox'">
                <div class="imgBox" v-for="(minItem,minIndex) in editData.layout" :key="minIndex"
                     @click="rightEditButton(minItem,minIndex)">
                  <p class="position-p">{{minItem.menuName}}</p>
                  <p class="img-p el-icon-picture" :src="minItem.img"></p>
                  <i class="del-i el-icon-error" @click.stop="rightDelButton(minIndex)"></i>
                </div>
                <div class="imgBox add-button" @click="rightAddButton">
                  <i class="img-i el-icon-circle-plus-outline"></i>
                  <p>添加</p>
                </div>
              </div>
              <!--条形按钮模块-->
              <div class="grading-max-box" v-if="editData.type == 'stripBox'">
                <div class="grading" v-for="(minItem,minIndex) in editData.layout" :key="minIndex"
                     @click="rightEditButton(minItem,minIndex)">
                  <i class="grading_l el-icon-info"></i>
                  <p class="grading_c">{{minItem.menuName}}</p>
                  <p class="grading_r el-icon-error del-i" @click.stop="rightDelButton(minIndex)"></p>
                </div>
                <div class="imgBox add-button" @click="rightAddButton">
                  <i class="img-i el-icon-circle-plus-outline"></i>
                  <p>添加</p>
                </div>
              </div>
              <!--三格按钮模块-->
              <div class="three-big-icon-button-box" v-if="editData.type == 'threeBox'">
                <div class="three-left-top-box" v-if="editData.layout[0].menuName !== null"
                     @click="rightEditButton(editData.layout[0],0)">
                  <p>{{editData.layout[0].menuName}}</p>
                  <i class="el-icon-picture"></i>
                </div>
                <div class="three-left-bottom-box" v-if="editData.layout[1].menuName !== null"
                     @click="rightEditButton(editData.layout[1],1)">
                  <p>{{editData.layout[1].menuName}}</p>
                  <i class="el-icon-picture"></i>
                </div>
                <div class="three-right-box" v-if="editData.layout[2].menuName !== null"
                     @click="rightEditButton(editData.layout[2],2)">
                  <p>{{editData.layout[2].menuName}}</p>
                  <i class="el-icon-picture"></i>
                </div>
                <div class="three-left-top-box null-add-box" v-if="editData.layout[0].menuName === null"
                     @click="rightEditButton(editData.layout[0],0)">
                  <p>添加</p>
                  <i class="el-icon-circle-plus-outline"></i>
                </div>
                <div class="three-left-bottom-box null-add-box" v-if="editData.layout[1].menuName === null"
                     @click="rightEditButton(editData.layout[1],1)">
                  <p>添加</p>
                  <i class="el-icon-circle-plus-outline"></i>
                </div>
                <div class="three-right-box null-add-box" v-if="editData.layout[2].menuName === null"
                     @click="rightEditButton(editData.layout[2],2)">
                  <p>添加</p>
                  <i class="el-icon-circle-plus-outline"></i>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div class="right-button-box">
          <p @click="editButtonClick(1)">保存</p>
          <p @click="editButtonClick(2)">取消</p>
          <p @click="editButtonClick(3)" v-if="editIndex !== null">删除</p>
        </div>
      </div>
      <div class="max-null-box"></div>
    </div>
    <el-dialog class="mine-menu-config-dialog"
               :title="mineMenuConfigDialogTitle"
               :visible.sync="mineMenuConfigDialogEditType"
               v-if="mineMenuConfigDialogEditType"
               width="440px" height="700"
               :modal="false"
               :append-to-body="false">
      <el-form :model="mineMenuConfigDialogData" ref="dialogForm" label-width="80px" :rules="mineMenuConfigDialogRules">
        <el-form-item label="选择菜单" prop="menuId">
          <el-select v-model="mineMenuConfigDialogData.menuId" filterable placeholder="请选择" style="width:300px;">
            <el-option
              v-for="item in menuOptions"
              :key="item.menuId"
              :label="item.menuName"
              :value="item.menuId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { appletMenuList,appletLayoutSelect,appletLayoutSetup,appletLayoutDelete } from "@/api/systemManagement/index";
  export default {
    name: 'mineMenuConfig',
    data(){
      return{
        mineConfigData:[],
        //类型数据
        optionList:[
          // {label:"小型模块", value:"minBox"},
          // {label:"大型模块", value:"bigBox"},
          // {label:"三格型模块", value:"threeBox"},
          {label:"条型型模块", value:"stripBox"},
        ],
        //编辑
        editTitle:"",
        editData:{},
        editIndex:null,
        editShowType:false,
        editRules:{},
        //弹窗数据
        mineMenuConfigDialogData:{},
        mineMenuConfigDialogTitle:"",
        mineMenuConfigDialogIndex:null,
        mineMenuConfigDialogEditType:false,
        //验证
        mineMenuConfigDialogRules:{
          menuId: [
            { required: true, message: "请选择菜单", trigger: "change" },
            { required: true, message: "请选择菜单", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //获取到的可选菜单列表
        menuOptions:[],
      }
    },
    created(){
      this.appletMenuList();
      this.appletLayoutSelect();
    },
    mounted(){

    },
    methods:{
      //获取布局
      appletLayoutSelect(){
        appletLayoutSelect({module:'mine'}).then(response => {
          let list = JSON.parse(JSON.stringify(response.data))
          for(let i=0;i<list.length;i++){
            list[i].layout = JSON.parse(list[i].layout);
          }
          this.$set(this,'mineConfigData',list);
        });
      },
      //保存布局
      appletLayoutSetup(){
        let obj = {
          id:this.editData.id?this.editData.id:'',
          module:this.editData.module,
          // sort:this.editData.sort,
          type:this.editData.type,
          layout:JSON.stringify(this.editData.layout),
        }
        appletLayoutSetup(obj).then(response => {
          this.offRightBox();
          this.msgSuccess(response.message)
          this.appletLayoutSelect();
        });
      },
      //删除布局
      appletLayoutDelete(id){
        appletLayoutDelete({id:id}).then(response => {
          this.offRightBox();
          this.msgSuccess(response.message)
          this.appletLayoutSelect();
        });
      },
      //获取可选菜单列表
      appletMenuList(){
        appletMenuList({}).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].parentId == 0){
              list.push(response.data[i])
            }
          }
          this.$set(this,'menuOptions',list);
        });
      },
      //新增模块
      buttonAdd(){
        this.$set(this,'editTitle','新增');
        this.$set(this,'editData',{
          module:"mine",
          // sort:0,
          type:"",
          layout:[],
        });
        this.$set(this,'editIndex',null);
        this.$set(this,'editShowType',true);
      },
      //编辑模块
      buttonEdit(item,index){
        this.$set(this,'editTitle','编辑');
        let obj = {
          id:item.id,
          module:"mine",
          // sort:item.sort,
          type:item.type,
          layout:item.layout,
        }
        this.$set(this,'editData',JSON.parse(JSON.stringify(obj)));
        this.$set(this,'editIndex',index);
        this.$set(this,'editShowType',true);
      },
      //右侧按钮新增
      rightAddButton(){
        this.$set(this,'mineMenuConfigDialogTitle','新增');
        this.$set(this,'mineMenuConfigDialogData',{menuId:""});
        this.$set(this,'mineMenuConfigDialogIndex',null);
        this.$set(this,'mineMenuConfigDialogEditType',true);
      },
      //右侧下啦选中
      rightSelectChange(type){
        if(type == 'threeBox'){
          this.$set(this,'editData',{
            module:"mine",
            // sort:0,
            type:type,
            layout:[
              {menuName:null,menuId:null,path:null},
              {menuName:null,menuId:null,path:null},
              {menuName:null,menuId:null,path:null}
            ]
          });
        }else{
          this.$set(this,'editData',{
            module:"mine",
            // sort:0,
            type:type,
            layout:[]
          });
        }
      },
      //右侧按钮编辑
      rightEditButton(minItem,minIndex){
        this.$set(this,'mineMenuConfigDialogTitle','编辑');
        this.$set(this,'mineMenuConfigDialogData',JSON.parse(JSON.stringify(minItem)));
        this.$set(this,'mineMenuConfigDialogIndex',minIndex);
        this.$set(this,'mineMenuConfigDialogEditType',true);
      },
      //右侧关闭
      offRightBox(){
        this.$set(this,'editTitle','');
        this.$set(this,'editData',{});
        this.$set(this,'editIndex',null);
        this.$set(this,'editShowType',false);
      },
      //弹窗关闭
      dialogOff(){
        this.$set(this,'mineMenuConfigDialogEditType',false);
      },
      //弹窗确定
      dialogSubmit(){
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if(valid){
            this.$set(this,'mineMenuConfigDialogEditType',false);
            let obj = {};
            for(let i=0;i<self.menuOptions.length;i++){
              if(self.mineMenuConfigDialogData.menuId == self.menuOptions[i].menuId){
                obj = {
                  menuName:self.menuOptions[i].menuName,
                  menuId:self.menuOptions[i].menuId,
                  path:self.menuOptions[i].path,
                }
              }
            }
            if(!obj.menuId){
              this.msgError('数据异常,请再次尝试')
              return
            }
            if(this.mineMenuConfigDialogIndex != null){
              this.$set(this.editData.layout,this.mineMenuConfigDialogIndex,obj);
            }else{
              this.editData.layout.push(obj);
            }
          }
        });
      },
      //右侧按钮删除
      rightDelButton(minIndex){
        this.editData.layout.splice(minIndex,1);
      },
      editButtonClick(type){
        let self = this;
        if(type == 1){
          if(!this.editData.type){
            this.msgError('请选择模块类型')
            return
          }
          if(!this.editData.layout[0]){
            this.msgError('请添加按钮');
            return
          }
          if(this.editData.type == 'threeBox'){
            if(this.editData.layout[0].menuName === null ||
              this.editData.layout[0].menuId === null ||
              this.editData.layout[0].path === null ||
              this.editData.layout[1].menuName === null ||
              this.editData.layout[1].menuId === null ||
              this.editData.layout[1].path === null ||
              this.editData.layout[2].menuName === null ||
              this.editData.layout[2].menuId === null ||
              this.editData.layout[2].path === null){
              this.msgError('请设置所有按钮')
              return
            }
          }
          this.$confirm('是否确认保存?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            self.appletLayoutSetup();
          }).catch(function() {});
        }else if(type == 2){
          this.offRightBox();
        }else if(type == 3){
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            self.appletLayoutDelete(this.editData.id);
          }).catch(function() {});
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .mineMenuConfig{
    flex:1;
    display: flex;
    .left-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .max-null-box{
        flex:1;
      }
      .phone-max-big-box{
        height:667px;
        width:375px;
        margin:0 auto;
        border-radius:10px;
        border:1px solid #dedede;
        background: url("../../../../assets/ZDimages/systemManagement/minePageImg.png");
        display: flex;
        flex-direction: column;
        .top-null-box{
          height:243px;
        }
        .bottom-null-box{
          height:47px;
        }
        .center-max-box{
          overflow-x: hidden;
          flex:1;
          .add-button-box{
            cursor: pointer;
            height:40px;
            line-height:38px;
            text-align: center;
            border:1px solid #0183FA;
            background: #0183FA;
            color:#fff;
            font-size:12px;
            border-radius:6px;
            margin:20px 14px 20px 20px;
          }
          .add-button-box:hover{
            border:1px solid #0183FA;
            background: #fff;
            color:#0183FA;
          }
          .min-icon-button-box{
            cursor: pointer;
            display:flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            width:355px;
            margin:20px 10px 0 10px;
            background :#ffffff;
            border-radius:10px;
            padding-bottom: 10px;
            border:1px solid #ffffff;
            div{
              width: 88px;
              i{
                display: block;
                height:37px;
                width:37px;
                line-height:37px;
                text-align: center;
                font-size:37px;
                margin:15px auto 5px;
                color:#999;
              }
              p{
                text-align:center;
                font-size:12px;
                color:#333;
              }
            }
          }
          .min-icon-button-box:hover{
            border:1px solid #0183FA;
            i{
              color:#0183FA;
            }
          }
          .big-icon-button-box {
            border-radius:10px;
            width:100%;
            cursor: pointer;
            border:1px solid #F5F5F5;
            margin: 20px 0 0 0;
            .imgBox {
              display: inline-block;
              width: 174px;
              height: 75px;
              margin: 5px 0 0 8px;
              position: relative;
              background: #dedede;
            }
            .position-p{
              position: absolute;
              top:5px;
              left:10px;
              color:#333;
              font-size:12px;
            }
            .img-p {
              position: absolute;
              top:0;
              right:0;
              display: inline-block;
              width: 75px;
              height: 75px;
              font-size:75px;
              color:#999;
            }
          }
          .big-icon-button-box:hover{
            border:1px solid #0183FA;
            .img-p{
              color:#0183FA;
            }
          }
          .grading-max-box{
            border-radius:10px;
            width :354px;
            margin:20px 10px 0;
            border:1px solid #f5f5f5;
            cursor: pointer;
            .grading{
              width :352px;
              height :40px;
              background: #FFFFFF;
              border-radius: 10px;
              margin-bottom :10px;
              display:flex;
              justify-content :flex-start;
              align-items :center;
              .grading_l{
                width :17px;
                height :17px;
                margin-left:10px;
                color:#999;
                font-size:17px;
              }
              .grading_c{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-left:8px;
              }
              .grading_r{
                flex:1;
                height :40px;
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999;
                display :flex;
                justify-content :flex-end;
                align-items: center;
                padding-right:10px;
              }
            }
          }
          .grading-max-box:hover{
            border:1px solid #0183FA;
            .grading_l,.grading_c,.grading_r{
              color:#0183FA;
            }
          }
          .three-big-icon-button-box{
            cursor: pointer;
            height:175px;
            width:350px;
            margin:20px 10px 0 10px;
            border:1px solid #fff;
            background: #fff;
            border-radius:10px;
            padding-bottom: 10px;
            position: relative;
            .three-left-top-box{
              width: 155px;
              height: 75px;
              position: absolute;
              top:7px;
              left:10px;
              background: #dedede;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:75px;
                color:#999;
              }
            }
            .three-left-bottom-box{
              width: 155px;
              height: 75px;
              position: absolute;
              top:89px;
              left:10px;
              background: #dedede;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:75px;
                color:#999;
              }
            }
            .three-right-box{
              position: absolute;
              background: #dedede;
              top:7px;
              right:10px;
              width: 166px;
              height: 157px;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:140px;
                color:#999;
              }
            }
          }
          .three-big-icon-button-box:hover{
            border:1px solid #0183FA;
            i{
              color:#0183FA;
            }
          }
        }
      }
    }
    .right-max-box{
      flex:1;
      display: flex;
      .max-null-box{
        flex:1;
      }
      .right-edit-box{
        width:375px;
        flex:1;
        display: flex;
        flex-direction: column;
        .right-title{
          width:375px;
          text-align: center;
          line-height:60px;
          font-size:16px;
          font-weight: 700;
          color:#0045AF;
        }
        .edit-box{
          width:375px;
          flex:1;
          padding:20px 0;
          background: #f5f5f5;
          .min-icon-button-box{
            display:flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            width:355px;
            margin:0 10px 0 10px;
            background :#ffffff;
            border-radius:10px;
            padding-bottom: 10px;
            border:1px solid #ffffff;
            div{
              cursor: pointer;
              width: 88px;
              position: relative;
              .img-i{
                display: block;
                height:37px;
                width:37px;
                line-height:37px;
                text-align: center;
                font-size:37px;
                margin:15px auto 5px;
                color:#999;
              }
              p{
                text-align:center;
                font-size:12px;
                color:#333;
              }
              .del-i{
                position: absolute;
                right:10px;
                top:10px;
                font-size:16px;
                cursor: pointer;
                color:#999;
              }
              .del-i:hover{
                color:#E65D6E;
              }
            }
            .add-button{
              cursor: pointer;
              .img-i,p{
                color:#0183FA;
              }
            }
          }
          .big-icon-button-box {
            border-radius:10px;
            width:100%;
            border:1px solid #F5F5F5;
            .imgBox {
              display: inline-block;
              width: 174px;
              height: 75px;
              margin: 5px 0 0 8px;
              position: relative;
              background: #dedede;
              cursor: pointer;
              .position-p{
                position: absolute;
                top:5px;
                left:10px;
                color:#333;
                font-size:12px;
              }
              .img-p {
                position: absolute;
                bottom:0;
                right:25px;
                display: inline-block;
                width: 70px;
                height: 70px;
                font-size:70px;
                color:#999;
              }
              .del-i{
                z-index:99;
                position: absolute;
                right:5px;
                top:5px;
                font-size:16px;
                cursor: pointer;
                color:#999;
              }
              .del-i:hover{
                color:#E65D6E;
              }
            }
            .add-button{
              cursor: pointer;
              p{
                position: absolute;
                top:5px;
                left:10px;
                color:#0183FA;
                font-size:12px;
              }
              .img-i{
                color:#0183FA;
                position: absolute;
                top:5px;
                right:0;
                display: inline-block;
                width: 75px;
                height: 75px;
                font-size:65px;
              }
            }
          }
          .grading-max-box{
            border-radius:10px;
            width :354px;
            margin:0 10px 0;
            border:1px solid #f5f5f5;
            .grading{
              width :352px;
              height :40px;
              background: #FFFFFF;
              border-radius: 10px;
              margin-bottom :10px;
              display:flex;
              justify-content :flex-start;
              align-items :center;
              .grading_l{
                width :17px;
                height :17px;
                margin-left:10px;
                color:#999;
                font-size:17px;
              }
              .grading_c{
                flex:1;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-left:8px;
              }
              .grading_r{
                height :40px;
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999;
                display :flex;
                justify-content :flex-end;
                align-items: center;
                padding-right:10px;
              }
              .del-i{
                cursor: pointer;
                color:#999;
              }
              .del-i:hover{
                color:#E65D6E;
              }
            }
            .add-button{
              cursor: pointer;
              width :352px;
              height :40px;
              background: #FFFFFF;
              border-radius: 10px;
              margin-bottom :10px;
              display:flex;
              justify-content :flex-start;
              align-items :center;
              .img-i{
                width :17px;
                height :17px;
                margin-left:10px;
                color:#0183FA;
                font-size:17px;
              }
              p{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color:#0183FA;
                margin-left:8px;
              }
            }
          }
          .three-big-icon-button-box{
            height:175px;
            width:350px;
            margin:0 10px 0 10px;
            border:1px solid #fff;
            background: #fff;
            border-radius:10px;
            padding-bottom: 10px;
            position: relative;
            .three-left-top-box{
              cursor: pointer;
              width: 155px;
              height: 75px;
              position: absolute;
              top:7px;
              left:10px;
              background: #dedede;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
                z-index: 10;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:55px;
                color:#999;
              }
            }
            .three-left-bottom-box{
              cursor: pointer;
              width: 155px;
              height: 75px;
              position: absolute;
              top:89px;
              left:10px;
              background: #dedede;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
                z-index: 10;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:55px;
                color:#999;
              }
            }
            .three-right-box{
              cursor: pointer;
              position: absolute;
              background: #dedede;
              top:7px;
              right:10px;
              width: 166px;
              height: 157px;
              p{
                position: absolute;
                top:5px;
                left:10px;
                font-size:12px;
                z-index: 10;
              }
              i{
                position: absolute;
                right:0;
                bottom:0;
                font-size:140px;
                color:#999;
              }
            }
            .null-add-box{
              cursor: pointer;
              p{
                color:#0183FA;
              }
              i{
                color:#0183FA;
              }
            }
          }
        }
        .right-button-box{
          width:375px;
          display: flex;
          margin:20px 0;
          p{
            text-align: center;
            font-size:14px;
            line-height:40px;
            flex:1;
            cursor:pointer;
          }
          p:nth-child(1){
            color:#fff;
            background: #0183FA;
          }
          p:nth-child(2){
            color:#fff;
            background: #999;
          }
          p:nth-child(3){
            color:#fff;
            background: red;
          }
        }
      }
    }
  }
</style>
