Small_goose_Vue3/pages/index/index.vue

<template>
	<view class="home-bg">
		<!-- 顶部栏 -->
		<view class="top-bar">
			<view class="title">小鹅通</view>
			<view class="top-icons">
				<view class="iconfont icon-search" @click="goToSearch">搜索</view>
				<view class="iconfont icon-calendar" @click="goToCalendar">日历</view>
			</view>
		</view>
		<!-- 水滴背景装饰 -->
		<view class="waterdrop waterdrop-left"></view>
		<view class="waterdrop waterdrop-right"></view>
		<!-- 日期和插画区 -->
		<view class="header-content">
			<view class="date-motivation">
				<view class="date">{{ today }}</view>
				<view class="motivation">加油梦想是可以实现的</view>
			</view>
			<view class="illustration">
				<image src="/static/illustration_book.png" class="book-img" mode="aspectFit" />
			</view>
		</view>
		<!-- 我的课程模块 -->
		<view class="my-course">
			<view class="module-title">我的课程</view>
			<view class="empty-course">
				<image src="/static/empty_box.png" class="empty-img" mode="aspectFit" />
				<view class="empty-tip">你还没有学习系列课程\n前往查看你的其他课程</view>
				<button class="more-btn">更多课程</button>
			</view>
		</view>
		<view class="find-course">找不到已购课程？</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				today: this.getToday()
			}
		},
		methods: {
			getToday() {
				const d = new Date()
				const month = d.getMonth() + 1
				const day = d.getDate()
				return `${month < 10 ? '0' + month : month}/${day < 10 ? '0' + day : day}`
			},
			goToSearch() {
				uni.navigateTo({ url: '/pages/search/index' })
			},
			goToCalendar() {
				uni.navigateTo({ url: '/pages/calendar/index' })
			}
		}
	}
</script>

<style lang="scss">
	.home-bg {
		min-height: 100vh;
		background: linear-gradient(180deg, #eaf6ff 0%, #f7f8fa 100%);
		position: relative;
		padding-bottom: 120rpx;
	}
	.top-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 120rpx;
		padding-top: 40rpx;
	}
	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #222;
		letter-spacing: 2rpx;
		text-align: center;
		flex: 1;
		font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	}
	.top-icons {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		gap: 32rpx;
	}
	.iconfont {
		font-size: 40rpx;
		color: #222;
	}
	.icon-search {
		margin-right: 8rpx;
	}
	.icon-calendar {
	}
	.waterdrop {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #b3e0ff 0%, #eaf6ff 100%);
		border-radius: 50% 50% 60% 40%/60% 40% 50% 50%;
		opacity: 0.7;
		z-index: 1;
	}
	.waterdrop-left {
		left: 80rpx;
		top: 110rpx;
	}
	.waterdrop-right {
		right: 80rpx;
		top: 110rpx;
	}
	.header-content {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		margin: 0 40rpx 0 40rpx;
		margin-top: 20rpx;
	}
	.date-motivation {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 20rpx;
	}
	.date {
		font-size: 48rpx;
		font-weight: 700;
		color: #222;
		margin-bottom: 8rpx;
	}
	.motivation {
		font-size: 28rpx;
		color: #4a90e2;
		font-weight: 500;
	}
	.illustration {
		width: 220rpx;
		height: 140rpx;
		margin-top: 0;
	}
	.book-img {
		width: 100%;
		height: 100%;
	}
	.my-course {
		background: #fff;
		border-radius: 24rpx;
		margin: 40rpx 24rpx 0 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.04);
		padding: 32rpx 24rpx 40rpx 24rpx;
		position: relative;
	}
	.module-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
		margin-bottom: 24rpx;
	}
	.empty-course {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0 0 0;
	}
	.empty-img {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 24rpx;
	}
	.empty-tip {
		font-size: 28rpx;
		color: #888;
		text-align: center;
		margin-bottom: 32rpx;
		white-space: pre-line;
	}
	.more-btn {
		width: 320rpx;
		height: 72rpx;
		background: #fff;
		border: 2rpx solid #3498db;
		color: #3498db;
		border-radius: 36rpx;
		font-size: 30rpx;
		font-weight: 600;
		text-align: center;
		line-height: 72rpx;
		margin-top: 8rpx;
	}
	.find-course {
		text-align: center;
		color: #bbb;
		font-size: 26rpx;
		margin-top: 32rpx;
	}
</style>