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

<template>
  <view class="announcement-detail">
    <!-- 标题 -->
    <view class="title">{{ announcementData.title }}</view>
    
    <!-- 时间 -->
    <view class="time">{{ announcementData.time }}</view>
    
    <!-- 图片 -->
    <view class="image-container" v-if="announcementData.image">
      <image :src="announcementData.image" class="detail-image" mode="aspectFill"></image>
    </view>
    
    <!-- 正文内容 -->
    <view class="content">
      <text class="content-text">{{ announcementData.content }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AnnouncementDetail',
  data() {
    return {
      announcementData: {
        id: '',
        title: '活动公告标题标题内容',
        time: '2025/06/14 16:47:21',
        image: '/static/bannerImage.png',
        content: '正文内容 文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明。'
      }
    }
  },
  onLoad(options) {
    // 接收传递的参数
    if (options.id) {
      this.announcementData.id = options.id;
      // 这里可以根据id获取具体的公告详情
      this.getAnnouncementDetail(options.id);
    }
  },
  methods: {
    getAnnouncementDetail(id) {
      // 模拟获取公告详情的方法
      // 实际项目中这里应该调用API获取数据
      console.log('获取公告详情:', id);
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '@/uni.scss';

.announcement-detail {
  padding: 40rpx;
  background-color: #fff;
  min-height: 100vh;
  
  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 20rpx;
  }
  
  .time {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 30rpx;
  }
  
  .image-container {
    margin-bottom: 30rpx;
    
    .detail-image {
      width: 100%;
      height: 250rpx;
      border-radius: 16rpx;
      // object-fit: cover;
    }
  }
  
  .content {
    .content-text {
      font-size: 28rpx;
      color: #000000;
      line-height: 1.8;
      text-align: justify;
    }
  }
}
</style>