From bad61e1ad27c735f63bfb3701f7cb38916cbf073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 21 Oct 2024 15:49:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                       |  8 +--
 components/diy/data-magic.vue                 | 28 +++++----
 .../modules/data-magic/product-list-show.vue  | 63 +++++++++----------
 3 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/App.vue b/App.vue
index 5b0f39eb..2cc8131a 100644
--- a/App.vue
+++ b/App.vue
@@ -7,12 +7,12 @@
             data: {
                 // 基础配置
                 // 数据接口请求地址
-                // request_url: 'http://shopxo.com/',
-                   request_url:'https://new.shopxo.vip/',
+                request_url: 'http://shopxo.com/',
+                //    request_url:'https://new.shopxo.vip/',
 
                 // 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
-                // static_url: 'http://shopxo.com/',
-                   static_url:'https://new.shopxo.vip/',
+                static_url: 'http://shopxo.com/',
+                //    static_url:'https://new.shopxo.vip/',
 
                 // 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
                 system_type: 'default',
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index b707fc56..2507bcae 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -1,19 +1,19 @@
 <template>
     <view class="img-magic" :style="'height:' + container_size + ';' + style_container">
-        <view class="magic-container wh-auto ht-auto pr" :style="style_img_container">
+        <view class="magic-container w h pr" :style="style_img_container">
             <view class="pr" :style="'width:calc(100% + ' + outer_spacing + ');height:calc(100% + ' + outer_spacing + ');margin:-' + spacing + ';'">
                 <!-- 风格9 -->
                 <template v-if="form.style_actived == 7">
                     <view class="flex-row align-c jc-c style-size flex-wrap">
                         <view v-for="(item, index) in data_magic_list" :key="index" :style="item.data_style.background_style + content_radius + 'margin:' + spacing + ';' + ([0, 1].includes(index) ? 'width:calc(50% - ' + outer_spacing + ');height:calc(50% - ' + outer_spacing + ')' : 'width:calc((100% / 3) - ' + outer_spacing + ');height:calc(50% - ' + outer_spacing + ')')" class="style9">
-                            <view class="wh-auto ht-auto"  :style="item.data_style.background_img_style">
+                            <view class="w h"  :style="item.data_style.background_img_style">
                                 <template v-if="item.data_content.data_type == 'goods'">
-                                    <view class="wh-auto ht-auto flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + ([0, 1].includes(index) ? item.data_style.chunk_padding_data : '')">
+                                    <view class="w h flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + ([0, 1].includes(index) ? item.data_style.chunk_padding_data : '')">
                                         <view v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
-                                            <view class="ma-0 wh-auto text-line-1" :style="item.data_style.daheading_style">{{ item.data_content.heading_title || '' }}</view>
-                                            <view class="ma-0 wh-auto text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
+                                            <view class="ma-0 w text-line-1" :style="item.data_style.daheading_style">{{ item.data_content.heading_title || '' }}</view>
+                                            <view class="ma-0 w text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                         </view>
-                                        <view class="wh-auto ht-auto">
+                                        <view class="w h">
                                             <magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propContentImgRadius="content_img_radius" :propActived="form.style_actived" propType="product" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
                                         </view>
                                     </view>
@@ -38,14 +38,14 @@
                 </template>
                 <template v-else>
                     <view v-for="(item, index) in data_magic_list" :key="index" class="cube-selected cr-main" :style="selected_style(item) + item.data_style.background_style + content_radius + ';margin:' + spacing + ';'">
-                        <view class="wh-auto ht-auto"  :style="item.data_style.background_img_style">
+                        <view class="w h"  :style="item.data_style.background_img_style">
                             <template v-if="item.data_content.data_type == 'goods'">
-                                <view class="wh-auto ht-auto flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + item.data_style.chunk_padding_data">
+                                <view class="w h flex-col" :style="'gap:'+ item.title_text_gap * 2 + 'rpx;' + item.data_style.chunk_padding_data">
                                     <view v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
-                                        <view class="ma-0 wh-auto text-line-1" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
-                                        <view class="ma-0 wh-auto text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
+                                        <view class="ma-0 w text-line-1" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
+                                        <view class="ma-0 w text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                     </view>
-                                    <view class="wh-auto ht-auto">
+                                    <view class="w h">
                                         <magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propContentImgRadius="content_img_radius" propType="product" :propActived="form.style_actived" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
                                     </view>
                                 </view>
@@ -325,4 +325,10 @@
     .gap-20 {
         gap: 40rpx;
     }
+    .w {
+        width: 100%;
+    }
+    .h {
+        height: 100%;
+    }
 </style>
diff --git a/components/diy/modules/data-magic/product-list-show.vue b/components/diy/modules/data-magic/product-list-show.vue
index 9a5c6580..1961c690 100644
--- a/components/diy/modules/data-magic/product-list-show.vue
+++ b/components/diy/modules/data-magic/product-list-show.vue
@@ -1,20 +1,20 @@
 <template>
-    <view v-if="propOuterflex == 'row'" class="wh-auto ht-auto">
-        <view class="flex-row gap-10 align-c wh-auto ht-auto">
+    <view v-if="propOuterflex == 'row'" class="w h">
+        <view class="flex-row gap-10 align-c w h">
             <template v-if="propFlex === 'row'">
                 <view v-for="(item, index) in propValue" :key="index" class="flex-row gap-10 half-width ht-auto" :data-index="index" :data-value="item.goods_url" @tap="url_event">
                     <template v-if="!isEmpty(item.new_cover)">
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
                     <template v-else>
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
-                    <view v-if="!isEmpty(propIsShow)" class="flex-col wh-auto ht-auto tl gap-10">
-                        <view v-if="propIsShow.includes('title')" class="text-line-2 text-size-md shop-title" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
+                    <view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
+                        <view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
                         <view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
                             <text class="num">{{ item.show_price_symbol }}</text>
                             {{ item.min_price }}
@@ -26,15 +26,15 @@
                 </view>
             </template>
             <template v-else-if="propActived != 7 || propNum !== 1">
-                <view v-for="(item, index) in propValue" :key="index" :class="['flex-col gap-10 ht-auto', { 'half-width': propNum !== 1, 'wh-auto': propNum == 1 }]" :data-index="index" :data-value="item.goods_url" @tap="url_event">
-                    <view class="wh-auto ht-auto pr">
+                <view v-for="(item, index) in propValue" :key="index" :class="['flex-col gap-10 ht-auto', { 'half-width': propNum !== 1, 'w': propNum == 1 }]" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                    <view class="w h pr">
                         <template v-if="!isEmpty(item.new_cover)">
-                            <view class="wh-auto ht-auto">
+                            <view class="w h">
                                 <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                             </view>
                         </template>
                         <template v-else>
-                            <view class="wh-auto ht-auto">
+                            <view class="w h">
                                 <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                             </view>
                         </template>
@@ -45,23 +45,23 @@
                             </template>
                         </view>
                     </view>
-                    <view v-if="propIsShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" :style="propGoodStyle.goods_title_style + ';overflow: inherit'">{{ item.title }}</view>
+                    <view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + ';overflow: inherit'">{{ item.title }}</view>
                 </view>
             </template>
             <template v-else>
-                <view v-for="(item, index) in propValue" :key="index" class="flex-col wh-auto ht-auto" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                <view v-for="(item, index) in propValue" :key="index" class="flex-col w h" :data-index="index" :data-value="item.goods_url" @tap="url_event">
                     <template v-if="!isEmpty(item.new_cover)">
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
                     <template v-else>
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
-                    <view v-if="!isEmpty(propIsShow)" class="flex-col wh-auto tl gap-10" :style="img_padding_computer">
-                        <view v-if="propIsShow.includes('title')" class="text-line-2 text-size-md shop-title" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
+                    <view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb" :style="img_padding_computer">
+                        <view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
                         <view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
                             <text class="num">{{ item.show_price_symbol }}</text>
                             {{ item.min_price }}
@@ -74,22 +74,22 @@
             </template>
         </view>
     </view>
-    <view v-else class="wh-auto ht-auto">
-        <view class="flex-col gap-20 align-c wh-auto ht-auto">
+    <view v-else class="w h">
+        <view class="flex-col gap-20 align-c w h">
             <template v-if="propFlex === 'row'">
-                <view v-for="(item, index) in propValue" :key="index" class="flex-row gap-10 align-c wh-auto ht-auto shop-max-height" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                <view v-for="(item, index) in propValue" :key="index" class="flex-row gap-10 align-c w h shop-max-height" :data-index="index" :data-value="item.goods_url" @tap="url_event">
                     <template v-if="!isEmpty(item.new_cover)">
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
                     <template v-else>
-                        <view class="wh-auto ht-auto">
+                        <view class="w h">
                             <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
                         </view>
                     </template>
-                    <view v-if="!isEmpty(propIsShow)" class="flex-col wh-auto ht-auto tl gap-20">
-                        <view v-if="propIsShow.includes('title')" class="text-line-2 text-size-md shop-title" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
+                    <view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
+                        <view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style">{{ item.title }}</view>
                         <view v-if="propIsShow.includes('price')" class="identifying" :style="propGoodStyle.goods_price_style">
                             <text class="num">{{ item.show_price_symbol }}</text
                             >{{ item.min_price }}
@@ -174,12 +174,8 @@
 </script>
 
 <style scoped lang="scss">
-    .identifying {
-        font-size: 28rpx;
-        color: #ea3323;
-        .num {
-            font-size: 18rpx;
-        }
+    .identifying .num {
+        font-size: 18rpx;
     }
     .price-suspension {
         width: calc(100% - 32rpx);
@@ -196,12 +192,15 @@
     .shop-max-height {
         max-height: calc(100% / 3);
     }
+    .w {
+        width: 100%;
+    }
+    .h {
+        height: 100%;
+    }
     .half-width {
         width: 50%;
     }
-    .shop-title {
-        line-height: 40rpx;
-    }
     .gap-20 {
         gap: 40rpx;
     }