hookehuyr

style(Splash): 将px单位转换为rem以适配移动端布局

docs: 添加项目规则文档说明项目采用rem布局
refactor(vite): 更新开发服务器端口并添加文件头注释
这是一个移动端项目,基于Vue3 + Vite + ElementPlus 实现。
1. 尺寸单位
- 项目采用rem单位进行布局,基准字体大小为16px。
- 其他尺寸单位(如px、vw、vh等)仅在必要时使用,避免过度依赖。
......@@ -107,8 +107,8 @@ onMounted(() => {
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
width: 200px;
height: 200px;
width: 12.5rem;
height: 12.5rem;
opacity: 1;
animation: loaderFadeOut 1s ease-out 2.5s forwards;
}
......@@ -118,15 +118,15 @@ onMounted(() => {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
width: 0.5rem;
height: 0.5rem;
background: radial-gradient(circle, #fbbf24 0%, #f59e0b 70%, #d97706 100%);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow:
0 0 10px rgba(251, 191, 36, 0.8),
0 0 20px rgba(251, 191, 36, 0.4),
0 0 30px rgba(251, 191, 36, 0.2);
0 0 0.625rem rgba(251, 191, 36, 0.8),
0 0 1.25rem rgba(251, 191, 36, 0.4),
0 0 1.875rem rgba(251, 191, 36, 0.2);
animation: waterDrop 0.6s ease-out;
}
......@@ -135,26 +135,34 @@ onMounted(() => {
position: absolute;
top: 50%;
left: 50%;
border: 2px solid rgba(251, 191, 36, 0.6);
border: 0.125rem solid rgba(251, 191, 36, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.ripple-1 {
animation: rippleExpand 2s ease-out 0.3s;
width: 1.25rem;
height: 1.25rem;
animation: rippleExpand 2s ease-out 0.2s infinite;
}
.ripple-2 {
animation: rippleExpand 2s ease-out 0.6s;
width: 2.5rem;
height: 2.5rem;
animation: rippleExpand 2s ease-out 0.4s infinite;
}
.ripple-3 {
animation: rippleExpand 2s ease-out 0.9s;
width: 3.75rem;
height: 3.75rem;
animation: rippleExpand 2s ease-out 0.6s infinite;
}
.ripple-4 {
animation: rippleExpand 2s ease-out 1.2s;
width: 5rem;
height: 5rem;
animation: rippleExpand 2s ease-out 0.8s infinite;
}
/* 内容层 */
......@@ -178,7 +186,7 @@ onMounted(() => {
.logo-image {
width: auto;
height: 10rem;
max-width: 250px;
max-width: 15.625rem;
object-fit: contain;
display: block;
}
......@@ -205,7 +213,7 @@ onMounted(() => {
.enter-image {
width: auto;
height: 5rem;
max-width: 400px;
max-width: 25rem;
object-fit: contain;
display: block;
}
......@@ -213,7 +221,7 @@ onMounted(() => {
/* 动画 */
@keyframes waterDrop {
0% {
transform: translate(-50%, -80px) scale(0.5);
transform: translate(-50%, -5rem) scale(0.5);
opacity: 0.8;
}
50% {
......@@ -231,17 +239,17 @@ onMounted(() => {
width: 0;
height: 0;
opacity: 0.8;
border-width: 3px;
border-width: 0.1875rem;
}
50% {
opacity: 0.4;
border-width: 2px;
border-width: 0.125rem;
}
100% {
width: 160px;
height: 160px;
width: 10rem;
height: 10rem;
opacity: 0;
border-width: 1px;
border-width: 0.0625rem;
}
}
......@@ -267,7 +275,7 @@ onMounted(() => {
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
transform: translateY(1.875rem);
}
to {
opacity: 1;
......
/*
* @Date: 2025-10-30 10:27:43
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-30 13:55:18
* @FilePath: /stdj_h5/vite.config.js
* @Description: 文件描述
*/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
......@@ -59,7 +66,7 @@ export default defineConfig({
},
server: {
host: '0.0.0.0',
port: 3000,
port: 5173,
open: true,
proxy: {
'/api': {
......@@ -80,4 +87,4 @@ export default defineConfig({
}
}
}
})
\ No newline at end of file
})
......