优化

src/views/item/index.vue

@@ -505,16 +505,19 @@ const handleMouseMove = (e: MouseEvent) => {
         // 轮播
         .carousel-bos {
           width: 80px;
+          display: flex;
+          flex-direction: column;
 
           @media (min-width: 1600px) {
             width: 112px;
           }
           // 左边的轮播
           .left-carousel {
-            height: 494px;
+            flex: 1;
+            // height: 494px;
             overflow-y: auto;
             @media (min-width: 1600px) {
-              height: 674px;
+              // height: 674px;
             }
 
             .carousel-item {
@@ -558,7 +561,8 @@ const handleMouseMove = (e: MouseEvent) => {
         // 中间大图
         .images-box {
           width: 645px;
-          height: 540px;
+          height: 645px;
+          // height: 540px;
           border-radius: 5px;
           overflow: hidden;
           position: relative; /* 关键：作为遮罩层的定位父级 */
@@ -566,7 +570,8 @@ const handleMouseMove = (e: MouseEvent) => {
 
           @media (min-width: 1600px) {
             width: 860px;
-            height: 720px;
+            height: 860px;
+            // height: 720px;
           }
 
           .images-img {
@@ -632,6 +637,7 @@ const handleMouseMove = (e: MouseEvent) => {
         //商品详情
         .pc-detail {
           width: 100%;
+          overflow-wrap: break-word;
           :deep(img) {
             width: 100%;
             display: block;
@@ -880,11 +886,22 @@ const handleMouseMove = (e: MouseEvent) => {
         border-radius: 10px;
         padding: 20px 20px 22px 20px;
         cursor: pointer;
+        transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          .data-title {
+            color: #e7000b !important;
+          }
+        }
 
         .data-img {
-          width: 184px;
-          height: 184px;
-          border-radius: 10px;
+          width: 100%;
+          aspect-ratio: 1 / 1;
+          border-radius: 5px;
         }
 
         .data-title {
@@ -892,6 +909,12 @@ const handleMouseMove = (e: MouseEvent) => {
           font-size: 14px;
           color: #101828;
           height: 40px;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2; /* 添加标准属性 */
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .money {