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">{{ data.desc }}</div> -->
    <div class="desc" v-html="data.desc" />
  </div>
</template>

<script>
export default {
  name: "DescCard",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
};
</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>