jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/DescCard.vue

<template>
  <div class="DescCard">
    <span class="time">{{ data.time }}</span>
    <div class="info">
      <img src="./images/avatar.svg" />
      <span class="name">{{ data.name }}</span>
      <span class="posts">{{ data.posts }}</span>
    </div>
    <div class="desc" v-if="data.processId">节点：{{ data.processName }}</div>
    <img
      v-if="
        data.type == 'bmp' ||
        data.type == 'jpg' ||
        data.type == 'jpeg' ||
        data.type == 'png'
      "
      :src="data.url"
    />
    {{ data.url }}
    <video
      v-if="data.type == 'mp4' || data.type == 'avi' || data.type == 'xmvb'"
      :src="data.url"
    >
      <!-- <source :src="data.desc" /> -->
    </video>
    <!-- <div class="desc">{{ data.desc }}</div> -->
    <div v-if="data.type == 'text'" class="desc" v-html="data.desc" />
  </div>
</template>

<script>
import Video from "@screen/components/VideoMulti";
export default {
  name: "DescCard",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    "data.type": {
      handler(newValue, oldValue) {
        if (newValue != "text") {
          this.data.url = process.env.VUE_APP_BASE_API + this.data.desc;
          console.log("this.data.url", this.data.url);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  components: {
    Video,
  },
};
</script>

<style lang="scss" scoped>
.DescCard {
  font-size: 14px;
  // font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;

  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0d5f79;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #00b3cc;

  padding: 9px 15px;

  .time {
  }

  .info {
    display: flex;
    gap: 9px;
    align-items: center;

    .name {
      font-size: 16px;
      font-weight: 500;
      line-height: 19px;
    }

    .posts {
    }
  }

  .desc {
    font-size: 16px;
    line-height: 19px;
  }
}
</style>