From e3d8307f0b6d5b8113a05f54de12ee175826102a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 30 Oct 2024 14:19:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-module/model-text/index.vue |  2 +-
 .../model-custom/components/index.vue         |  2 +-
 .../components/tabs-content.vue               | 13 ++++-
 .../components/tabs-styles.vue                | 52 +++++++++++------
 src/components/model-data-magic/index.vue     | 31 ++++++++--
 .../model-data-magic-content.vue              |  5 +-
 .../model-img-magic-content.vue               |  2 +-
 src/components/model-notice/index.vue         |  2 +-
 src/components/model-title/index.vue          |  5 +-
 .../model-title/model-title-styles.vue        | 57 +++++++++----------
 src/components/page-settings/index.vue        | 20 +++++--
 src/styles/common.scss                        |  2 +-
 12 files changed, 125 insertions(+), 68 deletions(-)

diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index d56d8b78..3a869b32 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="img-outer w h re oh" :style="com_style">
-        <div :style="text_style" class="txet-word-break">
+        <div :style="text_style" class="text-word-break">
             <template v-if="form.is_rich_text == '1'">
                 <div class="rich-text-content" :innerHTML="text_title"></div>
             </template>
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index e84216ae..1d5128b5 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -38,7 +38,7 @@
                                             <el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
                                         </template>
                                         <template v-else>
-                                            <span class="size-12 cr-6 txet-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name  }}</span>
+                                            <span class="size-12 cr-6 text-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name  }}</span>
                                         </template>
                                     </div>
                                     <div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 559712b5..bd245dd0 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -8,7 +8,18 @@
         </el-form-item>
         <template v-if="form.data_type === 'goods' && isShowTitle">
             <el-form-item label="主标题">
-                <el-input v-model="form.heading_title" placeholder="请输入主标题" clearable></el-input>
+                <div class="flex-col gap-10 w">
+                    <el-radio-group v-model="form.heading_title_type">
+                        <el-radio value="text">文字</el-radio>
+                        <el-radio value="image">图片</el-radio>
+                    </el-radio-group>
+                    <template v-if="form.heading_title_type == 'text'">
+                        <el-input v-model="form.heading_title" placeholder="请输入主标题" clearable></el-input>
+                    </template>
+                    <template v-else>
+                        <upload v-model="form.heading_title_img" :limit="1" size="50"></upload>
+                    </template>
+                </div>
             </el-form-item>
             <el-form-item label="副标题">
                 <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index b3aa088f..9815b5cf 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -26,14 +26,6 @@
             </el-form-item>
         </template>
         <template v-if="tabs_content.data_type === 'goods'">
-            <template v-if="isShowTitle">
-                <el-form-item label="主标题">
-                    <color-text-size-group v-model:color="form.heading_color" v-model:typeface="form.heading_typeface" v-model:size="form.heading_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-                <el-form-item label="副标题">
-                    <color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-            </template>
             <el-form-item label="内间距">
                 <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
             </el-form-item>
@@ -42,16 +34,40 @@
             <radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
         </el-form-item>
     </card-container>
-    <div class="bg-f5 divider-line" />
-    <card-container v-if="tabs_content.data_type === 'goods'">
-        <div class="mb-12">商品样式</div>
-        <el-form-item label="商品名称">
-            <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
-        </el-form-item>
-        <el-form-item label="商品价格">
-            <color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
-        </el-form-item>
-    </card-container>
+    <template v-if="tabs_content.data_type === 'goods' && isShowTitle">
+        <div class="bg-f5 divider-line" />
+        <card-container>
+            <div class="mb-12">标题样式</div>
+            <el-form-item label="主标题">
+                <template v-if="tabs_content.heading_title_type == 'text'">
+                    <color-text-size-group v-model:color="form.heading_color" v-model:typeface="form.heading_typeface" v-model:size="form.heading_size" default-color="#000000"></color-text-size-group>
+                </template>
+                <template v-else>
+                    <el-form-item label="图片高度" label-width="60" class="w form-item-child-label">
+                        <slider v-model="form.heading_img_height" :min="1" :max="200"></slider>
+                    </el-form-item>
+                </template>
+            </el-form-item>
+            <el-form-item label="副标题">
+                <color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
+            </el-form-item>
+            <el-form-item label="标题同行">
+                <el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
+            </el-form-item>
+        </card-container>
+    </template>
+    <template v-if="tabs_content.data_type === 'goods'">
+        <div class="bg-f5 divider-line" />
+        <card-container>
+            <div class="mb-12">商品样式</div>
+            <el-form-item label="商品名称">
+                <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
+            </el-form-item>
+            <el-form-item label="商品价格">
+                <color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
+            </el-form-item>
+        </card-container>
+    </template>
     <div class="bg-f5 divider-line" />
     <card-container>
         <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index fed8d51d..92940d28 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -9,9 +9,16 @@
                             <div class="w h" :style="`${ item.data_style.background_img_style }`">
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
-                                        <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
-                                            <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                            <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
+                                        <div 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 == 'text'">
+                                                <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                            </template>
+                                            <template v-else-if="item.data_content.heading_title_img.length > 0">
+                                                <div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
+                                                    <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
+                                                </div>
+                                            </template>
+                                            <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
                                             <magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
