canrd-main / canrud-nuxt-front · Commits

Commit 13cb0265dd1910c51b31448f7322892657bf46ed

Authored by boyang
1 parent d8d3935d
build: skipped

fix: prod2-38/39

Inline Side-by-side
Showing 6 changed files with 336 additions and 210 deletions
components/MobileProductDetail.vue
  View file @13cb026
... ... @@ -271,13 +271,13 @@
271 271 selected-class="active"
272 272 style="margin-bottom: 20px"
273 273 >
274   - <v-tab :value="1">Related Products</v-tab>
275   - <v-tab :value="2">Best Sellers</v-tab>
  274 + <v-tab :value="1">Best Sellers</v-tab>
  275 + <v-tab :value="2">Related Products</v-tab>
276 276 <!-- <v-tab :value="3">商品百科</v-tab> -->
277 277 </v-tabs>
278 278 <v-window v-model="tabProduct">
279 279 <v-window-item key="1" :value="1">
280   - <div class="tw-text-center" v-if="loading && isMobile()">
  280 + <div class="tw-text-center" v-if="hotLoading && isMobile()">
281 281 <v-progress-circular
282 282 color="blue-lighten-2"
283 283 indeterminate
... ... @@ -286,9 +286,9 @@
286 286 ></v-progress-circular>
287 287 </div>
288 288 <v-item-group multiple v-if="isMobile()">
289   - <v-row v-if="!loading">
  289 + <v-row v-if="!hotLoading">
290 290 <v-col
291   - v-for="(item, i) in recommendImages"
  291 + v-for="(item, i) in recommendImagesHot"
292 292 :key="i"
293 293 cols="6"
294 294 lg="3"
... ... @@ -326,10 +326,10 @@
326 326 <v-col>
327 327 <v-pagination
328 328 :size="isMobile() ? 'small' : 'default'"
329   - v-if="total"
330   - v-model="currentIndex"
331   - @update:modelValue="toggleRowMobile"
332   - :length="length"
  329 + v-if="hotTotal"
  330 + v-model="currentIndexHot"
  331 + @update:modelValue="toggleRowMobileHot"
  332 + :length="hotLength"
333 333 rounded="0"
334 334 class="tw-float-right tw-mt-[32px]"
335 335 total-visible="5"
... ... @@ -338,7 +338,7 @@
338 338 </v-window-item>
339 339 <!-- best sellers -->
340 340 <v-window-item key="2" :value="2">
341   - <div class="tw-text-center" v-if="hotLoading && isMobile()">
  341 + <div class="tw-text-center" v-if="loading && isMobile()">
342 342 <v-progress-circular
343 343 color="blue-lighten-2"
344 344 indeterminate
... ... @@ -347,9 +347,9 @@
347 347 ></v-progress-circular>
348 348 </div>
349 349 <v-item-group multiple v-if="isMobile()">
350   - <v-row v-if="!hotLoading">
  350 + <v-row v-if="!loading">
351 351 <v-col
352   - v-for="(item, i) in recommendImagesHot"
  352 + v-for="(item, i) in recommendImages"
353 353 :key="i"
354 354 cols="6"
355 355 lg="3"
... ... @@ -387,10 +387,10 @@
387 387 <v-col>
388 388 <v-pagination
389 389 :size="isMobile() ? 'small' : 'default'"
390   - v-if="hotTotal"
391   - v-model="currentIndexHot"
392   - @update:modelValue="toggleRowMobileHot"
393   - :length="hotLength"
  390 + v-if="total"
  391 + v-model="currentIndex"
  392 + @update:modelValue="toggleRowMobile"
  393 + :length="length"
394 394 rounded="0"
395 395 class="tw-float-right tw-mt-[32px]"
396 396 total-visible="5"
... ...
components/ProductDetail.vue
  View file @13cb026
