hookehuyr

style(欢迎页): 调整欢迎页组件样式和布局

- 将轨道布局改为水平布局,使用 flex 实现
- 缩小入口图标尺寸和标题字体大小
- 简化动画实现,移除基于优先级的定位类
- 调整内边距,优化整体间距
<!--
* @Date: 2026-01-28 17:24:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-28 17:25:09
* @FilePath: /mlaj/src/components/welcome/WelcomeContent.vue
* @Description: 欢迎页内容组件
-->
<template>
<div class="welcome-content">
<!-- 功能入口区域 - 轨道布局 -->
<!-- 功能入口区域 - 水平布局 -->
<div class="entry-orbit">
<!-- 3个功能入口 - 轨道布局 -->
<div class="orbit-entries">
<WelcomeEntryItem
v-for="entry in entries"
:key="entry.id"
:entry="entry"
class="orbit-entry"
:class="`orbit-entry-${entry.priority}`"
@click="handleEntryClick"
/>
</div>
......@@ -49,47 +54,39 @@ const handleEntryClick = (entry) => {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 2rem;
padding-bottom: 8rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 3rem;
z-index: 1;
}
.entry-orbit {
position: relative;
width: 100%;
max-width: 20rem;
aspect-ratio: 1;
max-width: 36rem;
.orbit-entries {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
.orbit-entry {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex: 1;
display: flex;
justify-content: center;
animation: float 3s ease-in-out infinite;
&.orbit-entry-1 {
// 课程中心 - 顶部偏左
top: 5%;
left: 40%;
&:nth-child(1) {
animation-delay: 0s;
}
&.orbit-entry-2 {
// 活动中心 - 右下
top: 75%;
left: 80%;
&:nth-child(2) {
animation-delay: 0.5s;
}
&.orbit-entry-3 {
// 个人中心 - 左下
top: 70%;
left: 20%;
&:nth-child(3) {
animation-delay: 1s;
}
}
......@@ -99,10 +96,10 @@ const handleEntryClick = (entry) => {
// 动画定义
@keyframes float {
0%, 100% {
transform: translate(-50%, -50%) translateY(0);
transform: translateY(0);
}
50% {
transform: translate(-50%, -50%) translateY(-10px);
transform: translateY(-10px);
}
}
</style>
......
......@@ -61,22 +61,22 @@ const handleClick = () => {
.entry-icon-wrapper {
position: relative;
width: 6rem;
height: 6rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.entry-icon {
width: 6rem;
height: 6rem;
width: 5rem;
height: 5rem;
object-fit: contain;
}
}
.entry-title {
font-size: 1rem;
font-size: 0.95rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
......