community-front/subPages/index/announcement.vue

<template>
  <view class="announcement-page">
    <!-- 公告列表 -->
    <view class="announcement-list">
      <view 
        class="announcement-item" 
        v-for="(item, index) in list" 
        :key="index"
        @click="goToDetail(item)"
      >
        <view class="item-content">
          <view class="text-content">
            <view class="title">{{ item.title }}</view>
            <!-- <view class="description" v-html="item.details"></view> -->
            <rich-text class="description" :nodes="item.details"></rich-text>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <!-- <view class="image-content" v-if="item.image">
            <image :src="item.image" class="announcement-image" mode="aspectFill"></image>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ListMixin from '@/mixins/list.js'
export default {
  name: 'Announcement',
  mixins: [ListMixin],
  data() {
    return {
      mixinListApi: 'home.queryNoticeList'
    }
  },

}
</script>

<style lang="scss" scoped>
.announcement-page {
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
  padding: 20rpx;
}

.announcement-list {
  .announcement-item {
    background-color: $uni-bg-color;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .text-content {
        flex: 1;
        margin-right: 20rpx;
        
        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #000000;
          margin-bottom: 16rpx;
          line-height: 1.4;
        }
        
        .description {
          font-size: 28rpx;
          color: #0F2248;
          line-height: 1.5;
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .time {
          font-size: 24rpx;
          color: $uni-text-color-grey;
        }
      }
      
      .image-content {
        flex-shrink: 0;
        
        .announcement-image {
          width: 220rpx;
          height: 200rpx;
          border-radius: 15rpx;
          background-color: $uni-bg-color-grey;
        }
      }
    }
  }
}
</style>