baiyuchengpin/pages_index/index.vue

<template>
	<view class="container">
		<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
		<!-- 顶部搜索栏 -->
		<view class="top-bar" :style="{marginTop: statusBarHeight}">
			<view class="search-row" @click="onSearch">
				<image src="@/static/images/new/search.png" mode=""></image>
				<text class="search-placeholder">搜索你感兴趣的内容</text>
			</view>
			<!-- <view class="top-actions">
				<text class="action-icon">⋯</text>
				<text class="action-icon scan">⊙</text>
			</view> -->
		</view>

		<!-- 应用标题与副标题 -->
		<view class="brand">
			<image src="/static/images/new/title.png" mode="widthFix"></image>
			<!-- <text class="brand-title">品质韶华·乐享朝夕</text>
			<text class="brand-subtitle">全国89%的中老年人都在用的兴趣内容社区</text> -->
		</view>

		<!-- 主题横幅 Banner -->
		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
			<view class="banner" @click="onBannerClick">
				<!-- <image class="banner-bg" src="/static/images/new/banner.png" mode="aspectFill"></image> -->
				<view class="inner">
					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
						<!-- <swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
							@click="handleAdvClick(item)">
							<image :src="item.imageUrl" mode=""></image>
						</swiper-item> -->
						<swiper-item class="swiper-item">
							<image src="/static/images/new/banner.png" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			<!-- 央广原乡行 视频推荐区 -->
			<view class="section video-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="/static/images/new/bofang.png" mode=""></image>
						<image class="section-title" src="/static/images/new/yyx.png" ></image>
					</view>
					<view class="section-more" @click="onMoreVideos">查看更多
					 <image src="/static/images/new/back.png" ></image>
					</view>
				</view>
				<view class="feature-video-card" >
					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
						<view
							v-for="(tag, idx) in videoTags"
							:key="idx"
							class="tag-item"
							:class="{ active: videoTagIndex === idx }"
							@click="videoTagIndex = idx"
						>
							<text>{{ tag }}</text>
						</view>
					</scroll-view>
					<view class="x-bc" @click="onWatchLive">
						<view class="fv-thumb">
							<image class="fv-img" src="/static/images/new/banner.png" mode="aspectFill"></image>
							<view class="live-tag">
								<text class="live-dot"></text>
								<text>直播中</text>
							</view>
						</view>
						<view class="fv-info">
							<text class="fv-title">《长寿恩施》</text>
							<text class="fv-desc">邀你一起看恩施美景，寻长寿秘密</text>
							<view class="btn-watch" @click.stop="onWatchLive">立即观看</view>
						</view>
					</view>
					
				</view>
			</view>

			<!-- 免费精品课 -->
			<view class="section course-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="/static/images/new/bofang.png" mode=""></image>
						<image class="section-title" src="/static/images/new/jpk.png" ></image>
					</view>
					<view class="section-more" @click="onMoreCourses">更多课程
					 <image src="/static/images/new/back.png" ></image>
					</view>
				</view>
				<view class="course-list">
					<view
						v-for="(course, idx) in courses"
						:key="idx"
						class="course-card"
						@click="onCourseClick(course)"
					>
						<view class="course-thumb">
							<image class="course-img" :src="course.cover || '/static/logo.jpg'" mode="aspectFill"></image>
							<!-- <text class="course-tag">{{ course.tag }}</text> -->
						</view>
						<view class="course-info">
							<text class="course-name">{{ course.name }}</text>
							<view class="x-end" style="justify-content: space-between;">
								<view class="course-meta">
									<image src="@/static/images/new/renshu.png"></image>
									<text class="meta-count">{{ course.views }}</text>
								</view>
								<view class="btn-watch2" @click.stop="onCourseClick(course)">立即观看</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			videoTagIndex: 0,
			videoTags: ['恩施', '长白山', '吉林', '武当山', '张家界', '更多'],
			courses: [
				{
					name: '歌唱家刘金的《0基础金曲演唱速练课》',
					views: '9239',
					tag: '0基础 金曲演唱速练',
					cover: ''
				},
				{
					name: '资深编辑邹方斌讲《毛笔书法修心课》',
					views: '7.2w',
					tag: '毛笔书法修心课',
					cover: ''
				},
				{
					name: '张斌《元气八段锦》系列课',
					views: '5.9w',
					tag: '元气八段锦',
					cover: ''
				},
				{
					name: '翔哥精讲摄影课-手机微距拍摄技巧分享',
					views: '100w+',
					tag: '手机微距 拍摄技巧分享',
					cover: ''
				}
			]
		}
	},
	onLoad() {},
	methods: {
		onSearch() {
			// 可跳转搜索页
			uni.showToast({ title: '搜索', icon: 'none' })
		},
		onBannerClick() {
			uni.navigateTo({ url: '/pages/index/course' })
		},
		onMoreVideos() {
			uni.navigateTo({ url: '/pages/index/video' })
		},
		onWatchLive() {
			uni.showToast({ title: '立即观看', icon: 'none' })
			// 可跳转: 
		},
		onMoreCourses() {
			uni.navigateTo({ url: '/pages/index/course' })
		},
		onCourseClick(course) {
			uni.showToast({ title: course.name, icon: 'none' })
			// 可跳转课程详情: uni.navigateTo({ url: '/pages_course/videovip?id=' + course.id })
		}
	}
}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #F4F6F7;
}

