ohplay_system/src/views/operation/recommend/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.id.toString()" />
    </el-tabs>

    <!-- 内容 -->
    <div style="display: flex; position: relative; align-items: flex-start">
      <el-image class="bg" :src="img" />
      <div :class="['item', active === index ? 'active' : '']"
        :style="{top: item.top + 'px', height: item.height + 'px'}" v-for="(item, index) in style[tabIndex]"
        :key="index" @click="getActive(index)" />

      <div class="form">
        <!-- 标题内容模块 -->
        <el-form v-if="content()" label-width="auto">
          <el-form-item label="标题">
            <el-input v-model="contentForm.name" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="简介：" v-if="tabIndex === 1 && active === 8">
            <el-input v-model="contentForm.description" type="textarea" rows="4" placeholder="请输入简介" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getChange" v-hasPermi="['operation:recommend:submit']">
              提交
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 推荐时间段配置 -->
        <div v-if="tabIndex === 1 && active === 0" style="float: left">
          <el-form label-width="auto" v-for="(item, index) in timeList" :key="item.id">
            <el-form-item label-width="0">
              <span style="font-weight: bold">场景电台时间设置</span>
              <el-link icon="el-icon-close" :underline="false" style="float:right"
                @click="getChangeTime(item.id, 2)" />
            </el-form-item>
            <el-form-item label="时间段：">
              <el-time-picker is-range v-model="item.date" start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss"
               format="HH:mm:ss" placeholder="选择时间范围" />
            </el-form-item>
            <el-form-item label="时间段文案：">
              <el-input v-model="item.name" placeholder="请输入文案" />
            </el-form-item>
            <el-form-item label="时间段Icon：">
              <Upload listType="picture-card" :url="item.pic" @upload="uploadIcon($event, index)" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getEmpty(item)" v-hasPermi="['operation:recommend:delete']">清空</el-button>
              <el-button type="primary" @click="getSubmitTime(item)"
                v-hasPermi="['operation:recommend:submit']">提交</el-button>
              <el-button v-if="item.status === 0" type="primary" plain @click="getChangeTime(item.id, 1)"
                v-hasPermi="['operation:recommend:up']">上架
              </el-button>
              <el-button v-else type="primary" plain @click="getChangeTime(item.id, 0)"
                v-hasPermi="['operation:recommend:down']">下架</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left: 30px" @click="getAdd"
            v-hasPermi="['operation:recommend:add']">新增</el-button>
        </div>

        <!-- 标签 -->
        <el-form class="label" v-if="label()">
          <el-form-item v-for="item in list" :key="item.id">
            <el-button type="primary">{{ item.title }}</el-button>
          </el-form-item>
        </el-form>

        <!-- 内容列表模块 -->
        <div v-else :style="{'display': tabIndex === 1 && active === 0 ? 'inline-block' : 'block'}">
          <el-form label-width="auto" v-for="(item, index) in list" :key="item.id">
            <el-form-item label-width="0" :label="item.sort.toString()" />

            <el-form-item label="时间：" v-if="time()">
              <el-date-picker v-model="item.date" type="datetimerange" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>

            <el-form-item label="标题：" v-if="title()">
              <el-input v-model="item.title" placeholder="请输入标题" />
            </el-form-item>

            <el-form-item label="模式：" v-if="model()">
              <el-select v-model="item.model" placeholder="请选择模式">
                <el-option v-for="item in dict.type.content_model" :key="item.value" :label="item.label"
                  :value="Number(item.value)" />
              </el-select>
            </el-form-item>

            <el-form-item label="跳转方式：" v-if="forwardType()">
              <el-select v-model="item.forwardType" placeholder="请选择跳转方式">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                  :value="Number(item.value)" />
              </el-select>
            </el-form-item>

            <el-form-item label="内容：" v-if="contentName(item)">
              <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容"
                @focus="getDialog(index)" />
            </el-form-item>

            <el-form-item label="简介：" v-if="description(item)">
              <el-input v-model="item.description" type="textarea" rows="4" placeholder="请输入简介" />
            </el-form-item>

            <el-form-item label="跳转地址：" v-if="forwardUrl(item)">
              <el-input v-model="item.forwardUrl" placeholder="请输入跳转地址" />
            </el-form-item>

            <el-form-item label="封面模式：" v-if="isCustom(item)">
              <el-select v-model="item.isCustom" placeholder="选择封面模式">
                <el-option v-for="item in dict.type.is_custom" :key="item.value" :label="item.label"
                  :value="Number(item.value)" />
              </el-select>
            </el-form-item>

            <el-form-item label="图片：" v-if="pic(item)">
              <Upload listType="picture-card" :url="item.pic" @upload="getUpload($event, index)" />
            </el-form-item>

            <el-form-item label="列表：" v-if="isList()">
              <el-button type="primary" @click="getDialog(index)" v-hasPermi="['operation:recommend:add']">
                添加内容
              </el-button>
              <el-table :data="item.childList" height="332">
                <el-table-column label="电台名称：" prop="contentName" align="center" show-overflow-tooltip />
                <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="delete" @click="getDelete(scope.row, index)"
                      v-hasPermi="['operation:recommend:delete']">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

            <el-form-item size="small">
              <el-button @click="getEmpty(item)" v-hasPermi="['operation:recommend:delete']">清空</el-button>
              <el-button type="primary" @click="getSubmit(item)" v-hasPermi="['operation:recommend:submit']">
                提交
              </el-button>
              <el-button v-if="item.status === 1" type="primary" plain @click="handleChange(item, 0)"
                v-hasPermi="['operation:recommend:up']">上架
              </el-button>
              <el-button v-else type="primary" plain @click="handleChange(item, 1)"
                v-hasPermi="['operation:recommend:down']">下架</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加内容" width="1000px">
      <el-form inline size="mini">
        <el-form-item label="音频类型：">
          <el-select v-model="form.audioType" placeholder="请选择类型" :disabled="disabled">
            <el-option v-for="item in audioOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源平台：">
          <el-select v-model="form.platformId" placeholder="请选择平台">
            <el-option v-for="item in platformOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="form.keyword" placeholder="请输入内容关键词" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" height="584" ref="tableData" :row-key="rowKey"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" reserve-selection
          v-if="tabIndex === 2 && active === 1" />
        <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
        <el-table-column label="音频封面" align="center" width="100px">
          <template slot-scope="scope">
            <el-image :src="scope.row.audioPic" />
          </template>
        </el-table-column>
        <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioFormatter" />
        <el-table-column label="音频数量" prop="programCount" align="center" />
        <el-table-column label="付费类型" align="center" :formatter="freeFormatter" width="100px" />
        <el-table-column label="当前状态" align="center" :formatter="listStatusFormatter" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="tabIndex === 2 && active === 1 ? false : true" type="text"
              @click="getSelect(scope.row)" :disabled="scope.row.status === 2">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
        @pagination="getContentList" />
    </el-dialog>

    <!-- 置顶按钮 -->
    <el-backtop />
  </div>
