From a28ffedef3f6df89b00049de0b19fe8008994a51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 31 Oct 2024 14:03:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/css/page.css                           |   7 +
 components/diy/data-magic.vue                 |  53 +++--
 components/diy/header.vue                     |   5 +-
 components/diy/img-magic.vue                  |  26 +--
 .../diy/modules/data-magic/magic-carousel.vue |  57 ++++--
 .../modules/data-magic/product-list-show.vue  | 192 +++++++++++-------
 components/diy/title.vue                      |   5 +-
 7 files changed, 215 insertions(+), 130 deletions(-)

diff --git a/common/css/page.css b/common/css/page.css
index 1f3003a6..470c8542 100644
--- a/common/css/page.css
+++ b/common/css/page.css
@@ -1359,4 +1359,11 @@ button[disabled].bg-grey {
     /* #ifndef H5  */
     padding-top: calc(var(--status-bar-height) + 10rpx);
     /* #endif */
+}
+
+/* 数字和文字超出范围不整体换行 */
+.text-word-break {
+    word-break: break-all;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/components/diy/data-magic.vue b/components/diy/data-magic.vue
index 7e34532b..8d1b3e63 100644
--- a/components/diy/data-magic.vue
+++ b/components/diy/data-magic.vue
@@ -9,9 +9,16 @@
                             <view class="w h"  :style="item.data_style.background_img_style">
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <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 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 v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
+                                            <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
+                                                <view v-if="item.data_content.heading_title_img.length > 0" class="re" :style="'height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
+                                                    <image :src="item.data_content.heading_title_img[0].url" mode="aspectFit" />
+                                                </view>
+                                            </template>
+                                            <template v-else>
+                                                <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
+                                            </template>
+                                            <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                         </view>
                                         <view class="w h">
                                             <magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
@@ -41,9 +48,16 @@
                         <view class="w h"  :style="item.data_style.background_img_style">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <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 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 v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
+                                        <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
+                                            <view v-if="item.data_content.heading_title_img.length > 0" class="re" :style="'height:' + (!isEmpty(item.data_style.heading_img_height) ? item.data_style.heading_img_height : 0) * 2 + 'rpx'">
+                                                <image :src="item.data_content.heading_title_img[0].url" mode="aspectFit" />
+                                            </view>
+                                        </template>
+                                        <template v-else>
+                                            <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</view>
+                                        </template>
+                                        <view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
                                     </view>
                                     <view class="w h">
                                         <magic-carousel :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" @onCarouselChange="carousel_change($event, index)"></magic-carousel>
@@ -76,6 +90,8 @@
     const app = getApp();
     import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
     import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } from '@/common/js/common/common.js';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
     export default {
         components: {
             magicCarousel,
@@ -141,6 +157,7 @@
             init() {
                 const new_form = this.propValue.content;
                 const new_style = this.propValue.style;
+                const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width;
                 const density = 4;
                 this.setData({
                     form: new_form,
@@ -152,21 +169,9 @@
                     data_magic_list: this.get_data_magic_list(new_form.data_magic_list),
                     style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
                     style_img_container: common_img_computer(new_style.common_style, this.propIndex),
-                });
-                this.$nextTick(() => {
-                    const query = uni.createSelectorQuery().in(this);
-                    query
-                        .select('.magic-container')
-                        .boundingClientRect((res) => {
-                            if ((res || null) != null) {
-                                this.setData({
-                                    div_width: res.width,
-                                    cubeCellWidth: res.width / density,
-                                    container_size: res.width + 'px',
-                                });
-                            }
-                        })
-                        .exec();
+                    div_width: sys_width,
+                    cubeCellWidth: sys_width / density,
+                    container_size: container_height * 2 + 'rpx',
                 });
             },
             get_data_magic_list(data) {
@@ -189,7 +194,7 @@
                     data_content.fit = fit;
                     // 商品名称和价格样式
                     data_style.goods_title_style = this.goods_trends_config(data_style, 'title');
-                    data_style.goods_price_style = this.goods_trends_config(data_style, 'price');
+                    data_style.goods_price_style = this.goods_trends_config(data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
                     const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
                     data_style.get_img_radius = radius_computer(radius);
 
@@ -333,4 +338,8 @@
     .h {
         height: 100%;
     }
+    .flex-basis-shrink {
+        flex-basis: content;
+        flex-shrink: 1;
+    }
 </style>
diff --git a/components/diy/header.vue b/components/diy/header.vue
index 35fdc678..67005b6a 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -174,9 +174,12 @@
                 const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
                 // 背景图
                 const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
+                const up_slide_opacity = 'opacity:' + ((newVal - 20) / (this.header_top + 33) > 1 ? 1 : ((newVal - 20) / (this.header_top + 33)).toFixed(2)) + ';'
                 this.setData({
+                    up_slide_opacity: up_slide_opacity,
+                    up_slide_old_logo_style: 'opacity:' + ((newVal - 5) / (this.header_top + 33) > 1 ? 1 : ((newVal - 5) / (this.header_top + 33)).toFixed(2)) + ';',
                     // 20是大小误差
-                    up_slide_style: gradient_computer(gradient) + 'opacity:' + ((newVal - 20) / (this.header_top + 33) > 1 ? 1 : ((newVal - 20) / (this.header_top + 33)).toFixed(2)) + ';',
+                    up_slide_style: gradient_computer(gradient) + up_slide_opacity,
                     up_slide_img_style: background_computer(back),
                 });
             },
diff --git a/components/diy/img-magic.vue b/components/diy/img-magic.vue
index 9bd8e11f..06f9fd25 100644
--- a/components/diy/img-magic.vue
+++ b/components/diy/img-magic.vue
@@ -42,7 +42,9 @@
 </template>
 <script>
     const app = getApp();
-    import { common_styles_computer, common_img_computer, radius_computer, percentage_count } from '@/common/js/common/common.js';
+    import { common_styles_computer, common_img_computer, radius_computer, percentage_count, isEmpty } from '@/common/js/common/common.js';
+    var system = app.globalData.get_system_info(null, null, true);
+    var sys_width = app.globalData.window_width_handle(system.windowWidth);
     export default {
         props: {
             propValue: {
@@ -113,6 +115,7 @@
                 } else if (new_content.img_fit == 'cover') {
                     fit = 'aspectFill';
                 }
+                const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
                 const density = 4;
                 this.setData({
                     form: this.propValue.content,
@@ -122,24 +125,11 @@
                     img_outer_spacing: new_style_spacing * 2 + 'rpx',
                     content_img_radius: radius_computer(new_style),
                     style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;',
-                    style_img_container: common_img_computer(new_style.common_style, this.propIndex),
+                    style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'box-sizing: border-box;',
                     img_fit: fit,
-                });
-
-                this.$nextTick(() => {
-                    const query = uni.createSelectorQuery().in(this);
-                    query
-                        .select('.magic-container')
-                        .boundingClientRect((res) => {
-                            if ((res || null) != null) {
-                                this.setData({
-                                    div_width: res.width,
-                                    container_size: res.width + 'px',
-                                    cube_cell: res.width / density,
-                                });
-                            }
-                        })
-                        .exec();
+                    div_width: sys_width,
+                    container_size: container_height * 2 + 'rpx',
+                    cube_cell: sys_width / density,
                 });
             },
             getSelectedWidth(item) {
diff --git a/components/diy/modules/data-magic/magic-carousel.vue b/components/diy/modules/data-magic/magic-carousel.vue
index 6beb5a08..4bcf2d35 100644
--- a/components/diy/modules/data-magic/magic-carousel.vue
+++ b/components/diy/modules/data-magic/magic-carousel.vue
@@ -1,19 +1,24 @@
 <template>
-    <swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
-        <swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
-            <template v-if="propType === 'img'">
-                <view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
-                    <imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
-                </view>
-            </template>
-            <template v-else>
-                <product-list-show :propOuterflex="propValue.outerflex" :propFlex="propValue.flex" :propNum="propValue.num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
-            </template>
-        </swiper-item>
-    </swiper>
+    <view class="wh-auto ht-auto oh ssss" :style="style_container">
+        <view class="wh-auto ht-auto" :style="style_img_container">
+            <swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%" @change="carousel_change">
+                <swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
+                    <template v-if="propType === 'img'">
+                        <view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
+                            <imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                        </view>
+                    </template>
+                    <template v-else>
+                        <product-list-show :propOuterflex="propValue.outerflex" :propFlex="propValue.flex" :propNum="propValue.num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
+                    </template>
+                </swiper-item>
+            </swiper>
+        </view>
+    </view>
 </template>
 
 <script>
+    import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
     const app = getApp();
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
@@ -44,7 +49,35 @@
                 default: () => {},
             },
         },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+            };
+        },
+        mounted() {
+            this.init();
+        },
         methods: {
+            init() {
+                if (!isEmpty(this.propValue)) {
+                    const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = this.propValue.data_style;
+                    const style_data = {
+                        color_list: data_color_list,
+                        direction: data_direction,
+                    }
+                    const style_img_data = {
+                        background_img: data_background_img,
+                        background_img_style: data_background_img_style,
+                    }
+                    this.setData({
+                        style_container: gradient_computer(style_data) + radius_computer(data_radius) + 'box-sizing: border-box;', // 用于样式显示
+                        style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data),
+                    });
+                } else {
+                    return '';
+                }
+            },
             carousel_change(e) {
                 this.$emit('onCarouselChange', e);
             },      
diff --git a/components/diy/modules/data-magic/product-list-show.vue b/components/diy/modules/data-magic/product-list-show.vue
index 1961c690..49f223e4 100644
--- a/components/diy/modules/data-magic/product-list-show.vue
+++ b/components/diy/modules/data-magic/product-list-show.vue
@@ -2,72 +2,84 @@
     <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="w h">
-                            <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
-                        </view>
-                    </template>
-                    <template v-else>
-                        <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 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 }}
-                            <template v-if="propIsShow.includes('price_unit')">
-                                <text class="num">{{ item.show_price_unit }}</text>
+                <view v-for="(item, index) in propValue" :key="index" class="half-width ht-auto">
+                    <view class="w h oh" :style="style_container">
+                        <view class="w h flex-row gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <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="w h">
+                                    <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                                </view>
+                            </template>
+                            <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 }}
+                                    <template v-if="propIsShow.includes('price_unit')">
+                                        <text class="num">{{ item.show_price_unit }}</text>
+                                    </template>
+                                </view>
+                            </view>
                         </view>
                     </view>
                 </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, '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="w h">
