mingnan-website/src/components/parts/TitleDescBlock.vue

<template>
  <div class="TitleDescBlock">
    <h3>{{ title }}</h3>
    <span v-if="date" class="time">{{ date }}</span>
    <p :class="expand?'expand':''" v-html="desc"></p>
    <slot name="addon" />

    <div class="footer">
      <div v-if="showExpand" :class="'expand'+(expand?' on':'')" @click="expand=!expand">
        {{expand?'折叠':'展开'}}
        <img src="@/assets/images/IconArrowRight.png" />
      </div>
      <div v-if="more" class="more" @click="emit('moreClick')">
        更多
        <img src="@/assets/images/IconArrowRight.png" alt="更多" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({	
  title : {
    type: String,
    default: '',
  },
  desc: {
    type: String,
    default: '',
  },
  descLines: {
    type: Number,
    default: 3,
  },
  more: {
    type: Boolean,
    default: false,
  },
  showExpand: {
    type: Boolean,
    default: false,
  },
  date: {
    type: String,
    default: '',
  },
})

const expand = ref(false)

const emit = defineEmits([	
  "moreClick"	
])
</script>

<style lang="scss">
@use '@/assets/scss/colors.scss' as *;

.TitleDescBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;

  h3 {
    color: $text-content-color;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 8px;
  }

  p,
  .time {
    color: $text-content-second-color;
    font-size: 0.85rem;
  }

  .time {
    margin-bottom: 16px;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    &.expand {
      -webkit-line-clamp: 100;
      line-clamp: 100;
    }
  }

  .footer {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;

    > div {
      display: flex;
      flex-direction: row;
      align-items: center; 
      color: $text-content-second-color;
      font-size: 0.85rem;
      margin-top: 25px;
      cursor: pointer;
    
      &:hover {
        color: $primary-color;
      }
    }
  }

  .expand {
    img {
      width: 16px;
      height: 16px;
      transform: rotate(90deg);
    }
    &.on {
      img {
        transform: rotate(270deg); 
      }
    }
  }

  .more {
    img {
      width: 16px;
      height: 16px;
      margin-left: 8px;
    }
  }
}
</style>