jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue

<template>
  <BorderRadiusImage class='RoadStateCard' borderRadius="2px"
    borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" borderWidth="2px">
    <div class="left">
      <img src="./test.png">
    </div>
    <div class="right">
      <div class="info">
        <p v-for="(item, index) in keyMap" :key="index">
          <span>{{ item.label }}: </span>
          <span>{{ cardData[item.key] }}</span>
        </p>
      </div>
      <div class="controls">
        <Button :style="{ background: firstBtnColor }" @click.native="$emit('firstBtnClick', $event)">{{
          firstBtnText
        }}</Button>
        <Button :style="{ background: lastBtnColor }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
        }}</Button>
      </div>
    </div>

    <img v-if="cardData.state" class="status" :src="require(`./images/${statusMap[cardData.state]}.svg`)" />
  </BorderRadiusImage>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import BorderRadiusImage from "@screen/components/BorderRadiusImage.vue";
import { statusMap } from "./data.js"

export default {
  name: 'RoadStateCard',
  props: {
    cardData: {
      type: Object,
      default: () => ({
        time: "2023.12.22 13:00:00",
        source: "视频智能识别",
        location: "k100+000",
        direction: "济南方向",
      })
    },
    firstBtnText: {
      type: String,
      default: "详情"
    },
    lastBtnText: {
      type: String,
      default: "调度记录"
    },
    firstBtnColor: {
      type: String,
      default: "#00B3CC"
    },
    lastBtnColor: {
      type: String,
      default: "#CB7A00"
    },
    keyMap: {
      type: Array,
      default: () => ([
        {
          key: "source",
          label: "来源"
        },
        {
          key: "location",
          label: "位置"
        },
        {
          key: "direction",
          label: "方向"
        },
        {
          key: "time",
          label: "时间"
        },
      ])
    }
  },
  emit: ['firstBtnClick', "lastBtnClick"],
  components: {
    Button,
    BorderRadiusImage
  },
  created() {
    this.statusMap = statusMap;
  }
}
</script>

<style lang='scss' scoped>
.RoadStateCard {
  color: #fff;
  display: flex;
  background: #133242;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  // border: 1px solid;
  // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
  padding: 18px 12px;
  gap: 12px;
  height: 100%;
  overflow: hidden;
  position: relative;

  .left {
    img {
      width: 180px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    flex: 1;

    gap: 12px;

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-between;

      >p {
        height: 21px;
        font-size: 14px;
        // font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 16px;
      }
    }

    .controls {
      display: flex;
      gap: 9px;

      >div {
        flex: 1;
      }
    }
  }

  .status {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>