修改bug

src/views/home/pccomponents/pages/floor.vue

@@ -1,45 +1,48 @@
 <template>
   <div class="pcPages" :style="warpCss">
     <div class="floor-bos" :style="boxCss">
-      <el-image
-        @click="onPath(componentData.url)"
-        class="floor-one"
-        :src="componentData.imageUrl ? componentData.imageUrl : figure"
-        :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
-        :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
-      />
-      <div class="floor-box">
-        <div
-          v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList"
-          :key="index"
-          class="goods-list flex-column-between hover-color"
-          @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
-        >
-          <img
-            class="goods-img"
-            :src="item.productImage ? item.productImage : figure"
-            alt=""
-            :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
-          />
-          <div v-if="componentData.goodsShow.includes(1)" class="itemName zi-hover">{{ item.itemName || '商品名称' }}</div>
-          <div class="flex-row-between">
-            <div>
-              <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.btnbackgroundColor }"
-                >¥{{ item.memberPrice || '0.00' }}</span
-              >
-              <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice || '0.00' }}</span>
-            </div>
-            <template v-if="componentData.btnShow">
-              <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1 ellipsis">{{ componentData.btnText }}</div>
-              <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
-                <el-icon size="14"><Plus /></el-icon>
-              </div>
-              <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
-                <icon name="iconfont icongouwuche" size="14px" />
+      <div class="floor-one-bos">
+        <el-image
+          @click="onPath(componentData.url)"
+          class="floor-one"
+          :src="componentData.imageUrl ? componentData.imageUrl : figure"
+          :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
+          :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
+        />
+      </div>
+      <div :style="{ 'width': boxWidth + 'px' }"></div>
+      <div class="floor-box" ref="floorBoxRef">
+        <template v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList" :key="index">
+          <div
+            v-if="Number(index) < 8"
+            class="goods-list flex-column-between hover-color"
+            @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
+          >
+            <img
+              class="goods-img"
+              :src="item.productImage ? item.productImage : figure"
+              alt=""
+              :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
+            />
+            <div v-if="componentData.goodsShow.includes(1)" class="itemName zi-hover">{{ item.itemName || '商品名称' }}</div>
+            <div class="flex-row-between">
+              <div>
+                <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.btnbackgroundColor }"
+                  >¥{{ item.memberPrice || '0.00' }}</span
+                >
+                <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice || '0.00' }}</span>
               </div>
-            </template>
-          </div>
-        </div>
+              <template v-if="componentData.btnShow">
+                <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1 ellipsis">{{ componentData.btnText }}</div>
+                <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
+                  <el-icon size="14"><Plus /></el-icon>
+                </div>
+                <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
+                  <icon name="iconfont icongouwuche" size="14px" />
+                </div>
+              </template>
+            </div></div
+        ></template>
       </div>
       <div class="goods-brand flex-column-between" v-if="componentData.styleType == 2">
         <div class="brand-bos">
@@ -74,13 +77,35 @@ import { getDiyProductPage, getCustomerProductPage } from '@/api/home/diy';
 interface Props {
   row?: any;
 }
-
+const boxWidth = ref<any>(0);
 const props = defineProps<Props>();
 const componentData = props.row || {};
 const dataList = ref<any>([{}, {}, {}, {}, {}, {}, {}, {}]);
+const floorBoxRef = ref<any>(null);
+const clientHeight = ref<any>(0);
+// 新增：ResizeObserver 实例
+let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
   getDataList();