-                                <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                <view v-for="(item, index) in propValue" :key="index" :class="['ht-auto', { 'half-width': propNum !== 1, 'w': propNum == 1 }]">
+                    <view class="w h oh" :style="style_container">
+                        <view class="w h flex-col gap-10" :style="style_img_container" :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="w h">
+                                        <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                                    </view>
+                                </template>
+                                <template v-else>
+                                    <view class="w h">
+                                        <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                                    </view>
+                                </template>
+                                <view v-if="propIsShow.includes('price')" class="price-suspension text-line-1" :style="propGoodStyle.goods_price_style">
+                                    {{ item.show_price_symbol }}{{ item.min_price }}
+                                    <template v-if="propIsShow.includes('price_unit')">
+                                        {{ item.show_price_unit }}
+                                    </template>
+                                </view>
                             </view>
-                        </template>
-                        <template v-else>
-                            <view class="w h">
-                                <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
-                            </view>
-                        </template>
-                        <view v-if="propIsShow.includes('price')" class="price-suspension text-line-1" :style="propGoodStyle.goods_price_style">
-                            {{ item.show_price_symbol }}{{ item.min_price }}
-                            <template v-if="propIsShow.includes('price_unit')">
-                                {{ item.show_price_unit }}
-                            </template>
+                            <view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + ';overflow: inherit'">{{ item.title }}</view>
                         </view>
                     </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 w h" :data-index="index" :data-value="item.goods_url" @tap="url_event">
