You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.0 KiB
137 lines
3.0 KiB
<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>
|