feat(home): 更新首页图片格式并优化样式- 将首页左右两张图片格式从 jpg 更改为 png- 移除了图片容器的固定高度和阴影效果

- 添加了圆角和过渡动画效果- 调整了悬停时的缩放和位移效果
- 修复了健康检查函数中 loading 状态的初始化问题
-优化了图片的 object-fit 属性以更好地适应容器- 添加了 display: block 属性以确保图片正确显示

frontend/src/views/Home/index.vue

@@ -9,13 +9,13 @@
 
     <!-- 左侧图片区域 -->
     <div class="image-container left-image" @click="goCheck" v-log="{ describe: { action: '点击拍照检查入口' } }">
-      <img src="@/assets/images/home/left.jpg" alt="拍摄产品并处理图像" class="zoom-on-hover" />
+      <img src="@/assets/images/home/left.png" alt="拍摄产品并处理图像" class="zoom-on-hover" />
       <div class="overlay-text">拍摄产品<br>并处理图像</div>
     </div>
 
     <!-- 右侧图片区域 -->
     <div class="image-container right-image" @click="goShot" v-log="{ describe: { action: '点击仅处理图像入口' } }">
-      <img src="@/assets/images/home/right.jpg" alt="仅处理图像" class="zoom-on-hover" />
+      <img src="@/assets/images/home/right.png" alt="仅处理图像" class="zoom-on-hover" />
       <div class="overlay-text" style="line-height: 80px;">仅处理图像</div>
     </div>
   </div>
@@ -85,6 +85,7 @@ const goShot = () => {
 
 // 健康检查函数
 const checkHealth = async () => {
+  loading.value = false;
   try {
     const response = await axios.get('http://127.0.0.1:7074');
     if (response.status === 200) {
@@ -255,21 +256,24 @@ onMounted(() => {
   position: absolute;
   cursor: pointer;
   width: 400px; /* 设置宽度 */
-  height: 400px; /* 设置高度 */
   overflow: hidden;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加阴影效果 */
+  // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加阴影效果 */
+  border-radius: 30px;
+  transition: transform 0.3s ease;
 
   .zoom-on-hover {
     transition: transform 0.3s ease;
     width: 100%; /* 确保图片充满容器 */
     height: 100%; /* 确保图片充满容器 */
     object-fit: cover; /* 裁剪图片以适应容器 */
+    display: block;
   }
 
-  &:hover .zoom-on-hover {
-    transform: scale(1.1);
+  &:hover {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
+    transform: translateY(-55%);
+    transform:translateY(-55%) scale(1.05);
   }
-
 }
 
 .left-image {