11

src/components/navs/hor-big-one.vue

@@ -198,34 +198,29 @@
 </style>
 <style>
   /* ===============================
-   顶部导航项
+   q-btn 作为 hover 容器（关键）
 ================================ */
-  .nav-social {
+  .social-btn {
     position: relative;
-    display: inline-block;
-    padding: 0 10px;
-  }
+    /* ✅ 弹层定位基准 */
+    overflow: visible !important;
+    /* ✅ 解除 q-btn 裁剪 */
 
-  .nav-trigger {
-    font-size: 14px;
-    font-weight: 600;
-    color: #444;
-    cursor: pointer;
-  }
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
 
-  .nav-social:hover .nav-trigger {
-    color: var(--q-color-primary);
+    padding: 0 8px;
   }
 
   /* ===============================
-   弹层容器
+   弹层主体
 ================================ */
   .social-pop {
     position: absolute;
-    top: 100%;
+    top: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
-    margin-top: 12px;
 
     background: #fff;
     border-radius: 12px;
@@ -233,18 +228,21 @@
 
     opacity: 0;
     visibility: hidden;
-    transition: all 0.18s ease;
-    z-index: 1000;
+    pointer-events: none;
+
+    transition: opacity 0.15s ease;
+    z-index: 2000;
   }
 
-  /* hover 显示 */
-  .nav-social:hover .social-pop {
+  /* hover 显示（重点） */
+  .social-btn:hover .social-pop {
     opacity: 1;
     visibility: visible;
+    pointer-events: auto;
   }
 
   /* ===============================
-   箭头（真实 DOM）
+   箭头
 ================================ */
   .arrow {
     position: absolute;
@@ -252,13 +250,13 @@
     left: 50%;
     width: 14px;
     height: 14px;
+
     background: #fff;
     transform: translateX(-50%) rotate(45deg);
-    box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.08);
   }
 
   /* ===============================
-   二维码内容
+   公众号二维码
 ================================ */
   .social-qrcode {
     padding: 18px 22px 14px;
@@ -279,23 +277,17 @@
   }
 
   /* ===============================
-   小红书弹层尺寸
+   小红书弹层
 ================================ */
   .xhs-pop {
     padding: 18px 20px 16px;
   }
 
-  /* ===============================
-   二维码列表
-================================ */
   .xhs-list {
     display: flex;
     gap: 16px;
   }
 
-  /* ===============================
-   单个二维码卡片
-================================ */
   .xhs-item {
     width: 140px;
     text-align: center;
@@ -309,13 +301,19 @@
     background: #f5f5f5;
   }
 
-  /* 账号说明 */
   .xhs-tip {
     margin-top: 8px;
     font-size: 13px;
     color: #666;
   }
 
+  /* ===============================
+   防止 toolbar 被挤（兜底）
+================================ */
+  .q-toolbar {
+    flex-wrap: nowrap !important;
+  }
+
 </style>
 <template>
   <q-header reveal :style="{ background: baseData.nav.bg, color: baseData.nav.color }" class="bg-white"
@@ -348,8 +346,8 @@
           </q-menu>
         </q-btn>-->
 
-        <div class="nav-social">
-          <span class="nav-trigger">公众号</span>
+        <q-btn flat dense class="social-btn">
+          <img src="../../assets/img/wechat.png" class="btn-img" style="width:25px;height:25px;display: block;" />
           <div class="social-pop">
             <div class="arrow"></div>
             <div class="social-qrcode">
@@ -357,9 +355,9 @@
               <div class="social-tip">扫码关注公众号</div>
             </div>
           </div>
-        </div>
-        <div class="nav-social">
-          <span class="nav-trigger">小红书</span>
+        </q-btn>
+        <q-btn flat dense class="social-btn">
+          <img src="../../assets/img/xiaohongshu.png" class="btn-img" style="width:25px;height:25px;display: block;" />
           <div class="social-pop xhs-pop">
             <div class="arrow"></div>
             <div class="xhs-list">
@@ -369,7 +367,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </q-btn>
         <q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
         <template v-if="LoginUser.token">
           <q-btn-dropdown style="color: #444; font-weight: bold" class="q-ml-lg" unelevated>