@@ -40,9 +47,16 @@
                         <div class="w h" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                                    <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
-                                        <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                        <p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
+                                    <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 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 == 'text'">
+                                            <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                        </template>
+                                        <template v-else-if="item.data_content.heading_title_img.length > 0">
+                                            <div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
+                                                <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
+                                            </div>
+                                        </template>
+                                        <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h">
                                         <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
@@ -384,4 +398,9 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
         width: 6rem;
     }
 }
+
+.flex-basis-shrink {
+    flex-basis: content;
+    flex-shrink: 1;
+}
 </style>
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index abb333b4..4e4f78f8 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -11,7 +11,7 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="容器高度" label-width="60">
-                    <slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
+                    <slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
@@ -71,6 +71,7 @@ const data_style = {
     heading_color: '#000',
     heading_typeface: '400',
     heading_size: 20,
+    heading_img_height: 28,
     subtitle_color: '#FF852A',
     subtitle_typeface: '400',
     subtitle_size: 14,
@@ -113,7 +114,9 @@ const data_style = {
 // 每个小模块独立的内容
 const data_content = {
     data_type: 'goods',
+    heading_title_type: 'text',
     heading_title: '主标题',
+    heading_title_img: [],
     subtitle: '副标题',
     goods_list:[],
     goods_ids: '',
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index af2d81da..9d724ad0 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -12,7 +12,7 @@
                 </el-form-item>
                 <template v-if="form.style_actived !== 10">
                     <el-form-item label="容器高度">
-                        <slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
+                        <slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
                     </el-form-item>
                     <el-form-item label="图片设置">
                         <el-radio-group v-model="form.img_fit">
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index d044f147..a396eaca 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -41,7 +41,7 @@
                         </div>
                         <div v-for="(item, index) in notice_list" :key="index" class="flex align-c" :style="news_style">
                             <span :class="`num one${index + 1}`">{{ index + 1 }}</span>
-                            <div class="txet-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
+                            <div class="text-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue
index 985788e9..683392e7 100644
--- a/src/components/model-title/index.vue
+++ b/src/components/model-title/index.vue
@@ -10,7 +10,8 @@
                         <template v-else-if="!isEmpty(form.icon_class)">
                             <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
                         </template>
-                        <div v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
+                        <div v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</div>
+                        <div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
                     </div>
                     <div class="flex-row gap-10 align-c right-0 abs">
                         <template v-if="form.keyword_show == '1'">
@@ -21,7 +22,7 @@
                         <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
                     </div>
                 </div>
-                <div v-if="!isEmpty(form.subtitle)" class="txet-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
+                <div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
             </div>
         </div>
     </div>
diff --git a/src/components/model-title/model-title-styles.vue b/src/components/model-title/model-title-styles.vue
index 88cb4f99..61eb7659 100644
--- a/src/components/model-title/model-title-styles.vue
+++ b/src/components/model-title/model-title-styles.vue
@@ -15,42 +15,41 @@
                         </div>
                     </el-form-item>
                 </template>
-                <el-form-item label="标题颜色">
-                    <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
-                </el-form-item>
-                <el-form-item label="标题文字">
-                    <el-radio-group v-model="form.title_weight">
-                        <el-radio value="500">加粗</el-radio>
-                        <el-radio value="normal">正常</el-radio>
-                        <el-radio value="italic">倾斜</el-radio>
-                    </el-radio-group>
-                    <el-form-item label="字号" label-width="40" class="mb-0 w">
-                        <slider v-model="form.title_size" :max="100"></slider>
-                    </el-form-item>
-                </el-form-item>
-                <el-form-item label="图片高度">
-                    <slider v-model="form.img_height" :max="500"></slider>
-                </el-form-item>
-            </card-container>
-            <template v-if="!isEmpty(content.subtitle)">
-                <div class="bg-f5 divider-line" />
-                <card-container>
-                    <div class="mb-12">副标题设置</div>
-                    <el-form-item label="颜色">
-                        <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
-                    </el-form-item>
-                    <el-form-item label="文字">
-                        <el-radio-group v-model="form.subtitle_weight">
+                <el-form-item label="主标题">
+                    <div class="flex-col gap-10">
+                        <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
+                        <el-radio-group v-model="form.title_weight">
                             <el-radio value="500">加粗</el-radio>
                             <el-radio value="normal">正常</el-radio>
                             <el-radio value="italic">倾斜</el-radio>
                         </el-radio-group>
                         <el-form-item label="字号" label-width="40" class="mb-0 w">
-                            <slider v-model="form.subtitle_size" :max="100"></slider>
+                            <slider v-model="form.title_size" :max="100"></slider>
                         </el-form-item>
+                    </div>
+                </el-form-item>
+                <template v-if="!isEmpty(content.subtitle)">
+                    <el-form-item label="副标题">
+                        <div class="flex-col gap-10">
+                            <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
+                            <el-radio-group v-model="form.subtitle_weight">
+                                <el-radio value="500">加粗</el-radio>
+                                <el-radio value="normal">正常</el-radio>
+                                <el-radio value="italic">倾斜</el-radio>
+                            </el-radio-group>
+                            <el-form-item label="字号" label-width="40" class="mb-0 w">
+                                <slider v-model="form.subtitle_size" :max="100"></slider>
+                            </el-form-item>
+                        </div>
                     </el-form-item>
-                </card-container>
-            </template>
+                    <el-form-item label="标题同行">
+                        <el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
+                    </el-form-item>
+                </template>
+                <el-form-item label="图片高度">
+                    <slider v-model="form.img_height" :max="500"></slider>
+                </el-form-item>
+            </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">关键字设置</div>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 7e621701..da968f77 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -14,12 +14,19 @@
                             <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
                                 <div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
                                     <template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
-                                        <div class="logo-outer-style re">
-                                            <img class="logo-style" :style="up_slide_old_logo_style" :src="form.logo[0].url" />
-                                            <template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
-                                                <img class="logo-style abs left-0" :style="'opacity:0;' + up_slide_opacity" :src="new_style.up_slide_logo[0].url" />
-                                            </template>
-                                        </div>
+                                        <template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
+                                            <!-- 有上滑logo的处理逻辑 -->
+                                            <div class="logo-outer-style re">
+                                                <img class="logo-style" :style="up_slide_old_logo_style + 'width:' + ((props.scollTop - 5) / 90 < 1 ? 100 + '%;' : 0)" :src="form.logo[0].url" />
+                                                <img :class="['logo-style', {'abs left-0': (props.scollTop - 5) / 90 <= 1 }]" :style="'opacity:0;' + up_slide_opacity" :src="new_style.up_slide_logo[0].url" />
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!-- 没有上滑logo -->
+                                            <div class="logo-outer-style re">
+                                                <img class="logo-style" :src="form.logo[0].url" />
+                                            </div>
+                                        </template>
                                     </template>
                                     <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
                                     <template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
@@ -236,6 +243,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     .logo-style {
         max-height: 2.8rem;
         max-width: 100%;
+        transition: all 0.3s;
         :deep(.image-slot) {
             height: 2.8rem;
             width: 2.8rem;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 63d95667..c93433e5 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -286,7 +286,7 @@
     white-space: initial;
 }
 // 数字和文字超出范围不整体换行
-.txet-word-break {
+.text-word-break {
     word-break: break-all;
     overflow-wrap: break-word;
     word-wrap: break-word;