educational_Template1/pages/live/index.vue

<template>
	<view class="page-container">
		<view class="status_bar" :style="{ height: statusBarHeight }"></view>
		<!-- 顶部标题栏 -->
		<view class="top-bar">
			<view class="top-left">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
				<text class="user-name">云联融智</text>
			</view>
		</view>

		<!-- 直播列表 -->
		<view class="live-list">
			<view class="live-row" v-for="(row, rowIndex) in liveData" :key="rowIndex">
				<view class="live-item" v-for="(item, index) in row" :key="index" @click="enterLive(item)">
					<view class="live-image-box">
						<image class="live-image" :src="item.image" mode="aspectFill"></image>
						<view class="live-tag">
							<image class="live-icon" src="/static/play.gif" mode="aspectFit"></image>
							<text class="live-text">直播中</text>
						</view>
						<view class="live-date">
							<text class="date-text">{{ item.date }}</text>
						</view>
						<view class="live-title">
							<text class="title-text">{{ item.title }}</text>
						</view>
					</view>
					<view class="live-info">
						<text class="live-room-name">{{ item.roomName }}</text>
						<view class="live-host">
							<image class="host-avatar" :src="item.hostAvatar" mode="aspectFill"></image>
							<text class="host-name">{{ item.hostName }}</text>
							<view class="live-viewers">
								<image class="viewer-icon" src="/static/watch_number.png" mode="aspectFit"></image>
								<text class="viewer-count">{{ item.viewers }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,

			liveData: [
				[
					{
						id: 1,
						image: "/static/famous_doctor_img.png",
						date: "08月19日",
						title: "向中国医生致敬",
						subtitle: "中国医师节",
						roomName: "光辉岁月直播间",
						hostAvatar: "/static/avatar.png",
						hostName: "月牙白很美",
						viewers: "14121"
					},
					{
						id: 2,
						image: "/static/famous_doctor_img.png",

						date: "08月19日",
						title: "向中国医生致敬",
						subtitle: "中国医师节",
						roomName: "光辉岁月直播间",
						hostAvatar: "/static/avatar.png",
						hostName: "月牙白很美",
						viewers: "14121"
					}
				],
				[
					{
						id: 3,
						image: "/static/famous_doctor_img.png",

						date: "08月19日",
						title: "向中国医生致敬",
						subtitle: "中国医师节",
						roomName: "光辉岁月直播间",
						hostAvatar: "/static/avatar.png",
						hostName: "月牙白很美",
						viewers: "14121"
					},
					{
						id: 4,
						image: "/static/famous_doctor_img.png",

						date: "08月19日",
						title: "向中国医生致敬",
						subtitle: "中国医师节",
						roomName: "光辉岁月直播间",
						hostAvatar: "/static/avatar.png",
						hostName: "月牙白很美",
						viewers: "14121"
					}
				]
			]
		};
	},
	methods: {
		enterLive(item) {
			// 进入直播间
			uni.showToast({
				title: `进入${item.roomName}`,
				icon: 'none'
			});
		},
		navigateTo(url) {
			uni.switchTab({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 120upx; // 为底部导航栏留出空间

	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24upx;

		.top-left {
			display: flex;
			align-items: center;

			.avatar {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				margin-right: 12upx;
			}

			.user-name {
				font-size: 28rpx;
				color: #626468;
			}
		}
	}

	.live-list {
		padding: 20upx;

		.live-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;

			.live-item {
				width: 48%;
				background-color: #ffffff;
				border-radius: 16upx;
				overflow: hidden;

				.live-image-box {
					position: relative;
					width: 100%;
					height: 400rpx;

					.live-image {
						width: 100%;
						height: 100%;
					}

					.live-tag {
						position: absolute;
						top: 15upx;
						left: 15upx;
						display: flex;
						align-items: center;
						background-color: rgba(255, 0, 0, 0.8);
						border-radius: 10upx;
						padding: 5upx 10upx;

						.live-icon {
							width: 20upx;
							height: 20upx;
							margin-right: 5upx;
						}

						.live-text {
							font-size: 20upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}
					}

					.live-date {
						position: absolute;
						bottom: 60upx;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						.date-text {
							font-size: 20upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
						}
					}

					.live-title {
						position: absolute;
						bottom: 30upx;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						.title-text {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
						}
					}
				}

				.live-info {
					padding: 20upx 20upx 28upx;

					.live-room-name {
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.live-host {
						margin-top: 20upx;

						display: flex;
						align-items: center;

						.host-avatar {
							width: 32upx;
							height: 32upx;
							border-radius: 50%;
							margin-right: 10upx;
						}

						.host-name {
							font-size: 22rpx;
							color: #757575;
							color: #666666;
							flex: 1;
						}

						.live-viewers {
							display: flex;
							align-items: center;

							.viewer-icon {
								width: 32upx;
								height: 32upx;
								margin-right: 8upx;
							}

							.viewer-count {
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
}
</style>