fix: 修改商品规格列表样式

boyang
1 parent 762d3341
Showing 1 changed file with 124 additions and 13 deletions
components/MobileProductDetail.vue
@@ -78,6 +78,7 @@
       </v-col>
     </v-row>
     <div
+      ref="ticketDiv"
       v-if="info.ticketTypes?.length"
       class="py-0 mx-4 rounded-lg tw-flex tw-flex-wrap tw-justify-around"
     >
@@ -102,16 +103,15 @@
       </v-sheet> -->
       <v-table
         density="comfortable"
+        style="width: 100%"
         class="table1 tw-mt-[0px] tw-overflow-x-auto"
         v-if="info.ticketTypes?.length"
       >
         <thead>
           <tr class="bg-grey-lighten-3">
+            <th class="text-left headerBorder text-grey-darken-1">Name/Code</th>
             <th class="text-left headerBorder text-grey-darken-1">
-              Product Name / Code
-            </th>
-            <th class="text-left headerBorder text-grey-darken-1">
-              Specification and model
+              Specification
             </th>
             <th
               v-if="info.priceShow !== undefined && info.priceShow"
@@ -119,7 +119,7 @@
             >
               Price
             </th>
-            <th class="text-left headerBorder text-grey-darken-1">Actions</th>
+            <!-- <th class="text-left headerBorder text-grey-darken-1">Actions</th> -->
           </tr>
         </thead>
         <tbody>
@@ -134,19 +134,16 @@
             <td class="td text-grey-darken-4 font-weight-medium">
               {{ item.typeName }}
             </td>
-            <td v-if="item.priceShow" class="td">
-              {{ item.price + " " + item.priceUnit }}
-            </td>
-            <td class="td">
+            <td v-if="item.priceShow" class="td">$ {{ item.price }}</td>
+            <!-- <td class="td">
               <v-btn
                 size="small"
                 color="blue-darken-1"
                 @click="router.push('/contact')"
               >
-                <!-- Quotation Inquiry -->
                 Quote
               </v-btn>
-            </td>
+            </td> -->
           </tr>
         </tbody>
       </v-table>
@@ -155,12 +152,25 @@
       </div> -->
       <!-- <v-btn
-        size="large"
+        style="margin-top: 6px"
         color="blue-darken-1"
         @click="router.push('/contact')"
       >
         Quotation Inquiry
       </v-btn> -->
+      <!-- <div
+        v-if="showBottomButton"
+        ref="bottomButton"
+        :class="['button-container', { fixed: isFixed }]"
+      > -->
+      <v-btn
+        style="margin-top: 12px"
+        color="blue-darken-1"
+        @click="router.push('/contact')"
+      >
+        Quotation Inquiry
+      </v-btn>
+      <!-- </div> -->
     </div>
     <!-- <v-dialog v-model="dialog" activator="parent" width="auto">
           <v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
@@ -213,7 +223,7 @@
                 v-for="item in info.productAttributeList || []"
                 :key="item.name"
               >
-                <td class="td tw-w-[400px]">{{ item.name }}</td>
+                <td class="td tw-w-[350px]">{{ item.name }}</td>
                 <td class="td">{{ item.value }}</td>
               </tr>
             </tbody>
@@ -245,6 +255,88 @@ const href1 = ref(&quot;/products&quot;);
 const href2 = ref("/products");
 const routeQuery = useRouteQuery();
 const productStore = useProductListStore();
+
+// const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
+// const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
+// let isMonitoring = false; // 是否正在监控 ticketDiv
+// let isMonitoringBtn = false; // 是否正在监控 ticketDiv
+// const showBottomButton = ref(false); // 按钮是否显示
+// const isFixed = ref(false); // 按钮是否固定
+
+// const handleScroll = () => {
+//   // 检查 ticketDiv 的可见性
+//   if (ticketDiv.value) {
+//     const rect = ticketDiv.value.getBoundingClientRect();
+//     if (rect.top <= window.innerHeight && rect.bottom >= 0) {
+//       if (!isMonitoring) {
+//         console.log("5656进入监控区域，显示按钮");
+//         isMonitoring = true;
+//         showBottomButton.value = true; // 显示按钮
+//         isFixed.value = true;
+//       }
+//     } else {
+//       if (isMonitoring) {
+//         console.log("5656离开监控区域，隐藏按钮");
+//         isMonitoring = false;
+//         // showBottomButton.value = false; // 隐藏按钮
+//       }
+//     }
+//   }
+
+// // 检查按钮位置，决定是否固定
+// if (bottomButton.value) {
+//   const buttonRect = bottomButton.value.getBoundingClientRect();
+//   if (buttonRect.bottom <= window.innerHeight) {
+//     console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
+//     isFixed.value = false; // 按钮不固定
+//   } else {
+//     console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
+//     isFixed.value = true; // 按钮固定在底部
+//   }
+// }
+// };
+
+// const handleScrollBtn = () => {
+//   // 检查 ticketDiv 的可见性
+//   if (bottomButton.value) {
+//     const rect = bottomButton.value.getBoundingClientRect();
+//     if (rect.top <= window.innerHeight && rect.bottom >= 0) {
+//       if (!isMonitoringBtn) {
+//         console.log("5656进入监控区域，显示按钮1");
+//         isMonitoringBtn = true;
+//       }
+//     } else {
+//       if (isMonitoringBtn) {
+//         console.log("5656离开监控区域，隐藏按钮1");
+//         isMonitoringBtn = false;
+//         // showBottomButton.value = false; // 隐藏按钮
+//       }
+//     }
+//   }
+
+//   // // 检查按钮位置，决定是否固定
+//   // if (bottomButton.value) {
+//   //   const buttonRect = bottomButton.value.getBoundingClientRect();
+//   //   if (buttonRect.bottom <= window.innerHeight) {
+//   //     console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
+//   //     isFixed.value = false; // 按钮不固定
+//   //   } else {
+//   //     console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
+//   //     isFixed.value = true; // 按钮固定在底部
+//   //   }
+//   // }
+// };
+
+// onMounted(() => {
+//   window.addEventListener("scroll", handleScroll);
+//   window.addEventListener("scroll", handleScrollBtn);
+// });
+
+// onUnmounted(() => {
+//   window.removeEventListener("scroll", handleScroll);
+//   window.removeEventListener("scroll", handleScrollBtn);
+// });
+
 interface BreadcrumbItem {
   title: string; // 标题
   disabled: boolean; // 是否禁用
@@ -405,4 +497,23 @@ watchEffect(() =&gt; {
 .active {
   background-color: #fff;
 }
+
+// .button-container {
+//   margin-top: 6px;
+//   display: flex;
+//   justify-content: center;
+//   position: absolute;
+//   width: 100%;
+//   bottom: auto; /* 默认情况下不固定 */
+// }
+
+// .button-container.fixed {
+//   position: fixed;
+//   bottom: 16px; /* 固定在页面底部 */
+//   left: 0;
+//   z-index: 1000;
+//   background-color: rgba(255, 255, 255, 0.9);
+//   box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
+//   padding: 8px 0;
+// }
 </style>