hz_crm_web/src/views/rai_manage/components/addChoiceness.vue

<template>
  <!-- 报告精选添加/编辑 -->
  <div class="add-choiceness">
    <el-card>
      <!-- 更新方式继承第几期 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-select v-model="updateMode" placeholder="请选择更新方式" clearable @change="updateModeChange">
            <el-option label="重新编辑" value="重新编辑"></el-option>
            <el-option label="继承往期" value="继承往期"></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select v-if="updateMode == '继承往期'" v-model="inheritNum" placeholder="选择继承第几期" clearable @clear="inheritNumClear" @change="getDetail">
            <el-option v-for="item in updateModeList" :key="item.Periods" :label="item.InheritPeriodsName" :value="item.Periods"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <div v-show="updateMode">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <!-- 标题 / 作者 /发布时间 -->
          <el-row :gutter="24" style="margin-top: 30px">
            <el-col :span="12">
              <el-form-item prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="author">
                <el-input v-model="ruleForm.author" placeholder="请输入作者"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="time">
                <el-date-picker type="date" placeholder="选择发布时间" value-format="yyyy-MM-dd" v-model="ruleForm.time"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 产品说明 -->
          <el-form-item prop="explain" style="margin-top: 10px">
            <el-input v-model="ruleForm.explain" placeholder="请输入产品说明"></el-input>
          </el-form-item>
          <!-- 变更说明 -->
          <!-- 富文本 -->
          <rich-text ref="oneRich" :spareId="contentValue" :isText="contentText" />
          <el-form-item prop="reportLink">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <span style="flex-shrink: 0">详细报告链接：</span>
              <el-input style="margin: 10px 0" v-model="ruleForm.reportLink" placeholder="请输入报告链接（弘则研报管理栏目下）"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <!-- 产业/标的 模块 -->
        <div class="content-module">
          <draggable v-model="industryList" animation="300" @update="sortChange">
            <div class="content-industry" v-for="(item, index) in industryList" :key="item.ChartPermissionId">
              <div class="content-name" :class="industryIndex == index ? 'active' : ''" @click="industryBtn(item, index)">{{ item.ChartPermissionName }}</div>
            </div>
          </draggable>
          <div v-for="(item, index) in industryList" :key="item.ChartPermissionId">
            <RichText v-show="industryIndex == index" :ref="'logic' + index" :spareId="'logictest' + index" :isText="contentTextLogic" />
          </div>
          <draggable :list="industryListItem" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange">
            <div v-for="(val, num) in industryListItem" :key="val.IndustrialSubjectId" class="industrial" @click="ificationIndustrialBtn(val, num)" :class="num == ificationIndustrial ? 'pitch' : ''">
              <span style="margin-right: 19px">{{ val.IndustrialSubjectName }}</span>
              <span v-if="num == ificationIndustrial">
                <img src="~@/assets/img/icons/edit1.png" style="width: 12px; height: 12px; marginright: 10px" @click="editText(val, num)" />
                <i class="el-icon-close" @click="deleteClassify(val, num)"></i>
              </span>
            </div>
            <div class="addIndustrial" @click="addMulti">
              <i class="el-icon-plus"></i>
              <span>添加标的</span>
            </div>
          </draggable>
          <template v-for="(val, num) in industryListItem">
            <div class="industrial-is-new" :key="val.IndustrialSubjectId" v-if="num == ificationIndustrial">
              <el-checkbox v-model="val.IsNew" :true-label="1" :false-label="0">显示new标签</el-checkbox>
            </div>
          </template>
          <div v-if="industryListItem.length" style="margin-bottom: 20px; display: flex; align-items: center">
            <div style="display: flex; align-items: center" v-for="(val, num) in industryListItem[ificationIndustrial].CompanyLabel" :key="num">
              <el-input style="width: 260px; margin-right: 15px" v-model="val.name" placeholder="请输入公司标签"></el-input>
              <img class="delete-item-icon" v-if="num > 0" @click="deleteLabelItem(val, num)" src="~@/assets/img/icons/delete-Item.png" alt="" />
            </div>
            <el-tooltip class="item" effect="dark" content="添加标签" placement="top-start">
              <img @click="addLabelClick" class="editsty" src="~@/assets/img/set_m/add_ico.png" />
            </el-tooltip>
          </div>
        </div>

        <rich-text ref="twoRich" :spareId="contentValueTwo" :isText="contentTextTwo" />
        <div class="content-resource">
          <span class="resource">产业资源包：</span>
          <span class="show">{{ industrialSubjectName }}</span>
        </div>
        <div class="content-resource">
          <span class="resource">综述报告：</span>
          <span class="show">{{ overviewList.Title }}</span>
          <div style="margin-left: 20px">
            <el-switch @change="switchChangeHandler" v-model="overviewList.IsShowOverviewArticle" :active-value="1" :inactive-value="0" active-text="显示链接" inactive-text="不显示链接"> </el-switch>
          </div>
        </div>
        <div class="content-bottom">
          <el-button type="primary" @click="confirm('预览')">预览</el-button>
          <el-button type="primary" @click="confirm('保存')">保存</el-button>
          <el-button v-if="isShowStatus" type="primary" @click="confirm('发布')">发布</el-button>
          <el-button type="" @click="cancel">取消</el-button>
        </div>
      </div>
    </el-card>
    <!-- 弹框部分 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="addDialogVisible" width="560px" :before-close="handleClose">
      <div slot="title" style="display: flex; align-items: center">
        <img :src="dialogText == '编辑' ? $icons.editicon : $icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">{{ dialogText }}</span>
      </div>
      <div class="dlg-content">
        <el-autocomplete class="inline-input" v-model="stateValue" :trigger-on-focus="false" :fetch-suggestions="handleSearchResult" placeholder="请输入标的名称" clearable></el-autocomplete>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="dialogText == '编辑'" type="primary" @click="editconfirmPerson">确定</el-button>
        <el-button v-else type="primary" @click="confirmPerson">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RichText from "./richText.vue";