</template>

<script>
import {
  listAll,
  recommendList,
  moduleDetail,
  submit,
  contentList,
  radioList,
  moduleContent,
  upOrDown,
  timeList,
  submitTime,
  changeTime
} from '@/api/operation/recommend'
import Upload from '@/components/Upload/index'
import { isFreeMixin, audioMixin, platformMixin, onOrOffMixin } from '@/mixin/index'

export default {
  dicts: [
    'platform_type',
    'is_custom',
    'content_model'
  ],
  mixins: [isFreeMixin, audioMixin, platformMixin, onOrOffMixin],
  components: {
    Upload
  },
  data() {
    return {
      // 分类列表
      tabs: [],
      // 选中分类
      activeTab: '77',
      // 分类排序
      tabIndex: 1,
      // 模板列表
      module: [],
      // 模板图
      imgOptions: {
        '0': require('@/assets/images/operation/recommend.svg'),
        '1': require('@/assets/images/operation/radio.svg'),
        '2': require('@/assets/images/operation/music.svg'),
        '3': require('@/assets/images/operation/story.svg'),
        '4': require('@/assets/images/operation/kid.svg'),
        '5': require('@/assets/images/operation/other.svg')
      },
      img: require('@/assets/images/operation/recommend.svg'),
      // 选中模块
      style: {
        '1': [
          { top: 150, height: 225 },
          { top: 380, height: 175 },
          { top: 560, height: 185 },
          { top: 750, height: 315 },
          { top: 1070, height: 645 },
          { top: 1720, height: 185 },
          { top: 1910, height: 220 },
          { top: 2140, height: 315 },
          { top: 2460, height: 295 },
          { top: 2760, height: 600 },
          { top: 3370, height: 260 },
          { top: 3635, height: 600 }
        ],
        '2': [
          { top: 135, height: 165 },
          { top: 310, height: 250 },
          { top: 570, height: 100 },
          { top: 1465, height: 570 }
        ],
        '3': [
          { top: 150, height: 170 },
          { top: 385, height: 90 },
          { top: 480, height: 215 },
          { top: 700, height: 175 },
          { top: 880, height: 310 },
          { top: 1195, height: 300 },
          { top: 1500, height: 215 },
          { top: 1720, height: 305 },
          { top: 2490, height: 210 },
          { top: 2705, height: 220 },
        ],
        '4': [
          { top: 150, height: 165 },
          { top: 320, height: 115 },
          { top: 440, height: 405 },
          { top: 850, height: 230 },
          { top: 1085, height: 410 },
          { top: 1500, height: 130 },
          { top: 1635, height: 405 },
          { top: 2045, height: 170 },
          { top: 2220, height: 405 },
          { top: 2850, height: 405 },
          { top: 3260, height: 405 },
          { top: 3670, height: 620 }
        ],
        '5': [
          { top: 150, height: 180 },
          { top: 335, height: 120 },
          { top: 460, height: 425 },
          { top: 890, height: 125 },
          { top: 1020, height: 425 },
          { top: 1450, height: 210 },
          { top: 1665, height: 425 },
          { top: 2325, height: 640 }
        ],
        '6': [
          { top: 140, height: 165 },
          { top: 310, height: 115 },
          { top: 430, height: 375 },
          { top: 810, height: 385 },
          { top: 1200, height: 120 },
          { top: 1325, height: 390 },
          { top: 1720, height: 160 },
          { top: 1885, height: 385 },
          { top: 2480, height: 390 },
          { top: 2875, height: 590 }
        ]
      },
      active: 0,
      // 模块内容
      contentForm: {},
      list: [],
      // 时间段列表
      timeList: [],
      // 弹窗
      dialogVisible: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        audioType: null,
        platformId: null
      },
      total: 0,
      index: 0,
      disabled: false,
      // 列表
      tableData: [],
      // 跳转方式
      typeOptions: [{
        value: 0,
        label: 'APP内容跳转广播',
        type: 2
      }, {
        value: 1,
        label: 'APP内容跳转歌曲',
        type: 11
      }, {
        value: 2,
        label: 'APP内容跳转歌单',
        type: 10
      }, {
        value: 3,
        label: 'APP内容跳转专辑',
        type: 8
      }, {
        value: 4,
        label: 'APP内打开节目',
        type: 6
      }, {
        value: 5,
        label: 'H5内链'
      }, {
        value: 6,
        label: 'H5外链'
      }]
    }
  },
  watch: {
    'form.audioType'(val) {
      this.$nextTick(() => {
        this.getPlatform({
          audioType: val
        })
      })
      this.form.platformId = this.platformOptions[0].value
    },
  },
  mounted() {
    this.getTab()
  },
  methods: {
    // 分类列表
    getTab() {
      listAll().then(res => {
        if (res.code === 0) {
          this.tabs = res.data
          this.getModule(this.activeTab)
          this.getTimeList()
        }
      })
    },

    // 切换分类
    handleClick(e) {
      this.activeTab = this.tabs[e.index].id.toString()
      this.tabIndex = this.tabs[e.index].tabIndex
      e.index >= 5 ? e.index = 5 : e.index
      this.img = this.imgOptions[e.index]
      this.active = 0
      this.list = []
      this.getModule(this.activeTab)
    },

    // 模块列表
    getModule(id) {
      recommendList({
        categoryId: id
      }).then(res => {
        if (res.code === 0) {
          this.module = res.data
          this.getModuleDetail(res.data[0].id)
          this.getContentDetail(res.data[0].id)
        }
      })
    },

    // 选择模块
    getActive(index) {
      if (this.active !== index) {
        this.active = index
        this.form.audioType = 2
        this.getModuleDetail(this.module[index].id)
        this.getContentDetail(this.module[index].id)
      }
      if (this.tabIndex === 1 && this.active === 0) {
        this.getTimeList()
      }
    },

    // 模块详情
    getModuleDetail(id) {
      moduleDetail({
        id: id
      }).then(res => {
        if (res.code === 0) {
          this.contentForm = res.data
        }
      })
    },

    // 时间段列表
    getTimeList() {
      this.timeList = []
      timeList().then(res => {
        if (res.code === 0) {
          res.data.map(i => {
            this.timeList.push({
              ...i,
              date: [i.startTime, i.endTime]
            })
          })
        }
      })
    },

    // 模块内容列表
    getContentDetail(id) {
      this.list = []
      contentList({
        moduleId: id
      }).then(res => {
        if (res.code === 0) {
          res.data.map(i => {
            this.list.push({
              ...i,
              date: [i.startTime, i.endTime]
            })
          })
        }
      })
    },

    // 标题模块提交
    getChange() {
      moduleContent(this.contentForm).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功！')
          this.getModuleDetail(this.contentForm.id)
        }
      })
    },

    // 内容列表提交
    getSubmit(item) {
      item.startTime = item.date[0]
      item.endTime = item.date[1]
      delete item.date
      submit(item).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功！')
          this.getContentDetail(item.moduleId)
        }
      })
    },

    // 弹窗
    getDialog(index) {
      this.dialogVisible = true
      this.index = index
      this.form.audioType = this.list[index].forwardType !== null ? this.typeOptions.find(i => i.value === this.list[index].forwardType).type : 2
      this.disabled = this.tabIndex == 2 && this.active === 1 || this.list[index].forwardType !== null ? true : false
      this.getContentList()
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getContentList()
    },

    // 内容列表
    getContentList() {
      radioList(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          if (this.tableData.length > 0) {
            this.list[this.index].childList.map(i => {
              let row = res.data.records.find(j => j.audioId === i.contentId)
              if (row) {
                this.$refs.tableData.toggleRowSelection(row, true)
              }
            })
          }
        }
      })
    },

    // 选择某一个音频内容
    getSelect(row) {
      let e = this.list[this.index]
      e.contentId = row.audioId
      e.contentName = row.audioName
      e.pic = row.audioPic
      e.platformId = row.platformId
      e.contentType = row.audioType
      e.description = row.description
      this.dialogVisible = false
      this.$message.success('选择成功！')
    },

    rowKey(row) {
      return row.audioId
    },

    // 批量选择
    handleSelectionChange(row) {
      if (row.length > 0) {
        row.map(i => {
          if (this.list[this.index].childList.findIndex(j => j.contentId === i.audioId) === -1) {
            this.list[this.index].childList.push({
              contentId: i.audioId,
              contentName: i.audioName,
              platformId: i.platformId,
              contentType: i.audioType,
              pic: i.audioPic,
              description: i.description
            })
          }
        })
      }
    },

    // 删除已添加的内容
    getDelete(row, index) {
      let e = this.list[index].childList.findIndex(i => i.contentId === row.contentId)
      this.list[index].childList.splice(e, 1)
    },

    // 上传图片
    getUpload(e, index) {
      this.list[index].pic = e.file
    },

    // 清空
    getEmpty(item) {
      Object.keys(item).map(key => {
        if (!['id', 'moduleId', 'sort', 'status'].includes(key)) {
          item[key] = key === 'childList' ? [] : ''
        }
      })
    },

    // 上下架
    handleChange(item, status) {
      let tips = status === 0 ? '上架' : '下架'
      this.$confirm(`是否要${tips}?`, '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        upOrDown(item.id, status).then(res => {
          if (res.code === 0) {
            this.$message.success(`${tips}成功！`)
            this.getContentDetail(item.moduleId)
          }
        })
      }).catch(() => { })
    },

    // 提交场景电台时间段
    getSubmitTime(item) {
      item.startTime = item.date[0]
      item.endTime = item.date[1]
      delete item.date
      submitTime(item).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功！')
          this.getTimeList()
        }
      })
    },

    // 上传icon
    uploadIcon(e, index) {
      this.timeList[index].pic = e.file
    },

    // 新增时间段
    getAdd() {
      this.timeList.push({})
    },

    // 上下架 / 删除 时间段
    getChangeTime(id, status) {
      let title = status === 0 ? '下架' : status === 1 ? '上架' : '删除'
      this.$confirm(`是否${title}?`, '提醒', {
        type: 'warning'
      }).then(() => {
        changeTime(id, status).then(res => {
          if (res.code === 0) {
            this.$message.success(`${title}成功！`)
            this.getTimeList()
          }
        })
      })
    },

    // 字典翻译
    audioFormatter(row) {
      return this.selectDictLabel(this.audioOptions, row.audioType)
    },
    freeFormatter(row) {
      return this.selectDictLabel(this.freeOptions, row.isFree)
    },
    statusFormatter(row) {
      return row.status === 0 ? '上架' : '下架'
    },
    listStatusFormatter(row) {
      return row.status ? this.selectDictLabel(this.onOrOffOptions, row.status) : '上架'
    },

    // v-if判断
    // 标题模块
    content() {
      let rules = {
        '1': [3, 4, 5, 6, 7, 8].includes(this.active),
        '2': [1, 3].includes(this.active),
        '3': [2, 4, 6, 7, 8, 9].includes(this.active),
        '4': [2, 4, 6, 8, 9, 10, 11].includes(this.active),
        '5': [2, 4, 5, 6, 7].includes(this.active),
        '6': [2, 3, 5, 7, 8, 9].includes(this.active)
      }
      return rules[this.tabIndex]
    },

    // 标签模块
    label() {
      let rules = {
        '2': this.tabIndex === 2 && this.active === 2,
        '3': this.tabIndex === 3 && this.active === 1,
        '4': [1, 5].includes(this.active) && this.tabIndex === 4,
        '5': [1, 3].includes(this.active) && this.tabIndex === 5,
        '6': [1, 4].includes(this.active) && this.tabIndex === 6
      }
      return rules[this.tabIndex]
    },

    // 时间
    time() {
      let rules = {
        '1': this.active !== 3 && this.active !== 8,
        '2': [0, 3].includes(this.active),
        '3': this.active !== 1,
        '4': this.active !== 1 || this.active !== 5,
        '5': this.active !== 1 || this.active !== 3,
        '6': this.active !== 1 || this.active !== 4
      }
      return rules[this.tabIndex]
    },

    // 标题
    title() {
      let rules = {
        '1': this.active === 10,
        '2': this.active === 1,
        '3': [3, 5, 9].includes(this.active),
        '4': [7].includes(this.active),
        '5': [5].includes(this.active)
      }
      return rules[this.tabIndex]
    },

    // 模式
    model() {
      let rules = {
        '1': [4, 5, 7, 9, 11].includes(this.active),
        '2': [3].includes(this.active),
        '3': [4, 7, 8].includes(this.active),
        '4': [2, 4, 6, 8, 9, 10, 11].includes(this.active),
        '5': [2, 4, 6, 7].includes(this.active),
        '6': [2, 3, 5, 7, 8, 9].includes(this.active)
      }
      return rules[this.tabIndex]
    },

    // 跳转方式
    forwardType() {
      let rules = {
        '1': [1, 2].includes(this.active),
        '2': [0].includes(this.active),
        '3': [0].includes(this.active),
        '4': [0, 3].includes(this.active),
        '5': [0].includes(this.active),
        '6': [0].includes(this.active)
      }
      return rules[this.tabIndex]
    },

    // 内容
    contentName(item) {
      let rules = {
        '1': [0, 6, 8, 10].includes(this.active),
        '3': [2, 3, 5, 6, 9].includes(this.active),
        '4': [7].includes(this.active),
        '5': [5].includes(this.active),
        '6': [6].includes(this.active)
      }
      return rules[this.tabIndex] || [0, 1, 2, 3, 4].includes(item.forwardType) || item.model === 1
    },

    // 简介
    description(item) {
      let rules = {
        '1': (this.active === 7 && item.model === 1) || this.active === 10,
        '3': [3, 5].includes(this.active) || [4, 7, 8].includes(this.active) && item.model === 1,
        '4': [7].includes(this.active)
      }
      return rules[this.tabIndex]
    },

    // 跳转连接
    forwardUrl(item) {
      return [5, 6].includes(item.forwardType)
    },

    // 封面模式
    isCustom(item) {
      let rules = {
        '1': [0, 8].includes(this.active),
        '5': [5].includes(this.active),
      }
      return rules[this.tabIndex] || item.model === 1
    },

    // 图片
    pic(item) {
      let rules = {
        '1': [1, 2, 6, 8, 10].includes(this.active),
        '2': [0, 1].includes(this.active),
        '3': [0, 2, 3, 5, 6, 9].includes(this.active),
        '4': [0, 3, 7].includes(this.active),
        '5': [0, 5].includes(this.active),
        '6': [0, 6].includes(this.active)
      }
      return rules[this.tabIndex] || item.isCustom === 0
    },

    // 列表
    isList() {
      return this.tabIndex === 2 && this.active === 1
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  width: 365px;
  .el-image__error,
  .el-image__placeholder,
  .el-image__inner {
    height: auto;
  }
}

.item {
  position: absolute;
  left: 0;
  width: 365px;
  border: 1px solid yellow;
}

.active {
  background: rgba(255, 255, 0, 0.3);
}

.form {
  width: calc(100% - 395px);

  .el-form {
    width: 500px;
    margin-left: 30px;
    border: 1px solid #dcdfe6;
    box-shadow: 5px 5px 5px 0px #dcdfe6;
    padding: 20px;
    margin-bottom: 20px;
  }
}

.label {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: calc(100% / 4);
    margin: 0;
    text-align: center;
  }
}
</style>