<!--首页配置-->
<template>
  <div class="homeConfig">
    <!-- scrollbar-box-->
    <el-form class="homeConfig-form scrollbar-box" :model="form"
             ref="form" :rules="rules" label-width="200px">
      <el-form-item label="是否开启首页：">
        <el-radio-group v-model="form.skipHomePage">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--首页开启-->
      <div class="button-box" v-if="form.skipHomePage">
        <div class="button-box-title-box">
          <p class="button-box-title-p">居中按钮配置：<span style="color:#666;"> (最多可配置1个按钮)</span></p>
          <p class="add-button-p" @click="addHomeButton('center')" v-if="!form.centerButtonList[0]">新增</p>
        </div>
        <div class="button-min-box">
          <div class="null-box" v-if="!form.centerButtonList[0]">未配置</div>
          <div class="button-for-box" v-for="(item,index) in form.centerButtonList" :key="index">
            <p class="img-title-p"><span>*</span> 按钮图片：<span style="color:#666;">(尺寸限制为147宽*105高)</span></p>
            <div class="button-for-min-box">
              <div class="button-for-min-left-box">
                <el-form-item label="" label-width="0"
                              :prop="'centerButtonList.' + index + '.imgUrl'" :rules="rules.imgUrl">
                  <el-upload
                    class="certificate-avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,form.centerButtonList,index)"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file,'center')">
                    <div class="center-img">
                      <img v-if="item.imgUrl" :src="item.imgUrl">
                      <p v-if="!item.imgUrl" class="el-icon-plus" style="text-align: center;line-height:104px;font-size:30px;color:#999;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="button-for-min-right-box">
                <el-form-item label="按钮类型:" label-width="100px"
                              :prop="'centerButtonList.' + index + '.buttonType'" :rules="rules.buttonType">
                  <el-radio-group v-model="item.buttonType">
                    <el-radio :label="true" style="margin-top:4px;">现有模块</el-radio>
                    <el-radio :label="false" style="margin-top:4px;">暂未开放</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="功能模块:" label-width="100px" v-if="item.buttonType"
                              :prop="'centerButtonList.' + index + '.menuId'" :rules="rules.menuId">
                  <el-cascader
                    @change="(val)=>menuChange(val,item)"
                    style="width:200px;"
                    :show-all-levels="false"
                    v-model="item.menuId"
                    :options="menuOptionsMax"
                    :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
                </el-form-item>
                <el-form-item label="功能名称:" label-width="100px" v-if="!item.buttonType"
                              :prop="'centerButtonList.' + index + '.buttonName'" :rules="rules.buttonName">
                  <el-input v-model="item.buttonName" placeholder="请输入内容" maxLength="10" style="width:200px;"
                            :prop="'centerButtonList.' + index + '.buttonName'" :rules="rules.buttonName"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" label-width="100px"
                              :prop="'centerButtonList.' + index + '.switch'" :rules="rules.switch">
                  <el-switch
                    v-model="item.switch"
                    active-color="#13ce66"
                    inactive-color="#dedede">
                  </el-switch>
                </el-form-item>
              </div>
              <!--<div class="button-for-sort-button-box">-->
                <!--<p class="sort-null-p"></p>-->
                <!--<p class="el-icon-arrow-up" @click="sortClick(form.centerButtonList,index,'top')"></p>-->
                <!--<p class="el-icon-arrow-down" @click="sortClick(form.centerButtonList,index,'bottom')"></p>-->
                <!--<p class="sort-null-p"></p>-->
              <!--</div>-->
              <p class="del-p el-icon-close" @click="delHomeButton('center',index)"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="button-box" v-if="form.skipHomePage">
        <div class="button-box-title-box">
          <p class="button-box-title-p">左侧按钮配置：<span style="color:#666;"> (最多可配置3个按钮)</span></p>
          <p class="add-button-p" @click="addHomeButton('left')" v-if="!form.leftButtonList[2]">新增</p>
        </div>
        <div class="button-min-box">
          <div class="null-box" v-if="!form.leftButtonList[0]">未配置</div>
          <div class="button-for-box" v-for="(item,index) in form.leftButtonList" :key="index">
            <p class="img-title-p"><span>*</span> 按钮图片：<span style="color:#666;">(尺寸限制为297宽*136高)</span></p>
            <div class="button-for-min-box">
              <div class="button-for-min-left-box">
                <el-form-item label="" label-width="0"
                              :prop="'leftButtonList.' + index + '.imgUrl'" :rules="rules.imgUrl">
                  <el-upload
                    class="certificate-avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,form.leftButtonList,index)"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file,'left')">
                    <div class="left-img">
                      <img v-if="item.imgUrl" :src="item.imgUrl">
                      <p v-if="!item.imgUrl" class="el-icon-plus" style="text-align: center;line-height:136px;font-size:30px;color:#999;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="button-for-min-right-box">
                <el-form-item label="按钮类型:" label-width="100px"
                              :prop="'leftButtonList.' + index + '.buttonType'" :rules="rules.buttonType">
                  <el-radio-group v-model="item.buttonType">
                    <el-radio :label="true" style="margin-top:4px;">现有模块</el-radio>
                    <el-radio :label="false" style="margin-top:4px;">暂未开放</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="功能模块:" label-width="100px" v-if="item.buttonType"
                              :prop="'leftButtonList.' + index + '.menuId'" :rules="rules.menuId">
                  <el-cascader
                    @change="(val)=>menuChange(val,item)"
                    style="width:200px;"
                    :show-all-levels="false"
                    v-model="item.menuId"
                    :options="menuOptionsMax"
                    :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
                </el-form-item>
                <el-form-item label="功能名称:" label-width="100px" v-if="!item.buttonType"
                              :prop="'leftButtonList.' + index + '.buttonName'" :rules="rules.buttonName">
                  <el-input v-model="item.buttonName" placeholder="请输入内容" maxLength="10" style="width:200px;"
                            :prop="'leftButtonList.' + index + '.buttonName'" :rules="rules.buttonName"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" label-width="100px"
                              :prop="'leftButtonList.' + index + '.switch'" :rules="rules.switch">
                  <el-switch
                    v-model="item.switch"
                    active-color="#13ce66"
                    inactive-color="#dedede">
                  </el-switch>
                </el-form-item>
              </div>
              <div class="button-for-sort-button-box">
                <p class="sort-null-p"></p>
                <p class="el-icon-arrow-up" @click="sortClick(form.leftButtonList,index,'top')"></p>
                <p class="el-icon-arrow-down" @click="sortClick(form.leftButtonList,index,'bottom')"></p>
                <p class="sort-null-p"></p>
              </div>
              <p class="del-p el-icon-close" @click="delHomeButton('left',index)"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="button-box" v-if="form.skipHomePage">
        <div class="button-box-title-box">
          <p class="button-box-title-p">右侧按钮配置：<span style="color:#666;"> (最多可配置3个按钮)</span></p>
          <p class="add-button-p" @click="addHomeButton('right')" v-if="!form.rightButtonList[2]">新增</p>
        </div>
        <div class="button-min-box">
          <div class="null-box" v-if="!form.rightButtonList[0]">未配置</div>
          <div class="button-for-box" v-for="(item,index) in form.rightButtonList" :key="index">
            <p class="img-title-p"><span>*</span> 按钮图片：<span style="color:#666;">(尺寸限制为297宽*136高)</span></p>
            <div class="button-for-min-box">
              <div class="button-for-min-left-box">
                <el-form-item label="" label-width="0"
                              :prop="'rightButtonList.' + index + '.imgUrl'" :rules="rules.imgUrl">
                  <el-upload
                    class="certificate-avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,form.rightButtonList,index)"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file,'right')">
                    <div class="right-img">
                      <img v-if="item.imgUrl" :src="item.imgUrl">
                      <p v-if="!item.imgUrl" class="el-icon-plus" style="text-align: center;line-height:136px;font-size:30px;color:#999;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="button-for-min-right-box">
                <el-form-item label="按钮类型:" label-width="100px"
                              :prop="'rightButtonList.' + index + '.buttonType'" :rules="rules.buttonType">
                  <el-radio-group v-model="item.buttonType">
                    <el-radio :label="true" style="margin-top:4px;">现有模块</el-radio>
                    <el-radio :label="false" style="margin-top:4px;">暂未开放</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="功能模块:" label-width="100px" v-if="item.buttonType"
                              :prop="'rightButtonList.' + index + '.menuId'" :rules="rules.menuId">
                  <el-cascader
                    @change="(val)=>menuChange(val,item)"
                    style="width:200px;"
                    :show-all-levels="false"
                    v-model="item.menuId"
                    :options="menuOptionsMax"
                    :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
                </el-form-item>
                <el-form-item label="功能名称:" label-width="100px" v-if="!item.buttonType"
                              :prop="'rightButtonList.' + index + '.buttonName'" :rules="rules.buttonName">
                  <el-input v-model="item.buttonName" placeholder="请输入内容" maxLength="10" style="width:200px;"
                            :prop="'rightButtonList.' + index + '.buttonName'" :rules="rules.buttonName"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" label-width="100px"
                              :prop="'rightButtonList.' + index + '.switch'" :rules="rules.switch">
                  <el-switch
                    v-model="item.switch"
                    active-color="#13ce66"
                    inactive-color="#dedede">
                  </el-switch>
                </el-form-item>
              </div>
              <div class="button-for-sort-button-box">
                <p class="sort-null-p"></p>
                <p class="el-icon-arrow-up" @click="sortClick(form.rightButtonList,index,'top')"></p>
                <p class="el-icon-arrow-down" @click="sortClick(form.rightButtonList,index,'bottom')"></p>
                <p class="sort-null-p"></p>
              </div>
              <p class="del-p el-icon-close" @click="delHomeButton('right',index)"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="button-box" v-if="form.skipHomePage">
        <div class="button-box-title-box">
          <p class="button-box-title-p">底部按钮配置：<span style="color:#666;"> (最多可配置5个按钮)</span></p>
          <p class="add-button-p" @click="addHomeButton('bottom')" v-if="!form.bottomButtonList[4]">新增</p>
        </div>
        <div class="button-min-box">
          <div class="null-box" v-if="!form.bottomButtonList[0]">未配置</div>
          <div class="button-for-box" v-for="(item,index) in form.bottomButtonList" :key="index">
            <p class="img-title-p"><span>*</span> 按钮图片：<span style="color:#666;">(尺寸限制为140宽*230高)</span></p>
            <div class="button-for-min-box">
              <div class="button-for-min-left-box">
                <el-form-item label="" label-width="0"
                              :prop="'bottomButtonList.' + index + '.imgUrl'" :rules="rules.imgUrl">
                  <el-upload
                    class="certificate-avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,form.bottomButtonList,index)"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file,'bottom')">
                    <div class="bottom-img">
                      <img v-if="item.imgUrl" :src="item.imgUrl">
                      <p v-if="!item.imgUrl" class="el-icon-plus" style="text-align: center;line-height:230px;font-size:30px;color:#999;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="button-for-min-right-box">
                <el-form-item label="按钮类型:" label-width="100px"
                              :prop="'bottomButtonList.' + index + '.buttonType'" :rules="rules.buttonType">
                  <el-radio-group v-model="item.buttonType">
                    <el-radio :label="true" style="margin-top:4px;">现有模块</el-radio>
                    <el-radio :label="false" style="margin-top:4px;">暂未开放</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="功能模块:" label-width="100px" v-if="item.buttonType"
                              :prop="'bottomButtonList.' + index + '.menuId'" :rules="rules.menuId">
                  <el-cascader
                    @change="(val)=>menuChange(val,item)"
                    style="width:200px;"
                    :show-all-levels="false"
                    v-model="item.menuId"
                    :options="menuOptionsMax"
                    :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
                </el-form-item>
                <el-form-item label="功能名称:" label-width="100px" v-if="!item.buttonType"
                              :prop="'bottomButtonList.' + index + '.buttonName'" :rules="rules.buttonName">
                  <el-input v-model="item.buttonName" placeholder="请输入内容" maxLength="10" style="width:200px;"
                            :prop="'bottomButtonList.' + index + '.buttonName'" :rules="rules.buttonName"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" label-width="100px"
                              :prop="'bottomButtonList.' + index + '.switch'" :rules="rules.switch">
                  <el-switch
                    v-model="item.switch"
                    active-color="#13ce66"
                    inactive-color="#dedede">
                  </el-switch>
                </el-form-item>
              </div>
              <div class="button-for-sort-button-box">
                <p class="sort-null-p"></p>
                <p class="el-icon-arrow-up" @click="sortClick(form.bottomButtonList,index,'top')"></p>
                <p class="el-icon-arrow-down" @click="sortClick(form.bottomButtonList,index,'bottom')"></p>
                <p class="sort-null-p"></p>
              </div>
              <p class="del-p el-icon-close" @click="delHomeButton('bottom',index)"></p>
            </div>
          </div>
        </div>
      </div>
      <!--首页关闭-->
      <el-form-item label="学生登录跳转至指定页面：" v-if="!form.skipHomePage">
        <el-radio-group v-model="form.studentsSkip">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学生跳转指定页面：" prop="studentsSkipMenuId" v-if="!form.skipHomePage&&form.studentsSkip">
        <el-cascader
          :show-all-levels="false"
          v-model="form.studentsSkipMenuId"
          :options="menuOptions"
          :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
      </el-form-item>
      <el-form-item label="老师登录跳转至指定页面：" v-if="!form.skipHomePage">
        <el-radio-group v-model="form.teacherSkip">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="老师跳转指定页面：" prop="teacherSkipMenuId" v-if="!form.skipHomePage&&form.teacherSkip">
        <el-cascader
          :show-all-levels="false"
          v-model="form.teacherSkipMenuId"
          :options="menuOptions"
          :props="{ value: 'menuId', label: 'menuName',emitPath:false  }"></el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { listMenu } from "@/api/systemManagement/index";
  import { getConfigByType } from "@/api/commonality/permission";
  import { addOrUpdate } from "@/api/systemManagement/index";
  export default {
    name: 'homeConfig',
    data(){
      return{
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        configId:null,
        //数据
        form:{
          skipHomePage:true,
          studentsSkip:false,
          studentsSkipMenuId:'',
          teacherSkip:false,
          teacherSkipMenuId:'',
          centerButtonList:[],
          leftButtonList:[],
          rightButtonList:[],
          bottomButtonList:[],
        },
        rules:{
          imgUrl: [
            { required: true, message: "请上传按钮图片", trigger: "change" }
          ],
          buttonType: [
            { required: true, message: "请选择按钮类型", trigger: "change" }
          ],
          menuId: [
            { required: true, message: "请选择功能模块", trigger: "change" }
          ],
          buttonName: [
            { required: true, message: "请输入功能名称", trigger: "change" }
          ],
          switch: [
            { required: true, message: "请选择按钮开关", trigger: "change" }
          ],
        },
        //菜单列表
        menuOptions:[],
        menuOptionsMax:[],
      }
    },
    created(){

    },
    mounted(){
      this.getMenu();
      this.getConfigByType();
    },
    methods:{
      //模块选中
      menuChange(val,item){
        let self = this;
        for(let i=0;i<self.menuOptionsMax.length;i++){
          if(val == self.menuOptionsMax[i].menuId){
            item.menuName = self.menuOptionsMax[i].menuName
            item.path = self.menuOptionsMax[i].path
            item.isFrame = self.menuOptionsMax[i].isFrame
          }
        }
        this.$forceUpdate();
      },
      //提交&更新
      addOrUpdate(){
        let self = this;
        if(this.form.skipHomePage){
          if(!this.form.centerButtonList[0]&&
            !this.form.leftButtonList[0]&&
            !this.form.rightButtonList[0]&&
            !this.form.bottomButtonList[0]){
            this.msgError('请配置至少一个按钮')
            return
          }
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              let obj = {
                id:self.configId,
                configName: "首页配置",
                category:2,
                configKey:6,
                configValue : JSON.stringify(self.form),
              }
              addOrUpdate(obj).then(response => {
                self.getConfigByType();
                self.msgSuccess(response.message)
              });
            }).catch(() => {});
          }
        })
      },
      //获取配置数据
      getConfigByType(){
        getConfigByType({ category: 2, configType: 6 }).then(response => {
          this.$set(this,'configId',response.data.id);
          this.$set(this,'form',JSON.parse(response.data.configValue));
        });
      },
      //移动排序
      sortClick(list,index,status){
        let tindex = null;
        if(index == 0 && status == 'top'){
          return
        }else if(list.length == index+1 && status == 'bottom'){
          return
        }
        if (status == 'top'){
          tindex = index-1
          list.splice(tindex,0,list[index]);
          list.splice(index+1,1)
        } else if(status == 'bottom'){
          tindex = index+1
          list.splice(tindex+1,0,list[index]);
          list.splice(index,1)
        }
      },
      //删除首页按钮
      delHomeButton(type,index){
        let self = this;
        if(type === 'center'){
          this.$confirm('确认删除该按钮?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.form.centerButtonList.splice(index,1);
          }).then(() => {
          }).catch(() => {});
        }else if(type === 'left'){
          this.$confirm('确认删除该按钮?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.form.leftButtonList.splice(index,1);
          }).then(() => {
          }).catch(() => {});
        }else if(type === 'right'){
          this.$confirm('确认删除该按钮?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.form.rightButtonList.splice(index,1);
          }).then(() => {
          }).catch(() => {});
        }else if(type === 'bottom'){
          this.$confirm('确认删除该按钮?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.form.bottomButtonList.splice(index,1);
          }).then(() => {
          }).catch(() => {});
        }
      },
      //添加首页按钮
      addHomeButton(type){
        if(type === 'center'){
          this.form.centerButtonList.push({
            imgUrl:null,
            buttonType:true,
            menuId:null,
            menuName:null,
            path:null,
            isFrame:null,
            buttonName:null,
            switch:true
          })
        }else if(type === 'left'){
          this.form.leftButtonList.push({
            imgUrl:null,
            buttonType:true,
            menuId:null,
            menuName:null,
            path:null,
            isFrame:null,
            buttonName:null,
            switch:true
          })
        }else if(type === 'right'){
          this.form.rightButtonList.push({
            imgUrl:null,
            buttonType:true,
            menuId:null,
            menuName:null,
            path:null,
            isFrame:null,
            buttonName:null,
            switch:true
          })
        }else if(type === 'bottom'){
          this.form.bottomButtonList.push({
            imgUrl:null,
            buttonType:true,
            menuId:null,
            menuName:null,
            path:null,
            isFrame:null,
            buttonName:null,
            switch:true
          })
        }
        this.$forceUpdate();
      },
      //获取菜单列表
      getMenu(){
        listMenu({ menuName: undefined, visible: undefined }).then(response => {

          let list = [];
          let newList = []
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].status&&response.data[i].visible&&!response.data[i].isFrame && response.data[i].component){
              list.push(response.data[i])
            }
            if(response.data[i].status&&response.data[i].visible&&response.data[i].component == 'Layout'){
              newList.push(response.data[i])
            }
          }
          this.$set(this,'menuOptions',this.handleTree(JSON.parse(JSON.stringify(list)), "menuId"));
          this.$set(this,'menuOptionsMax',JSON.parse(JSON.stringify(newList)));
        });
      },
      //图片上传相关
      handleAvatarSuccess(res,list,index) {
        list[index].imgUrl = res.data.url;
      },
      beforeAvatarUpload(file,status) {
        return new Promise((resolve, reject) => {
          if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif') {
            let reader = new FileReader()
            reader.readAsDataURL(file) // 必须用file.raw
            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
              let img = e.target.result;
              const image = new Image()
              image.src=img
              image.onload = _=>{
                if(status == 'center'){
                  if(image.width <= 147 && image.height <= 105){
                    resolve()
                  }else{
                    this.msgError('尺寸限制为147*105px')
                    reject();
                  }
                }else if(status == 'left' || status == 'right'){
                  if(image.width <= 297 && image.height <= 136){
                    resolve()
                  }else{
                    this.msgError('尺寸限制为297*136px')
                    reject();
                  }
                }else if(status == 'bottom'){
                  if(image.width <= 140 && image.height <= 230){
                    resolve()
                  }else{
                    this.msgError('尺寸限制为140*230px')
                    reject();
                  }
                }
              }
            }
          }else{
            this.msgError('只能上传png/jpeg/jpg/gif格式图片');
            reject();
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .homeConfig{
    display: flex;
    flex:1;
    flex-direction: column;
    padding:20px 20px 0 20px;
    overflow: hidden;
    .homeConfig-form{
      display: flex;
      flex:1;
      flex-direction: column;
      font-weight:500;
      .button-box{
        display: flex;
        flex:1;
        flex-direction: column;
        border-radius:10px;
        margin-bottom:20px;
        .button-box-title-box{
          border-top:4px solid #dedede;
          display: flex;
          .button-box-title-p{
            flex:1;
            font-size:14px;
            line-height:80px;
            margin-left:90px;
          }
          .add-button-p{
            height:30px;
            width:80px;
            margin:25px 50px 25px 0;
            line-height:30px;
            text-align: center;
            border-radius:4px;
            border:1px solid #0183fa;
            color:#0183fa;
            font-size:14px;
            cursor: pointer;
          }
          .add-button-p:hover{
            border:1px solid #0183fa;
            background-color: #0183fa;
            color:#fff;
          }
        }
        .button-min-box{
          margin:0 50px;
          .null-box{
            line-height:100px;
            font-size:24px;
            text-align: center;
            color:#999;
            padding-bottom:80px;
          }
          .button-for-box{
            border:1px solid #dedede;
            border-radius:6px;
            display: inline-block;
            margin:0 20px 20px 0;
            position: relative;
            .img-title-p{
              font-size:14px;
              line-height:50px;
              margin-left:20px;
              span{
                color: red;
              }
            }
            .button-for-min-box{
              padding-right:20px;
              display: flex;
              .button-for-min-left-box{
                padding-left:20px;
              }
              .button-for-min-right-box{
                display: flex;
                flex-direction: column;
              }
              .button-for-sort-button-box{
                width:30px;
                display: flex;
                flex-direction: column;
                margin:0 0 0 20px;
                .sort-null-p{
                  flex:1;
                }
                .el-icon-arrow-up{
                  border: 1px solid #dedede;
                  background-color: #dedede;
                  color:#fff;
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
                  line-height: 60px;
                  text-align: center;
                  font-size:18px;
                  cursor: pointer;
                }
                .el-icon-arrow-down{
                  border: 1px solid #dedede;
                  background-color: #dedede;
                  border-bottom-left-radius: 6px;
                  border-bottom-right-radius: 6px;
                  color:#fff;
                  line-height: 60px;
                  text-align: center;
                  font-size:18px;
                  cursor: pointer;
                }
                .el-icon-arrow-up:hover{
                  background-color: #0183fa;
                  color:#fff;
                }
                .el-icon-arrow-down:hover{
                  background-color: #0183fa;
                  color:#fff;
                }
                p:nth-child(4){
                  margin-bottom:40px;
                }
              }
              .center-img{
                width:147px;
                height:105px;
                overflow: hidden;
                border-radius: 4px;
                border:1px solid #dedede;
                img{
                  display: block;
                  width:146px;
                  height:104px;
                }
              }
              .left-img{
                width:297px;
                height:136px;
                overflow: hidden;
                border-radius: 4px;
                border:1px solid #dedede;
                img{
                  display: block;
                  width:296px;
                  height:136px;
                }
              }
              .right-img{
                width:297px;
                height:136px;
                overflow: hidden;
                border-radius: 4px;
                border:1px solid #dedede;
                img{
                  display: block;
                  width:296px;
                  height:136px;
                }
              }
              .bottom-img{
                width:140px;
                height:230px;
                overflow: hidden;
                border-radius: 4px;
                border:1px solid #dedede;
                img{
                  display: block;
                  width:140px;
                  height:230px;
                }
              }
            }
            .del-p{
              cursor: pointer;
              position: absolute;
              line-height: 20px;
              width:20px;
              text-align: center;
              color:#FF6666;
              font-size:14px;
              top:5px;
              right:5px;
              border-radius:50%;
            }
            .del-p:hover{
              background-color: #FF6666;
              color:#fff;
            }
          }
        }
      }
    }
    .page-bottom-button-box{
      display: flex;
      .page-bottom-button-null{
        flex:1;
      }
      .page-bottom-button-p{
        line-height:40px;
        text-align: center;
        width:80px;
        color:#fff;
        background-color: #0045af;
        cursor: pointer;
        border-radius:6px;
      }
    }
  }
</style>
