studytour-front/pages_order/message/card.vue

<template>
  <view class="card">
    <view class="card-header">
      <view class="title">{{ data.title }}</view>
      <view class="desc">{{ data.createTime }}</view>
    </view>
    <view class="card-content">
      {{ data.content }}
    </view>
    <view class="card-footer">
      <button class="btn">了解详情</button>
    </view>
    <view v-if="data.new" class="dot"></view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    jumpToDetail() {
      this.$utils.navigateTo(`/pages_order/message/index?id=${this.data.id}`)
    },
  },
}
</script>

<style scoped lang="scss">

  .card {
    position: relative;
    padding: 32rpx 32rpx 0 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background-image: linear-gradient(164deg,#DAF3FF 88rpx, #FBFEFF 176rpx, #FBFEFF);
    border: 2rpx solid #FFFFFF;

    &-header {
      .title {
        font-size: 32rpx;
        color: #181818;
      }

      .desc {
        margin-top: 4rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }

    &-content {
      margin-top: 16rpx;
      font-size: 26rpx;
      line-height: 1.7;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:4; //显示的行
    }

    &-footer {
      margin-top: 16rpx;
      border-top: 2rpx dashed #DADADA;

      .btn {
        width: 100%;
        padding: 16rpx 32rpx;
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 1.4;
        color: #00A9FF;
        box-sizing: border-box;
      }
    }

    .dot {
      position: absolute;
      top: 12rpx;
      right: 12rpx;
      width: 16rpx;
      height: 16rpx;
      background: #F53F3F;
      border-radius: 50%;
    }
  }
</style>