<template>
  <div class="content-height p20">
    <PageHeader title="盘点计划详情"></PageHeader>
    <div class="flex createdInfo">
      <div>
        <span class="col">状态</span>
        <span>{{ infoData.planStatus && infoData.planStatus.descp }}</span>
      </div>
      <div>
        <span class="col">创建人</span>
        <span>{{ infoData.createUserName }}</span>
      </div>
      <div>
        <span class="col">创建时间</span>
        <span>{{ infoData.createTime }}</span>
      </div>
    </div>
    <div class="switch mt40">
      <div class="switch_left">
        <ul>
          <li :class="{ active: num == 1 }" @click="selectActive(1)">详情</li>
          <li :class="{ active: num == 3 }" @click="selectActive(3)">
            工单详情
          </li>
          <!-- <li :class="{ active: num == 4 }" @click="selectActive(4)">
            审批详情
          </li>
          <li :class="{ active: num == 2 }" @click="selectActive(2)">
            变更日志
          </li> -->
        </ul>
      </div>
    </div>

    <div v-if="num === 1">
      <div class="custSteps">
        <StatusStep
          :activeCode="infoData.planStatus && infoData.planStatus.code"
          :statusList="wh_planStatus.slice(0, wh_planStatus.length - 1)"
        />
      </div>
      <!-- 进度条end -->
      <div class="content-detail mt40">
        <div class="basic-details">
          <div class="basic-details-title">
            <span class="border-span">派单信息</span>
          </div>
        </div>
        <div class="mt20">
          <el-form label-width="130px">
            <el-col :span="8">
              <el-form-item label="单据编号">
                {{ infoData.planCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点名称">
                {{ infoData.planName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产类型">
                {{ infoData.assetDictDESC }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点类型">
                {{ infoData.bizType | useDictLabelFilter(wh_checkStatus) }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="infoData.bizType == 1">
              <el-form-item label="盘点仓库">
                {{ infoData.bizTypeName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点部门">
                {{ infoData.executorDeptName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点人员">
                {{ infoData.executorName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划盘点时长">
                {{ infoData.duration }}分钟
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批人">
                {{ infoData.verifyUserName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急程度">
                {{ infoData.urgent | useDictLabelFilter(emergencyState) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                {{ infoData.createUserName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                {{ infoData.createTime }}
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="附件">
              </el-form-item>
            </el-col> -->
            <el-col :span="16">
              <el-form-item label="备注">
                {{ infoData.remark }}
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="content-detail mt20">
        <div class="mt20">
          <el-form label-width="80px" label-position="top">
            <el-form-item label="盘点明细">
              <el-table
                ref="multipleTable"
                :data="infoData.planInventoryDetailList || []"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
              >
                <el-table-column
                  :label="`${infoData.assetDictDESC || ''}编号`"
                  prop="assetCode"
                ></el-table-column>
                <el-table-column
                  :label="`${infoData.assetDictDESC || ''}名称`"
                  prop="assetName"
                ></el-table-column>
                <!-- <el-table-column
                  v-if="infoData.bizType == 1"
                  label="批次号"
                  prop="batchNum"
                ></el-table-column> -->
                <el-table-column
                  label="牌号"
                  prop="assetBrand"
                ></el-table-column>
                <el-table-column label="型号" prop="assetSku"></el-table-column>
                <el-table-column label="类型" prop="assetTypeDictDESC">
                  <!-- <template>
                    {{ infoData.assetDict && infoData.assetDict.descp }}
                  </template> -->
                </el-table-column>
                <!-- <el-table-column
                  label="仓库"
                  prop="bizTypeName"
                ></el-table-column> -->
                <el-table-column
                  label="库存量"
                  prop="inventoryNum"
                ></el-table-column>
                <el-table-column label="单位" prop="unit">
                  <template slot-scope="scope">
                    <span>
                      {{
                        scope.row.isUnpack
                          ? scope.row.unit
                          : scope.row.minPackUnit
                      }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div v-else-if="num === 2">
      <div class="customSteps">
        <div class="flex">
          <!-- <div class="time">2021-09-01 12:25</div> -->
          <div class="time"></div>
          <p class="round">
            <span></span>
          </p>
          <div class="text">
            <div class="add">新增</div>
            <div class="info">
              <el-form>
                <el-col :span="6">
                  <el-form-item label="操作人">
                    <!-- <span>管理局处长</span> -->
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="归属机构">
                    <!-- <span>湖南省机构事务管理局</span> -->
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="来源单据">
                    <!-- <span>采购工单 ABCD125897</span> -->
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
          </div>
        </div>
        <div class="flex">
          <!-- <div class="time">2021-09-02 12:25</div> -->
          <div class="time"></div>
          <p class="round">
            <span></span>
          </p>
          <div class="text">
            <div class="add">修改</div>
            <div class="info">
              <el-form>
                <el-col :span="6">
                  <el-form-item label="操作人">
                    <!-- <span>管理局处长</span> -->
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="归属机构">
                    <!-- <span>湖南省机构事务管理局</span> -->
                  </el-form-item>
                </el-col>
                <el-form-item label="现场查验人">
                  <!-- <span>无 <i class="el-icon-right"></i> 管理局专员</span> -->
                </el-form-item>
                <el-form-item label="期望使用日期">
                  <!-- <span>无 <i class="el-icon-right"></i> 2021-09-21</span> -->
                </el-form-item>
                <el-form-item label="联系方式">
                  <!-- <span>无 <i class="el-icon-right"></i> 13900000000</span> -->
                </el-form-item>
                <el-form-item label="申请理由">
                  <!-- <span>无 <i class="el-icon-right"></i> 办公需要</span> -->
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="flex">
          <!-- <div class="time">2021-09-03 12:25</div> -->
          <div class="time"></div>
          <p class="round">
            <span></span>
          </p>
          <div class="text">
            <div class="add">修改</div>
            <div class="info">
              <el-form>
                <el-col :span="6">
                  <el-form-item label="操作人">
                    <!-- <span>专员A</span> -->
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="归属机构">
                    <!-- <span>湖南省机构事务管理局</span> -->
                  </el-form-item>
                </el-col>
                <el-form-item label="审批流程">
                  <!-- <span
                    >无 <i class="el-icon-right"></i> 调剂申请单-通用资产</span
                  > -->
                </el-form-item>
                <el-form-item label="申请理由">
                  <!-- <span>已创建 <i class="el-icon-right"></i> 审批中</span> -->
                </el-form-item>
                <el-form-item label="备注">
                  <!-- <span>无 <i class="el-icon-right"></i> 办公所需</span> -->
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="flex">
          <!-- <div class="time">2021-09-04 12:25</div> -->
          <div class="time"></div>
          <p class="round">
            <span></span>
          </p>
          <div class="text">
            <div class="add">修改</div>
            <div class="info">
              <el-form>
                <el-col :span="6">
                  <el-form-item label="操作人">
                    <!-- <span>管理局局长</span> -->
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="归属机构">
                    <!-- <span>湖南省机构事务管理局</span> -->
                  </el-form-item>
                </el-col>
                <el-form-item label="申请理由">
                  <!-- <span>审批中 <i class="el-icon-right"></i> 审批完成</span> -->
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="num === 3">
      <div class="mt20">
        <el-table
          ref="multipleTable"
          :data="infoData.planWorkOrderList || []"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
        >
          <el-table-column
            label="工单单号"
            prop="workOrderCode"
          ></el-table-column>
          <el-table-column label="状态" prop="status.descp"></el-table-column>
          <el-table-column label="派单人" prop="createName"></el-table-column>
          <el-table-column label="派单时间" prop="createTime"></el-table-column>
          <el-table-column
            label="执行人"
            prop="executeUserName"
          ></el-table-column>
          <el-table-column label="完成时间" prop="finishTime"></el-table-column>
          <el-table-column
            label="审核人"
            prop="accraditationUserName"
          ></el-table-column>
          <el-table-column
            label="审核时间"
            prop="planAuditTime"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="num == 4">
      <div class="mt20">
        <el-form label-width="120px" style="overflow: hidden">
          <el-col :span="6">
            <el-form-item label="流程名称">
              <!-- <span>机构内部会议申请</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前状态">
              <!-- <span>已完成</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="适用资产类型">
              <!-- <span>全部</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="适用单据类型">
              <!-- <span>配置计划申请单</span> -->
            </el-form-item>
          </el-col>
        </el-form>
        <div class="flex tips">
          <span>温馨提示：暂未启用任何审批流程</span>
          <div class="flex shape">
            <div class="flex mr20">
              <p class="f"></p>
              <span>发起环节</span>
            </div>
            <div class="flex mr20">
              <p class="j"></p>
              <span>审批环节</span>
            </div>
            <div class="flex">
              <p class="y"></p>
              <span>最终审批环节</span>
            </div>
          </div>
        </div>

        <div class="customSteps customInfo">
          <div class="flex">
            <div class="time">
              <!-- <p>2021-09-01 12:25</p>
              <p class="col">7小时07分</p> -->
            </div>
            <p class="y mr20"></p>
            <div class="text">
              <div class="add">财政厅审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>陈勇</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省财政厅</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="审批结果">
                      <!-- <span>同意</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="审批意见">
                      <!-- <span>无</span> -->
                    </el-form-item>
                  </el-col>
                </el-form>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="time">
              <!-- <p>2021-09-02 12:25</p>
              <p class="col">10小时08分</p> -->
            </div>
            <p class="j mr20"></p>
            <div class="text">
              <div class="add">管理局审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>杨成刚</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省机关事务管理局</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="审批结果">
                      <!-- <span>同意</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="审批意见">
                      <!-- <span>无</span> -->
                    </el-form-item>
                  </el-col>
                </el-form>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="time">
              <!-- <p>2021-09-03 12:25</p>
              <p class="col">4小时41分</p> -->
            </div>
            <p class="j mr20"></p>
            <div class="text">
              <div class="add">机构领导审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>刘权</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="审批结果">
                    <!-- <span>同意</span> -->
                  </el-form-item>
                  <el-form-item label="审批意见">
                    <!-- <span>无</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="time">
              <!-- <p>2021-09-04 12:25</p>
              <p class="col">8小时21分</p> -->
            </div>
            <p class="j mr20"></p>
            <div class="text">
              <div class="add">机构部门审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>李海波</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="审批结果">
                    <!-- <span>同意</span> -->
                  </el-form-item>
                  <el-form-item label="审批意见">
                    <!-- <span>无</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="time">
              <!-- <p>2021-10-17 09:44</p> -->
            </div>
            <p class="f mr20"></p>
            <div class="text">
              <div class="add">机构专员提交</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>张三</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="单据类型">
                    <!-- <span>会议配置申请</span> -->
                  </el-form-item>
                  <el-form-item label="单据编号">
                    <!-- <span>PWH2012020000212</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="time">
              <!-- <p>2021-10-15 17:11</p>
              <p class="col">5小时33分</p> -->
            </div>
            <p class="j mr20"></p>
            <div class="text">
              <div class="add">机构领导审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>刘权</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="审批结果">
                    <!-- <span>不同意</span> -->
                  </el-form-item>
                  <el-form-item label="审批意见">
                    <!-- <span>未考虑到会议接送人员的住宿问题</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="time">
              <!-- <p>2021-10-15 11:33</p>
              <p class="col">1小时24分</p> -->
            </div>
            <p class="j mr20"></p>
            <div class="text">
              <div class="add">机构部门审批</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>李海波</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="审批结果">
                    <!-- <span>同意</span> -->
                  </el-form-item>
                  <el-form-item label="审批意见">
                    <!-- <span>无</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="time">
              <!-- <p>2021-10-15 11:33</p> -->
            </div>
            <p class="f mr20"></p>
            <div class="text">
              <div class="add">机构专员提交</div>
              <div class="info">
                <el-form>
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <!-- <span>张三</span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="机构名称">
                      <!-- <span>省发展和改革委员会</span> -->
                    </el-form-item>
                  </el-col>
                  <el-form-item label="单据类型">
                    <!-- <span>会议配置申请</span> -->
                  </el-form-item>
                  <el-form-item label="单据编号">
                    <!-- <span>PWH2012020000212</span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getDetail, workOrderDetails } from '@/api/stockManagement/stocking'
import PageHeader from '@/components/PageHeader'
import StatusStep from '@/components/StatusStep'
import { useDictLabelFilter } from '@/utils/dict'

import {
  wh_planStatus,
  wh_checkStatus,
  emergencyState,
  warehousingType
} from '@/utils/dict/warehouse'
export default {
  components: { PageHeader, StatusStep },
  filters: {
    useDictLabelFilter: useDictLabelFilter
  },
  data () {
    return {
      emergencyState,
      wh_checkStatus,
      wh_planStatus,
      activeName: 'a',
      num: 1,
      workOrderData: [],
      infoData: {},
      stepsList: [
        { status: 'Done', nodeName: '创建' },
        { status: 'Done', nodeName: '审批中' },
        { status: 'Done', nodeName: '审批完成' },
        { status: 'Processing', nodeName: '已收货' },
        { status: '', nodeName: '收货中' },
        { status: '', nodeName: '已收货' }
      ],
      btnList1: [
        { name: '受理' },
        {
          name: '作废'
        },
        {
          name: '执行'
        },
        {
          name: '编辑'
        },
        {
          name: '确认'
        },
        {
          name: '打印'
        },
        {
          name: '关闭'
        }
      ],
      btnList2: [
        {
          name: '撤销'
        },
        {
          name: '催办'
        },
        {
          name: '批复'
        },
        {
          name: '编辑'
        },
        {
          name: '提交'
        },
        {
          name: '打印'
        },
        {
          name: '关闭'
        }
      ],
      list: [
        {
          name: '紧急',
          color: 'red'
        },
        {
          name: '重要',
          color: 'blue'
        },
        {
          name: '已催办',
          color: 'red'
        }
      ],
      detailsData: [],
      tableData: [],
      tableData1: [],
      tableData2: []
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const res = await getDetail({ id: this.$route.query.id })
      if (res?.success) {
        console.log(res)
        this.infoData = res.data
      }
    },
    selectActive (num) {
      this.num = num
    },
    async _workOrderDetails () {
      const res = await workOrderDetails()
    },
    // 时间差计算
    difference (beginTime, endTime) {
      var dateBegin = new Date(beginTime)
      var dateEnd = new Date(endTime)
      var dateDiff = dateEnd.getTime() - dateBegin.getTime() //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)

      if (dayDiff == -1) {
        dayDiff = 0
        hours = 0
        minutes = 0
      }

      return dayDiff + '天' + hours + '小时' + minutes + '分钟'
    }
  }
}
</script>

<style lang="scss" scoped>
.content-height{
	height: auto;
	background: #fff;
}
.p20 {
  padding: 20px;
}
.flex {
  display: flex;
}
.title {
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  span {
    font-size: 16px;
  }
  .col {
    padding-left: 40px;
    font-size: 14px;
    color: #aaaaaa;
  }
}
.degree {
  margin-right: 10px;
  padding: 0px 15px;
  color: #fff;
  font-size: 13px;
  line-height: 23px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    width: 5px;
    height: 5px;
    border-radius: 100%;
    margin-right: 6px;
    background-color: #fff;
  }
}
.red {
  background-color: rgb(163, 0, 20);
}
.blue {
  background-color: #1989fa;
}
.createdInfo {
  justify-content: space-around;
  margin-top: 10px;
  font-size: 14px;
  .col {
    color: #6e6e6e;
    padding-right: 10px;
  }
}
.mt40 {
  margin-top: 40px;
}

.custSteps {
  margin-top: 20px;
  margin-left: 70px;

  .box {
    width: 158px;
    border: 1px solid #ccc;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    // justify-content: space-between;
    font-size: 12px;
    color: #9e9e9e;
    .x {
      width: 20px;
      height: 15px;
      margin-right: 5px;
    }
    .q {
      background-color: #d0e4d5;
    }
    .b {
      background-color: #1989fa;
    }
    .g {
      background-color: #157a2c;
    }
    .r {
      background-color: #a30014;
    }
    .a {
      align-items: center;
      margin-bottom: 10px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .mb0 {
      margin-bottom: 0;
    }
  }
  .stepsInfo {
    // flex: 1;
    width: 483px;
  }
}
.mt20 {
  margin-top: 20px;
}
.content-detail {
  overflow: hidden;
}
.executor {
  font-size: 14px;
  .col {
    color: #6e6e6e;
    padding-right: 10px;
  }
}
.result {
  justify-content: space-around;
}
.mr20 {
  margin-right: 20px;
}
.details {
  font-size: 14px;
  margin-bottom: 10px;
}

.customSteps {
  margin-top: 40px;
  font-size: 14px;
  margin-left: 80px;
  .time {
    font-size: 12px;
    color: #6e6e6e;
    margin-right: 20px;
    position: relative;
    .col {
      color: #c1bdbd;
      text-align: right;
    }
    &::after {
      content: '';
      width: 1px;
      height: 100%;
      background-color: #157a2c;
      position: absolute;
      right: -26px;
    }
  }
  .flex:last-child {
    .time {
      &::after {
        display: none;
      }
    }
  }
  .round {
    margin-right: 20px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #157a2c;
    position: relative;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 100%;
      transform: translate(-2px, -2px);
    }
  }
  .text {
    .info {
      margin-top: 10px;
      width: 955px;
      background-color: #f0f3f3;
      overflow: hidden;
      padding: 10px;
      margin-bottom: 10px;
    }
  }
}
.customInfo {
  .time {
    &::after {
      top: 0;
      right: -28px;
    }
  }
}
.tips {
  font-size: 14px;
  color: #6e6e6e;
  margin-left: 52px;
  .shape {
    margin-left: 30px;
    p {
      margin-right: 10px;
    }
  }
}
.f {
  width: 15px;
  height: 15px;
  background-color: #157a2c;
  border-radius: 3px;
}
.j {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 15px solid #157a2c;
}
.y {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #157a2c;
}
</style>
