ajy/code/ajyApp/pages/home/home.nvue

<template>
	<view class="page">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<scroll-view class="scroll-content" scroll-y="true">
			<text class="logo">LOGO</text>

			<!-- 轮播区域 -->
			<view class="swiper-box">
				<swiper class="swiper" :current="current" @change="onChange" :autoplay="true" :interval="5000">
					<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
						<view class="slide" @click="onBannerClick(item)">
							<image class="slide-img" :src="item.img" mode="aspectFill"></image>
							<text class="slide-sub-title">{{item.subTitle}}</text>
							<text class="slide-title">{{item.title}}</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="dot-list">
					<view v-for="(item, idx) in bannerList" :key="idx"
						:class="['dot-item', idx === current ? 'dot-active' : '']"></view>
				</view>
			</view>

			<!-- 热灸推荐 -->
			<view class="recommend-section">
				<text class="section-title">热灸推荐</text>
				<view class="recommend-item" v-for="(item, index) in recommends" :key="index" @click="onRecommendClick(item)">
					<image class="recommend-img" :src="item.img" mode="aspectFill"></image>
					<view class="recommend-info">
						<text class="recommend-title">{{item.title}}</text>
						<text class="recommend-time">{{item.time}}</text>
					</view>
				</view>
			</view>

			<!-- 灸研室 -->
			<view class="news-section" v-if="news.length > 0">
				<view class="news-head">
					<text class="section-title">灸研室</text>
					<text class="more-text" @click="onMoreNews">更多</text>
				</view>
				<view class="news-list">
					<view class="news-item" v-for="(item, index) in news" :key="index" @click="onNewsClick(item)">
						<image class="news-img" :src="item.img" mode="aspectFill"></image>
						<text class="news-name">{{item.title}}</text>
						<text class="news-author">{{item.author}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			current: 0,
			bannerList: [
				{ img: '/static/home/banner.png', title: '艾灸养生', subTitle: '中医传统理疗方式' },
				{ img: '/static/home/detail.png', title: '智能穴位定位', subTitle: '精准理疗每一寸' }
			],
			recommends: [
				{ id: 1, img: '/static/home/banner.png', title: '春季养生：温阳祛湿艾灸方案', time: '2026-05-20 10:30' },
				{ id: 2, img: '/static/home/detail.png', title: '肩颈疲劳缓解方案推荐', time: '2026-05-18 14:20' },
				{ id: 3, img: '/static/home/banner.png', title: '改善睡眠质量的艾灸穴位', time: '2026-05-15 09:00' }
			],
			news: [
				{ id: 1, img: '/static/home/banner.png', title: '艾灸入门指南', author: '研年健康' },
				{ id: 2, img: '/static/home/detail.png', title: '常见穴位科普', author: '研年健康' },
				{ id: 3, img: '/static/home/banner.png', title: '四季养生之道', author: '研年健康' },
				{ id: 4, img: '/static/home/detail.png', title: '经络疏通技巧', author: '研年健康' }
			]
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	methods: {
		onChange(e) {
			this.current = e.detail.current
		},
		onBannerClick(item) {
			// TODO: 跳转banner详情
		},
		onRecommendClick(item) {
			// TODO: 跳转推荐详情
		},
		onNewsClick(item) {
			// TODO: 跳转灸研室详情
		},
		onMoreNews() {
			// TODO: 跳转更多
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #F8F8F8;
}
.scroll-content {
	flex: 1;
}
.status-bar {
	background-color: #F8F8F8;
}
.logo {
	font-weight: bold;
	font-size: 36rpx;
	margin-left: 38rpx;
	margin-top: 16rpx;
	margin-bottom: 16rpx;
	color: #333333;
}
/* 轮播 */
.swiper-box {
	width: 676rpx;
	margin-left: 37rpx;
}
.swiper {
	height: 356rpx;
	border-radius: 20rpx;
}
.swiper-item {
	width: 676rpx;
	height: 356rpx;
}
.slide {
	width: 676rpx;
	height: 356rpx;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
}
.slide-img {
	width: 676rpx;
	height: 356rpx;
	position: absolute;
	left: 0;
	top: 0;
}
.slide-title {
	font-size: 28rpx;
	color: #FFFFFF;
	position: absolute;
	left: 30rpx;
	bottom: 34rpx;
}
.slide-sub-title {
	font-weight: 500;
	font-size: 40rpx;
	color: #FFFFFF;
	position: absolute;
	left: 30rpx;
	bottom: 82rpx;
}
.dot-list {
	flex-direction: row;
	padding-top: 22rpx;
}
.dot-item {
	width: 32rpx;
	height: 6rpx;
	background-color: #D8D8D8;
	border-radius: 4rpx;
	margin-right: 12rpx;
}
.dot-active {
	width: 64rpx;
	background-color: #389588;
}
/* 推荐 */
.recommend-section {
	width: 676rpx;
	margin-left: 37rpx;
	margin-top: 42rpx;
}
.section-title {
	font-size: 36rpx;
	color: #545F71;
	margin-bottom: 24rpx;
}
.recommend-item {
	flex-direction: row;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	padding: 18rpx;
	padding-right: 36rpx;
}
.recommend-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 20rpx;
	margin-right: 16rpx;
}
.recommend-info {
	flex: 1;
	justify-content: space-between;
}
.recommend-title {
	font-size: 32rpx;
	color: #545F71;
	lines: 2;
	text-overflow: ellipsis;
}
.recommend-time {
	font-size: 24rpx;
	color: #9BA5B7;
}
/* 灸研室 */
.news-section {
	width: 676rpx;
	margin-left: 37rpx;
	margin-top: 42rpx;
	padding-bottom: 40rpx;
}
.news-head {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}
.more-text {
	font-size: 28rpx;
	color: #389588;
}
.news-list {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.news-item {
	width: 326rpx;
	margin-bottom: 24rpx;
}
.news-img {
	width: 326rpx;
	height: 234rpx;
	border-radius: 20rpx;
}
.news-name {
	font-size: 32rpx;
	color: #545F71;
	margin-top: 16rpx;
	lines: 2;
	text-overflow: ellipsis;
}
.news-author {
	font-size: 26rpx;
	color: #9BA5B7;
	margin-top: 4rpx;
}
</style>