init

src/views/Home.vue

@@ -0,0 +1,159 @@
+<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>
+