... ... @@ -175,29 +175,29 @@
175 175 </v-dialog> -->
176 176 </v-col>
177 177 </v-row>
178   -
179 178 <v-tabs
180 179 class="tabs"
181   - v-model="tabRecom"
  180 + v-model="tabRecomHot"
  181 + style="margin-top: 25px"
182 182 color="white"
183 183 bg-color="#eeeeee"
184 184 slider-color="blue-lighten-1"
185 185 selected-class="active"
186   - v-if="recommendImages[0] !== null"
  186 + v-if="recommendImagesHot[0] !== null"
187 187 >
188   - <v-tab :value="1">Product Recommendations</v-tab>
  188 + <v-tab :value="1">Best Sellers</v-tab>
189 189 <!-- <v-tab :value="3">商品百科</v-tab> -->
190 190 </v-tabs>
191   - <div id="image-container" v-if="recommendImages[0] !== null">
  191 + <div id="image-container" v-if="recommendImagesHot[0] !== null">
192 192 <div class="recommend-left-box">
193 193 <v-img
194 194 src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
195 195 alt="往左移"
196 196 class="recommend-img-left"
197   - @click="toggleRow"
  197 + @click="toggleRowLeft"
198 198 />
199 199 </div>
200   - <div v-if="currentIndex === 0" class="image-row" id="row1">
  200 + <div class="image-row" id="row1">
201 201 <!-- <img
202 202 v-for="(imageObj, index) in recommendImages.slice(0, 5)"
203 203 :key="'row1-' + index"
... ... @@ -206,7 +206,7 @@
206 206 style="margin: 0 5px; width: 200px; height: 200px"
207 207 /> -->
208 208 <div
209   - v-for="(imageObj, index) in recommendImages.slice(0, 5)"
  209 + v-for="(imageObj, index) in recommendImagesHot"
210 210 :key="'row1-' + index"
211 211 class="imageTotal"
212 212 >
... ... @@ -223,46 +223,28 @@
223 223 <div v-else style="width: 200px; height: 200px"></div>
224 224 </div>
225 225 </div>
226   - <div v-else class="image-row" id="row2">
227   - <!-- <img
228   - v-for="(imageObj, index) in recommendImages.slice(5, 10)"
229   - :key="'row2-' + index"
230   - :src="imageObj[0]?.url"
231   - :alt="'Image ' + (index + 6)"
232   - style="margin: 0 5px; width: 200px; height: 200px"
233   - /> -->
234   - <div
235   - v-for="(imageObj, index) in recommendImages.slice(5, 10)"
236   - :key="'row2-' + index"
237   - class="imageTotal"
238   - >
239   - <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
240   - <img
241   - :src="imageObj[0]?.url"
242   - :alt="'Image ' + (index + 6)"
243   - class="item-imgHot"
244   - />
245   - <span class="image-name">
246   - {{ imageObj[0]?.name }}
247   - </span>
248   - </a>
249   - <div
250   - v-else
251   - style="width: 200px; height: 200px; margin-right: 10px"
252   - ></div>
253   - </div>
254   - </div>
255 226 <div class="recommend-right-box">
256 227 <v-img
257 228 src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
258 229 alt="往右移"
259 230 class="recommend-img-right"
260   - @click="toggleRow"
  231 + @click="toggleRowRight"
261 232 />
262 233 </div>
263 234 </div>
264   - <div style="display: flex">
265   - <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px">
  235 +
  236 + <div style="display: flex; width: 100%; box-sizing: border-box">
  237 + <div
  238 + class="tw-pb-[64px]"
  239 + style="
  240 + width: 70%;
  241 + margin-right: 10px;
  242 + display: flex;
  243 + flex-direction: column;
  244 + flex-wrap: wrap;
  245 + overflow: auto;
  246 + "
  247 + >
266 248 <v-tabs
267 249 class="tabs"
268 250 v-model="tab"
... ... @@ -270,6 +252,7 @@
270 252 bg-color="#eeeeee"
271 253 slider-color="blue-lighten-1"
272 254 selected-class="active"
  255 + style="width: 100%"