-                    <template v-if="!isEmpty(item.new_cover)">
-                        <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="w h">
-                            <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
-                        </view>
-                    </template>
-                    <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 }}
-                            <template v-if="propIsShow.includes('price_unit')">
-                                <text class="num">{{ item.show_price_unit }}</text>
+                <view v-for="(item, index) in propValue" :key="index" class="w h">
+                    <view class="w h oh" :style="style_container">
+                        <view class="w h flex-col" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <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="w h">
+                                    <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                                </view>
+                            </template>
+                            <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 }}
+                                    <template v-if="propIsShow.includes('price_unit')">
+                                        <text class="num">{{ item.show_price_unit }}</text>
+                                    </template>
+                                </view>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -77,25 +89,29 @@
     <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 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="w h">
-                            <imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
-                        </view>
-                    </template>
-                    <template v-else>
-                        <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 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 }}
-                            <template v-if="propIsShow.includes('price_unit')">
-                                <text class="num">{{ item.show_price_unit }}</text>
+                <view v-for="(item, index) in propValue" :key="index" class="w h" :style="'max-height:calc(100% / 3 - ' + (20 / 3) + 'px;'">
+                    <view class="w h oh" :style="style_container">
+                        <view class="w h flex-row gap-10 align-c" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <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="w h">
+                                    <imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
+                                </view>
+                            </template>
+                            <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 }}
+                                    <template v-if="propIsShow.includes('price_unit')">
+                                        <text class="num">{{ item.show_price_unit }}</text>
+                                    </template>
+                                </view>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -106,7 +122,7 @@
 
 <script>
     const app = getApp();
