minnan-website/components/parts/TitleDescBlock.vue

<template>
  <div class="TitleDescBlock">
    
    <div class="title-container">
      <h3 :class="{  'title-box': titleBox, }">{{ title }}</h3>
    </div>
    <span v-if="date" class="time">{{ date }}</span>
    <SimpleRichHtml hydrate-never :class="'desc ' + (expand?'expand':'no-expand')" :contents="[desc]" />
    <slot name="addon" />

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

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

const props = defineProps({	
  title : {
    type: String,
    default: '',
  },
  titleBox: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
    default: '',
  },
  descLines: {
    type: Number,
    default: 3,
  },
  more: {
    type: Boolean,
    default: false,
  },
  moreLink: {
    type: String,
    default: '',
  },
  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;

  > .title-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  h3 {
    color: $text-content-color;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 8px;
  }

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

  .time {
    margin-bottom: 16px;
  }
  > .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    &.expand {
      -webkit-line-clamp: 100;
      line-clamp: 100;
    }
    &.no-expand {
      -webkit-line-clamp: 5;
      line-clamp: 5;
      max-height: 300px; 
    }
  }

  .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>