airz-uniapp/pages/news/news.uvue

<template>
	<view class="page" :style="pageStyle()">
		<AppHeader title="新闻" :back="false" />
		<view class="news-tabs">
			<view v-for="item in tabs" :key="item" :class="tab == item ? 'news-tab active-tab' : 'news-tab'" @click="tab = item"><text :class="tab == item ? 'tab-text active-text' : 'tab-text'">{{ item }}</text></view>
		</view>
		<scroll-view scroll-y :style="contentStyle(314, false)">
			<view class="news-content">
				<view v-if="tab == '推荐'" class="headline" @click="openArticle(headline.id)">
					<view class="headline-copy"><text class="headline-tag">政策观察</text><text class="headline-title">{{ headline.title }}</text><text class="headline-date">{{ headline.date }}</text></view>
					<image class="headline-art" :src="headline.image" mode="aspectFill"></image>
				</view>
				<view class="list-head"><text class="list-title">{{ tab == '推荐' ? '最新资讯' : tab }}</text><text class="list-count">{{ filteredArticles.length }} 篇</text></view>
				<view class="article-list">
					<view class="article" v-for="(item, index) in filteredArticles" :key="item.id" :class="index == filteredArticles.length - 1 ? 'last-article' : ''" @click="openArticle(item.id)">
						<view class="article-copy"><text class="article-title">{{ item.title }}</text><text class="article-summary">{{ item.summary }}</text><text class="article-meta">{{ item.category }} · {{ item.date }}</text></view>
						<image class="article-art" :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<BottomNav active="news" />
	</view>
</template>

<script setup lang="uts">
	import { usePageLayout } from '@/services/layout.uts'
	import { newsArticles, NewsArticle } from '@/services/content.uts'
	import AppHeader from '@/components/AppHeader.uvue'
	import BottomNav from '@/components/BottomNav.uvue'
	const { contentStyle, pageStyle } = usePageLayout()
	const tabs: string[] = ['推荐', '企业融资', '个人融资', '政策解读']
	const tab = ref('推荐')
	const headline: NewsArticle = newsArticles[0]
	const filteredArticles = computed((): NewsArticle[] => {
		if (tab.value == '推荐') return newsArticles.filter((item: NewsArticle): boolean => item.id != headline.id)
		return newsArticles.filter((item: NewsArticle): boolean => item.category == tab.value)
	})
	const openArticle = (id: string): void => { uni.navigateTo({ url: '/pages/article/article?id=' + id }) }
</script>

<style>
	.news-tabs { height: 88rpx; flex-direction: row; align-items: center; background-color: #ffffff; border-bottom: 1rpx solid #e8eef6; padding: 0 22rpx; }
	.news-tab { flex: 1; height: 88rpx; justify-content: center; align-items: center; border-bottom: 4rpx solid transparent; }
	.active-tab { border-bottom-color: #0868f7; }
	.tab-text { color: #66758a; font-size: 26rpx; }
	.active-text { color: #0868f7; font-weight: 700; }
	.news-content { padding: 24rpx 28rpx 90rpx; }
	.headline { min-height: 256rpx; border-radius: 20rpx; background-color: #123c7b; flex-direction: row; overflow: hidden; }
	.headline-copy { flex: 1; padding: 26rpx 20rpx 26rpx 26rpx; }
	.headline-tag { color: #b8ddff; font-size: 22rpx; font-weight: 600; }
	.headline-title { color: #ffffff; font-size: 31rpx; line-height: 45rpx; font-weight: 700; margin-top: 12rpx; }
	.headline-date { color: #c4d7ed; font-size: 22rpx; margin-top: 16rpx; }
	.headline-art { width: 212rpx; height: 282rpx; flex-shrink: 0; align-self: center; }
	.list-head { flex-direction: row; justify-content: space-between; align-items: center; margin: 30rpx 0 16rpx; }
	.list-title { color: #172640; font-size: 30rpx; font-weight: 700; }
	.list-count { color: #66758a; font-size: 22rpx; }
	.article-list { background-color: #ffffff; border-radius: 18rpx; padding: 0 22rpx; }
	.article { padding: 26rpx 0; flex-direction: row; border-bottom: 1rpx solid #e8eef6; align-items: flex-start; }
	.last-article { border-bottom-width: 0; }
	.article-copy { flex: 1; padding-right: 18rpx; }
	.article-title { color: #172640; font-size: 29rpx; line-height: 42rpx; font-weight: 600; }
	.article-summary { color: #66758a; font-size: 24rpx; line-height: 36rpx; margin-top: 10rpx; }
	.article-meta { color: #66758a; font-size: 22rpx; line-height: 32rpx; margin-top: 14rpx; }
	.article-art { width: 148rpx; height: 132rpx; border-radius: 12rpx; flex-shrink: 0; margin-top: 4rpx; }
</style>