postdischarge-ui/src/views/system/ManageNodeInformation/index.vue

<template>
  <div class="app-container">
    <el-descriptions title="编辑触发条件" style="height: 25px; width: 99px" />

    <div class="title">
      <!-- <div >触发条件</div> -->
      <div class="nodes">
        <!-- 一级 -->
        <div class="node" v-if="updata">
          <!-- {{ updata.length }} -->
          <el-select
            v-model="updata.triggerConditionName"
            style="width: 120px"
            disabled
            @change="changetriggerConditionName($event, index)"
          >
            <el-option
              v-for="item in optionsname"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <!-- 包含 -->
          <el-select
            disabled
            v-model="updata.triggerConditionOperator"
            style="width: 100px"
            @change="changetriggerLogic($event, index)"
          >
            <el-option
              v-for="item in optionstriggerConditionOperator"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>

          <el-input
            v-if="updata.dictDataType == 'STRING'"
            disabled
            v-model="updata.triggerConditionValue"
            style="width: 300px"
            placeholder="请输入触发条件"
            maxlength="100"
          ></el-input>
          <el-select
            disabled
            v-if="updata.dictDataType == 'SELECT'"
            v-model="updata.triggerConditionValue"
            style="width: 300px"
          >
            <el-option
              v-for="item in ConditionValue"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <el-date-picker
            disabled
            v-if="updata.dictDataType == 'DATE'"
            v-model="updata.triggerConditionValue"
            style="width: 300px"
            type="date"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>

          <el-input
            disabled
            v-if="updata.dictDataType == 'DECIMAL'"
            style="width: 300px"
            v-model="updata.triggerConditionValue"
            type="number"
            :min="0"
          ></el-input>
        </div>
        <!-- 二级 -->
        <div v-show="show3 == true">
          <div class="node" v-for="(item, index) in updatalist" :key="index">
            <div
              style="width: 60px; position: absolute; top: 8%"
              v-if="updatalist.length == 2"
            >
              <img src="@/assets/images/images.png" class="login-code-img" />
              <div class="selectname">
                <el-select
                  disabled
                  v-model="item.triggerLogic"
                  style="width: 60px"
                  @change="changetriggerLogicsname($event, index)"
                >
                  <el-option
                    v-for="item in optionslistS"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div>
              <el-select
                v-model="item.triggerConditionName"
                style="width: 120px"
                disabled
                @change="changetriggerConditionName($event, index)"
              >
                <el-option
                  v-for="item in optionsname"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
              <el-select
                disabled
                v-model="item.triggerConditionOperator"
                style="width: 100px"
                @change="changetriggerLogic($event, index)"
              >
                <el-option
                  v-for="item in optionstriggerConditionOperator"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
              <el-input
                v-if="item.dictDataType == 'STRING'"
                disabled
                v-model="item.triggerConditionValue"
                style="width: 300px"
                placeholder="请输入触发条件"
                maxlength="100"
              ></el-input>
              <el-select
                disabled
                v-if="item.dictDataType == 'SELECT'"
                v-model="item.triggerConditionValue"
                style="width: 300px"
              >
                <el-option
                  v-for="item in ConditionValue"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>

              <el-date-picker
                disabled
                v-if="item.dictDataType == 'DATE'"
                v-model="item.triggerConditionValue"
                style="width: 300px"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <el-input
                disabled
                v-if="item.dictDataType == 'DECIMAL'"
                style="width: 300px"
                v-model="item.triggerConditionValue"
                type="number"
                :min="0"
              ></el-input>
            </div>
          </div>
        </div>
      </div>

      <div class="select">
        <span> 适用范围 </span>
        <el-select v-model="updata.suitRange" placeholder="请选择" disabled>
          <el-option
            v-for="item in options"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </div>
      <div class="addlistname">
        <i @click="edit()" class="el-icon-edit">编辑</i>
        <span v-if="updatalist.length > 0">
          <i
            @click="addlistname()"
            class="el-icon-arrow-down"
            v-if="show3 == false"
            >展开</i
          >
          <i @click="addlistname()" class="el-icon-arrow-up" v-else>关闭</i>
        </span>
      </div>
    </div>
    <div class="list">
      <div class="timelist">
        <div class="timetitle">
          管理路径节点({{ lists.length }})
          <i class="el-icon-circle-plus-outline" @click="addlist"></i>
        </div>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in lists"
            :key="index"
            :color="listindex == index ? '#409EFF' : ''"
          >
            <div class="top">
              <div class="toptop">
                <el-select v-model="item.routeNodeName" style="width: 100px">
                  <el-option
                    v-for="item in parentDictCodelist"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="item.routeNodeDay"
                  style="width: 70px"
                  type="number"
                  :min="0"
                ></el-input>
                <span>天</span>
              </div>
              <div>
                <i class="el-icon-delete" @click="delitemh(item, index)"></i>
                <i
                  class="el-icon-circle-plus-outline"
                  @click="additem(item)"
                ></i>
              </div>
            </div>
            <el-card
              v-for="(uitem, uindex) in item.list"
              :key="uitem.id"
              @click.native="bottomclickevent(uitem, index, uindex)"
              :class="listindex == index && itemindex == uindex ? 'cards' : ''"
            >
              <h3 style="height: 20px">{{ uitem.taskTypeName }}</h3>
              <el-tag
                v-if="uitem.routeCheckStatus == 'AGREE'"
                class="routeCheckStatus"
                >已审核</el-tag
              >
              <el-tag
                v-else-if="uitem.routeCheckStatus == 'DISAGREE'"
                type="danger"
                class="routeCheckStatus"
                >不同意</el-tag
              >
              <el-tag v-else type="warning" class="routeCheckStatus"
                >未审核</el-tag
              >
              <p style="height: 16px">{{ uitem.taskSubdivisionName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="texts">
        <div class="topform">
          <el-form ref="form" :inline="true" :model="form" class="form">
            <el-form-item label="任务类型" prop="">
              <el-select
                v-model="form.taskType"
                style="width: 110px"
                @change="changeTaskType"
              >
                <el-option
                  v-for="item in selectTaskTypeList"
                  :key="item.taskTypeCode"
                  :label="item.taskTypeName"
                  :value="item.taskTypeCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务细分" prop="">
              <el-select
                v-model="form.taskSubdivision"
                style="width: 110px"
                @change="changetaskSubdivision"
              >
                <el-option
                  v-for="item in taskPartitionList"
                  :key="item.taskPartitionCode"
                  :label="item.taskPartitionName"
                  :value="item.taskPartitionCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务状态" prop="">
              <el-select v-model="form.taskStatus" style="width: 100px">
                <el-option
                  v-for="item in taskStatusDictList"
                  :key="item.id"
                  :label="item.taskStatusName"
                  :value="item.taskStatusCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类描述" prop="">
              <el-input
                v-model="form.secondClassifyDescribe"
                style="width: 110px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="执行时间" prop="">
              <el-time-select
                v-model="form.executionTime"
                style="width: 120px"
                placeholder="选择时间"
                disabled
              >
              </el-time-select>
            </el-form-item>
            <el-form-item
              label="问卷库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'QUESTIONNAIRE'"
            >
              <question
                @on-template="questionontemplate"
                :templateId="form.templateId"
                :templateName="form.templateName"
              ></question>
            </el-form-item>
            <el-form-item
              label="宣教库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'PROPAGANDA'"
            >
              <propaganda
                @on-template="propagandaontemplate"
                :templateId="form.templateId"
                :templateName="form.templateName"
              ></propaganda>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottomform">
          <wangeditor
            style="width: 100%"
            :nodeContent="form.nodeContent"
            @on-nodeContent="onNodeContent"
            v-show="
              form.taskSubdivisiontemplateType != 'QUESTIONNAIRE' &&
              form.taskSubdivisiontemplateType != 'PROPAGANDA' &&
              form.taskSubdivisiontemplateType != 'SCRIPT'
            "
            ref="wangeditor"
          />
          <div
            class="card"
            v-show="form.taskSubdivisiontemplateType != 'SCRIPT'"
          >
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 短信 </span>
              </div>
              <div class="pushMethod">
                模板：
                <message
                  @on-template="messageontemplate"
                  :templateId="form.messageTemplateId"
                  :templateName="form.messageTemplateName"
                ></message>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.messagePushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
          </div>
          <div
            class="card"
            v-show="form.taskSubdivisiontemplateType != 'SCRIPT'"
          >
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 公众号 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <officialAccount
                    @on-template="officialAccountontemplate"
                    :templateId="form.officialTemplateId"
                    :templateName="form.officialTemplateName"
                  >
                  </officialAccount>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.officialPushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
          </div>
          <div
            class="card"
            v-show="form.taskSubdivisiontemplateType != 'SCRIPT'"
          >
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 小程序 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <miniProgram
                    @on-template="miniProgramtemplate"
                    :templateId="form.appletTemplateId"
                    :templateName="form.appletTemplateName"
                  >
                  </miniProgram>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.appletPushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
          </div>
          <div
            class="card"
            style="height: 250px"
            v-show="form.taskSubdivisiontemplateType == 'SCRIPT'"
          >
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span>
                  <el-radio-group v-model="form.phoneDialMethod">
                    <el-radio label="COMMON">人工电话</el-radio>
                    <el-radio label="AI">自动外呼</el-radio>
                  </el-radio-group>
                </span>
              </div>
              <div class="pushMethod">
                话术模板：
                <span class="spanname" v-if="form.templateId">
                  <scripts
                    @on-template="messageontemplateword"
                    :templateId="form.phoneTemplateId"
                    :templateName="form.phoneTemplateName"
                  ></scripts>
                </span>
                <span v-else>
                  <scripts
                    @on-template="messageontemplateword"
                    :templateId="form.phoneTemplateId"
                    :templateName="form.phoneTemplateName"
                  ></scripts>
                </span>
              </div>
              <div class="pushMethod" v-if="form.phoneDialMethod == 'COMMON' || !form.phoneDialMethod">
                问卷模板：
                <span class="spanname" v-if="form.phoneTemplateId">
                  <question
                    @on-template="questionontemplate"
                    :templateId="form.templateId"
                    :templateName="form.templateName"
                  ></question>
                </span>
                <span v-else>
                  <question
                    @on-template="questionontemplate"
                    :templateId="form.templateId"
                    :templateName="form.templateName"
                  ></question>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.phonePushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
            <div class="flex">
              <div class="pushMethod">
                重播次数：
                <span>
                  <el-select
                    v-model="form.phoneRedialTimes"
                    style="width: 110px"
                  >
                    <el-option
                      v-for="item in optionslistSname"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </span>
              </div>
              <div class="pushMethod">
                时间间隔:
                <span>
                  <el-input
                    v-model.number="form.phoneTimeInterval"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 100px"
                  >
                  </el-input>
                </span>
              </div>
              <div class="pushMethod">
                短信提醒：
                <el-select
                  v-model="form.phoneMessageRemind"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in optionslist"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="pushMethod">
                短信模板：
                <span
                  class="spanname"
                  v-if="form.phoneMessageRemind == 'NOT_SEND_MESSAGE'"
                >
                  <message
                    style="width: 200px"
                    @on-template="messageontemplateMESSAGE"
                    :templateId="form.phoneMessageTemplateId"
                    :templateName="form.phoneMessageTemplateName"
                  ></message>
                </span>
                <span v-else>
                  <message
                    style="width: 200px"
                    @on-template="messageontemplateMESSAGE"
                    :templateId="form.phoneMessageTemplateId"
                    :templateName="form.phoneMessageTemplateName"
                  ></message>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑触发条件 -->
    <el-dialog
      title="添加触发条件"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form
        ref="openlist"
        :model="openlist"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="适用范围:">
          <el-select
            v-model="openlist.suitRange"
            @change="changeoptions"
            style="width: 200px"
          >
            <el-option
              v-for="item in options"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-descriptions title="触发条件"> </el-descriptions>
        <div class="nodesname">
          <div
            class="node"
            v-for="(item, index) in openlist.triggerConditionList"
            :key="index"
          >
            <!-- 且或 -->
            <div
              style="width: 60px; position: absolute; left: 2%; top: 57%"
              v-if="openlist.triggerConditionList.length === 3"
            >
              <img src="@/assets/images/images.png" class="login-code" />
              <div class="selectnamelist">
                <el-select
                  v-model="item.triggerLogic"
                  style="width: 60px"
                  placeholder=""
                  @change="changetriggerLogicsname($event, index)"
                >
                  <el-option
                    v-for="item in optionslistS"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 诊断 -->
            <el-select
              v-model="item.triggerConditionCode"
              style="width: 120px"
              @change="changetriggerConditionName($event, index)"
            >
              <el-option
                v-for="item in optionsname"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
            <!-- 包含 -->
            <el-select
              v-model="item.triggerConditionOperator"
              style="width: 100px"
              @change="changetriggerLogic($event, index)"
            >
              <el-option
                v-for="item in optionstriggerConditionOperator"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>

            <el-input
              v-if="item.dictDataType == 'STRING'"
              v-model="item.triggerConditionValue"
              style="width: 300px"
              placeholder="请输入触发条件"
              maxlength="100"
            ></el-input>
            <el-select
              v-if="item.dictDataType == 'SELECT'"
              v-model="item.triggerConditionValue"
              style="width: 300px"
            >
              <el-option
                v-for="item in ConditionValue"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
            <el-date-picker
              v-if="item.dictDataType == 'DATE'"
              v-model="item.triggerConditionValue"
              style="width: 300px"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <!-- {{ item }} -->
            <el-input
              v-if="item.dictDataType == 'DECIMAL'"
              style="width: 300px"
              v-model="item.triggerConditionValue"
              type="number"
              :min="0"
            ></el-input>
            <span class="icon">
              <el-button
                type="danger"
                class="el-icon-remove-outline"
                plain
                @click="delitemlistname(index)"
                v-if="index != 0"
              ></el-button>

              <el-button
                type="primary"
                plain
                class="el-icon-circle-plus-outline"
                @click="addtriggerCondition(index)"
                v-if="index == 0"
                >添加属性</el-button
              >
            </span>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upload">确 定</el-button>
        <el-button @click="openfalse">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 提交审核 -->
    <el-dialog
      title="提交审核完成"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="routeform"
        :model="routeform"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="节点审核状态" prop="routeCheckStatus">
          <el-radio v-model="routeform.routeCheckStatus" label="AGREE"
            >同意</el-radio
          >
          <el-radio v-model="routeform.routeCheckStatus" label="DISAGREE"
            >不同意</el-radio
          >
        </el-form-item>
        <el-form-item label="节点审核备注">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入节点审核备注"
            v-model="routeform.routeCheckRemark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditing">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="TemporaryStorage">暂 存</el-button>
      <el-button
        type="primary"
        @click="dialogVisible = true"
        v-if="form.specialDiseaseNodeId"
        >审核完成 {{ agreeNumber ? agreeNumber : "0" }} /
        {{ totalNumber ? totalNumber : "0" }}</el-button
      >
    </div>
  </div>
</template>
<script>
import indexjs from "./indexjs.js";
export default indexjs;
</script>
<style scoped lang="scss">
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff !important;
  color: #606266 !important;
}

.el-icon-arrow-down {
  margin-left: 50px;
  font-size: 14px;
}

.el-icon-arrow-up {
  margin-left: 50px;
}

.addlistname {
  color: #409eff;
  font-size: 14px;
  margin-left: 20px;
  margin-top: 10px;
}

.login-code {
  width: 62px;
  height: 81px;
  position: relative;
  z-index: 0;
  top: -30px;
  right: 56px;
}

.login-code-img {
  width: 62px;
  height: 81px;
  position: absolute;
  z-index: -1;
  top: 32px;
  right: 61px;
}

.selectnamelist {
  position: absolute;
  right: 54px;
  top: -8px;
}

.selectname {
  position: absolute;
  right: 70px;
  top: 55px;
}

.dialog-footer {
  padding: 0px 30px;
  text-align: right;
}

.nodesname {
  margin-left: 6%;
  width: 660px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-left: 20px;

  .node {
    margin-bottom: 10px;
  }
}

.nodes {
  width: 660px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-left: 20px;

  .node {
    margin-bottom: 10px;
  }
}

.bottomform {
  background-color: #f2f4f5;
  margin-top: 10px;

  .card {
    background-color: #fff;
    width: 100%;
    height: 130px;
    margin: 20px 0 0;
    padding: 20px 50px 0px 20px;

    .flextwo {
      // display: flex;
      // align-items: center;
      margin-top: 20px;

      .text {
        font-size: 14px;
        color: #64666a;
      }

      .textarea {
        width: 90%;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        // border: 1px solid #dcdfe6;
        border-radius: 5px;
        display: flex;
        align-items: center;

        ::v-deep .el-input {
          padding: 0 10px;
          width: 50%;
          color: black;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
          cursor: default !important;
        }
      }
    }

    .flex {
      display: flex;
      width: 100%;
      align-items: center;
      // background: red;
      justify-content: space-between;

      .pushMethod {
        height: 30px;
        margin-top: 30px;
        line-height: 37px;
        font-size: 14px;
        color: #64666a;

        .spanname {
          pointer-events: none;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
        }

        span {
          color: black;
          font-size: 14px;
        }
      }
    }
  }
}

.routeCheckStatus {
  position: absolute;
  right: 10px;
  top: 30px;
}

.topform {
  padding: 15px 0 0 15px;
  height: 200px;

  .form {
    ::v-deep .el-input__inner {
      height: 30px !important;
      line-height: 30px !important;
    }

    ::v-deep .el-form-item__label {
      font-size: 13px !important;
    }
  }
}

.title {
  display: flex;
  margin-left: 100px;

  .select {
    font-weight: 550;
    // margin-left: 10%;
    position: relative;
    right: 20px;
    // width: 300px;
    font-size: 13px;

    .el-input {
      width: 200px;
      height: 30px !important;
      line-height: 30px !important;
    }
  }
}

// .container {
//   padding: 20px;
// }
.list {
  margin: 12px auto;
  width: 100%;
  // height: calc(100% - 80px);
  background-color: #f2f4f5;
  display: flex;
  padding-top: 15px;
  justify-content: space-evenly;

  .timelist {
    width: 25%;
    background-color: #fff;
    padding: 0 20px 20px;
    height: calc(100vh - 350px);

    overflow: scroll;

    .timetitle {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    ::v-deep .el-timeline {
      width: 100%;
      padding: 15px 0 0 !important;
    }
  }

  .texts {
    width: 73%;
    height: calc(100vh - 350px);

    overflow: scroll;
    background-color: #fff;
  }
}

.cards {
  border: 1px solid #409eff;
  border-left: 5px solid #409eff;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .toptop {
    display: flex;
    align-items: center;
  }

  span {
    padding: 0 4px;
  }

  i {
    font-size: 17px;
  }

  i:nth-child(2) {
    padding-left: 12px;
  }
}

::v-deep .el-timeline-item__timestamp {
  margin: 0 !important;
  padding: 0 !important;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
  transform: translateY(-2%);
}

::v-deep .el-card {
  position: relative !important;
  margin-top: 20px !important;
}
</style>