peko-admin-web/src/views/boom/levelSet.vue

<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
      <span>分区</span>
      <partition-select v-model:partition-id="inquire.partitionId" v-model:partition-infos="inquire.options" />
    </div>
    <el-button class="primary but" type="primary" @click="getData()"
      >查询</el-button
    >

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="levelName" align="center" label="Boom等级" />
      <el-table-column prop="goldNum" align="center" label="金币任务数" />
      <el-table-column prop="countDownVapUrl" align="center" label="Boom等级图">
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.pic"
            :zoom-rate="1.1"
            :preview-src-list="[scope.row.pic]"
            fit="contain"
            preview-teleported="true"
            hide-on-click-modal="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="x" align="center" label="Boom倒计时">
        <template v-slot="scope">
          <video
            :key="scope.row.countDownVapUrl"
            width="320"
            height="240"
            controls="controls"
          >
            <source :src="scope.row.countDownVapUrl" type="video/mp4" /></video
        ></template>
      </el-table-column>
      <el-table-column prop="x" align="center" label="Boon"
        ><template v-slot="scope">
          <video
            :key="scope.row.endVapUrl"
            width="320"
            height="240"
            controls="controls"
          >
            <source :src="scope.row.endVapUrl" type="video/mp4" /></video
        ></template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <el-button
            @click="
              eidObj.level = scope.row.level;
              eidObj.goldNum = scope.row.goldNum;
              eidObj.imageUrl1 = scope.row.pic;
              eidObj.imageUrl2 = scope.row.countDownVapUrl;
              eidObj.imageUrl3 = scope.row.endVapUrl;
              id = scope.row.id;
              eidDialogBox = true;
            "
            type="text"
            size="default"
            >编辑</el-button
          >
          <el-button
            @click="
              member.level = scope.row.level;
              member.goldNum = scope.row.goldNum;
              seeList(scope.row);
            "
            type="text"
            size="default"
            >查看明细</el-button
          >
          <el-button
            @click="
              member.level = scope.row.level;
              member.goldNum = scope.row.goldNum;
              id = scope.row.level;
              eidList(scope.row);
            "
            type="text"
            size="default"
            >编辑明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 等级奖励配置（查看） -->
    <el-dialog v-model="memberDialog" title="等级奖励配置（查看）" center>
      <div class="inquire">
        <span>Boom等级：{{ member.level }}</span>
      </div>
      <div class="inquire">
        <span>金币任务数量：{{ member.goldNum }}</span>
      </div>
      <!-- 内嵌表格 -->
      <el-table
        :data="member.tableData"
        border
        style="width: 100%; margin-top: 25px"
      >
        <el-table-column prop="seq" align="center" label="排序" />
        <el-table-column prop="x" align="center" label="奖品类型">
          <template v-slot="scope">
            {{
              scope.row.awardType == 8
                ? "金币"
                : scope.row.awardType == 6
                ? "礼物"
                : scope.row.awardType == 5
                ? "座驾"
                : scope.row.awardType == 1
                ? "头饰"
                : scope.row.awardType == 3
                ? "气泡"
                : scope.row.awardType == 10
                ? "VIP"
                : scope.row.awardType == 11
                ? "勋章"
                : scope.row.awardType == 13
                ? "金豆"
                : "铭牌"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="awardNum" align="center" label="奖品天数" />
        <el-table-column prop="type" align="center" label="用户身份">
          <template v-slot="scope">
            {{ scope.row.type == 1 ? "固定身份" : "随机身份" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="awardId"
          align="center"
          label="奖品ID/VIP等级1"
        />
        <el-table-column prop="isShow" align="center" label="是否展示">
          <template v-slot="scope">
            {{ scope.row.isShow == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="awardStock" align="center" label="奖品库存" />
        <el-table-column prop="awardPic" align="center" label="奖励图片">
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.awardPic"
            :zoom-rate="1.1"
            :preview-src-list="[scope.row.awardPic]"
            fit="contain"
            preview-teleported="true"
            hide-on-click-modal="true"
          />
        </template>
      </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="memberDialog = false">
            关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 等级奖励配置（编辑） -->
    <el-dialog v-model="eidDialog" title="等级奖励配置（编辑）" center>
      <div class="inquire">
        <span>Boom等级：{{ member.level }}</span>
      </div>
      <div class="inquire">
        <span>金币任务数量：{{ member.goldNum }}</span>
      </div>
      <!-- 内嵌表格 -->
      <el-table
        :data="eid.tableData"
        border
        style="width: 100%; margin-top: 25px"
      >
        <el-table-column prop="seq" align="center" label="排序" />
        <el-table-column prop="x" align="center" label="奖品类型">
          <template v-slot="scope">
            {{
              scope.row.awardType == 8
                ? "金币"
                : scope.row.awardType == 6
                ? "礼物"
                : scope.row.awardType == 5
                ? "座驾"
                : scope.row.awardType == 1
                ? "头饰"
                : scope.row.awardType == 3
                ? "气泡"
                : scope.row.awardType == 10
                ? "VIP"
                : scope.row.awardType == 11
                ? "勋章"
                : scope.row.awardType == 13
                ? "金豆"
                : "铭牌"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="awardNum" align="center" label="奖品天数" />
        <el-table-column prop="type" align="center" label="用户身份">
          <template v-slot="scope">
            {{ scope.row.type == 1 ? "固定身份" : "随机身份" }}
          </template>
        </el-table-column>
        <el-table-column prop="awardId" align="center" label="奖品ID/VIP等级" />
        <el-table-column prop="awardPic" align="center" label="奖励图片">
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.awardPic"
            :zoom-rate="1.1"
            :preview-src-list="[scope.row.awardPic]"
            fit="contain"
            preview-teleported="true"
            hide-on-click-modal="true"
          />
        </template>
      </el-table-column>
        <el-table-column prop="isShow" align="center" label="是否展示">
          <template v-slot="scope">
            {{ scope.row.isShow == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="awardStock" align="center" label="奖品库存" />
        <el-table-column prop="x" align="center" label="操作">
          <template v-slot="scope">
            <el-button @click="editFun(scope.row)" type="text" size="default"
              >编辑</el-button
            >
            <el-button @click="delFun(scope.row)" type="text" size="default"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addDialog = true">
            增加一条
          </el-button>
          <el-button type="primary" @click="eidDialog = false">
            关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 增加一条弹窗 -->
    <el-dialog
      v-model="addDialog"
      title="等级奖励配置（新增）"
      class="addBox"
      center
      width="26%"
    >
      <div class="inquire">
        <span>奖品类型：</span>
        <el-select filterable v-model="addObj.giftVal" placeholder="请选择">
          <el-option
            v-for="item in addObj.giftType"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>用户身份：</span>
        <el-select filterable v-model="addObj.type" placeholder="请选择">
          <el-option
            v-for="item in addObj.typeArr"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>奖品ID/VIP等级:</span>
        <el-input
          v-model="addObj.giftId"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>奖励数量/天数：</span>
        <el-input
          v-model="addObj.giftNum"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>库存：</span>
        <el-input
          v-model="addObj.awardStock"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>顺序:</span>
        <el-input v-model="addObj.sNo" placeholder="" class="input"></el-input>
      </div>
      <div class="inquire">
        <span>是否展示：</span>
        <el-select filterable v-model="addObj.showVal" placeholder="请选择">
          <el-option
            v-for="item in addObj.show"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>奖励图片：</span>
        <el-upload
          class="avatar-uploader"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess4"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <img v-if="addObj.imageUrl" :src="addObj.imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addFun()"> 保存 </el-button>
          <el-button type="primary" @click="addDialog = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="editDialog"
      title="等级奖励配置（编辑）"
      class="addBox"
      center
      width="26%"
    >
      <div class="inquire">
        <span>奖品类型：</span>
        <el-select filterable v-model="editObj.giftVal" placeholder="请选择">
          <el-option
            v-for="item in editObj.giftType"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>用户身份：</span>
        <el-select filterable v-model="editObj.type" placeholder="请选择">
          <el-option
            v-for="item in editObj.typeArr"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>奖品ID/VIP等级:</span>
        <el-input
          v-model="editObj.giftId"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>奖励数量/天数：</span>
        <el-input
          v-model="editObj.giftNum"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>库存：</span>
        <el-input
          v-model="editObj.awardStock"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span>顺序:</span>
        <el-input v-model="editObj.sNo" placeholder="" class="input"></el-input>
      </div>
      <div class="inquire">
        <span>是否展示：</span>
        <el-select filterable v-model="editObj.showVal" placeholder="请选择">
          <el-option
            v-for="item in editObj.show"
            :key="item.id"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="inquire">
        <span>奖励图片：</span>
        <el-upload
          class="avatar-uploader"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess5"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <img v-if="editObj.imageUrl" :src="editObj.imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editSaveFun()"> 保存 </el-button>
          <el-button type="primary" @click="editDialog = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="eidDialogBox"
      title="编辑"
      class="addBox"
      center
      width="26%"
    >
      <div class="inquire">
        <span>BOOM等级：</span>
        <el-input
          v-model="eidObj.level"
          placeholder=""
          class="input"
          disabled
        ></el-input>
      </div>
      <div class="inquire">
        <span>金币任务数：</span>
        <el-input
          v-model="eidObj.goldNum"
          placeholder=""
          class="input"
        ></el-input>
      </div>
      <div class="inquire">
        <span style="float: left">等级图：</span>
        <el-upload
          style="float: left"
          class="avatar-uploader input"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <img v-if="eidObj.imageUrl1" :src="eidObj.imageUrl1" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
      <div class="inquire">
        <span style="float: left">倒计时：</span>
        <el-upload
          style="float: left; width: 200px; height: 150px"
          class="avatar-uploader input"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <video
            v-if="eidObj.imageUrl2"
            :key="eidObj.imageUrl2"
            autoplay
            width="320"
            height="240"
            controls="controls"
          >
            <source :src="eidObj.imageUrl2" type="video/mp4" />
          </video>
        </el-upload>
      </div>
      <div class="inquire">
        <span style="float: left">Boom：</span>
        <el-upload
          style="float: left; width: 200px; height: 150px"
          class="avatar-uploader input"
          action="/admin/tencent/cos/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess3"
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarError"
        >
          <video
            v-if="eidObj.imageUrl3"
            :key="eidObj.imageUrl3"
            autoplay
            width="320"
            height="240"
            controls="controls"
          >
            <source :src="eidObj.imageUrl3" type="video/mp4" />
          </video>
        </el-upload>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="levelUpdateFun()"> 保存 </el-button>
          <el-button type="primary" @click="eidDialogBox = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  levelList,
  levelUpdate,
  awardList,
  awardUpdate,
  awardDel,
} from "@/api/boom/boom";
import { ElMessage } from "element-plus";
import PartitionSelect from "@/views/common/partitionSelect.vue";
export default {
  name: "levelSet",
  components: {PartitionSelect},
  data() {
    return {
      id: "",
      loading: false,
      //查询所需条件对象
      inquire: {
        partitionId: undefined,
        options: [],
      },
      // 表格
      tableData: [],
      // 内嵌表格查看
      memberDialog: false,
      member: {
        level: "",
        goldNum: "",
        tableData: [],
      },
      // 内嵌表格编辑
      eidDialog: false,
      eid: {
        tableData: [],
      },
      //   编辑弹窗
      editDialog: false,
      editObj: {
        imageUrl: "",
        giftVal: 8,
        giftType: [
          { desc: "金币", value: 8 },
          { desc: "礼物", value: 6 },
          { desc: "座驾", value: 5 },
          { desc: "头饰", value: 1 },
          { desc: "气泡", value: 3 },
          { desc: "VIP", value: 10 },
          { desc: "勋章", value: 11 },
          { desc: "铭牌", value: 2 },
          { desc: "金豆", value: 13 },
        ],
        type: "",
        typeArr: [
          { desc: "固定身份", value: 1 },
          { desc: "随机身份", value: 2 },
        ],
        giftId: "",
        giftNum: "",
        awardStock: "",
        sNo: "",
        showVal: "",
        id: "",
        show: [
          { desc: "是", value: 1 },
          { desc: "否", value: 0 },
        ],
      },
      //   新增弹窗
      addDialog: false,
      addObj: {
        imageUrl: "",
        giftVal: 8,
        giftType: [
          { desc: "金币", value: 8 },
          { desc: "礼物", value: 6 },
          { desc: "座驾", value: 5 },
          { desc: "头饰", value: 1 },
          { desc: "气泡", value: 3 },
          { desc: "VIP", value: 10 },
          { desc: "勋章", value: 11 },
          { desc: "铭牌", value: 2 },
          { desc: "金豆", value: 13 },
        ],
        type: "",
        typeArr: [
          { desc: "固定身份", value: 1 },
          { desc: "随机身份", value: 2 },
        ],
        giftId: "",
        giftNum: "",
        awardStock: "",
        sNo: "",
        showVal: "",
        show: [
          { desc: "是", value: 1 },
          { desc: "否", value: 0 },
        ],
      },
      //编辑
      eidDialogBox: false,
      eidObj: {
        level: "",
        goldNum: "",
        imageUrl1: "",
        imageUrl2: "",
        imageUrl3: "",
      },
      // 分页
      total: 0, //总页数
      currentPage: 1, //页码
      pageSize: 5, //条数
    };
  },
  methods: {
    // 查询接口
    getData() {
      this.loading = true;
      levelList({
        partitionId: this.inquire.partitionId,
      }).then((res) => {
        if (res.code == 200) {
          // this.total = res.data.total;
          // this.tableData = res.data.records;
          this.tableData = res.data;
          this.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 编辑弹窗
    editFun(val) {
      this.editObj.giftVal = val.awardType;
      this.editObj.giftNum = val.awardNum;
      this.editObj.giftId = val.awardId;
      this.editObj.awardStock = val.awardStock;
      this.editObj.sNo = val.seq;
      this.editObj.showVal = val.isShow;
      this.editObj.type = val.type;
      this.editObj.imageUrl = val.awardPic;
      this.editObj.id = val.id;
      this.editDialog = true;
    },
    // 确认编辑弹窗
    editSaveFun() {
      var level = this.id;
      var obj = {
        awardType: this.editObj.giftVal,
        awardNum: this.editObj.giftNum,
        awardId: this.editObj.giftId,
        awardStock: this.editObj.awardStock,
        seq: this.editObj.sNo,
        isShow: this.editObj.showVal,
        type: this.editObj.type,
        awardPic: this.editObj.imageUrl,
        id: this.editObj.id,
        partitionId: this.inquire.partitionId,
        level,
      };
      awardUpdate(obj).then((res) => {
        if (res.code == 200) {
          this.editDialog = false;
          awardList({
            level,
            partitionId: this.inquire.partitionId,
          }).then((res) => {
            this.eid.tableData = res.data;
            ElMessage({
              showClose: true,
              message: "成功",
              type: "success",
            });
          });
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 新增
    addFun() {
      var level = this.id;
      var obj = {
        awardType: this.addObj.giftVal,
        awardNum: this.addObj.giftNum,
        awardId: this.addObj.giftId,
        awardStock: this.addObj.awardStock,
        seq: this.addObj.sNo,
        isShow: this.addObj.showVal,
        type: this.addObj.type,
        awardPic: this.addObj.imageUrl,
        partitionId: this.inquire.partitionId,
        level,
      };
      awardUpdate(obj).then((res) => {
        if (res.code == 200) {
          this.addDialog = false;
          awardList({
            level,
            partitionId: this.inquire.partitionId,
          }).then((res) => {
            this.eid.tableData = res.data;
            ElMessage({
              showClose: true,
              message: "成功",
              type: "success",
            });
          });
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 删除
    delFun(val) {
      var level = this.id;
      awardDel({
        id: val.id,
      }).then((res) => {
        if (res.code == 200) {
          awardList({
            level,
            partitionId: this.inquire.partitionId,
          }).then((res) => {
            this.eid.tableData = res.data;
            ElMessage({
              showClose: true,
              message: "成功",
              type: "success",
            });
          });
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 查看明细
    seeList(val) {
      awardList({
        level: val.level,
        partitionId: this.inquire.partitionId,
      }).then((res) => {
        this.memberDialog = true;
        this.member.tableData = res.data;
      });
    },
    eidList(val) {
      awardList({
        level: val.level,
        partitionId: this.inquire.partitionId,
      }).then((res) => {
        this.eidDialog = true;
        this.eid.tableData = res.data;
      });
    },
    // 编辑列表
    levelUpdateFun() {
      var obj = {
        id: this.id,
        level: this.eidObj.level,
        goldNum: this.eidObj.goldNum,
        pic: this.eidObj.imageUrl1,
        countDownVapUrl: this.eidObj.imageUrl2,
        endVapUrl: this.eidObj.imageUrl3,
        partition: this.inquire.partitionId,
      };
      levelUpdate(obj).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "编辑成功！",
            type: "success",
          });
          this.eidDialogBox = false;
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.success,
            type: "error",
          });
        }
      });
    },
    beforeAvatarUpload() {
      ElMessage({
        showClose: true,
        message: "上传中,可能较慢，请等待上穿成功的提示在操作下一步~",
        type: "warning",
      });
    },
    handleAvatarError() {
      ElMessage({
        showClose: true,
        message: "上传失败！",
        type: "error",
      });
    },
    handleAvatarSuccess1(res, file) {
      console.log(file);
      // this.ediObj.imageUrl = URL.createObjectURL();
      this.eidObj.imageUrl1 = res.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    handleAvatarSuccess2(res, file) {
      console.log(file);
      // this.ediObj.imageUrl = URL.createObjectURL();
      this.eidObj.imageUrl2 = res.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    handleAvatarSuccess3(res, file) {
      console.log(file);
      // this.ediObj.imageUrl = URL.createObjectURL();
      this.eidObj.imageUrl3 = res.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    handleAvatarSuccess4(res, file) {
      console.log(file);
      // this.ediObj.imageUrl = URL.createObjectURL();
      this.addObj.imageUrl = res.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    handleAvatarSuccess5(res, file) {
      console.log(file);
      // this.ediObj.imageUrl = URL.createObjectURL();
      this.editObj.imageUrl = res.data;
      ElMessage({
        showClose: true,
        message: "上传成功！",
        type: "success",
      });
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
.selectBox {
  display: flex;
  height: 35px;
  line-height: 35px;
  margin-bottom: 20px;
}
.selectBoxImg {
  height: 150px;
}
.addBox {
  .el-dialog__body {
    .inquire {
      span {
        margin-right: 10px;
        width: 113px;
        display: inline-block;
      }
      .input {
        width: 180px;
        margin-right: 10px;
      }
    }
  }
}
</style>