novel-front-app/pages_order/novel/Allannouncements.vue

<template>
  <view class="announcements-container">
    <uv-navbar
      title="全部公告"
      :autoBack="true"
      fixed
      placeholder
      titleStyle="color: #333; font-weight: 500;"
      :border="false"
    ></uv-navbar>
    
    <view class="announcements-list">
      <view 
        class="announcement-item" 
        v-for="(item, index) in announcements" 
        :key="index"
        @click="viewAnnouncement(item)"
      >
        <view class="item-left">
          <text class="tag">通讯</text>
          <text class="title">{{ item.title }}</text>
        </view>
        <view class="item-right">
          <uv-icon name="arrow-right" color="#C8C8C8" size="28rpx"></uv-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
  },
  data() {
    return {
      announcements: [
        {
          id: 1,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 2,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 3,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 4,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 5,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 6,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        },
        {
          id: 7,
          title: '2025年2月平台福利活动拟获奖作品公示',
          type: '通讯'
        }
      ]
    }
  },
  methods: {
    viewAnnouncement(item) {
      uni.navigateTo({
        url: `/pages_order/novel/announcement?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.announcements-container {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .announcements-list {
    padding: 20rpx;
    
    .announcement-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFFFFF;
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      
      .item-left {
        flex: 1;
        margin-right: 20rpx;
        
        .tag {
          display: inline-block;
          font-size: 24rpx;
          color: #666666;
          background-color: #F5F5F5;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          margin-bottom: 16rpx;
        }
        
        .title {
          display: block;
          font-size: 28rpx;
          color: #333333;
          line-height: 1.4;
        }
      }
      
      .item-right {
        display: flex;
        align-items: center;
      }
      
      &:active {
        background-color: #F9F9F9;
      }
    }
  }
}
</style>