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

<script setup>
import { ref, onMounted } from "vue";
import RichText from "./richText.vue";
import { raiInterface } from "@/api/api.js";
import draggable from "vuedraggable";
import _ from "lodash";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { Close, Plus } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

const contentValue = ref("one");
const contentText = ref("市场策略核心逻辑汇总");
const contentValueTwo = ref("two");
const contentTextTwo = ref("公司核心逻辑汇总");
const contentTextLogic = ref("行业核心逻辑汇总");
const updateMode = ref(""); //更新方式
const inheritNum = ref(""); //继承第几

const ruleForm = ref({
  title: "", //标题
  author: "", //作者
  time: "", //时间
  explain: "", //说明
  reportLink: "", //变更
});
const rules = ref({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
});
const ruleFormRef = ref(null);
const twoRich = ref(null);
const industryList = ref([]); //行业
const industryIndex = ref(0); //
const ificationIndustrial = ref(0);
const addDialogVisible = ref(false);
const dialogText = ref("");
const stateValue = ref("");
const companyList = ref([]);
const timeout = ref(null);
const isShowStatus = ref(true);
const industrialSubjectName = ref("");
const chartPermissionId = ref(""); //分类id
const subjectList = ref([]);
const updateModeList = ref([]); //期数的数组
const editNum = ref("");
const overviewList = ref({});
const marketStrategy = ref("");
const timeInterval = ref(null); // 定时器