/* 顶部搜索 */
.top-bar {
	display: flex;
	align-items: center;
	padding: 24rpx 24rpx 30rpx;
	position: relative;
}
.search-row {
	flex: 1;
	display: flex;
	align-items: center;
	height: 76rpx;
	padding: 0 24rpx;
	background: rgba(255,255,255,0.5);
	border-radius: 38rpx;
	image{
		width: 44rpx;
		height: 44rpx;
	}
}

.search-placeholder {
	margin-left: 12rpx;
	font-size: 32rpx;
	color: rgba(0,0,0,0.25);
}
.top-actions {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}
.action-icon {
	font-size: 36rpx;
	color: #333;
	margin-right: 16rpx;
}
.action-icon.scan {
	font-size: 40rpx;
}

/* 品牌标题 */
.brand {
	padding: 0 68rpx 30rpx;
	background: #fff;
	image{
		width: 100%;
	}
}
.brand-title {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}
.brand-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* Banner */
.banner {
	position: relative;
	height: 210rpx;
	margin: 0 24rpx 40rpx;
	border-radius: 16rpx;
	overflow: hidden;
	//background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
	.inner {
		width: 100%;
		height: 210rpx;
		border-radius: 10rpx;
		overflow: hidden;
	
		.swiper,
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}
	
	}
}
.banner-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.banner-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.15);
}
.banner-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
	margin-bottom: 8rpx;
}
.banner-desc {
	font-size: 24rpx;
	color: rgba(255,255,255,0.95);
}

/* 滚动内容区 */
.scroll-content {
	flex: 1;
	height: 0;
}
.section {
	padding: 0 24rpx 32rpx;
}
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
.section-title {
	width: 226rpx;
	height: 36rpx;
}
.section-title-wrap {
	display: flex;
	align-items: center;
}
.play-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 10rpx;
}
.section-more {
	font-size: 26rpx;
	color: #999;
	image{
		width: 16rpx;
		height: 20rpx;
	}
}

/* 横向标签 */
.tag-scroll {
	white-space: nowrap;
	margin-bottom: 20rpx;
}
.tag-item {
	display: inline-block;
	padding: 6rpx 24rpx;
	margin-right: 24rpx;
	border-radius: 10rpx;
	background: rgba(255,255,255,0.5);
}
.tag-item text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
}
.tag-item.active {
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
}
.tag-item.active text {
	color: #fff;
}

/* 特色视频卡片 */
.feature-video-card {
	display: flex;
	//align-items: center;
	flex-direction: column;
	background: linear-gradient( 135deg, #5F111A 0%, #37050B 100%);
	border-radius: 30rpx;
	overflow: hidden;
	padding: 30rpx 20rpx;
}
.fv-thumb {
	position: relative;
	width: 360rpx;
	height: 240rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.fv-img {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
}
.live-tag {
	position: absolute;
	left:0;
	top: 20rpx;
	display: flex;
	align-items: center;
	width: 130rpx;
	height: 44rpx;
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 0rpx 8rpx 8rpx 0rpx;
}
.live-tag text {
	font-size: 28rpx;
	color: #fff;
	margin-left: 6rpx;
}
.live-dot {
	width: 12rpx;
	height: 12rpx;
	background: #fff;
	border-radius: 50%;
	animation: blink 1s infinite;
}
@keyframes blink {
	50% { opacity: 0.5; }
}
.fv-info {
	flex: 1;
	//padding: 20rpx 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
}
.fv-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	text-align:center;
	font-style: normal;
	margin-bottom: 8rpx;
}
.fv-desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 44rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 红色按钮 */
.btn-watch {
	width: 188rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: #FFFFFF;
	border-radius: 12rpx;
	margin-top: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #3F040B;
}
.btn-watch2 {
	width: 168rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 32rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #FFFFFF;
}
/* 课程列表 */
.course-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}
.course-card {
	display: flex;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 20rpx;
}
.course-thumb {
	position: relative;
	width: 296rpx;
	height: 222rpx;
	border-radius: 20rpx;
	overflow: hidden;
	flex-shrink: 0;
}
.course-img {
	width: 100%;
	height: 100%;
	background: #BB6D6D;
}
.course-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 8rpx 12rpx;
	background: linear-gradient(transparent, rgba(0,0,0,0.6));
	font-size: 22rpx;
	color: #fff;
}
.course-info {
	flex: 1;
	padding-left: 24rpx;
	// padding: 20rpx 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}
.course-name {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.course-meta {
	display: flex;
	align-items: center;
	image{
		width: 30rpx;
		height: 30rpx;
	}
	
}
.meta-icon {
	font-size: 24rpx;
	margin-right: 6rpx;
	color: #999;
}
.meta-count {
	margin-left: 10rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #666666;
}

/* 底部占位（为全局 tabBar 留出空间） */
.bottom-placeholder {
	height: 120rpx;
}
</style>