attractor/attractor-ui/pages/work/index.vue

<template>
  <view class="notice-page">


    <scroll-view class="notice-list" scroll-y>
      <view v-for="item in announcementList" :key="item.id" class="notice-card">
        <view class="notice-head">
          <image class="avatar" :src="item.avatar" mode="aspectFill" />
          <view class="author-wrap">
            <text class="author">{{ item.author }}</text>
            <text class="publish-time">{{ item.publishTime }}</text>
          </view>
          <view class="type-tag">{{ item.type }}</view>
        </view>

        <text class="notice-title">{{ item.title }}</text>
        <text class="notice-content">{{ item.content }}</text>

        <view v-if="item.keywords && item.keywords.length" class="keyword-row">
          <text v-for="k in item.keywords" :key="k" class="keyword">#{{ k }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      announcementList: [
        {
          id: 1,
          author: '官方公告',
          avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
          type: '版本更新',
          title: 'V2.3.0 上线：设备连接流程与控制链路全面优化',
          content: '本次版本重点优化了蓝牙连接时序与重连稳定性，新增设备连接历史缓存、候选设备自动扫描与连接确认流程，同时对参数页布局进行重构。若你在旧版本中遇到“连接成功但不可控”的情况，建议升级后重新绑定一次设备。',
          publishTime: '2026-03-27 10:30',
          keywords: ['连接优化', '稳定性', 'UI重构']
        },
        {
          id: 2,
          author: '官方公告',
          avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
          type: '功能调整',
          title: '设备页交互升级：新增首页快捷启停与运行状态同步',
          content: '为了减少操作路径，首页“我的设备”现已支持快捷启动/停止。操作成功后将同步更新设备状态标签（运行中/已停止），并写入最近控制时间。若首次点击出现等待，请保持设备开机并靠近手机，系统会自动完成连接补偿后发送指令。',
          publishTime: '2026-03-27 11:15',
          keywords: ['快捷控制', '状态同步', '设备页']
        },
        {
          id: 3,
          author: '官方公告',
          avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
          type: '体验优化',
          title: '公告中心改版：支持顶部搜索与精准筛选',
          content: '公告中心已由“消息流”改造为“公告流”，顶部新增搜索入口，可按标题、正文关键词和标签快速检索历史公告。后续我们还会补充“置顶公告”“版本分类”和“发布时间筛选”能力，便于你快速定位需要的信息。',
          publishTime: '2026-03-27 12:05',
          keywords: ['公告中心', '搜索', '信息检索']
        }
      ]
    }
  },
  onLoad() {
    uni.setStorageSync('ANNOUNCEMENT_LIST', this.announcementList)
  },
  methods: {
    goSearch() {
      uni.navigateTo({
        url: '/pages/work/search'
      })
    }
  }
}
</script>

<style scoped>
.notice-page {
  min-height: 100vh;
  background: #f4f6f9;
  padding: 18rpx;
  box-sizing: border-box;
}

.top-nav {
  background: #ffffff;
  border: 1rpx solid #edf2f7;
  border-radius: 18rpx;
  padding: 18rpx;
  margin-bottom: 16rpx;
}

.nav-title-wrap {
  margin-bottom: 14rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #111827;
}

.nav-sub {
  font-size: 22rpx;
  color: #94a3b8;
  margin-top: 4rpx;
  display: block;
}

.search-entry {
  height: 64rpx;
  border: 1rpx solid #e5e7eb;
  border-radius: 14rpx;
  background: #f8fafc;
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  gap: 10rpx;
}

.search-entry-text {
  font-size: 24rpx;
  color: #64748b;
}

.notice-list {
  height: calc(100vh - 210rpx);
  box-sizing: border-box;
}

.notice-card {
  background: #ffffff;
  border-radius: 18rpx;
  border: 1rpx solid #edf2f7;
  padding: 20rpx;
  margin-bottom: 14rpx;
}

.notice-head {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.avatar {
  width: 58rpx;
  height: 58rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.author-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.author {
  font-size: 25rpx;
  color: #111827;
  font-weight: 600;
}

.publish-time {
  font-size: 21rpx;
  color: #9ca3af;
  margin-top: 2rpx;
}

.type-tag {
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  background: #ecfeff;
  color: #0f766e;
  font-size: 20rpx;
}

.notice-title {
  font-size: 29rpx;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10rpx;
  display: block;
}

.notice-content {
  font-size: 25rpx;
  color: #334155;
  line-height: 1.65;
}

.keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 12rpx;
}

.keyword {
  font-size: 20rpx;
  color: #0f766e;
  background: #f0fdfa;
  border-radius: 8rpx;
  padding: 4rpx 10rpx;
}
</style>