import { raiInterface } from "@/api/api.js";
import draggable from "vuedraggable";

export default {
  name: "",
  components: { RichText, draggable },
  props: {},
  data() {
    return {
      contentValue: "one",
      contentText: "市场策略核心逻辑汇总",
      contentValueTwo: "two",
      contentTextTwo: "公司核心逻辑汇总",
      contentTextLogic: "行业核心逻辑汇总",
      updateMode: "", //更新方式
      inheritNum: "", //继承第几
      ruleForm: {
        title: "", //标题
        author: "", //作者
        time: "", //时间
        explain: "", //说明
        reportLink: "", //变更
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        // time: [{ required: true, message: "请输入时间", trigger: "change" }],
        // explain: [{ required: true, message: "请输入产品说明", trigger: "blur" }],
        // reportLink: [{ required: true, message: "请输入报告链接", trigger: "blur" }],
      },
      industryList: [], //行业
      industryIndex: 0, //
      ificationIndustrial: 0,
      addDialogVisible: false,
      dialogText: "",
      stateValue: "",
      companyList: [],
      timeout: null,
      isShowStatus: true,
      industryListItem: [],
      industrialSubjectName: "",
      chartPermissionId: "", //分类id
      subjectList: [],
      updateModeList: [], //期数的数组
      editNum: "",
      overviewList: {},
    };
  },
  computed: {},
  watch: {
    industryListItem: {
      handler(nval) {
        if (nval.length > 0) {
          this.industrialSubjectName = this.industryListItem[this.ificationIndustrial].IndustrialManagementName || "";
          this.overviewList = {
            ArticleId: this.industryListItem[this.ificationIndustrial].OverviewArticleId,
            Title: this.industryListItem[this.ificationIndustrial].OverviewArticleTitle,
            IsShowOverviewArticle: this.industryListItem[this.ificationIndustrial].IsShowOverviewArticle,
          };
        } else {
          this.industrialSubjectName = "";
          this.overviewList = { ArticleId: 0, Title: "", IsShowOverviewArticle: 0 };
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    if (this.$route.query.id) {
      this.isShowStatus = this.$route.query.status == 0;
      this.getDetail();
    } else {
      this.getNoTacticsfirst();
    }
    this.getListPeriods();
  },
  methods: {
    updateModeChange() {
      if (this.updateMode == "重新编辑") {
        this.init();
        this.industryList = [];
        this.industryListItem = [];
        this.getNoTacticsfirst();
      }
    },
    inheritNumClear() {
      if (this.inheritNum == "") {
        // this.init();
        // this.industryList=[]
        // this.industryListItem=[]
        // this.getNoTacticsfirst();
      }
    },
    //获取编辑详情
    async getDetail() {
      const res = await raiInterface.reportSelectionDetail({ ArticleId: this.$route.query.id || "", Periods: this.inheritNum || "" });
      if (res.Ret === 200) {
        res.Data.List.forEach((item) => {
          if (!item.List || !item.List.length > 0) {
            item.List = [];
          }
        });
        this.updateMode = this.inheritNum ? this.updateMode : res.Data.AddType == "1" ? "重新编辑" : "继承往期";
        this.ruleForm = {
          title: res.Data.Title, //标题
          author: res.Data.Department, //作者
          time: res.Data.PublishDate, //时间
          explain: res.Data.ProductDescription, //说明
          reportLink: res.Data.ReportLink, //变更
        };
        this.$refs["oneRich"].value = res.Data.MarketStrategy;
        this.inheritNum = this.inheritNum ? this.inheritNum : res.Data.InheritPeriods;
        this.industryList = res.Data.List;
        setTimeout(() => {
          res.Data.List.forEach((item, index) => {
            this.$refs["logic" + index][0].value = item.BodyChartSummary && item.BodyChartSummary;
            item.List.forEach((key) => {
              key.CompanyLabel = key.CompanyLabel
                ? key.CompanyLabel.map((val, i) => {
                    let obj = {
                      name: val,
                      value: i + 1,
                    };
                    return obj;
                  })
                : [
                    {
                      name: "",
                      value: 1,
                    },
                  ];
            });
          });
        }, 300);
        this.chartPermissionId = res.Data.List[0].ChartPermissionId;
        this.industryListItem = res.Data.List[0].List || [];
        this.$refs.twoRich.value = res.Data.List[0].List ? res.Data.List[0].List[0].Body : "";
        this.industrialSubjectName = res.Data.List[0].List ? res.Data.List[0].List[0].IndustrialManagementName : "";
        this.overviewList = {
          ArticleId: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleId,
          Title: res.Data.List[0].List && res.Data.List[0].List[0].OverviewArticleTitle,
          IsShowOverviewArticle: res.Data.List[0].List && res.Data.List[0].List[0].IsShowOverviewArticle,
        };
      }
    },
    //获取模版
    async getNoTacticsfirst() {
      const res = await raiInterface.reportSereportSelectiondDetailTemplate();
      if (res.Ret === 200) {
        this.industryList = res.Data.List;
        this.chartPermissionId = res.Data.List[0].ChartPermissionId;
        this.industryListItem = res.Data.List[0].List || [];
      }
    },
    //点击产业的事件
    industryBtn(item, index) {
      if (this.industryListItem.length > 0) {
        this.industryListItem[this.ificationIndustrial].Body = this.$refs["twoRich"].value;
      }
      this.industryList[this.industryIndex].BodyChartSummary = this.$refs["logic" + this.industryIndex][0].value;
      if (index !== this.industryIndex) {
        this.industryIndex = index;
        this.industryListItem = item.List || [];
        this.industryListItem.forEach((item) => {
          if (item.CompanyLabel && typeof item.CompanyLabel[0] === "string") {
            item.CompanyLabel = item.CompanyLabel
              ? item.CompanyLabel.map((key, index) => {
                  let obj = {
                    name: key,
                    value: index + 1,
                  };
                  return obj;
                })
              : [
                  {
                    name: "",
                    value: 1,
                  },
                ];
          }
        });

        this.$refs.twoRich.value = item.List[0] ? item.List[0].Body : "";
        this.chartPermissionId = item.ChartPermissionId;
        this.ificationIndustrial = 0;
      }
    },
    //标的的点击事件 处理
    ificationIndustrialBtn(item, index) {
      if (this.industryListItem.length > 0) {
        this.industryListItem[this.ificationIndustrial].Body = this.$refs["twoRich"].value;
      }
      if (index !== this.ificationIndustrial) {
        this.ificationIndustrial = index;
        this.$refs.twoRich.value = item.Body || "";
        this.industrialSubjectName = item.IndustrialManagementName || "";
        this.overviewList = {
          ArticleId: item.OverviewArticleId,
          Title: item.OverviewArticleTitle,
          IsShowOverviewArticle: item.IsShowOverviewArticle,
        };
      }
    },
    //编辑标的
    editText(item, index) {
      this.dialogText = "编辑";
      this.chartPermissionId = item.ChartPermissionId;
      this.stateValue = item.IndustrialSubjectName;
      this.addDialogVisible = true;
      this.editNum = index;
    },
    //删除标的
    deleteClassify(item, index) {
      this.$confirm("确定要删除该标的吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.industryList[this.industryIndex].List.splice(index, 1);
          this.ificationIndustrial = 0;
          this.$refs["twoRich"].value = this.industryList[this.industryIndex].List.length > 0 ? this.industryList[this.industryIndex].List[0].Body : "";
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加产业
    addMulti() {
      this.dialogText = "添加标的";
      this.addDialogVisible = true;
    },
    //弹框的取消事件
    handleClose() {
      this.stateValue = "";
      this.addDialogVisible = false;
    },
    //弹框的确认事件
    async confirmPerson() {
      if (this.stateValue) {
        const arr = this.subjectList.find((item) => item.SubjectName === this.stateValue);
        if (!arr) {
          this.$message.error("输入正确的标的");
          return;
        }
        let overviewList = {};
        const res = await raiInterface.getReportSelectionArticle({
          IndustrialSubjectId: arr.IndustrialSubjectId,
        });
        if (res.Ret === 200) {
          overviewList = res.Data;
        }
        this.industryList.forEach((item) => {
          if (item.ChartPermissionId == this.chartPermissionId) {
            if (item.List.length > 0) {
              var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
            }
            if (isNext) return this.$message.error("标的重复！");
            item.List.push({
              Body: "",
              ChartPermissionId: this.chartPermissionId,
              IndustrialManagementId: arr.IndustrialManagementId + "",
              IndustrialManagementName: arr.IndustryName,
              IndustrialSubjectId: arr.IndustrialSubjectId + "",
              IndustrialSubjectName: arr.SubjectName,
              CompanyLabel: [{ name: "", value: item.List.length + 1 }],
              OverviewArticleId: overviewList.ArticleId,
              OverviewArticleTitle: overviewList.Title,
              IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
            });
          }
        });
      }
      this.stateValue = "";
      this.addDialogVisible = false;
    },
    async editconfirmPerson() {
      if (this.stateValue) {
        const arr = this.subjectList.find((item) => item.SubjectName === this.stateValue);
        if (!arr) {
          this.$message.error("输入正确的标的");
          return;
        }
        let overviewList = {};
        const res = await raiInterface.getReportSelectionArticle({
          IndustrialSubjectId: arr.IndustrialSubjectId,
        });
        if (res.Ret === 200) {
          overviewList = res.Data;
        }
        this.industryList.forEach((item) => {
          if (item.ChartPermissionId == this.chartPermissionId) {
            if (item.List.length > 0) {
              var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
            }
            if (isNext) return this.$message.error("标的重复！");
            const obj = {
              Body: this.$refs.twoRich.value || "",
              ChartPermissionId: this.chartPermissionId,
              IndustrialManagementId: arr.IndustrialManagementId + "",
              IndustrialManagementName: arr.IndustryName,
              IndustrialSubjectId: arr.IndustrialSubjectId + "",
              IndustrialSubjectName: arr.SubjectName,
              CompanyLabel: item.List[this.editNum].CompanyLabel && item.List[this.editNum].CompanyLabel.length>0?
                            item.List[this.editNum].CompanyLabel : [{ name: "", value: item.List.length + 1 }],
              OverviewArticleId: overviewList.ArticleId,
              OverviewArticleTitle: overviewList.Title,
              IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
            };
            item.List.splice(this.editNum, 1, obj);
          }
        });
      }
      this.stateValue = "";
      this.addDialogVisible = false;
    },
    // 申请内容搜索
    async handleSearchResult(data, cb) {
      if (data) {
        cb([]);
        let res = await raiInterface.industrialSubjectSearch({ KeyWord: data, ChartPermissionId: this.chartPermissionId });
        if (res.Ret === 200) {
          if (res.Data.List && res.Data.List.length > 0) {
            let arr = res.Data.List.map((item) => {
              return { value: item.SubjectName, ...item };
            });
            this.subjectList = arr;
            cb(arr);
          }
        }
      }
    },
    //保存 发布
    confirm(type) {
      this.$refs.ruleForm.validate(async (val) => {
        if (val) {
          if (this.industryListItem.length > 0) {
            this.industryListItem[this.ificationIndustrial].Body = this.$refs["twoRich"].value;
          } else if (this.$refs["twoRich"].value) {
            this.$message.error("文本内容无对应标的,请选择标的！");
            return;
          }
          let isText = [];
          this.industryList.forEach((item) => {
            item.List.forEach((key) => {
              key.CompanyLabel && key.CompanyLabel.length > 0 && isText.push(key.CompanyLabel.some((val) => val.name));
            });
          });
          if (isText && isText.includes(false)) {
            return this.$message.error("请输入公司标签");
          }
          let params = this.dataHandle(type);
          // console.log(params);
          if (type == "预览") {
            sessionStorage.setItem("choicenessPre", JSON.stringify(params));
            let { href } = this.$router.resolve({ name: "预览报告精选" });
            window.open(href, "_blank");
          } else {
            const res = await raiInterface.industrialSubjectPreserveAndPublish(params);
            if (res.Ret === 200) {
              this.$message.success("操作成功!");
              this.init();
              this.$router.back();
            }
          }
        }
      });
    },
    //取消
    cancel() {
      this.$router.back();
      this.$refs["ruleForm"].resetFields();
    },
    async getListPeriods() {
      const res = await raiInterface.industrialSubjectListPeriods();
      if (res.Ret === 200) {
        this.updateModeList = res.Data.List || [];
      }
    },
    init() {
      this.ruleForm = {
        title: "", //标题
        author: "", //作者
        time: "", //时间
        explain: "", //说明
        reportLink: "", //变更
      };
      this.$refs["ruleForm"].resetFields();
      this.$refs["oneRich"].value = "";
      this.$refs["twoRich"].value = "";
    },
    // 标的下添加公司标签
    addLabelClick() {
      this.industryListItem[this.ificationIndustrial].CompanyLabel.push({ name: "", value: this.industryListItem.length + 1 });
    },
    // 处理保存的数据
    dataHandle(type) {
      let industryList = _.cloneDeep(this.industryList);
      const arr = [];
      let ListChartSummary = [];
      industryList.forEach((item) => {
        item.List.forEach((key) => {
          key.CompanyLabel && (key.CompanyLabel = key.CompanyLabel.map((val) => val.name));
          arr.push(key);
        });
        ListChartSummary.push({
          ChartPermissionId: item.ChartPermissionId,
          BodyChartSummary: item.BodyChartSummary,
          ChartPermissionName: item.ChartPermissionName,
          ListSubject: [...item.List],
        });
      });
      if (this.$refs["oneRich"].value == "") {
        this.$message.error("市场策略核心逻辑汇总不能为空");
      }
      let params = {
        AddType: this.updateMode == "重新编辑" ? "1" : "2",
        ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
        Department: this.ruleForm.author,
        Title: this.ruleForm.title,
        DoType: type == "发布" ? 1 : 0,
        MarketStrategy: this.$refs["oneRich"].value,
        InheritPeriods: this.inheritNum,
        List: arr,
        ProductDescription: this.ruleForm.explain,
        PublishDate: this.ruleForm.time,
        ReportLink: this.ruleForm.reportLink,
        ListChartSummary,
      };
      return params;
    },
    deleteLabelItem(item, index) {
      this.industryListItem[this.ificationIndustrial].CompanyLabel.splice(index, 1);
    },
    switchChangeHandler(e) {
      this.industryListItem.forEach((item) => {
        if (item.OverviewArticleId === this.overviewList.ArticleId) {
          item.IsShowOverviewArticle = e;
        }
      });
    },
    // 拖拽排序更新
    sortChange({ oldIndex, newIndex }) {
      this.industryIndex = this.sortChangeFun(this.industryIndex, oldIndex, newIndex);
    },
    //标的拖拽排序更新
    ificationSortChange({ oldIndex, newIndex }) {
      this.ificationIndustrial = this.sortChangeFun(this.ificationIndustrial, oldIndex, newIndex);
    },
    // 排序更新后的逻辑
    sortChangeFun(currentIndex, oldIndex, newIndex) {
      console.log({ currentIndex, oldIndex, newIndex });
      let bigger, smaller;
      if (oldIndex > newIndex) {
        bigger = oldIndex;
        smaller = newIndex;
      } else {
        bigger = newIndex;
        smaller = oldIndex;
      }
      // 当前算中tab的排序 小于较小的 大于较大的 则不用做变动
      if (currentIndex < smaller || currentIndex > bigger) return currentIndex;
      // 移动的是当前选中的
      if (currentIndex == oldIndex) return newIndex;
      if (oldIndex > newIndex) {
        // 向左移 加加
        currentIndex++;
      } else if (oldIndex < newIndex) {
        // 向右移 减减
        currentIndex--;
      }
      return currentIndex;
    },
    onMove(e) {
      // 返回false表示不允许停靠
      return !!e.relatedContext.element;
    },
  }
};
</script>
<style lang="scss">
.add-choiceness {
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
  .content-resource {
    margin: 30px 0 60px;
    display: flex;
    line-height: 40px;
    .resource {
      width: 105px;
    }
    .show {
      flex: 1;
      height: 40px;
      border: 1px solid #aab4cc;
      border-radius: 4px;
      padding-left: 20px;
    }
  }
  .content-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    .el-button {
      padding: 0 30px;
      height: 40px;
      margin-left: 30px;
    }
  }
  .dlg-content {
    width: 100%;
    margin: 40px 0 70px;
    .inline-input {
      width: 100% !important;
    }
    .el-input {
      width: 100% !important;
    }
  }

  .content-module {
    margin-top: 30px;
    .content-industry {
      display: inline-block;
      margin: 30px 0;
      .content-name {
        display: inline-block;
        box-sizing: border-box;
        padding: 0 24px;
        line-height: 38px;
        height: 40px;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        opacity: 1;
        font-weight: 500;
        font-size: 16px;
        color: #409eff;
        border-radius: 4px;
        margin-right: 30px;
      }
      .active {
        background-color: #409eff;
        color: #fff;
      }
    }
    .addIndustrial {
      box-sizing: border-box;
      width: 96px;
      height: 60px;
      padding-top: 10px;
      text-align: center;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      opacity: 1;
      border-radius: 4px;
      color: #409eff;
      i {
        color: #409eff;
        font-weight: 700;
        padding-bottom: 5px;
      }
      span {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .classification {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .industrial {
      position: relative;
      box-sizing: border-box;
      margin-bottom: 15px;
      width: 290px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #ecf5ff;
      font-size: 14px;
      margin-right: 30px;
      color: #409eff;
      border-radius: 4px;
      border: 1px solid #b3d8ff;
    }

    .pitch {
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      background-color: #409eff;
      border: none;
      color: #fff !important;
    }
    .addIndustrial {
      box-sizing: border-box;
      width: 96px;
      height: 60px;
      padding-top: 10px;
      text-align: center;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      opacity: 1;
      border-radius: 4px;
      color: #409eff;
      margin-bottom: 15px;
      i {
        color: #409eff;
        font-weight: 700;
        padding-bottom: 5px;
      }
      span {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .industrial-is-new {
    margin-bottom: 20px;
  }
  .delete-item-icon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
  }
}
</style>