// 报告的缓存处理数据
function dataInit() {
  if (sessionStorage.getItem("addChoicenessQY")) {
    let data = JSON.parse(sessionStorage.getItem("addChoicenessQY"));
    setTimeout(() => {
      industryList.value = data.industryList;
      industryIndex.value = data.industryIndex;
      ificationIndustrial.value = data.ificationIndustrial;
      updateMode.value = data.updateMode;
      inheritNum.value = data.inheritNum;
      companyList.value = data.companyList;
      industrialSubjectName.value = data.industrialSubjectName;
      chartPermissionId.value = data.chartPermissionId;
      subjectList.value = data.subjectList;
      updateModeList.value = data.updateModeList;
      editNum.value = data.editNum;
      overviewList.value = data.overviewList;
      ruleForm.value = data.ruleForm;
      marketStrategy.value = data.MarketStrategy;
    }, 200);
  }
  timeInterval.value = setInterval(() => {
    let params = {
      industryList: industryList.value,
      industryIndex: industryIndex.value,
      ificationIndustrial: ificationIndustrial.value,
      updateMode: updateMode.value,
      inheritNum: inheritNum.value,
      companyList: companyList.value,
      industrialSubjectName: industrialSubjectName.value,
      chartPermissionId: chartPermissionId.value,
      subjectList: subjectList.value,
      updateModeList: updateModeList.value,
      editNum: editNum.value,
      overviewList: overviewList.value,
      ruleForm: ruleForm.value,
      MarketStrategy: marketStrategy.value,
    };
    sessionStorage.setItem("addChoicenessQY", JSON.stringify(params));
  }, 120000);
}
function updateModeChange() {
  if (updateMode.value == "重新编辑") {
    init();
    industryList.value = [];
    getNoTacticsfirst();
  }
}
//获取编辑详情
async function getDetail() {
  const res = await raiInterface.reportSelectionDetail({ ArticleId: route.query.id || "", Periods: inheritNum.value || "" });
  if (res.Ret === 200) {
    res.Data.List.forEach((item) => {
      if (!item.List || !item.List.length > 0) {
        item.List = [];
      }
    });
    updateMode.value = inheritNum.value ? updateMode.value : res.Data.AddType == "1" ? "重新编辑" : "继承往期";
    ruleForm.value = {
      title: res.Data.Title, //标题
      author: res.Data.Department, //作者
      time: res.Data.PublishDate, //时间
      explain: res.Data.ProductDescription, //说明
      reportLink: res.Data.ReportLink, //变更
    };
    marketStrategy.value = res.Data.MarketStrategy;
    inheritNum.value = inheritNum.value ? inheritNum.value : res.Data.InheritPeriods;
    industryList.value = res.Data.List;
    setTimeout(() => {
      res.Data.List.forEach((item, index) => {
        item.List.forEach((key, i) => {
          key.CompanyLabel = key.CompanyLabel
            ? key.CompanyLabel.map((val, i) => {
                let obj = {
                  name: val,
                  value: i + 1,
                };
                return obj;
              })
            : [
                {
                  name: "",
                  value: 1,
                },
              ];
        });
      });
    }, 300);
    chartPermissionId.value = res.Data.List[0].ChartPermissionId;
    industrialSubjectName.value = res.Data.List[0].List ? res.Data.List[0].List[0].IndustrialManagementName : "";
    overviewList.value = {
      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 function getNoTacticsfirst() {
  const res = await raiInterface.reportSereportSelectiondDetailTemplate();
  if (res.Ret === 200) {
    industryList.value = res.Data.List;
    chartPermissionId.value = res.Data.List[0].ChartPermissionId;
  }
}
//点击产业的事件
function industryBtn(item, index) {
  console.log(item);
  if (index !== industryIndex.value) {
    industryIndex.value = index;
    chartPermissionId.value = item.ChartPermissionId;
    ificationIndustrial.value = 0;
  }
}
//标的的点击事件 处理
function ificationIndustrialBtn(item, index) {
  if (index !== ificationIndustrial.value) {
    ificationIndustrial.value = index;
    industrialSubjectName.value = item.IndustrialManagementName || "";
    overviewList.value = {
      ArticleId: item.OverviewArticleId,
      Title: item.OverviewArticleTitle,
      IsShowOverviewArticle: item.IsShowOverviewArticle,
    };
  }
}
//编辑标的
function editText(item, index) {
  dialogText.value = "编辑";
  chartPermissionId.value = item.ChartPermissionId;
  stateValue.value = item.IndustrialSubjectName;
  addDialogVisible.value = true;
  editNum.value = index;
}
//删除标的
function deleteClassify(item, index) {
  ElMessageBox.confirm("确定要删除该标的吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      industryList[industryIndex.value].value.List.splice(index, 1);
      ificationIndustrial.value = 0;
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
}
//添加产业
function addMulti() {
  dialogText.value = "添加标的";
  addDialogVisible.value = true;
}
//弹框的取消事件
function handleClose() {
  stateValue.value = "";
  addDialogVisible.value = false;
}
//弹框的确认事件
async function confirmPerson() {
  if (stateValue.value) {
    const arr = subjectList.value.find((item) => item.SubjectName === stateValue.value);
    if (!arr) {
      ElMessage.error("输入正确的标的");
      return;
    }
    let overviewList = {};
    const res = await raiInterface.getReportSelectionArticle({
      IndustrialSubjectId: arr.IndustrialSubjectId,
    });
    if (res.Ret === 200) {
      overviewList = res.Data;
    }
    industryList.value.forEach((item) => {
      if (item.ChartPermissionId == chartPermissionId.value) {
        if (item.List.length > 0) {
          var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
        }
        if (isNext) return ElMessage.error("标的重复！");
        item.List.push({
          Body: "",
          ChartPermissionId: chartPermissionId.value,
          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,
        });
      }
    });
  }
  stateValue.value = "";
  addDialogVisible.value = false;
}
async function editconfirmPerson() {
  if (stateValue.value) {
    const arr = subjectList.value.find((item) => item.SubjectName === stateValue.value);
    if (!arr) {
      ElMessage.error("输入正确的标的");
      return;
    }
    let overviewList = {};
    const res = await raiInterface.getReportSelectionArticle({
      IndustrialSubjectId: arr.IndustrialSubjectId,
    });
    if (res.Ret === 200) {
      overviewList = res.Data;
    }
    industryList.value.forEach((item) => {
      if (item.ChartPermissionId == chartPermissionId.value) {
        if (item.List.length > 0) {
          var isNext = item.List.some((item) => item.IndustrialSubjectName == arr.SubjectName);
        }
        if (isNext) return ElMessage.error("标的重复！");
        const obj = {
          Body: twoRich.value || "",
          ChartPermissionId: chartPermissionId.value,
          IndustrialManagementId: arr.IndustrialManagementId + "",
          IndustrialManagementName: arr.IndustryName,
          IndustrialSubjectId: arr.IndustrialSubjectId + "",
          IndustrialSubjectName: arr.SubjectName,
          CompanyLabel: item.List[editNum.value].CompanyLabel && item.List[editNum.value].CompanyLabel.length > 0 ? item.List[editNum.value].CompanyLabel : [{ name: "", value: item.List.length + 1 }],
          OverviewArticleId: overviewList.ArticleId,
          OverviewArticleTitle: overviewList.Title,
          IsShowOverviewArticle: overviewList.IsShowOverviewArticle,
        };
        item.List.splice(editNum.value, 1, obj);
      }
    });
  }
  stateValue.value = "";
  addDialogVisible.value = false;
}
// 申请内容搜索
async function handleSearchResult(data, cb) {
  if (data) {
    cb([]);
    let res = await raiInterface.industrialSubjectSearch({ KeyWord: data, ChartPermissionId: chartPermissionId.value });
    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 };
        });
        subjectList.value = arr;
        cb(arr);
      }
    }
  }
}
//保存 发布
const confirm = _.debounce(function (type) {
  ruleFormRef.value.validate(async (val) => {
    if (val) {
      let isText = [];
      industryList.value.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 ElMessage.error("请输入公司标签");
      }
      let params = dataHandle(type);
      if (type == "预览") {
        sessionStorage.setItem("choicenessPre", JSON.stringify(params));
        let { href } = router.resolve({ name: "choicenessPre" });
        window.open(href, "_blank");
      } else {
        const res = await raiInterface.industrialSubjectPreserveAndPublish(params);
        if (res.Ret === 200) {
          clearInterval(timeInterval.value);
          sessionStorage.removeItem("addChoicenessQY");
          thElMessage.success("操作成功!");
          init();
          router.back();
        }
      }
    }
  });
}, 500);
//取消
function cancel() {
  clearInterval(timeInterval.value);
  sessionStorage.removeItem("addChoicenessQY");
  ruleFormRef.value.resetFields();
  router.back();
}
async function getListPeriods() {
  const res = await raiInterface.industrialSubjectListPeriods();
  if (res.Ret === 200) {
    updateModeList.value = res.Data.List || [];
  }
}
function init() {
  ruleForm.value = {
    title: "", //标题
    author: "", //作者
    time: "", //时间
    explain: "", //说明
    reportLink: "", //变更
  };
  ruleFormRef.value.resetFields();
  marketStrategy.value = "";
}
// 标的下添加公司标签
function addLabelClick(item) {
  item.CompanyLabel.push({ name: "", value: item.CompanyLabel.length + 1 });
}
// 处理保存的数据
function dataHandle(type) {
  let industryList = _.cloneDeep(industryList.value);
  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 (marketStrategy.value == "") {
    ElMessage.error("市场策略核心逻辑汇总不能为空");
  }
  let params = {
    AddType: updateMode.value == "重新编辑" ? "1" : "2",
    ArticleId: route.query.id ? Number(route.query.id) : 0,
    Department: ruleForm.value.author,
    Title: ruleForm.value.title,
    DoType: type == "发布" ? 1 : 0,
    MarketStrategy: marketStrategy.value,
    InheritPeriods: inheritNum.value,
    List: arr,
    ProductDescription: ruleForm.value.explain,
    PublishDate: ruleForm.value.time,
    ReportLink: ruleForm.value.reportLink,
    ListChartSummary,
  };
  return params;
}
function deleteLabelItem(item, index) {
  item.CompanyLabel.splice(index, 1);
}
function switchChangeHandler(e) {
  industryList.value.forEach((_) => {
    _.List.forEach((item) => {
      if (item.OverviewArticleId === overviewList.value.ArticleId) {
        item.IsShowOverviewArticle = e;
      }
    });
  });
}
// 拖拽排序更新
function sortChange({ oldIndex, newIndex }) {
  industryIndex.value = sortChangeFun(industryIndex.value, oldIndex, newIndex);
}
//标的拖拽排序更新
function ificationSortChange({ oldIndex, newIndex }) {
  ificationIndustrial.value = sortChangeFun(ificationIndustrial.value, oldIndex, newIndex);
}
// 排序更新后的逻辑
function sortChangeFun(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;
}
function onMove(e) {
  // 返回false表示不允许停靠
  return !!e.relatedContext.element;
}