273 256 >
274 257 <v-tab :value="1">Product Details</v-tab>
275 258 <v-tab :value="2">Specification</v-tab>
... ... @@ -278,18 +261,63 @@
278 261 <v-window
279 262 v-model="tab"
280 263 class="tw-p-[24px]"
281   - style="min-height: 500px; height: auto"
  264 + style="
  265 + min-height: 500px;
  266 + height: auto;
  267 + overflow-wrap: break-word;
  268 + word-wrap: break-word;
  269 + white-space: pre-wrap;
  270 + "
282 271 >
283 272 <v-window-item key="1" :value="1">
  273 + <!-- 修改位置 1: 使用 clearSpanStyle 方法清理 info.advantage -->
284 274 <div v-if="info.advantage" class="tw-mb-[24px]">
285 275 <div class="text-h6">Advantage</div>
286 276 <v-divider class="tw-mb-[12px]"></v-divider>
287   - <div v-html="info.advantage"></div>
  277 + <div v-html="clearSpanStyle(info.advantage)"></div>
288 278 </div>
  279 + <!-- 修改位置 2: 使用 clearSpanStyle 方法清理 info.physicalproperty -->
289 280 <div v-if="info.physicalproperty" class="tw-mb-[24px]">
290 281 <div class="text-h6">Physical Property</div>
  282 + <v-divider class="tw-mb-[12px] html-content"></v-divider>
  283 + <div v-html="clearSpanStyle(info.physicalproperty)"></div>
  284 + </div>
  285 + <!-- 修改位置 3: 使用 clearSpanStyle 方法清理 info.storage -->
  286 + <div v-if="info.storage" class="tw-mb-[24px]">
  287 + <div class="text-h6">Storage</div>
  288 + <v-divider class="tw-mb-[12px]"></v-divider>
  289 + <div v-html="clearSpanStyle(info.storage)"></div>
  290 + </div>
  291 + <!-- 修改位置 4: 使用 clearSpanStyle 方法清理 info.introduction -->
  292 + <div v-if="info.introduction" class="tw-mb-[24px]">
  293 + <div class="text-h6">Introduction</div>
  294 + <v-divider class="tw-mb-[12px]"></v-divider>
  295 + <div v-html="clearSpanStyle(info.introduction)"></div>
  296 + </div>
  297 + <!-- 修改位置 5: 使用 clearSpanStyle 方法清理 info.description -->
  298 + <div v-if="info.description" class="tw-mb-[24px]">
  299 + <div class="text-h6">Description</div>
  300 + <v-divider class="tw-mb-[12px]"></v-divider>
  301 + <div v-html="clearSpanStyle(info.description)"></div>
  302 + </div>
  303 + </v-window-item>
  304 + <!-- <div v-if="info.advantage" class="tw-mb-[24px]">
  305 + <div class="text-h6">Advantage</div>
291 306 <v-divider class="tw-mb-[12px]"></v-divider>
292   - <div v-html="info.physicalproperty"></div>
  307 + <div v-html="info.advantage"></div>
  308 + </div>
  309 + <div v-if="info.physicalproperty" class="tw-mb-[24px]">
  310 + <div class="text-h6">Physical Property</div>
  311 + <v-divider class="tw-mb-[12px] html-content"></v-divider>
  312 + <div
  313 + v-html="info.physicalproperty"
  314 + style="
  315 + overflow-wrap: break-word;
  316 + word-wrap: break-word;
  317 + white-space: pre-wrap;
  318 + line-height: 1.5;
  319 + "
  320 + ></div>
293 321 </div>
294 322 <div v-if="info.storage" class="tw-mb-[24px]">
295 323 <div class="text-h6">Storage</div>
... ... @@ -306,7 +334,7 @@
306 334 <v-divider class="tw-mb-[12px]"></v-divider>
307 335 <div v-html="info.description"></div>
308 336 </div>
309   - </v-window-item>
  337 + </v-window-item> -->
