Compare commits
No commits in common. 'ff74dd1e9b376ad555983d2893fd4eeaaf8f388f' and '4a4857fa8239db297faeeaf348f16654927c8bb7' have entirely different histories.
ff74dd1e9b
...
4a4857fa82
@ -1,326 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<!-- 粒子背景 -->
|
<!-- 粒子背景 -->
|
||||||
<Particles id="tsparticles" :options="particlesOptions" />
|
<Particles id="tsparticles" :options="particlesOptions" />
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
<!-- 页面内容 -->
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="title-container">
|
<h1 class="title">欢迎来到钓鱼大冒险</h1>
|
||||||
<h1 class="title">欢迎来到钓鱼大冒险</h1>
|
|
||||||
<p class="subtitle">开启你的海洋探索之旅</p>
|
<el-card class="menu-card">
|
||||||
</div>
|
<el-row :gutter="20" justify="center">
|
||||||
|
<el-col :span="8" v-for="item in menuItems" :key="item.name">
|
||||||
<div class="menu-grid">
|
<el-button type="primary" size="large" class="menu-btn" @click="navigateTo(item.route)" plain>
|
||||||
<div
|
{{ item.label }}
|
||||||
v-for="item in menuItems"
|
</el-button>
|
||||||
:key="item.name"
|
</el-col>
|
||||||
class="menu-item"
|
</el-row>
|
||||||
@click="navigateTo(item.route)"
|
</el-card>
|
||||||
>
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{
|
{ label: '🎒 查看装备', route: 'equipments' },
|
||||||
label: "查看装备",
|
{ label: '🎣 拉竿钓鱼', route: 'fishing' },
|
||||||
route: "equipments",
|
{ label: '🐟 查看鱼篓', route: 'fishbaskets' },
|
||||||
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>`,
|
{ label: '🛒 道具商店', route: 'shop' },
|
||||||
description: "管理你的钓鱼装备和道具",
|
{ label: '💰 市场信息', route: 'market' },
|
||||||
},
|
{ label: '🏆 游戏排名', route: 'ranking' }
|
||||||
{
|
]
|
||||||
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) => {
|
const navigateTo = (page) => {
|
||||||
router.push({ name: page });
|
router.push({ name: page })
|
||||||
};
|
}
|
||||||
|
|
||||||
const particlesOptions = {
|
const particlesOptions = {
|
||||||
background: {
|
background: {
|
||||||
color: { value: "transparent" },
|
color: { value: "#001f3f" }
|
||||||
},
|
|
||||||
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: {
|
particles: {
|
||||||
enable: true,
|
number: { value: 40, density: { enable: true, area: 800 } },
|
||||||
speed: 1,
|
color: { value: "#00d9ff" },
|
||||||
direction: "none",
|
shape: { type: "circle" },
|
||||||
random: true,
|
opacity: {
|
||||||
straight: false,
|
value: 0.7,
|
||||||
outModes: { default: "bounce" },
|
random: true,
|
||||||
attract: {
|
anim: {
|
||||||
enable: true,
|
enable: true,
|
||||||
rotateX: 600,
|
speed: 0.5,
|
||||||
rotateY: 1200,
|
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" }
|
||||||
|
}
|
||||||
},
|
},
|
||||||
links: {
|
interactivity: {
|
||||||
enable: true,
|
events: {
|
||||||
distance: 150,
|
onHover: { enable: true, mode: "bubble" },
|
||||||
color: "var(--primary-color)",
|
resize: true
|
||||||
opacity: 0.2,
|
},
|
||||||
width: 1,
|
modes: {
|
||||||
|
bubble: {
|
||||||
|
distance: 150,
|
||||||
|
size: 12,
|
||||||
|
duration: 2,
|
||||||
|
opacity: 1,
|
||||||
|
speed: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
detectRetina: true
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.home-page {
|
.home-page {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--bg-gradient-primary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tsparticles {
|
#tsparticles {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
max-width: 800px;
|
||||||
max-width: 1200px;
|
margin: 60px auto;
|
||||||
margin: 20px auto;
|
text-align: center;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-container {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 3rem;
|
font-size: 2.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-primary);
|
margin-bottom: 30px;
|
||||||
margin-bottom: 15px;
|
color: #ffffff;
|
||||||
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 {
|
.menu-card {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.85);
|
||||||
backdrop-filter: blur(15px);
|
border-radius: 12px;
|
||||||
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 {
|
||||||
.menu-title {
|
width: 100%;
|
||||||
font-size: 1.2rem;
|
margin-bottom: 15px;
|
||||||
font-weight: 700;
|
font-size: 16px;
|
||||||
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>
|
</style>
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
: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