160 lines
2.8 KiB
Vue
160 lines
2.8 KiB
Vue
<template>
|
||
<div class="home-container">
|
||
<div class="hero-section">
|
||
<h2 class="hero-title">今天是{{`${new Date().getFullYear()}年${new Date().getMonth()+1}月${new Date().getDate()}日`}}</h2>
|
||
<p class="hero-subtitle">凭君莫话封侯事，一将功成万骨枯。</p>
|
||
</div>
|
||
<div class="tools-grid">
|
||
<router-link
|
||
v-for="tool in tools"
|
||
:key="tool.path"
|
||
:to="tool.path"
|
||
class="tool-card"
|
||
>
|
||
<h3 class="tool-title">{{ tool.title }}</h3>
|
||
<p class="tool-description">{{ tool.description }}</p>
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const tools = ref([
|
||
{
|
||
path: '/json-formatter',
|
||
title: 'JSON',
|
||
description: '格式化、验证和美化JSON数据'
|
||
},
|
||
{
|
||
path: '/encoder-decoder',
|
||
title: '编解码',
|
||
description: '编码/解码工具'
|
||
},
|
||
{
|
||
path: '/timestamp-converter',
|
||
title: '时间戳',
|
||
description: '时间戳与时间字符串相互转换'
|
||
},
|
||
{
|
||
path: '/color-converter',
|
||
title: '颜色',
|
||
description: '颜色格式转换'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-container {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.hero-section {
|
||
text-align: center;
|
||
padding: 3rem 0;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 3rem;
|
||
font-weight: 500;
|
||
margin-bottom: 1rem;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.25rem;
|
||
color: #666666;
|
||
}
|
||
|
||
.tools-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 1.5rem;
|
||
margin: 2rem auto 0;
|
||
max-width: 1200px;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.tool-card {
|
||
background: #ffffff;
|
||
border-radius: 6px;
|
||
padding: 2rem;
|
||
text-decoration: none;
|
||
color: #1a1a1a;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
border: 1px solid #e5e5e5;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
flex: 0 0 calc(25% - 1.125rem);
|
||
max-width: calc(25% - 1.125rem);
|
||
min-width: 250px;
|
||
}
|
||
|
||
.tool-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
border-color: #d0d0d0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.tool-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 500;
|
||
margin-bottom: 0.5rem;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.tool-description {
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.tool-card {
|
||
flex: 0 0 calc(33.333% - 1rem);
|
||
max-width: calc(33.333% - 1rem);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.tool-card {
|
||
flex: 0 0 calc(50% - 0.75rem);
|
||
max-width: calc(50% - 0.75rem);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.tools-grid {
|
||
gap: 1rem;
|
||
max-width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.tool-card {
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.tool-card {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
|