-    import { isEmpty, padding_computer } from '@/common/js/common/common.js';
+    import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty } from "@/common/js/common/common.js";
     import imageEmpty from '@/components/diy/modules/image-empty.vue';
     export default {
         components: {
@@ -150,6 +166,15 @@
                 default: () => {},
             }
         },
+        data() {
+            return {
+                style_container: '',
+                style_img_container: '',
+            };
+        },
+        mounted() {
+            this.init();
+        },
         computed: {
             img_padding_computer() {
                 if (!isEmpty(this.propChunkPadding)) {
@@ -161,6 +186,25 @@
         },
         methods: {
             isEmpty,
+            init() {
+                if (!isEmpty(this.propGoodStyle)) {
+                    const { goods_color_list = [], goods_direction = '180deg', goods_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = this.propGoodStyle;
+                    const style_data = {
+                        color_list: goods_color_list,
+                        direction: goods_direction,
+                    }
+                    const style_img_data = {
+                        background_img: goods_background_img,
+                        background_img_style: goods_background_img_style,
+                    }
+                    this.setData({
+                        style_container: gradient_computer(style_data) + radius_computer(goods_radius) + 'box-sizing: border-box;', // 用于样式显示
+                        style_img_container: padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
+                    });
+                } else {
+                    return '';
+                }
+            },
             url_event(e) {
                 // 存储数据显示缓存
                 let index = e.currentTarget.dataset.index || 0;
@@ -176,6 +220,7 @@
 <style scoped lang="scss">
     .identifying .num {
         font-size: 18rpx;
+        line-height: 18rpx;
     }
     .price-suspension {
         width: calc(100% - 32rpx);
@@ -189,9 +234,6 @@
         bottom: 8rpx;
         border-radius: 16rpx;
     }
-    .shop-max-height {
-        max-height: calc(100% / 3);
-    }
     .w {
         width: 100%;
     }
diff --git a/components/diy/title.vue b/components/diy/title.vue
index 97f95f48..b58a7fb8 100644
--- a/components/diy/title.vue
+++ b/components/diy/title.vue
@@ -12,7 +12,8 @@
                         <template v-else-if="!isEmpty(form.icon_class)">
                             <iconfont :name="'icon-' + form.icon_class" :size="new_style.icon_size * 2 + 'rpx'" :color="new_style.icon_color" propContainerDisplay="flex"></iconfont>
                         </template>
-                        <view v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</view>
+                        <view v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</view>
+                        <view v-if="!isEmpty(form.subtitle) && new_style.title_line == '1'" class="text-word-break nowrap" :style="subtitle_style">{{ form.subtitle }}</view>
                     </view>
                     <view class="flex-row gap-10 align-c right-0 pa">
                         <template v-if="form.keyword_show == '1'">
@@ -26,7 +27,7 @@
                         </view>
                     </view>
                 </view>
-                <view v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</view>
+                <view v-if="!isEmpty(form.subtitle) && new_style.title_line != '1'" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</view>
             </view>
         </view>
     </view>