onMounted(() => {
  console.log(route);
  if (route.query.id) {
    isShowStatus.value = route.query.status == 0;
    getDetail();
  } else {
    getNoTacticsfirst();
    dataInit();
  }
  getListPeriods();
});
// 离开时清理定时器
onBeforeRouteLeave((to, from, next) => {
  clearInterval(timeInterval.value);
  next();
});
</script>

<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 @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="ruleFormRef" 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" v-model="marketStrategy" :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" v-if="industryList.length">
          <draggable v-model="industryList" animation="300" @update="sortChange" item-key="id">
            <template #item="{ element, index }">
              <div class="content-industry">
                <div class="content-name" :class="industryIndex == index ? 'active' : ''" @click="industryBtn(element, index)">{{ element.ChartPermissionName }}</div>
              </div>
            </template>
          </draggable>
          <div v-for="(item, indexP) in industryList" :key="item.ChartPermissionId">
            <div v-show="industryIndex == indexP">
              <RichText v-model="item.BodyChartSummary" :ref="'logic' + indexP" :spareId="'logictest' + indexP" :isText="contentTextLogic" />
              <div style="display: flex; flex-wrap: wrap; margin-top: 20px">
                <draggable v-model="item.List" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange">
                  <template #item="{ element, index }">
                    <div class="industrial" @click="ificationIndustrialBtn(element, index)" :class="index == ificationIndustrial ? 'pitch' : ''">
                      <span style="margin-right: 19px">{{ element.IndustrialSubjectName }}</span>
                      <span v-if="index == ificationIndustrial">
                        <img src="~@/assets/img/icons/edit1.png" style="width: 12px; height: 12px; margin-right: 10px" @click="editText(element, index)" />
                        <el-icon @click="deleteClassify(element, index)"><Close /></el-icon>
                      </span>
                    </div>
                  </template>
                </draggable>
                <div class="addIndustrial" @click="addMulti" v-if="industryIndex == indexP">
                  <el-icon><Plus /></el-icon>
                  <span>添加标的</span>
                </div>
              </div>

              <template v-for="(val, num) in item.List" :key="val.IndustrialSubjectId">
                <div v-show="industryIndex == indexP">
                  <div class="industrial-is-new" v-show="num == ificationIndustrial">
                    <el-checkbox v-model="val.IsNew" :true-label="1" :false-label="0">显示new标签</el-checkbox>
                  </div>
                  <div style="margin-bottom: 20px; display: flex; align-items: center" v-show="num == ificationIndustrial">
                    <div style="display: flex; align-items: center" v-for="(son, num) in val.CompanyLabel" :key="num">
                      <el-input style="width: 260px; margin-right: 15px" v-model="son.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(val)" class="editsty" src="~@/assets/img/set_m/add_ico.png" />
                    </el-tooltip>
                  </div>
                  <rich-text :ref="'twoRich' + num" v-model="val.Body" :spareId="contentValueTwo" :isText="contentTextTwo" v-show="num == ificationIndustrial" />
                </div>
              </template>
            </div>
          </div>
        </div>

        <div>
          <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>
        <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 draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="addDialogVisible" width="560px" :before-close="handleClose">
      <template #header>
        <div 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>
      </template>
      <div class="dlg-content">
        <el-autocomplete class="inline-input" v-model="stateValue" :trigger-on-focus="false" :fetch-suggestions="handleSearchResult" placeholder="请输入标的名称" clearable></el-autocomplete>
      </div>
      <template #footer>
        <span 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>
      </template>
    </el-dialog>
  </div>
</template>

<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;

    .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>