vali-tools/frontend/src/components/Home.vue

<template>
  <div class="home-container">
    <el-card class="tools-card" shadow="none">
      <template #header>
        <div class="card-header">
          <h3>🛠️ 实用工具列表</h3>
          <p>选择您需要的工具开始使用</p>
        </div>
      </template>

      <el-row :gutter="5" justify="center">
        <el-col
            :span="12"
            :md="24"
            :lg="12"
            v-for="item in views"
            :key="item.name"
            class="tool-item"
        >
          <el-card
              class="tool-card"
              shadow="hover"
              @click="goToTool(item.path)"
          >
            <div class="tool-content">
              <div class="tool-icon"><img :src="item.icon" alt=""/></div>
              <div class="tool-name">{{ item.desc }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ViewInfo } from "../interfaces/HomeINterface"
import pzIcon from '../assets/images/pz.png'
import gyIcon from '../assets/images/gy.png'
import ktIcon from '../assets/images/kt.png'
const router = useRouter()

const views = ref<ViewInfo[]>([
  {
    name: '白底图批量导出',
    path: '/copy_800_tool',
    desc: "白底图批量导出",
    icon: pzIcon
  },
  {
    name: '制作产品册',
    path: '/product_list',
    desc: "制作产品册",
    icon: gyIcon
  },
  {
    name: '批量抠图',
    path: '/cut_out',
    desc: "批量抠图",
    icon: ktIcon
  },
])

const goToTool = (path: string) => {
  router.push(path)
}
</script>
<style scoped>
.home-container {
  width: 90%;
  margin: 0 auto;
  overflow-y: auto;
}


.card-header {
  text-align: center;
}

.card-header h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.2rem;
}

.card-header p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

.tool-item {
  margin-bottom: 20px;
}

.tool-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  height: 150px;
}
.tool-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  height: 150px;
  border: 1px solid #e4e7ed;
  background: #37353E;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.tool-content {
  height: 100%;
  padding: 15px 10px;
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  align-items: center; /* 垂直居中 */
}

.tool-icon {
  flex: 1; /* 设置占比 */
  font-size: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
}
.tool-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* 保持图片比例 */
}
.tool-name {
  flex: 2; /* 占据1份空间 */
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-card){
  border: none;
}
</style>