310 338 <v-window-item key="2" :value="2">
311 339 <v-table density="compact" class="table2">
312 340 <tbody>
... ... @@ -356,27 +384,26 @@
356 384 </div>
357 385 <v-tabs
358 386 class="tabs"
359   - v-model="tabRecomHot"
360   - style="margin-top: 25px"
  387 + v-model="tabRecom"
361 388 color="white"
362 389 bg-color="#eeeeee"
363 390 slider-color="blue-lighten-1"
364 391 selected-class="active"
365   - v-if="recommendImagesHot[0] !== null"
  392 + v-if="recommendImages[0] !== null"
366 393 >
367   - <v-tab :value="1">Best Sellers</v-tab>
  394 + <v-tab :value="1">Related Products</v-tab>
368 395 <!-- <v-tab :value="3">商品百科</v-tab> -->
369 396 </v-tabs>
370   - <div id="image-container" v-if="recommendImagesHot[0] !== null">
  397 + <div id="image-container" v-if="recommendImages[0] !== null">
371 398 <div class="recommend-left-box">
372 399 <v-img
373 400 src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
374 401 alt="往左移"
375 402 class="recommend-img-left"
376   - @click="toggleRowLeft"
  403 + @click="toggleRow"
377 404 />
378 405 </div>
379   - <div class="image-row" id="row1">
  406 + <div v-if="currentIndex === 0" class="image-row" id="row1">
380 407 <!-- <img
381 408 v-for="(imageObj, index) in recommendImages.slice(0, 5)"
382 409 :key="'row1-' + index"
... ... @@ -385,7 +412,7 @@
385 412 style="margin: 0 5px; width: 200px; height: 200px"
386 413 /> -->
387 414 <div
388   - v-for="(imageObj, index) in recommendImagesHot"
  415 + v-for="(imageObj, index) in recommendImages.slice(0, 5)"
389 416 :key="'row1-' + index"
390 417 class="imageTotal"
391 418 >
... ... @@ -402,15 +429,45 @@
402 429 <div v-else style="width: 200px; height: 200px"></div>
403 430 </div>
404 431 </div>
  432 + <div v-else class="image-row" id="row2">
  433 + <!-- <img
  434 + v-for="(imageObj, index) in recommendImages.slice(5, 10)"
  435 + :key="'row2-' + index"
  436 + :src="imageObj[0]?.url"
  437 + :alt="'Image ' + (index + 6)"
  438 + style="margin: 0 5px; width: 200px; height: 200px"
  439 + /> -->
  440 + <div
  441 + v-for="(imageObj, index) in recommendImages.slice(5, 10)"
  442 + :key="'row2-' + index"
  443 + class="imageTotal"
  444 + >
  445 + <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
  446 + <img
  447 + :src="imageObj[0]?.url"
  448 + :alt="'Image ' + (index + 6)"
  449 + class="item-imgHot"
  450 + />
  451 + <span class="image-name">
  452 + {{ imageObj[0]?.name }}
  453 + </span>
  454 + </a>
  455 + <div
  456 + v-else
  457 + style="width: 200px; height: 200px; margin-right: 10px"
  458 + ></div>
  459 + </div>
  460 + </div>
405 461 <div class="recommend-right-box">
406 462 <v-img
407 463 src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
408 464 alt="往右移"
409 465 class="recommend-img-right"
410   - @click="toggleRowRight"
  466 + @click="toggleRow"
411 467 />
412 468 </div>
413 469 </div>
  470 +
