MOSE-Official-Website-20250712/subPages/index/announcement.vue

<template>
  <view class="announcement-page">
    <!-- 公告列表 -->
    <view class="announcement-list">
      <view 
        class="announcement-item" 
        v-for="(item, index) in announcementList" 
        :key="index"
        @click="goToDetail(item)"
      >
        <view class="item-content">
          <view class="text-content">
            <view class="title">{{ item.title }}</view>
            <view class="description">{{ item.description }}</view>
            <view class="time">{{ item.time }}</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>
export default {
  name: 'Announcement',
  data() {
    return {
      announcementList: [
        {
          id: 1,
          title: '活动公告标题',
          description: '建筑学文字说明文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: '/static/bannerImage.png'
        },
        {
          id: 2,
          title: '活动公告标题',
          description: '考古学文字说明文字说明文字说明文字说明考古学文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: ''
        },
        {
          id: 3,
          title: '活动公告标题',
          description: '建筑学文字说明文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: '/static/bannerImage.png'
        },
        {
          id: 4,
          title: '活动公告标题',
          description: '建筑学文字说明文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: '/static/bannerImage.png'
        },
        {
          id: 5,
          title: '活动公告标题',
          description: '考古学文字说明文字说明文字说明文字说明考古学文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: ''
        },
        {
          id: 6,
          title: '活动公告标题',
          description: '建筑学文字说明文字说明文字说明文字说明文字说明文字说明......',
          time: '2025/06/14 16:47:21',
          image: '/static/bannerImage.png'
        }
      ]
    }
  },
  onLoad() {
    // 页面加载时的逻辑
  },
  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPages/index/announcementDetail?id=${item.id}`
      })
    }
  }
}
</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>