+
+  // 初始化 ResizeObserver 监听 floorBoxRef 尺寸变化
+  if (floorBoxRef.value) {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        clientHeight.value = Math.floor(entry.contentRect.height);
+        boxWidth.value = (240 / 568) * clientHeight.value;
+      }
+    });
+    resizeObserver.observe(floorBoxRef.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
 });
 
 const getDataList = () => {
@@ -183,15 +208,20 @@ const btnCss2 = computed(() => {
   min-width: 1200px;
   margin: 0 auto;
   .floor-bos {
-    height: 560px;
     display: flex;
     gap: 10px;
     width: 100%;
-    .floor-one {
-      width: 230px;
-      height: 560px;
+    .floor-one-bos {
+      position: absolute;
+      height: 100%;
+      aspect-ratio: 240 / 568;
       cursor: pointer;
+      .floor-one {
+        width: 100%;
+        height: 100%;
+      }
     }
+
     .floor-box {
       flex: 1;
       display: flex;
@@ -203,16 +233,15 @@ const btnCss2 = computed(() => {
       }
       .goods-list {
         padding: 15px 10px;
-        height: 275px;
         width: 0;
         flex: 0 0 calc((100% - 30px) / 4);
         background-color: #ffffff;
         overflow: hidden;
         border-radius: 5px;
         .goods-img {
-          width: 140px;
-          height: 140px;
-          margin: 0 auto;
+          width: 100%;
+          aspect-ratio: 1;
+          margin: 0 auto 10px auto;
         }
         .itemName {
           width: 100%;
@@ -225,6 +254,7 @@ const btnCss2 = computed(() => {
           -webkit-box-orient: vertical;
           overflow: hidden;
           text-overflow: ellipsis;
+          margin-bottom: 10px;
         }
         .memberPrice {
           font-size: 16px;
@@ -255,19 +285,22 @@ const btnCss2 = computed(() => {
       }
     }
     .goods-brand {
-      width: 140px;
-      height: 560px;
+      width: 180px;
       border-radius: 5px;
       background: #ffffff;
       padding: 15px 10px;
+      display: flex;
+      flex-direction: column;
       .brand-bos {
+        flex: 1;
         width: 100%;
         display: flex;
         flex-direction: column;
+        // justify-content: space-between;
         gap: 10px 0;
         .brand-img {
           width: 100%;
-          height: 74px;
+          aspect-ratio: 120/50;
           border-radius: 4px;
           border: 1px solid #e5e7eb;
           cursor: pointer;
@@ -277,6 +310,7 @@ const btnCss2 = computed(() => {
         color: var(--el-color-primary);
         font-size: 14px;
         cursor: pointer;
+        margin-top: 20px;
       }
     }
   }

src/views/item/index.vue

@@ -9,6 +9,10 @@
       <div class="home" @click="onPath('/search?type=2&mediumCategoryId=' + dataInfo.mediumCategoryId)">{{ dataInfo.mediumCategoryName }}</div>
       <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
       <div class="home" @click="onPath('/search?type=3&bottomCategoryId=' + dataInfo.bottomCategoryId)">{{ dataInfo.bottomCategoryName }}</div>
+      <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
+      <div class="home" @click="onPath('/search?type=1&brandId=' + dataInfo.brandId)">{{ dataInfo.brandName }}</div>
+      <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
+      <div class="home1">{{ dataInfo.itemName }}</div>
     </div>
     <div class="shop-bos">
       <div class="shop-left">
@@ -506,6 +510,9 @@ const handleMouseMove = (e: MouseEvent) => {
         color: var(--el-color-primary);
       }
     }
+    .home1 {
+      font-size: 14px;
+    }
   }
 
   .shop-bos {
@@ -608,8 +615,8 @@ const handleMouseMove = (e: MouseEvent) => {
             position: absolute;
             width: 200px; /* 容器宽度的一半 */
             height: 200px; /* 容器高度的一半 */
-            background-color: rgba(255, 255, 255, 0.3);
-            border: 1px solid #ccc;
+            // background-color: rgba(255, 255, 255, 0.3);
+            // border: 1px solid #ccc;
             pointer-events: none;
             z-index: 5;
           }

src/views/login.vue

@@ -1,68 +1,71 @@
 <template>
   <div class="login">
-    <img @click="onPath('/')" class="head" src="@/assets/images/head.png" alt="" />
-    <div class="login-info flex-row-between">
-      <div></div>
-      <div class="login-bos">
-        <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
-          <div class="login-type flex-row-between">
-            <div :class="type == 1 ? 'hig' : ''" @click="onType(1)">账户登录</div>
-            <div class="border"></div>
-            <div :class="type == 2 ? 'hig' : ''" @click="onType(2)">验证码登录</div>
-          </div>
-          <template v-if="type == 1">
-            <el-form-item prop="username">
-              <el-input class="login-input" v-model="loginForm.username" placeholder="员工编号/手机号码">
-                <template #prefix>
-                  <el-icon><User /></el-icon>
-                </template>
-              </el-input>
+    <div>
+      <img @click="onPath('/')" class="head" src="@/assets/images/head.png" alt="" />
+      <div class="login-info flex-row-between">
+        <div></div>
+        <div class="login-bos">
+          <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
+            <div class="login-type flex-row-between">
+              <div :class="type == 1 ? 'hig' : ''" @click="onType(1)">账户登录</div>
+              <div class="border"></div>
+              <div :class="type == 2 ? 'hig' : ''" @click="onType(2)">验证码登录</div>
+            </div>
+            <template v-if="type == 1">
+              <el-form-item prop="username">
+                <el-input class="login-input" v-model="loginForm.username" placeholder="员工编号/手机号码">
+                  <template #prefix>
+                    <el-icon><User /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input class="login-input" type="password" v-model="loginForm.password" placeholder="输入登录密码" @keyup.enter="handleLogin">
+                  <template #prefix>
+                    <el-icon><Lock /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </template>
+            <template v-else>
+              <el-form-item prop="mobile">
+                <el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
+                  <template #prefix>
+                    <el-icon><Iphone /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="smsCode">
+                <el-input :maxlength="6" class="login-input" v-model="loginForm.smsCode" placeholder="验证码">
+                  <template #prefix>
+                    <el-icon><Message /></el-icon>
+                  </template>
+                  <template #suffix>
+                    <span @click="sendSmsCode" :class="['code', countdown > 0 ? 'disabled' : '']">
+                      {{ codeText }}
+                    </span>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </template>
+            <el-form-item>
+              <el-button class="login-btn" type="primary" :loading="loading" @click.prevent="handleLogin">
+                <span v-if="!loading">登录</span>
+                <span v-else>登录中...</span>
+              </el-button>
             </el-form-item>
-            <el-form-item prop="password">
-              <el-input class="login-input" type="password" v-model="loginForm.password" placeholder="输入登录密码" @keyup.enter="handleLogin">
-                <template #prefix>
-                  <el-icon><Lock /></el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
-          </template>
-          <template v-else>
-            <el-form-item prop="mobile">
-              <el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
-                <template #prefix>
-                  <el-icon><Iphone /></el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="smsCode">
-              <el-input :maxlength="6" class="login-input" v-model="loginForm.smsCode" placeholder="验证码">
-                <template #prefix>
-                  <el-icon><Message /></el-icon>
-                </template>
-                <template #suffix>
-                  <span @click="sendSmsCode" :class="['code', countdown > 0 ? 'disabled' : '']">
-                    {{ codeText }}
-                  </span>
-                </template>
-              </el-input>
-            </el-form-item>
-          </template>
-          <el-form-item>
-            <el-button class="login-btn" type="primary" :loading="loading" @click.prevent="handleLogin">
-              <span v-if="!loading">登录</span>
-              <span v-else>登录中...</span>
-            </el-button>
-          </el-form-item>
-          <div class="login-text flex-row-between">
-            <div @click="handleForgetPassword">忘记密码?</div>
-            <div class="border"></div>
-            <div @click="onPath('/breg')">企业注册</div>
-            <div @click="onPath('/reg')">个人注册</div>
-            <!-- <router-link to="/register" class="register-link">新用户注册</router-link> -->
-          </div>
-        </el-form>
+            <div class="login-text flex-row-between">
+              <div @click="handleForgetPassword">忘记密码?</div>
+              <div class="border"></div>
+              <div @click="onPath('/breg')">企业注册</div>
+              <div @click="onPath('/reg')">个人注册</div>
+              <!-- <router-link to="/register" class="register-link">新用户注册</router-link> -->
+            </div>
+          </el-form>
+        </div>
       </div>
     </div>
+
     <div class="login-foot flex-column-between">
       <div class="font-bos flex-row-center">
         <div>客户管理</div>
@@ -287,11 +290,14 @@ onMounted(() => {
     padding: 0 5%;
 
     .login-bos {
-      width: 520px;
+      width: 420px;
       height: 420px;
       background: #ffffff;
       border-radius: 30px 30px 30px 30px;
-      padding: 40px 85px 0 85px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
 
       :deep(.el-form-item) {
         margin-bottom: 18px;
@@ -303,7 +309,7 @@ onMounted(() => {
 
       .login-type {
         font-weight: 600;
-        font-size: 22px;
+        font-size: 20px;
         color: #101828;
         padding: 0 67px;
         margin-bottom: 40px;
@@ -320,8 +326,8 @@ onMounted(() => {
         }
       }
       .login-input {
-        width: 350px;
-        height: 50px;
+        width: 100%;
+        height: 42px;
         font-size: 16px;
         .code {
           font-size: 14px;
@@ -340,8 +346,8 @@ onMounted(() => {
         color: #9ca3af;
       }
       .login-btn {
-        width: 350px;
-        height: 50px;
+        width: 100%;
+        height: 42px;
         margin-top: 20px;
         font-size: 16px;
         background-color: #c8102e;

src/views/search/index.vue

@@ -487,6 +487,16 @@ onMounted(() => {
       padding: 20px;
       cursor: pointer;
       border-radius: 5px;
+      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);
+        .itemName {
+          color: #e7000b !important;
+        }
+      }
       .data-img {
         width: 100%;
         aspect-ratio: 1;

src/views/search/special.vue

@@ -292,6 +292,16 @@ onMounted(() => {
       padding: 20px;
       cursor: pointer;
       border-radius: 5px;
+      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);
+        .itemName {
+          color: #e7000b !important;
+        }
+      }
       .data-img {
         width: 100%;
         aspect-ratio: 1;