414 471 <div class="social-share-container">
415 472 <SocialShare
416 473 network="facebook"
... ... @@ -562,6 +619,30 @@ const loadHotProducts = async () =&gt; {
562 619 return ree;
563 620 });
564 621 };
  622 +const clearSpanStyle = (htmlContent) => {
  623 + if (!htmlContent) return ""; // 检查是否为空
  624 + // 创建一个 DOM 解析器
  625 + const parser = new DOMParser();
  626 + const doc = parser.parseFromString(htmlContent, "text/html");
  627 +
  628 + // 清理 span 的 style 属性
  629 + const spans = doc.querySelectorAll("span");
  630 + spans.forEach((span) => {
  631 + span.removeAttribute("style"); // 清空 style 属性
  632 + });
  633 +
  634 + // 修改 img 的 style 属性，追加 width: 100%
  635 + const imgs = doc.querySelectorAll("img");
  636 + imgs.forEach((img) => {
  637 + const style = img.getAttribute("style") || ""; // 获取现有 style
  638 + if (!style.includes("width: 100%")) {
  639 + img.setAttribute("style", `${style} width: 100%;`.trim()); // 添加 width: 100%
  640 + }
  641 + });
  642 +
  643 + // 返回处理后的 HTML
  644 + return doc.body.innerHTML;
  645 +};
