style(welcome): 优化欢迎页布局和样式
- 移除标题和底部按钮,简化页面结构 - 删除中心装饰圆圈,保持页面简洁 - 去掉图标背景装饰,放大图标尺寸至6rem - 调整布局位置为不对称排列,打破完美对称 - 整体下移布局至页面中下部 - 修复文字倾斜问题,保持水平显示 - 优化文字与图标的间距 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
18 additions
and
145 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div class="welcome-content"> | 2 | <div class="welcome-content"> |
| 3 | - <!-- 顶部欢迎文案 --> | ||
| 4 | - <div class="welcome-header"> | ||
| 5 | - <h1 class="welcome-title">欢迎来到美乐爱觉</h1> | ||
| 6 | - <p class="welcome-subtitle">开启您的学习之旅</p> | ||
| 7 | - </div> | ||
| 8 | - | ||
| 9 | <!-- 功能入口区域 - 轨道布局 --> | 3 | <!-- 功能入口区域 - 轨道布局 --> |
| 10 | <div class="entry-orbit"> | 4 | <div class="entry-orbit"> |
| 11 | - <div class="orbit-center"> | ||
| 12 | - <!-- 中心装饰元素(可选) --> | ||
| 13 | - <div class="orbit-decoration"></div> | ||
| 14 | - </div> | ||
| 15 | - | ||
| 16 | <!-- 3个功能入口 - 轨道布局 --> | 5 | <!-- 3个功能入口 - 轨道布局 --> |
| 17 | <div class="orbit-entries"> | 6 | <div class="orbit-entries"> |
| 18 | <WelcomeEntryItem | 7 | <WelcomeEntryItem |
| ... | @@ -25,19 +14,6 @@ | ... | @@ -25,19 +14,6 @@ |
| 25 | /> | 14 | /> |
| 26 | </div> | 15 | </div> |
| 27 | </div> | 16 | </div> |
| 28 | - | ||
| 29 | - <!-- 底部开始按钮 --> | ||
| 30 | - <div class="welcome-actions"> | ||
| 31 | - <van-button | ||
| 32 | - type="primary" | ||
| 33 | - size="large" | ||
| 34 | - round | ||
| 35 | - block | ||
| 36 | - @click="handleStart" | ||
| 37 | - > | ||
| 38 | - 开始体验 | ||
| 39 | - </van-button> | ||
| 40 | - </div> | ||
| 41 | </div> | 17 | </div> |
| 42 | </template> | 18 | </template> |
| 43 | 19 | ||
| ... | @@ -62,11 +38,6 @@ const handleEntryClick = (entry) => { | ... | @@ -62,11 +38,6 @@ const handleEntryClick = (entry) => { |
| 62 | router.push(entry.route) | 38 | router.push(entry.route) |
| 63 | } | 39 | } |
| 64 | } | 40 | } |
| 65 | - | ||
| 66 | -const handleStart = () => { | ||
| 67 | - // 跳转到首页 | ||
| 68 | - router.push('/') | ||
| 69 | -} | ||
| 70 | </script> | 41 | </script> |
| 71 | 42 | ||
| 72 | <style lang="less" scoped> | 43 | <style lang="less" scoped> |
| ... | @@ -77,59 +48,17 @@ const handleStart = () => { | ... | @@ -77,59 +48,17 @@ const handleStart = () => { |
| 77 | display: flex; | 48 | display: flex; |
| 78 | flex-direction: column; | 49 | flex-direction: column; |
| 79 | align-items: center; | 50 | align-items: center; |
| 80 | - justify-content: space-between; | 51 | + justify-content: flex-end; |
| 81 | - padding: 6rem 2rem 3rem; | 52 | + padding: 2rem; |
| 53 | + padding-bottom: 8rem; | ||
| 82 | z-index: 1; | 54 | z-index: 1; |
| 83 | } | 55 | } |
| 84 | 56 | ||
| 85 | -.welcome-header { | ||
| 86 | - text-align: center; | ||
| 87 | - margin-top: 4rem; | ||
| 88 | - | ||
| 89 | - .welcome-title { | ||
| 90 | - font-size: 2rem; | ||
| 91 | - font-weight: bold; | ||
| 92 | - color: #ffffff; | ||
| 93 | - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | ||
| 94 | - margin-bottom: 0.75rem; | ||
| 95 | - animation: fadeInDown 1s ease; | ||
| 96 | - } | ||
| 97 | - | ||
| 98 | - .welcome-subtitle { | ||
| 99 | - font-size: 1rem; | ||
| 100 | - color: rgba(255, 255, 255, 0.9); | ||
| 101 | - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | ||
| 102 | - animation: fadeInDown 1s ease 0.2s both; | ||
| 103 | - } | ||
| 104 | -} | ||
| 105 | - | ||
| 106 | .entry-orbit { | 57 | .entry-orbit { |
| 107 | position: relative; | 58 | position: relative; |
| 108 | width: 100%; | 59 | width: 100%; |
| 109 | max-width: 20rem; | 60 | max-width: 20rem; |
| 110 | aspect-ratio: 1; | 61 | aspect-ratio: 1; |
| 111 | - margin: 2rem 0; | ||
| 112 | - | ||
| 113 | - .orbit-center { | ||
| 114 | - position: absolute; | ||
| 115 | - top: 50%; | ||
| 116 | - left: 50%; | ||
| 117 | - transform: translate(-50%, -50%); | ||
| 118 | - width: 8rem; | ||
| 119 | - height: 8rem; | ||
| 120 | - border-radius: 50%; | ||
| 121 | - background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); | ||
| 122 | - backdrop-filter: blur(10px); | ||
| 123 | - animation: pulse 3s ease-in-out infinite; | ||
| 124 | - | ||
| 125 | - .orbit-decoration { | ||
| 126 | - width: 100%; | ||
| 127 | - height: 100%; | ||
| 128 | - border-radius: 50%; | ||
| 129 | - border: 1px solid rgba(255, 255, 255, 0.1); | ||
| 130 | - animation: rotate 20s linear infinite; | ||
| 131 | - } | ||
| 132 | - } | ||
| 133 | 62 | ||
| 134 | .orbit-entries { | 63 | .orbit-entries { |
| 135 | position: relative; | 64 | position: relative; |
| ... | @@ -144,79 +73,30 @@ const handleStart = () => { | ... | @@ -144,79 +73,30 @@ const handleStart = () => { |
| 144 | animation: float 3s ease-in-out infinite; | 73 | animation: float 3s ease-in-out infinite; |
| 145 | 74 | ||
| 146 | &.orbit-entry-1 { | 75 | &.orbit-entry-1 { |
| 147 | - // 课程中心 - 顶部 | 76 | + // 课程中心 - 顶部偏左 |
| 148 | - top: 0; | 77 | + top: 5%; |
| 149 | - left: 50%; | 78 | + left: 40%; |
| 150 | animation-delay: 0s; | 79 | animation-delay: 0s; |
| 151 | } | 80 | } |
| 152 | 81 | ||
| 153 | &.orbit-entry-2 { | 82 | &.orbit-entry-2 { |
| 154 | // 活动中心 - 右下 | 83 | // 活动中心 - 右下 |
| 155 | top: 75%; | 84 | top: 75%; |
| 156 | - left: 85%; | 85 | + left: 80%; |
| 157 | animation-delay: 0.5s; | 86 | animation-delay: 0.5s; |
| 158 | } | 87 | } |
| 159 | 88 | ||
| 160 | &.orbit-entry-3 { | 89 | &.orbit-entry-3 { |
| 161 | // 个人中心 - 左下 | 90 | // 个人中心 - 左下 |
| 162 | - top: 75%; | 91 | + top: 70%; |
| 163 | - left: 15%; | 92 | + left: 20%; |
| 164 | animation-delay: 1s; | 93 | animation-delay: 1s; |
| 165 | } | 94 | } |
| 166 | } | 95 | } |
| 167 | } | 96 | } |
| 168 | } | 97 | } |
| 169 | 98 | ||
| 170 | -.welcome-actions { | ||
| 171 | - width: 100%; | ||
| 172 | - max-width: 20rem; | ||
| 173 | - margin-bottom: 2rem; | ||
| 174 | - animation: fadeInUp 1s ease 0.4s both; | ||
| 175 | - | ||
| 176 | - :deep(.van-button) { | ||
| 177 | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||
| 178 | - border: none; | ||
| 179 | - box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4); | ||
| 180 | - height: 3rem; | ||
| 181 | - font-size: 1.1rem; | ||
| 182 | - font-weight: 500; | ||
| 183 | - } | ||
| 184 | -} | ||
| 185 | - | ||
| 186 | // 动画定义 | 99 | // 动画定义 |
| 187 | -@keyframes fadeInDown { | ||
| 188 | - from { | ||
| 189 | - opacity: 0; | ||
| 190 | - transform: translateY(-20px); | ||
| 191 | - } | ||
| 192 | - to { | ||
| 193 | - opacity: 1; | ||
| 194 | - transform: translateY(0); | ||
| 195 | - } | ||
| 196 | -} | ||
| 197 | - | ||
| 198 | -@keyframes fadeInUp { | ||
| 199 | - from { | ||
| 200 | - opacity: 0; | ||
| 201 | - transform: translateY(20px); | ||
| 202 | - } | ||
| 203 | - to { | ||
| 204 | - opacity: 1; | ||
| 205 | - transform: translateY(0); | ||
| 206 | - } | ||
| 207 | -} | ||
| 208 | - | ||
| 209 | -@keyframes pulse { | ||
| 210 | - 0%, 100% { | ||
| 211 | - opacity: 0.5; | ||
| 212 | - transform: translate(-50%, -50%) scale(1); | ||
| 213 | - } | ||
| 214 | - 50% { | ||
| 215 | - opacity: 0.8; | ||
| 216 | - transform: translate(-50%, -50%) scale(1.05); | ||
| 217 | - } | ||
| 218 | -} | ||
| 219 | - | ||
| 220 | @keyframes float { | 100 | @keyframes float { |
| 221 | 0%, 100% { | 101 | 0%, 100% { |
| 222 | transform: translate(-50%, -50%) translateY(0); | 102 | transform: translate(-50%, -50%) translateY(0); |
| ... | @@ -225,13 +105,4 @@ const handleStart = () => { | ... | @@ -225,13 +105,4 @@ const handleStart = () => { |
| 225 | transform: translate(-50%, -50%) translateY(-10px); | 105 | transform: translate(-50%, -50%) translateY(-10px); |
| 226 | } | 106 | } |
| 227 | } | 107 | } |
| 228 | - | ||
| 229 | -@keyframes rotate { | ||
| 230 | - from { | ||
| 231 | - transform: rotate(0deg); | ||
| 232 | - } | ||
| 233 | - to { | ||
| 234 | - transform: rotate(360deg); | ||
| 235 | - } | ||
| 236 | -} | ||
| 237 | </style> | 108 | </style> | ... | ... |
| 1 | +<!-- | ||
| 2 | + * @Date: 2026-01-28 16:57:21 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2026-01-28 16:57:41 | ||
| 5 | + * @FilePath: /mlaj/src/components/welcome/WelcomeEntryItem.vue | ||
| 6 | + * @Description: 欢迎页入口项组件 | ||
| 7 | +--> | ||
| 1 | <template> | 8 | <template> |
| 2 | <div | 9 | <div |
| 3 | class="entry-item" | 10 | class="entry-item" |
| ... | @@ -57,19 +64,14 @@ const handleClick = () => { | ... | @@ -57,19 +64,14 @@ const handleClick = () => { |
| 57 | width: 6rem; | 64 | width: 6rem; |
| 58 | height: 6rem; | 65 | height: 6rem; |
| 59 | border-radius: 50%; | 66 | border-radius: 50%; |
| 60 | - background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); | ||
| 61 | - backdrop-filter: blur(10px); | ||
| 62 | display: flex; | 67 | display: flex; |
| 63 | align-items: center; | 68 | align-items: center; |
| 64 | justify-content: center; | 69 | justify-content: center; |
| 65 | - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | ||
| 66 | - margin-bottom: 0.75rem; | ||
| 67 | 70 | ||
| 68 | .entry-icon { | 71 | .entry-icon { |
| 69 | - width: 3rem; | 72 | + width: 6rem; |
| 70 | - height: 3rem; | 73 | + height: 6rem; |
| 71 | object-fit: contain; | 74 | object-fit: contain; |
| 72 | - filter: brightness(0) invert(1); // 图标反白显示 | ||
| 73 | } | 75 | } |
| 74 | } | 76 | } |
| 75 | 77 | ... | ... |
-
Please register or login to post a comment