You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
8.2 KiB
Vue
327 lines
8.2 KiB
Vue
<template>
|
|
<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";
|
|
|
|
const router = useRouter();
|
|
|
|
const menuItems = [
|
|
{
|
|
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 });
|
|
};
|
|
|
|
const particlesOptions = {
|
|
background: {
|
|
color: { value: "transparent" },
|
|
},
|
|
particles: {
|
|
number: { value: 50, density: { enable: true, area: 800 } },
|
|
color: {
|
|
value: [
|
|
"var(--primary-color)",
|
|
"var(--primary-dark)",
|
|
"var(--text-primary)",
|
|
],
|
|
},
|
|
shape: { type: ["circle", "star"] },
|
|
opacity: {
|
|
value: 0.6,
|
|
random: true,
|
|
anim: {
|
|
enable: true,
|
|
speed: 0.3,
|
|
opacity_min: 0.2,
|
|
sync: false,
|
|
},
|
|
},
|
|
size: {
|
|
value: 4,
|
|
random: true,
|
|
anim: {
|
|
enable: true,
|
|
speed: 1,
|
|
size_min: 0.2,
|
|
sync: false,
|
|
},
|
|
},
|
|
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;
|
|
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;
|
|
}
|
|
|
|
.content {
|
|
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: 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: 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-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>
|