lg_frontend/components/WarningInfoItem.vue

<!--预警数据卡片-->
<template>
  <div class="warning-data-card">
    <div class="warning-state" :class="warningStateBg">
      {{ warningStateValue }}
    </div>
    <div class="snap-img">
      <img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
      <img :src="noData" v-else>
    </div>
    <div class="warning-data-info">
      <div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
      <div class="warning-site-time">
        <div class="site-icon"></div>
        <div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
      </div>
      <div class="warning-site-time">
        <div class="warning-time-icon"></div>
        <div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import noData from 'assets/peakCoalImages/common/no-data.png'

export default {
  name: "WarningInfoItem",
  props: {
    dataItem: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      noData
    }
  },
  computed: {
    warningStateBg() {
      if (this.dataItem.state === 1) {
        return 'discuss-decide-bg'
      } else if (this.dataItem.state === 0) {
        return 'pending-approval-bg'
      }
    },
    warningStateValue() {
      if (this.dataItem.state === 1) {
        return '代研判'
      } else if (this.dataItem.state === 0) {
        return '待审批'
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.warning-data-card {
  height: 202px;
  width: 891px;
  .bg("~/assets/peakCoalImages/right/warning-card-bg.png");
  padding-left: 28px;
  position: relative;
  .flex-row;

  .snap-img {
    width: 244px;
    height: 165px;

    img {
      height: 100%;
      width: 100%;
    }
  }

  .warning-data-info {
    height: 165px;
    width: 0;
    flex: 1;
    padding-left: 20px;
    .flex-column;
    justify-content: space-between;

    .warning-name {
      width: 100%;
      font-family: MicrosoftYaHei-Bold;
      font-size: 32.4px;
      color: #F6B545;
      letter-spacing: 0;
      font-weight: 700;
      .text-ellipsis;
    }

    .warning-site-time {
      width: 100%;
      .flex-row;

      .site-icon {
        width: 26px;
        height: 34px;
        .bg("~/assets/peakCoalImages/right/warning-site-icon.png");
      }

      .warning-time-icon {
        width: 33px;
        height: 33px;
        .bg("~/assets/peakCoalImages/right/warning-time-icon.png");

      }

      ._value {
        width: calc(100% - 26px);
        padding-left: 20px;
        font-family: MicrosoftYaHei;
        font-size: 32.4px;
        color: rgba(202, 244, 255, 0.9);
        font-weight: 400;
        .text-ellipsis;
      }
    }
  }

  .warning-state {
    width: 214px;
    height: 46px;
    position: absolute;
    right: 0px;
    top: 20px;
    font-family: PingFangSC-Semibold;
    font-size: 32.4px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 46px;
    font-weight: 600;
  }

  .discuss-decide-bg {
    .bg("~/assets/peakCoalImages/right/discuss-decide-bg.png");
  }

  .pending-approval-bg {
    .bg("~/assets/peakCoalImages/right/pending-approval-bg.png");
  }
}
</style>