feat: 优化页面样式和交互，添加CSS变量和动态效果
本次提交主要对多个页面的样式和交互进行了优化，包括： 1. 添加CSS变量文件，统一管理主题色、背景色等样式 2. 优化页面布局和响应式设计 3. 为按钮、卡片等元素添加悬停和点击效果 4. 改进表格和表单的视觉效果 5. 增强页面加载状态提示 6. 优化粒子背景效果main
akun
1 year ago
parent
dfbe825e39
commit
640b55f685
@ -1,131 +1,326 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 粒子背景 -->
|
||||
<Particles id="tsparticles" :options="particlesOptions" />
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="content">
|
||||
<h1 class="title">欢迎来到钓鱼大冒险</h1>
|
||||
|
||||
<el-card class="menu-card">
|
||||
<el-row :gutter="20" justify="center">
|
||||
<el-col :span="8" v-for="item in menuItems" :key="item.name">
|
||||
<el-button type="primary" size="large" class="menu-btn" @click="navigateTo(item.route)" plain>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div class="home-page">
|
||||
<!-- 粒子背景 -->
|
||||
<Particles id="tsparticles" :options="particlesOptions" />
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="content">
|
||||
<div class="title-container">
|
||||
<h1 class="title">欢迎来到钓鱼大冒险</h1>
|
||||
<p class="subtitle">开启你的海洋探索之旅</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.name"
|
||||
class="menu-item"
|
||||
@click="navigateTo(item.route)"
|
||||
>
|
||||
<div class="menu-card">
|
||||
<div class="menu-icon" v-html="item.icon"></div>
|
||||
<h3 class="menu-title">{{ item.label }}</h3>
|
||||
<p class="menu-description">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const menuItems = [
|
||||
{ label: '🎒 查看装备', route: 'equipments' },
|
||||
{ label: '🎣 拉竿钓鱼', route: 'fishing' },
|
||||
{ label: '🐟 查看鱼篓', route: 'fishbaskets' },
|
||||
{ label: '🛒 道具商店', route: 'shop' },
|
||||
{ label: '💰 市场信息', route: 'market' },
|
||||
{ label: '🏆 游戏排名', route: 'ranking' }
|
||||
]
|
||||
{
|
||||
label: "查看装备",
|
||||
route: "equipments",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M20 7h-5V4c0-1.1-.9-2-2-2h-2C9.9 2 9 2.9 9 4v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM9 12c.83 0 1.5.67 1.5 1.5S9.83 15 9 15s-1.5-.67-1.5-1.5S8.17 12 9 12zm6 6H9v-.75c0-1 2-1.5 3-1.5s3 .5 3 1.5V18z"/></svg>`,
|
||||
description: "管理你的钓鱼装备和道具",
|
||||
},
|
||||
{
|
||||
label: "拉竿钓鱼",
|
||||
route: "fishing",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M12 12.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-7.5V5.7c3.4-.4 6-3.2 6-6.7h-2c0 2.8-2.2 5-5 5S7 1.8 7 -1H5c0 3.5 2.6 6.3 6 6.7V9H9v2h6V9h-2z"/></svg>`,
|
||||
description: "开始一场精彩的钓鱼冒险",
|
||||
},
|
||||
{
|
||||
label: "查看鱼篓",
|
||||
route: "fishbaskets",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M18.5 11c.17 0 .34.01.5.03V7c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v2H7c-1.1 0-2 .9-2 2v4.03c.16-.02.33-.03.5-.03.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88M9 4h6v1H9zm10 16H5c-.55 0-1-.45-1-1v-8.51c.42-.34.75-.77.93-1.27.18-.5.19-1.03.03-1.53-.22-.67-.74-1.19-1.41-1.41-.21-.07-.43-.11-.65-.13V7c0-.55.45-1 1-1h1v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V6h1c.55 0 1 .45 1 1v.14c-.22.02-.44.06-.65.13-.67.22-1.19.74-1.41 1.41-.16.5-.15 1.03.03 1.53.18.5.51.93.93 1.27V19c0 .55-.45 1-1 1z"/></svg>`,
|
||||
description: "查看你的渔获和战利品",
|
||||
},
|
||||
{
|
||||
label: "道具商店",
|
||||
route: "shop",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>`,
|
||||
description: "购买钓鱼装备和特殊道具",
|
||||
},
|
||||
{
|
||||
label: "市场信息",
|
||||
route: "market",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>`,
|
||||
description: "了解最新的市场行情和价格",
|
||||
},
|
||||
{
|
||||
label: "游戏排名",
|
||||
route: "ranking",
|
||||
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>`,
|
||||
description: "查看玩家排行榜和成就",
|
||||
},
|
||||
];
|
||||
|
||||
const navigateTo = (page) => {
|
||||
router.push({ name: page })
|
||||
}
|
||||
router.push({ name: page });
|
||||
};
|
||||
|
||||
const particlesOptions = {
|
||||
background: {
|
||||
color: { value: "#001f3f" }
|
||||
background: {
|
||||
color: { value: "transparent" },
|
||||
},
|
||||
particles: {
|
||||
number: { value: 50, density: { enable: true, area: 800 } },
|
||||
color: {
|
||||
value: [
|
||||
"var(--primary-color)",
|
||||
"var(--primary-dark)",
|
||||
"var(--text-primary)",
|
||||
],
|
||||
},
|
||||
particles: {
|
||||
number: { value: 40, density: { enable: true, area: 800 } },
|
||||
color: { value: "#00d9ff" },
|
||||
shape: { type: "circle" },
|
||||
opacity: {
|
||||
value: 0.7,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: true,
|
||||
speed: 0.5,
|
||||
opacity_min: 0.3,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
size: {
|
||||
value: 6,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: true,
|
||||
speed: 2,
|
||||
size_min: 0.3,
|
||||
sync: false
|
||||
}
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1.5,
|
||||
direction: "top",
|
||||
outModes: { default: "out" }
|
||||
}
|
||||
shape: { type: ["circle", "star"] },
|
||||
opacity: {
|
||||
value: 0.6,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: true,
|
||||
speed: 0.3,
|
||||
opacity_min: 0.2,
|
||||
sync: false,
|
||||
},
|
||||
},
|
||||
interactivity: {
|
||||
events: {
|
||||
onHover: { enable: true, mode: "bubble" },
|
||||
resize: true
|
||||
},
|
||||
modes: {
|
||||
bubble: {
|
||||
distance: 150,
|
||||
size: 12,
|
||||
duration: 2,
|
||||
opacity: 1,
|
||||
speed: 3
|
||||
}
|
||||
}
|
||||
size: {
|
||||
value: 4,
|
||||
random: true,
|
||||
anim: {
|
||||
enable: true,
|
||||
speed: 1,
|
||||
size_min: 0.2,
|
||||
sync: false,
|
||||
},
|
||||
},
|
||||
detectRetina: true
|
||||
}
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1,
|
||||
direction: "none",
|
||||
random: true,
|
||||
straight: false,
|
||||
outModes: { default: "bounce" },
|
||||
attract: {
|
||||
enable: true,
|
||||
rotateX: 600,
|
||||
rotateY: 1200,
|
||||
},
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "var(--primary-color)",
|
||||
opacity: 0.2,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
interactivity: {
|
||||
events: {
|
||||
onHover: { enable: true, mode: ["grab", "bubble"] },
|
||||
onClick: { enable: true, mode: "push" },
|
||||
resize: true,
|
||||
},
|
||||
modes: {
|
||||
grab: {
|
||||
distance: 200,
|
||||
links: { opacity: 0.8 },
|
||||
},
|
||||
bubble: {
|
||||
distance: 200,
|
||||
size: 6,
|
||||
duration: 2,
|
||||
opacity: 0.8,
|
||||
speed: 3,
|
||||
},
|
||||
push: {
|
||||
quantity: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
detectRetina: true,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--bg-gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#tsparticles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 800px;
|
||||
margin: 60px auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
color: #ffffff;
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 15px;
|
||||
text-shadow: var(--glow-primary);
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: -10px;
|
||||
text-shadow: var(--glow-secondary);
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 20px 16px;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-style: preserve-3d;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-bottom: 12px;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
padding: 10px;
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.menu-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
|
||||
.menu-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-description {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-card:hover {
|
||||
transform: translateY(-8px);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
.menu-card:hover .menu-icon {
|
||||
transform: scale(1.1);
|
||||
color: var(--primary-dark);
|
||||
background: rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-description {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-card:hover .menu-description {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 6px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
min-height: 140px;
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.menu-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
:root {
|
||||
/* 主题色 */
|
||||
--primary-color: #00d9ff;
|
||||
--primary-light: #66b1ff;
|
||||
--primary-dark: #0088cc;
|
||||
|
||||
/* 背景色 */
|
||||
--bg-gradient-primary: linear-gradient(135deg, #001f3f 0%, #003366 100%);
|
||||
--bg-gradient-secondary: linear-gradient(45deg, #0d47a1, #1976d2);
|
||||
--bg-white: #ffffff;
|
||||
--bg-light: #f5f7fa;
|
||||
--bg-card: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: rgba(255, 255, 255, 0.8);
|
||||
--text-muted: rgba(255, 255, 255, 0.7);
|
||||
--text-dark: #606266;
|
||||
|
||||
/* 边框和阴影 */
|
||||
--border-color: rgba(255, 255, 255, 0.2);
|
||||
--shadow-sm: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* 状态颜色 */
|
||||
--success-color: #67c23a;
|
||||
--warning-color: #e6a23c;
|
||||
--danger-color: #f56c6c;
|
||||
--info-color: #909399;
|
||||
|
||||
/* 特效 */
|
||||
--glow-primary: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
--glow-secondary: 0 0 5px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
Loading…
Reference in New Issue