ConsumSupplier-Platform/src/views/components/early-warning.vue

<template>
    <!-- 预警消息 -->
    <div class="mcs-name">
      <img src="@/assets/early.png" class="imgSrc" v-if="info.status=='A'"></img>
      <img src="@/assets/dq.png" class="imgSrc" v-if="info.status=='B'"></img>
      <img src="@/assets/warning1.png" class="imgSrc" v-if="info.status=='C'"></img>
      <span style="font-weight:900;color:rgb(37 34 34);margin-left:5px;font-size:11px;line-height:17px"> {{info.title}}</span>
      <span class="dateSrc"> {{info.date}}</span>
      <br />
      <p  v-if="info.status=='A'" style="margin-left:23px;margin-top:5px">您提交的{{info.title}} <span style="color:#1093d7">【申领单号】</span>被<span style="color:#f9bd72">【审核人姓名】</span>退回，请注意及时查看处理。 </p>
      <p  v-if="info.status=='B'" style="margin-left:23px;margin-top:5px"> <span style="color:#1093d7">【申领单号】</span>的商品资质<span style="color:#1093d7">【审核人姓名】</span>即将于【日期】到期，请注意及时更新。 </p>
      <p  v-if="info.status=='C'" style="margin-left:23px;margin-top:5px"> <span style="color:#1093d7">【申领单号】</span>提交的<span style="color:#1093d7">【审核人姓名】</span>目录新增已到达，请注意及时审核。 </p>
      <span class="StasSrc"> 已读</span>
      
      <!-- 注册证号：
      <span v-if="info.regcertno"> {{ info.regcertno }} </span>
  
      <br />
  
      生产企业：
      <span v-if="info.prodEntp">
        {{ info.prodEntp }}
      </span>
      <el-tag v-if="info.prodSouc == '1'" type="success"> 国产 </el-tag>
      <el-tag v-if="info.prodSouc == '2'" type="danger"> 进口 </el-tag>
  
      <br />
  
      集采批次：
      <el-tag v-if="info.fasBtch">
        {{ info.fasBtch }}
      </el-tag> -->
    </div>
  </template>
  
  <script>
  export default {
    name: "mcsInfo",
    props: {
      info: {
        type: Object,
        default: null
      }
    },
    data() {
      return {};
    },
    mounted() {}
  };
  </script>
  
  <style  lang="scss" scoped>
  .mcs-name ::v-deep .imgSrc{
        position: relative;
        top: 3px;
    }
    .mcs-name ::v-deep .dateSrc{
        display: block;
        position: absolute;
        top:13px;
        right: 30px;
    }
    .mcs-name ::v-deep .StasSrc{
        display: block;
        position: absolute;
        top:33px;
        right: 35px;
    }
    
  </style>