canrd-main / canrud-nuxt-front · Commits

Commit 2b15a80c59fd175307025af86db87290c6e3661d

Authored by boyang
1 parent 762d3341
build: skipped

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

Inline Side-by-side
Showing 1 changed file with 124 additions and 13 deletions
components/MobileProductDetail.vue
  View file @2b15a80
... ... @@ -78,6 +78,7 @@
78 78 </v-col>
79 79 </v-row>
80 80 <div
  81 + ref="ticketDiv"
81 82 v-if="info.ticketTypes?.length"
82 83 class="py-0 mx-4 rounded-lg tw-flex tw-flex-wrap tw-justify-around"
83 84 >
... ... @@ -102,16 +103,15 @@
102 103 </v-sheet> -->
103 104 <v-table
104 105 density="comfortable"
  106 + style="width: 100%"
105 107 class="table1 tw-mt-[0px] tw-overflow-x-auto"
106 108 v-if="info.ticketTypes?.length"
107 109 >
108 110 <thead>
109 111 <tr class="bg-grey-lighten-3">
  112 + <th class="text-left headerBorder text-grey-darken-1">Name/Code</th>
110 113 <th class="text-left headerBorder text-grey-darken-1">
111   - Product Name / Code
112   - </th>
113   - <th class="text-left headerBorder text-grey-darken-1">
114   - Specification and model
  114 + Specification
115 115 </th>
116 116 <th
117 117 v-if="info.priceShow !== undefined && info.priceShow"
... ... @@ -119,7 +119,7 @@
119 119 >
120 120 Price
121 121 </th>
122   - <th class="text-left headerBorder text-grey-darken-1">Actions</th>
  122 + <!-- <th class="text-left headerBorder text-grey-darken-1">Actions</th> -->
123 123 </tr>
124 124 </thead>
125 125 <tbody>
... ... @@ -134,19 +134,16 @@
134 134 <td class="td text-grey-darken-4 font-weight-medium">
135 135 {{ item.typeName }}
136 136 </td>
137   - <td v-if="item.priceShow" class="td">
138   - {{ item.price + " " + item.priceUnit }}
139   - </td>
140   - <td class="td">
  137 + <td v-if="item.priceShow" class="td">$ {{ item.price }}</td>
  138 + <!-- <td class="td">
141 139 <v-btn
142 140 size="small"
143 141 color="blue-darken-1"
144 142 @click="router.push('/contact')"
145 143 >
146   - <!-- Quotation Inquiry -->
147 144 Quote
148 145 </v-btn>
149   - </td>
  146 + </td> -->
150 147 </tr>
151 148 </tbody>
152 149 </v-table>
... ... @@ -155,12 +152,25 @@
155 152  
156 153 </div> -->
157 154 <!-- <v-btn
158   - size="large"
  155 + style="margin-top: 6px"
159 156 color="blue-darken-1"
160 157 @click="router.push('/contact')"
161 158 >
162 159 Quotation Inquiry
163 160 </v-btn> -->
  161 + <!-- <div
  162 + v-if="showBottomButton"
  163 + ref="bottomButton"
  164 + :class="['button-container', { fixed: isFixed }]"
  165 + > -->
  166 + <v-btn
  167 + style="margin-top: 12px"
  168 + color="blue-darken-1"
  169 + @click="router.push('/contact')"
  170 + >
  171 + Quotation Inquiry
  172 + </v-btn>
  173 + <!-- </div> -->
164 174 </div>
165 175 <!-- <v-dialog v-model="dialog" activator="parent" width="auto">
166 176 <v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
... ... @@ -213,7 +223,7 @@
213 223 v-for="item in info.productAttributeList || []"
214 224 :key="item.name"
215 225 >
216   - <td class="td tw-w-[400px]">{{ item.name }}</td>
  226 + <td class="td tw-w-[350px]">{{ item.name }}</td>
