mod:首页 调整

frontend/src/router/index.ts

@@ -12,7 +12,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: "/home",
         name: "home",
-        component: () => import("@/views/Home/index_old.vue"),
+        component: () => import("@/views/Home/index.vue"),
         meta: {
             noAuth: true,
         },

frontend/src/views/Home/index.vue

@@ -1,30 +1,20 @@
 <template>
-
-
-  <headerBar
-      title="首页"
-  />
-  <div class="mb-4">
-<!--
-    <router-link
-        class="mar-left-10"
-        :to="{
-          name:'PhotographyCheck'
-      }"
-    >
-      <el-button type="warning">拍摄图像并处理</el-button>
-    </router-link>-->
-    <el-button type="warning" @click="goCheck">拍摄图像并处理</el-button>
-
-    <el-button type="warning" @click="goShot">仅处理图像</el-button>
-<!--    <router-link
-        class="mar-left-10"
-        :to="{
-          name:'PhotographyShot'
-      }"
-    >
-      <el-button type="warning" @click="goShot">仅处理图像</el-button>
-    </router-link>-->
+  <headerBar title="首页" />
+  <div class="home-container">
+    <!-- 背景图片 -->
+    <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
+
+    <!-- 左侧图片区域 -->
+    <div class="image-container left-image" @click="goCheck">
+      <img src="@/assets/images/home/left.jpg" alt="拍摄产品并处理图像" class="zoom-on-hover" />
+      <div class="overlay-text">拍摄产品<br>并处理图像</div>
+    </div>
+
+    <!-- 右侧图片区域 -->
+    <div class="image-container right-image" @click="goShot">
+      <img src="@/assets/images/home/right.jpg" alt="仅处理图像" class="zoom-on-hover" />
+      <div class="overlay-text" style="line-height: 80px;">仅处理图像</div>
+    </div>
   </div>
 </template>
 
@@ -65,6 +55,73 @@ const goShot = ()=>{
 
 </script>
 
-<style scoped>
 
+<style lang="scss" scoped>
+.home-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+
+.image-container {
+  position: absolute;
+  cursor: pointer;
+  width: 400px; /* 设置宽度 */
+  height: 400px; /* 设置高度 */
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加阴影效果 */
+
+  .zoom-on-hover {
+    transition: transform 0.3s ease;
+    width: 100%; /* 确保图片充满容器 */
+    height: 100%; /* 确保图片充满容器 */
+    object-fit: cover; /* 裁剪图片以适应容器 */
+  }
+
+  &:hover .zoom-on-hover {
+    transform: scale(1.1);
+  }
+
+}
+
+.left-image {
+  top: 50%;
+  right: 50%;
+  transform: translateY(-50%);
+  margin-right: 50px;
+}
+
+.right-image {
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%);
+  margin-left: 50px;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 24px;
+  text-align: center;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10px 40px;
+  line-height: 50px;
+  min-height: 80px;
+  min-width: 250px;
+}
 </style>

hlm/aigc/CameraMachine/frontend/src/views/Home/index.vue

@@ -0,0 +1,12 @@
+<!-- ... existing code ... -->
+<div class="image-container left-image" @click="goCheck">
+    <img src="@/assets/images/home/left.jpg" alt="拍摄产品并处理图像" class="zoom-on-hover" />
+    <div class="overlay-text">拍摄产品<br>并处理图像</div>
+</div>
+
+<!-- 右侧图片区域 -->
+<div class="image-container right-image" @click="goShot">
+    <img src="@/assets/images/home/right.jpg" alt="仅处理图像" class="zoom-on-hover" />
+    <div class="overlay-text">仅处理图像</div>
+</div>
+<!-- ... existing code ... -->

public/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>智惠映AI自动拍照机</title>
-    <script type="module" crossorigin src="./assets/index-CW4uQ-aR.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CL_4evXq.css">
+    <script type="module" crossorigin src="./assets/index-CoWHMjQ8.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BAP24IE0.css">
   </head>
   <body>
     <div id="app"></div>