IM_first_qianduan/IMQd/pages/index/index.vue

<template>
	<view class="gradient-bg">
		<view class="logo-area">
			<text class="logo-text">Wordmates</text>
		</view>
		<view class="lines">
			<view class="line red"></view>
			<view class="line yellow"></view>
			<view class="line green"></view>
		</view>
		<view class="faces">
			<view class="face yellow-face">
				<text class="face-eye">●</text>
				<text class="face-eye">●</text>
				<text class="face-mouth">︶</text>
			</view>
			<view class="face blue-face">
				<text class="face-eye">●</text>
				<text class="face-eye">●</text>
				<text class="face-mouth">∪</text>
			</view>
			<view class="bubble">hi</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad() {
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}, 3000);
		},
		methods: {

		}
	}
</script>

<style>
	.gradient-bg {
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: linear-gradient(180deg, #4b3bbd 0%, #3ec6e0 100%);
		position: relative;
		overflow: hidden;
	}

	.logo-area {
		margin-top: 120rpx;
		text-align: center;
	}

	.logo-text {
		font-size: 64rpx;
		font-weight: bold;
		color: #fff;
		letter-spacing: 8rpx;
		font-family: 'Arial Rounded MT Bold', 'PingFang SC', sans-serif;
	}

	.lines {
		position: absolute;
		width: 100vw;
		height: 60vh;
		top: 20vh;
		left: 0;
		z-index: 1;
	}

	.line {
		position: absolute;
		width: 120rpx;
		height: 8rpx;
		border-radius: 8rpx;
	}

	.red { left: 30vw; top: 10vh; background: #ff5a5f; transform: rotate(60deg); }
	.yellow { right: 10vw; top: 20vh; background: #ffe066; transform: rotate(-30deg); }
	.green { left: 10vw; bottom: 10vh; background: #3ec6e0; transform: rotate(30deg); }

	.faces {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 200rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 2;
	}

	.face {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: #ffe066;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.yellow-face { background: #ffe066; }
	.blue-face { background: #3ec6e0; }

	.face-eye {
		font-size: 24rpx;
		margin: 0 8rpx;
	}

	.face-mouth {
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.bubble {
		position: absolute;
		left: 50%;
		bottom: 120rpx;
		transform: translateX(-50%);
		background: #fff;
		color: #3ec6e0;
		border-radius: 20rpx;
		padding: 8rpx 24rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		z-index: 3;
	}
</style>