565 646 const toggleRowLeft = () => {
566 647 if (currentIndexHot.value !== 1) {
567 648 currentIndexHot.value--;
... ... @@ -584,6 +665,7 @@ watch(currentIndexHot, (newIndex) =&gt; {
584 665 await loadHotProducts(); // Load hot products the first time
585 666  
586 667 watchEffect(() => {
  668 + console.log(info, "5656info");
587 669 currentUrl.value = "https://www.canrud.com/products/detail/" + info.id;
588 670 if (info?.productCrumbsVO?.category1 && productStore.keyword) {
589 671 items.value[1].title = info.productCrumbsVO.category1;
... ... @@ -783,7 +865,7 @@ th {
783 865 align-items: center;
784 866 justify-content: center;
785 867 height: 320px;
786   - margin: 10px auto 100px;
  868 + margin: 10px auto 130px;
787 869 width: 80%;
788 870 }
789 871 }
... ... @@ -793,7 +875,7 @@ th {
793 875 align-items: center;
794 876 justify-content: center;
795 877 height: 320px;
796   - margin: 10px auto 0px;
  878 + margin: 10px auto 60px;
797 879 width: 80%;
798 880 padding: 0;
799 881 }
... ... @@ -804,7 +886,7 @@ th {
804 886 align-items: center;
805 887 justify-content: center;
806 888 height: 320px;
807   - margin: 10px auto 0px;
  889 + margin: 10px auto 60px;
808 890 width: 80%;
809 891 padding: 0;
810 892 }
... ...
deploy/prod2.sh
  View file @13cb026
1 1 #!/bin/bash
2 2 # 变量定义
3   -LAST_TAG="1.0.37"
4   -TAG="1.0.38"
  3 +LAST_TAG="1.0.38"
  4 +TAG="1.0.39"
5 5 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
6 6 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
7 7 IMAGE_NAME="canrud-outside-front"
... ...
pages/index.vue
  View file @13cb026
... ... @@ -31,63 +31,6 @@
31 31 </v-carousel-item>
32 32 </v-carousel>
33 33 </v-rows>
34   - <!-- 能源材料 -->
35   - <div class="tw-py-8 py-sm-16">
36   - <v-container>
37   - <MainTitleListOdd
38   - title="Material Reagents"
39   - :list="materials"
40   - desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
41   - />
42   - </v-container>
43   - </div>
44   -
45   - <!-- 设备 -->
46   - <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
47   - <v-container>
48   - <MainTitleList
49   - title="Lab Device"
50   - listType="equipment"
51   - :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
52   - desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
53   - href="/equipment"
54   - />
55   - </v-container>
56   - </div>
57   -
58   - <!-- Customized Battery -->
59   - <div class="tw-py-8 py-sm-16">
60   - <v-container>
61   - <MainTitleList
62   - :title="'Customized Battery'"
63   - :list="batteries"
64   - href="/customize"
65   - desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
66   - />
67   - </v-container>
68   - </div>
69   - <!-- Testing -->
70   - <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
71   - <v-container>
72   - <MainTitleList
73   - title="Testing"
74   - :list="tests"
75   - href="/test"
76   - desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
77   - />
78   - </v-container>
79   - </div>
80   - <!-- Pack -->
81   - <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
82   - <v-container>
83   - <MainTitleList
84   - title="Pack"
85   - href="/pack"
86   - :list="packs"
87   - desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
88   - />
89   - </v-container>
90   - </div>
91 34 <v-tabs
92 35 class="tabs"
93 36 v-model="tabRecom"
... ... @@ -179,7 +122,6 @@
179 122 >
180 123 <div v-if="item !== null">
181 124 <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
182   - <!-- 设置 eager 属性，确保图片直接加载 -->
183 125 <v-img
184 126 :src="item[0].url"
185 127 :alt="item[0].name"
... ... @@ -193,12 +135,126 @@
193 135 </div>
194 136 </v-col>
195 137 </v-row>
196   - <!-- <div
197   - v-if="!hotTotal"
198   - class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
  138 + </v-item-group>
  139 + <v-row v-if="isMobile()">
  140 + <v-col>
  141 + <v-pagination
  142 + :size="isMobile() ? 'small' : 'default'"
  143 + v-if="hotTotal"
  144 + v-model="currentIndex"
  145 + @update:modelValue="toggleRowMobile"
  146 + :length="hotLength"
  147 + rounded="0"
  148 + class="tw-float-right tw-mt-[32px]"
  149 + total-visible="5"
  150 + ></v-pagination></v-col
  151 + ></v-row>
  152 + </div>
  153 + <!-- 能源材料 -->
  154 + <div class="tw-py-8 py-sm-16">
  155 + <v-container>
  156 + <MainTitleListOdd
  157 + title="Material Reagents"
  158 + :list="materials"
  159 + desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
  160 + />
  161 + </v-container>
  162 + </div>
  163 +
  164 + <!-- 设备 -->
  165 + <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
  166 + <v-container>
  167 + <MainTitleList
  168 + title="Lab Device"
  169 + listType="equipment"
  170 + :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
  171 + desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
  172 + href="/equipment"
  173 + />
  174 + </v-container>
  175 + </div>
  176 +
  177 + <!-- Customized Battery -->
  178 + <div class="tw-py-8 py-sm-16">
  179 + <v-container>
  180 + <MainTitleList
  181 + :title="'Customized Battery'"
  182 + :list="batteries"
  183 + href="/customize"
  184 + desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
  185 + />
  186 + </v-container>
  187 + </div>
  188 + <!-- Testing -->
  189 + <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
  190 + <v-container>
  191 + <MainTitleList
  192 + title="Testing"
  193 + :list="tests"
  194 + href="/test"
  195 + desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
  196 + />
  197 + </v-container>
  198 + </div>
  199 + <!-- Pack -->
  200 + <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
  201 + <v-container>
  202 + <MainTitleList
  203 + title="Pack"
  204 + href="/pack"
  205 + :list="packs"
  206 + desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
  207 + />
  208 + </v-container>
  209 + </div>
  210 + <div style="padding-left: 16px; padding-right: 16px; padding-bottom: 30px">
  211 + <v-tabs
  212 + class="tabs2"
  213 + ref="tabs2"
  214 + v-model="tabRecom"
  215 + style="margin-top: 25px; margin-bottom: 20px; width: 100%"
  216 + color="white"
  217 + bg-color="#eeeeee"
  218 + slider-color="blue-lighten-1"
  219 + selected-class="active"
  220 + v-if="isMobile()"
  221 + >
  222 + <v-tab :value="1">Best Sellers</v-tab>
  223 + <!-- <v-tab :value="3">商品百科</v-tab> -->
  224 + </v-tabs>
  225 + <div class="tw-text-center" v-if="hotLoading && isMobile()">
  226 + <v-progress-circular
  227 + color="blue-lighten-2"
  228 + indeterminate
  229 + size="64"
  230 + class="tw-m-auto"
  231 + ></v-progress-circular>
  232 + </div>
  233 + <v-item-group multiple v-if="isMobile()">
  234 + <v-row v-if="!hotLoading">
  235 + <v-col
  236 + v-for="(item, i) in recommendImages"
  237 + :key="i"
  238 + cols="6"
  239 + lg="3"
  240 + md="4"
  241 + sm="6"
199 242 >
200   - no data
201   - </div> -->
  243 + <div v-if="item !== null">
  244 + <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
  245 + <v-img
  246 + :src="item[0].url"
  247 + :alt="item[0].name"
  248 + eager
  249 + class="d-block"
  250 + />
  251 + <v-card-text class="tw-text-left font-weight-medium title">
  252 + <h4>{{ item[0].name }}</h4>
  253 + </v-card-text>
  254 + </v-card>
  255 + </div>
  256 + </v-col>
  257 + </v-row>
202 258 </v-item-group>
203 259 <v-row v-if="isMobile()">
204 260 <v-col>
... ... @@ -237,7 +293,6 @@ const loadHotProducts = async () =&gt; {
237 293 pageSize.value = 4;
238 294 }
239 295 hotLoading.value = true;
240   -
241 296 let { data: hotProducts } = await useAsyncData(
242 297 "hotProducts",
243 298 () =>
... ... @@ -463,7 +518,7 @@ const hotLength = computed(() =&gt;
463 518 .tabs {
464 519 border-bottom: 2px solid #1f88e5;
465 520 margin: 10px auto 0px;
466   - width: 95%;
  521 + width: 80%;
467 522 }
468 523 }
469 524  
... ...
pages/products/detail/[id]/index.vue
  View file @13cb026
... ... @@ -67,5 +67,6 @@ newData.productimageliststore = newData?.productimageliststore?.map(
67 67 url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
68 68 })
69 69 );
  70 +
70 71 info.value = { ...newData };
71 72 </script>
... ...
pages/products/index.vue
  View file @13cb026
... ... @@ -3,73 +3,6 @@
3 3 <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
4 4 <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
5 5 <v-container class="">
6   - <div class="tw-text-center" v-if="loading">
7   - <v-progress-circular
8   - color="blue-lighten-2"
9   - indeterminate
10   - size="64"
11   - class="tw-m-auto"
12   - ></v-progress-circular>
13   - </div>
14   - <v-item-group multiple>
15   - <v-row v-if="!loading">
16   - <v-col
17   - v-for="(item, i) in productStore.list"
18   - :key="i"
19   - cols="6"
20   - lg="3"
21   - md="4"
22   - sm="6"
23   - >
24   - <v-hover v-slot="{ isHovering, props }" open-delay="200">
25   - <v-card
26   - :elevation="isHovering ? 16 : 2"
27   - :class="{ 'on-hover': isHovering }"
28   - class="mx-auto"
29   - v-bind="props"
30   - :to="`/products/detail/${item.id}`"
31   - >
32   - <v-img :src="item.imgList[0].url" :alt="item.name">
33   - <!-- <v-expand-transition>
34   - <div
35   - v-if="isHovering"
36   - class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
37   - style="height: 100%"
38   - >
39   - 产品描述描述描述描述描述描述描述描述
40   - </div>
41   - </v-expand-transition> -->
42   - </v-img>
43   - <v-card-text class="tw-text-left font-weight-medium title">
44   - <h3 style="color: red" v-if="item.price">
45   - ${{ item.price }}
46   - </h3>
47   - <h4>{{ item.name }}</h4>
48   - </v-card-text>
49   - </v-card>
50   - </v-hover>
51   - </v-col>
52   - </v-row>
53   - <div
54   - v-if="!productStore.total && !loading"
55   - class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
56   - >
57   - no data
58   - </div>
59   - </v-item-group>
60   - <v-row>
61   - <v-col>
62   - <v-pagination
63   - :size="isMobile() ? 'small' : 'default'"
64   - v-if="productStore.total"
65   - v-model="productStore.pageNo"
66   - @update:modelValue="productStore.updatePageNo"
67   - :length="length"
68   - rounded="0"
69   - class="tw-float-right tw-mt-[32px]"
70   - total-visible="5"
71   - ></v-pagination></v-col
72   - ></v-row>
73 6 <v-tabs
74 7 class="tabs"
75 8 v-model="tabRecom"
... ... @@ -198,6 +131,61 @@
198 131 total-visible="5"
199 132 ></v-pagination></v-col
200 133 ></v-row>
  134 + <div style="width: 50px"></div>
  135 + <div class="tw-text-center tw-mt-[32px]" v-if="loading">
  136 + <v-progress-circular
  137 + color="blue-lighten-2"
  138 + indeterminate
  139 + size="64"
  140 + class="tw-m-auto"
  141 + ></v-progress-circular>
  142 + </div>
  143 + <v-item-group multiple>
  144 + <v-row v-if="!loading">
  145 + <v-col
  146 + v-for="(item, i) in productStore.list"
  147 + :key="i"
  148 + cols="6"
  149 + lg="3"
  150 + md="4"
  151 + sm="6"
  152 + >
  153 + <v-hover v-slot="{ isHovering, props }" open-delay="200">
  154 + <v-card
  155 + :elevation="isHovering ? 16 : 2"
  156 + :class="{ 'on-hover': isHovering }"
  157 + class="mx-auto"
  158 + v-bind="props"
  159 + :to="`/products/detail/${item.id}`"
  160 + >
  161 + <v-img :src="item.imgList[0].url" :alt="item.name">
  162 + <!-- <v-expand-transition>
  163 + <div
  164 + v-if="isHovering"
  165 + class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
  166 + style="height: 100%"
  167 + >
  168 + 产品描述描述描述描述描述描述描述描述
  169 + </div>
  170 + </v-expand-transition> -->
  171 + </v-img>
  172 + <v-card-text class="tw-text-left font-weight-medium title">
  173 + <h3 style="color: red" v-if="item.price">
  174 + ${{ item.price }}
  175 + </h3>
  176 + <h4>{{ item.name }}</h4>
  177 + </v-card-text>
  178 + </v-card>
  179 + </v-hover>
  180 + </v-col>
  181 + </v-row>
  182 + <div
  183 + v-if="!productStore.total && !loading"
  184 + class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
  185 + >
  186 + no data
  187 + </div>
  188 + </v-item-group>
201 189 </v-container>
202 190 </div>
203 191 </template>
... ... @@ -518,7 +506,7 @@ const hotLength = computed(() =&gt;
518 506 align-items: center;
519 507 justify-content: center;
520 508 height: 320px;
521   - margin: 10px auto 100px;
  509 + margin: 10px auto 130px;
522 510 width: 80%;
523 511 }
524 512 }
... ... @@ -528,7 +516,7 @@ const hotLength = computed(() =&gt;
528 516 align-items: center;
529 517 justify-content: center;
530 518 height: 320px;
531   - margin: 10px auto 0px;
  519 + margin: 10px auto 80px;
532 520 width: 80%;
533 521 padding: 0;
534 522 }
... ... @@ -539,7 +527,7 @@ const hotLength = computed(() =&gt;
539 527 align-items: center;
540 528 justify-content: center;
541 529 height: 320px;
542   - margin: 10px auto 0px;
  530 + margin: 10px auto 80px;
543 531 width: 80%;
544 532 padding: 0;
545 533 }
... ... @@ -569,7 +557,7 @@ const hotLength = computed(() =&gt;
569 557 display: inline-block;
570 558 margin: 0 5px;
571 559 text-align: center;
572   - width: 200px;
  560 + width: 260px;
573 561 }
574 562 }
575 563 @media screen and (min-width: 1537px) {
... ...