217 227 <td class="td">{{ item.value }}</td>
218 228 </tr>
219 229 </tbody>
... ... @@ -245,6 +255,88 @@ const href1 = ref(&quot;/products&quot;);
245 255 const href2 = ref("/products");
246 256 const routeQuery = useRouteQuery();
247 257 const productStore = useProductListStore();
  258 +
  259 +// const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
  260 +// const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
  261 +// let isMonitoring = false; // 是否正在监控 ticketDiv
  262 +// let isMonitoringBtn = false; // 是否正在监控 ticketDiv
  263 +// const showBottomButton = ref(false); // 按钮是否显示
  264 +// const isFixed = ref(false); // 按钮是否固定
  265 +
  266 +// const handleScroll = () => {
  267 +// // 检查 ticketDiv 的可见性
  268 +// if (ticketDiv.value) {
  269 +// const rect = ticketDiv.value.getBoundingClientRect();
  270 +// if (rect.top <= window.innerHeight && rect.bottom >= 0) {
  271 +// if (!isMonitoring) {
  272 +// console.log("5656进入监控区域，显示按钮");
  273 +// isMonitoring = true;
  274 +// showBottomButton.value = true; // 显示按钮
  275 +// isFixed.value = true;
  276 +// }
  277 +// } else {
  278 +// if (isMonitoring) {
  279 +// console.log("5656离开监控区域，隐藏按钮");
  280 +// isMonitoring = false;
  281 +// // showBottomButton.value = false; // 隐藏按钮
  282 +// }
  283 +// }
  284 +// }
  285 +
  286 +// // 检查按钮位置，决定是否固定
  287 +// if (bottomButton.value) {
  288 +// const buttonRect = bottomButton.value.getBoundingClientRect();
  289 +// if (buttonRect.bottom <= window.innerHeight) {
  290 +// console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
  291 +// isFixed.value = false; // 按钮不固定
  292 +// } else {
  293 +// console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
  294 +// isFixed.value = true; // 按钮固定在底部
  295 +// }
  296 +// }
  297 +// };
  298 +
  299 +// const handleScrollBtn = () => {
  300 +// // 检查 ticketDiv 的可见性
  301 +// if (bottomButton.value) {
  302 +// const rect = bottomButton.value.getBoundingClientRect();
  303 +// if (rect.top <= window.innerHeight && rect.bottom >= 0) {
  304 +// if (!isMonitoringBtn) {
  305 +// console.log("5656进入监控区域，显示按钮1");
  306 +// isMonitoringBtn = true;
  307 +// }
  308 +// } else {
  309 +// if (isMonitoringBtn) {
  310 +// console.log("5656离开监控区域，隐藏按钮1");
  311 +// isMonitoringBtn = false;
  312 +// // showBottomButton.value = false; // 隐藏按钮
  313 +// }
  314 +// }
  315 +// }
  316 +
  317 +// // // 检查按钮位置，决定是否固定
  318 +// // if (bottomButton.value) {
  319 +// // const buttonRect = bottomButton.value.getBoundingClientRect();
  320 +// // if (buttonRect.bottom <= window.innerHeight) {
  321 +// // console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
  322 +// // isFixed.value = false; // 按钮不固定
  323 +// // } else {
  324 +// // console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
  325 +// // isFixed.value = true; // 按钮固定在底部
  326 +// // }
  327 +// // }
  328 +// };
  329 +
  330 +// onMounted(() => {
  331 +// window.addEventListener("scroll", handleScroll);
  332 +// window.addEventListener("scroll", handleScrollBtn);
  333 +// });
  334 +
  335 +// onUnmounted(() => {
  336 +// window.removeEventListener("scroll", handleScroll);
  337 +// window.removeEventListener("scroll", handleScrollBtn);
  338 +// });
  339 +
248 340 interface BreadcrumbItem {
249 341 title: string; // 标题
250 342 disabled: boolean; // 是否禁用
... ... @@ -405,4 +497,23 @@ watchEffect(() =&gt; {
405 497 .active {
406 498 background-color: #fff;
407 499 }
  500 +
  501 +// .button-container {
  502 +// margin-top: 6px;
  503 +// display: flex;
  504 +// justify-content: center;
  505 +// position: absolute;
  506 +// width: 100%;
  507 +// bottom: auto; /* 默认情况下不固定 */
  508 +// }
  509 +
  510 +// .button-container.fixed {
  511 +// position: fixed;
  512 +// bottom: 16px; /* 固定在页面底部 */
  513 +// left: 0;
  514 +// z-index: 1000;
  515 +// background-color: rgba(255, 255, 255, 0.9);
  516 +// box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  517 +// padding: 8px 0;
  518 +// }
408 519 </style>
... ...