hookehuyr

style(welcome): 优化欢迎页布局和样式

- 移除标题和底部按钮,简化页面结构
- 删除中心装饰圆圈,保持页面简洁
- 去掉图标背景装饰,放大图标尺寸至6rem
- 调整布局位置为不对称排列,打破完美对称
- 整体下移布局至页面中下部
- 修复文字倾斜问题,保持水平显示
- 优化文字与图标的间距

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
<template>
<div class="welcome-content">
<!-- 顶部欢迎文案 -->
<div class="welcome-header">
<h1 class="welcome-title">欢迎来到美乐爱觉</h1>
<p class="welcome-subtitle">开启您的学习之旅</p>
</div>
<!-- 功能入口区域 - 轨道布局 -->
<div class="entry-orbit">
<div class="orbit-center">
<!-- 中心装饰元素(可选) -->
<div class="orbit-decoration"></div>
</div>
<!-- 3个功能入口 - 轨道布局 -->
<div class="orbit-entries">
<WelcomeEntryItem
......@@ -25,19 +14,6 @@
/>
</div>
</div>
<!-- 底部开始按钮 -->
<div class="welcome-actions">
<van-button
type="primary"
size="large"
round
block
@click="handleStart"
>
开始体验
</van-button>
</div>
</div>
</template>
......@@ -62,11 +38,6 @@ const handleEntryClick = (entry) => {
router.push(entry.route)
}
}
const handleStart = () => {
// 跳转到首页
router.push('/')
}
</script>
<style lang="less" scoped>
......@@ -77,59 +48,17 @@ const handleStart = () => {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 6rem 2rem 3rem;
justify-content: flex-end;
padding: 2rem;
padding-bottom: 8rem;
z-index: 1;
}
.welcome-header {
text-align: center;
margin-top: 4rem;
.welcome-title {
font-size: 2rem;
font-weight: bold;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
margin-bottom: 0.75rem;
animation: fadeInDown 1s ease;
}
.welcome-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
animation: fadeInDown 1s ease 0.2s both;
}
}
.entry-orbit {
position: relative;
width: 100%;
max-width: 20rem;
aspect-ratio: 1;
margin: 2rem 0;
.orbit-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8rem;
height: 8rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(10px);
animation: pulse 3s ease-in-out infinite;
.orbit-decoration {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
animation: rotate 20s linear infinite;
}
}
.orbit-entries {
position: relative;
......@@ -144,79 +73,30 @@ const handleStart = () => {
animation: float 3s ease-in-out infinite;
&.orbit-entry-1 {
// 课程中心 - 顶部
top: 0;
left: 50%;
// 课程中心 - 顶部偏左
top: 5%;
left: 40%;
animation-delay: 0s;
}
&.orbit-entry-2 {
// 活动中心 - 右下
top: 75%;
left: 85%;
left: 80%;
animation-delay: 0.5s;
}
&.orbit-entry-3 {
// 个人中心 - 左下
top: 75%;
left: 15%;
top: 70%;
left: 20%;
animation-delay: 1s;
}
}
}
}
.welcome-actions {
width: 100%;
max-width: 20rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease 0.4s both;
:deep(.van-button) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
height: 3rem;
font-size: 1.1rem;
font-weight: 500;
}
}
// 动画定义
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.05);
}
}
@keyframes float {
0%, 100% {
transform: translate(-50%, -50%) translateY(0);
......@@ -225,13 +105,4 @@ const handleStart = () => {
transform: translate(-50%, -50%) translateY(-10px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
......
<!--
* @Date: 2026-01-28 16:57:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-28 16:57:41
* @FilePath: /mlaj/src/components/welcome/WelcomeEntryItem.vue
* @Description: 欢迎页入口项组件
-->
<template>
<div
class="entry-item"
......@@ -57,19 +64,14 @@ const handleClick = () => {
width: 6rem;
height: 6rem;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
margin-bottom: 0.75rem;
.entry-icon {
width: 3rem;
height: 3rem;
width: 6rem;
height: 6rem;
object-fit: contain;
filter: brightness(0) invert(1); // 图标反白显示
}
}
......