From e26d3f022e260e62d1b2f683b86ccc9070336e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 23 Nov 2024 14:56:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/color-text-size-group/index.vue    |  4 +-
 .../common/mult-color-picker/index.vue        |  6 +-
 src/components/model-article-list/index.vue   | 25 +++++-
 .../model-article-list-content.vue            | 15 ++++
 .../model-article-list-styles.vue             | 21 ++++-
 .../model-article-tabs-content.vue            | 15 ++++
 .../model-article-tabs-styles.vue             | 20 ++++-
 .../components/carousel/product-list-show.vue | 67 +++++++++-------
 .../magic-cube-settings/tabs-styles.vue       | 60 ++++++++++++--
 src/components/model-data-magic/index.vue     |  3 +
 .../model-data-magic-content.vue              | 30 +++++++
 src/components/model-goods-list/index.vue     | 27 +++----
 .../model-goods-list-styles.vue               | 79 ++++++++++++-------
 .../model-goods-tabs-styles.vue               | 74 +++++++++++------
 src/config/const/article-list.ts              | 32 +++++++-
 src/config/const/article-tabs.ts              | 32 +++++++-
 src/config/const/goods-list.ts                | 12 +++
 src/config/const/goods-tabs.ts                | 12 +++
 18 files changed, 419 insertions(+), 115 deletions(-)

diff --git a/src/components/common/color-text-size-group/index.vue b/src/components/common/color-text-size-group/index.vue
index efc7da75..5083ef16 100644
--- a/src/components/common/color-text-size-group/index.vue
+++ b/src/components/common/color-text-size-group/index.vue
@@ -4,7 +4,7 @@
         <el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
             <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
         </el-radio-group>
-        <el-form-item v-if="typeList.includes('size')" :label="sliderName" label-width="40" class="mb-0 w form-item-child-label">
+        <el-form-item v-if="typeList.includes('size')" :label="sliderName" :label-width="labelWidth" class="mb-0 w form-item-child-label">
             <slider v-model="size" :max="100"></slider>
         </el-form-item>
         <!-- 额外的使用内容 -->
@@ -17,11 +17,13 @@ interface Props {
     defaultColor?: string;
     typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
     sliderName?: string;
+    labelWidth?: number;
 }
 const props = withDefaults(defineProps<Props>(), {
     defaultColor: '',
     typeList: () => ['color', 'typeface', 'size'],
     sliderName: '字号',
+    labelWidth: 40,
 });
 const color = defineModel('color', {
     type: String,
diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue
index 1a4fa621..1749d171 100644
--- a/src/components/common/mult-color-picker/index.vue
+++ b/src/components/common/mult-color-picker/index.vue
@@ -10,7 +10,7 @@
             <div v-for="(item, index) in color_list" :key="index" class="flex-row align-s gap-12">
                 <div class="flex-col">
                     <div class="flex-row align-c gap-12">
-                        <el-color-picker v-model="item.color" :predefine="predefine_colors" @change="change_color(index, $event)" />
+                        <el-color-picker v-model="item.color" :predefine="predefine_colors" :show-alpha="isShowAlpha" @change="change_color(index, $event)" />
                         <div class="re mo-input-number">
                             <el-input-number v-model="item.color_percentage" :max="999" placeholder="百分比" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
                             <div class="define-append">%</div>
@@ -46,6 +46,10 @@ const props = defineProps({
             [''];
         },
     },
+    isShowAlpha: {
+        type: Boolean,
+        default: false,
+    },
 });
 const direction_type = ref(props.type);
 let state = reactive({
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 6f69e314..164a9b99 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -46,15 +46,18 @@
                                     <template v-else>
                                         <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
                                     </template>
+                                    <template v-if="field_show.includes('3') && new_content.name_float == '1'">
+                                        <div class="text-line-1" :style="article_name + float_name_style">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                    </template>
                                     <!-- 角标设置 -->
                                     <subscript-index :value="props.value"></subscript-index>
                                 </div>
-                                <div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
+                                <div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
                                     <div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
-                                        <div v-if="field_show.includes('3')" class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                                        <div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
                                         <div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
                                     </div>
-                                    <div class="flex-row jc-sb gap-8 align-e mt-10">
+                                    <div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
                                         <div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
                                         <div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
                                             <icon name="eye"></icon>
@@ -73,7 +76,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle } from '@/utils';
+import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 import ArticleAPI from '@/api/article';
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -283,6 +286,20 @@ const carousel_col = ref('2');
 const carousel_key = ref('0');
 const autoplay = ref<boolean | object>(false);
 const slides_per_group = ref(1);
+// 数据的默认值，避免没有值的时候报错
+const old_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
+const old_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 };
+const old_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 };
+// 文章名称浮动样式
+const float_name_style = computed(() => {
+    const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius = old_radius, name_bg_padding = old_padding, name_bg_margin = old_margin } = new_style.value;
+    const data = {
+        color_list: name_bg_color_list,
+        direction: name_bg_direction,
+    }
+    let location = 'position:absolute;bottom:0;left:0;right:0;'
+    return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
+});
 // 监听value数据变化
 watch(
     () => props.value,
diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue
index 1f06c0fa..8e641683 100644
--- a/src/components/model-article-list/model-article-list-content.vue
+++ b/src/components/model-article-list/model-article-list-content.vue
@@ -28,6 +28,11 @@
                         <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
+                <template v-if="form.theme == '4'">
+                    <el-form-item label="标题浮起">
+                        <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
+                    </el-form-item>
+                </template>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -200,6 +205,16 @@ const url_value_dialog_call_back = (item: any[]) => {
         };
     }
 };
+// 标题浮起之后文章标题的颜色和字体更新
+const switch_chage = (val: string | number | boolean) => {
+    if (val == '1') {
+        data.value.name_color = '#fff';
+        data.value.name_weight = '400';
+    } else {
+        data.value.name_color = '#333';
+        data.value.name_weight = '500';
+    }
+};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index 02da35b1..6c90c42f 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -15,7 +15,20 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="文章名称">
-                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
+                        <el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
+                            <mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
+                        </el-form-item>
+                        <el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
+                            <margin :value="form.name_bg_margin"></margin>
+                        </el-form-item>
+                        <el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
+                            <padding :value="form.name_bg_padding"></padding>
+                        </el-form-item>
+                        <el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
+                            <radius :value="form.name_bg_radius"></radius>
+                        </el-form-item>
+                    </color-text-size-group>
                 </el-form-item>
                 <el-form-item label="文章描述">
                     <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
@@ -154,7 +167,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
 const background_img_change = (arry: uploadList[]) => {
     form.value.article_background_img = arry;
 };
-
+// 文章标题浮起显示设置
+const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.name_bg_color_list = arry;
+    form.value.name_bg_direction = type.toString();
+};
 const emit = defineEmits(['update:value']);
 const common_style_update = (value: any) => {
     form.value.common_style = value;
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index cecfc641..da4a87db 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -58,6 +58,11 @@
                         <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
+                <template v-if="form.article_theme == '4'">
+                    <el-form-item label="标题浮起">
+                        <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
+                    </el-form-item>
+                </template>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -292,6 +297,16 @@ watchEffect(() => {
         form.tabs_top_up = '0';
     }
 });
+// 标题浮起之后文章标题的颜色和字体更新
+const switch_chage = (val: string | number | boolean) => {
+    if (val == '1') {
+        styles.name_color = '#fff';
+        styles.name_weight = '400';
+    } else {
+        styles.name_color = '#333';
+        styles.name_weight = '500';
+    }
+};
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index d7d6b1ca..b2bac977 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -41,7 +41,20 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="文章名称">
-                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
+                        <el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
+                            <mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
+                        </el-form-item>
+                        <el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
+                            <margin :value="form.name_bg_margin"></margin>
+                        </el-form-item>
+                        <el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
+                            <padding :value="form.name_bg_padding"></padding>
+                        </el-form-item>
+                        <el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
+                            <radius :value="form.name_bg_radius"></radius>
+                        </el-form-item>
+                    </color-text-size-group>
                 </el-form-item>
                 <el-form-item label="文章描述">
                     <color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
@@ -197,6 +210,11 @@ const background_img_change = (arry: uploadList[]) => {
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
+// 文章标题浮起显示设置
+const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.name_bg_color_list = arry;
+    form.value.name_bg_direction = type.toString();
+};
 </script>
 <style lang="scss" scoped>
 .styles {
diff --git a/src/components/model-data-magic/components/carousel/product-list-show.vue b/src/components/model-data-magic/components/carousel/product-list-show.vue
index 3161b8ba..0c8136ba 100644
--- a/src/components/model-data-magic/components/carousel/product-list-show.vue
+++ b/src/components/model-data-magic/components/carousel/product-list-show.vue
@@ -14,10 +14,10 @@
                         </div>
                         <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
                             <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
-                            <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
-                                <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <div v-if="isShow.includes('price')" :style="props.goodStyle.goods_price_style">
+                                <span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
-                                    <span class="num">{{ item.show_price_unit }}</span>
+                                    <span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
                                 </template>
                             </div>
                         </div>
@@ -36,14 +36,14 @@
                             <template v-else>
                                 <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                             </template>
-                            <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">
-                                {{ item.show_price_symbol }}{{ item.min_price }}
+                            <div v-if="isShow.includes('price')" class="abs bottom-0 text-line-1" :style="props.goodStyle.goods_price_style + float_pirce_style(props.goodStyle)">
+                                <span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
-                                    {{ item.show_price_unit }}
+                                    <span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
                                 </template>
                             </div>
                         </div>
-                        <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
+                        <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">{{ item.title }}</div>
                     </div>
                 </div>
             </div>
@@ -60,10 +60,10 @@
                         </template>
                         <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
                             <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
-                            <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
-                                <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                            <div v-if="isShow.includes('price')" :style="props.goodStyle.goods_price_style">
+                                <span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
-                                    <span class="num">{{ item.show_price_unit }}</span>
+                                    <span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
                                 </template>
                             </div>
                         </div>
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
-import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
+import { gradient_computer, radius_computer, padding_computer, background_computer, margin_computer } from "@/utils";
 
 interface Props {
     value: Array<any>;
@@ -103,13 +103,22 @@ interface new_style {
     goods_chunk_padding: paddingStyle;
     goods_background_img: uploadList[];
     goods_background_img_style: string;
+    goods_price_color_list: color_list[];
+    goods_price_direction: string;
+    goods_price_radius: radiusStyle;
+    goods_price_padding: paddingStyle;
+    goods_price_margin: marginStyle;
+    goods_price_location: string;
 }
+// 数据的默认值，避免没有值的时候报错
+const old_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
+const old_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 };
+const old_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 };
 
 const block_size = computed(() => {
     const total_gap: number = props.goodStyle.data_goods_gap * (split_list.value.length - 1);
     return props.outerflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');' : 'width: 100%;height:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');';
 });
-
 // 图片显示比例
 const image_scale = computed(() => {
     const data = ['title', 'price', 'price_unit'];
@@ -120,11 +129,28 @@ const image_scale = computed(() => {
         return 100;
     }
 });
+const float_pirce_style = computed(() => {
+    return (val: new_style) => {
+        const { goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center' } = val;
+        const data = {
+            color_list: goods_price_color_list,
+            direction: goods_price_direction,
+        }
+        let location = 'left:50%;transform:translateX(-50%);'
+        if (goods_price_location == 'left') {
+            location = 'left:0;';
+        } else if (goods_price_location == 'right') {
+            location = 'right:0;';
+        }
+        return gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location;
+    }
+});
+
 // 用于样式显示
 const style_container = computed(() => {
     return (val: new_style) => {
         if (!isEmpty(val)) {
-            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 } } = val;
+            const { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius } = val;
             const data = {
                 color_list: goods_color_list,
                 direction: goods_direction,
@@ -138,7 +164,7 @@ const style_container = computed(() => {
 const style_img_container = computed(() => {
     return (val: new_style, type?: string) => {
         if (!isEmpty(val)) {
-            const { 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 }} = val;
+            const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding} = val;
             const data = {
                 background_img: goods_background_img,
                 background_img_style: goods_background_img_style,
@@ -167,19 +193,6 @@ const split_list = computed(() => props.value || {});
     font-size: 0.9rem;
     line-height: 0.9rem;
 }
-
-.price-suspension {
-    width: calc(100% - 0.8rem);
-    margin: 0 0.4rem;
-    background: #fff;
-    font-size: 1.2rem;
-    line-height: 1.7rem;
-    color: #EA3323;
-    text-align: center;
-    position: absolute;
-    bottom: 0.4rem;
-    border-radius: 0.8rem;
-}
 .half-width {
     width: 50%;
 }
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index 75131083..f72a8791 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -90,12 +90,52 @@
     <template v-if="tabs_content.data_type === 'goods'">
         <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>
+            <template v-if="tabs_content.is_show.includes('title')">
+                <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>
+            </template>
+            <template v-if="tabs_content.is_show.includes('price')">
+                <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" :label-width="tabs_content.goods_flex == 'col_price_float' ? 60 : 40" default-color="#000000">
+                        <template v-if="tabs_content.goods_flex == 'col_price_float'">
+                            <el-form-item label="对齐方式" label-width="60" class="mb-0 w form-item-child-label">
+                                <el-radio-group v-model="form.goods_price_location" is-button>
+                                    <el-tooltip content="左对齐" placement="top" effect="light">
+                                        <el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="居中" placement="top" effect="light">
+                                        <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="右对齐" placement="top" effect="light">
+                                        <el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
+                                    </el-tooltip>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
+                                <mult-color-picker :key="form.carouselKey" :value="form.goods_price_color_list" :type="form.goods_price_direction" @update:value="goods_price_mult_color_picker_event"></mult-color-picker>
+                            </el-form-item>
+                            <el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
+                                <margin :key="form.carouselKey" :value="form.goods_price_margin"></margin>
+                            </el-form-item>
+                            <el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
+                                <padding :key="form.carouselKey" :value="form.goods_price_padding"></padding>
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
+                                <radius :key="form.carouselKey" :value="form.goods_price_radius"></radius>
+                            </el-form-item>
+                        </template>
+                    </color-text-size-group>
+                </el-form-item>
+                <el-form-item label="价格符号">
+                    <color-text-size-group v-model:color="form.goods_price_symbol_color" v-model:size="form.goods_price_symbol_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
+                </el-form-item>
+                <template v-if="tabs_content.is_show.includes('price_unit')">
+                    <el-form-item label="价格单位">
+                        <color-text-size-group v-model:color="form.goods_price_unit_color" v-model:size="form.goods_price_unit_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                </template>
+            </template>
             <el-form-item label="背景">
                 <div class="flex-col gap-10 w">
                     <div class="size-12">背景色</div>
@@ -198,7 +238,7 @@ const data_radius_change = (radius: radiusStyle) => {
     ]));
 }
 
-// 商品底板颜色
+// 商品底部颜色
 const goods_mult_color_picker_event = (arry: string[], type: number) => {
     form.value.goods_color_list = arry;
     form.value.goods_direction = type.toString();
@@ -218,6 +258,12 @@ const goods_radius_change = (radius: radiusStyle) => {
     ]));
 }
 
+// 商品价格底部颜色
+const goods_price_mult_color_picker_event = (arry: string[], type: number) => {
+    form.value.goods_price_color_list = arry;
+    form.value.goods_price_direction = type.toString();
+}
+
 watchEffect(() => {
     form.value = props.value;
     tabs_content.value = props.content;
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index f2e8319a..640316fd 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -387,6 +387,9 @@ watch(props.value.content, (val) => {
         data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;`;
         data_style.goods_price_style = goods_trends_config(item.data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
 
+        data_style.goods_price_symbol_style = goods_trends_config(item.data_style, 'price_symbol');
+        data_style.goods_price_unit_style = goods_trends_config(item.data_style, 'price_unit');
+
         const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
         const { goods_list, images_list } = data_content;
         // 商品时的处理逻辑
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 45a0908d..c6bf4368 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -121,6 +121,36 @@ const data_style = {
         padding_left: 15,
         padding_right: 15,
     },
+    goods_price_symbol_size: 9,
+    goods_price_symbol_color: "#EA3323;",
+    goods_price_unit_size: 9,
+    goods_price_unit_color: "#EA3323;",
+    goods_price_location: 'center',
+    goods_price_color_list: [{ color: '#fff', color_percentage: undefined }],
+    goods_price_direction: '180deg',
+    goods_price_background_img_style: '2',
+    goods_price_background_img: [],
+    goods_price_margin: {
+        margin: 0,
+        margin_top: 0,
+        margin_bottom: 4,
+        margin_left: 0,
+        margin_right: 0,
+    },
+    goods_price_padding: {
+        padding: 0,
+        padding_top: 0,
+        padding_bottom: 0,
+        padding_left: 10,
+        padding_right: 10,
+    },
+    goods_price_radius: {
+        radius: 4,
+        radius_top_left: 4,
+        radius_top_right: 4,
+        radius_bottom_left: 4,
+        radius_bottom_right: 4,
+    },
     // 图片圆角
     img_radius: {
         radius: 4,
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index 4c568185..b0ee381f 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -41,14 +41,13 @@
                                     <div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
                                         <div :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
                                             <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                                <span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
                                                 ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                                <span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
                                             </div>
                                             <div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
                                                 <!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
-                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
-                                                    >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <template v-if="is_show('original_price_unit')">
                                                         {{ item.show_original_price_unit }}
                                                     </template>
@@ -76,14 +75,13 @@
                                     <div v-else class="flex-row align-c jc-sb">
                                         <div class="flex-row align-c nowrap">
                                             <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                                <span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
                                                 ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                                <span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
                                             </div>
                                             <div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
                                                 <!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
-                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
-                                                    >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <template v-if="is_show('original_price_unit')">
                                                         {{ item.show_original_price_unit }}
                                                     </template>
@@ -133,14 +131,13 @@
                                     <div class="flex-row align-c jc-sb">
                                         <div class="flex-row align-c nowrap">
                                             <div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                                                <span class="identifying">{{ item.show_price_symbol }}</span
+                                                <span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
                                                 ><span :style="trends_config('price')">{{ item.min_price }}</span>
-                                                <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
+                                                <span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
                                             </div>
                                             <div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
                                                 <!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
-                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
-                                                    >{{ item.show_original_price_symbol }}{{ item.min_original_price }}
+                                                <span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
                                                     <template v-if="is_show('original_price_unit')">
                                                         {{ item.show_original_price_unit }}
                                                     </template>
@@ -547,13 +544,7 @@ watchEffect(() => {
 // }
 .original-price {
     // background-color: #ede2c5;
-    border-radius: 0;
-    color: #999;
     text-decoration: line-through;
-    font-size: 1.2rem;
-    border-bottom-right-radius: 1rem;
-    border-top-right-radius: 1rem;
-    padding: 0 1rem;
 }
 .two-columns {
     width: calc((100% - v-bind(two_columns)) / 2);
diff --git a/src/components/model-goods-list/model-goods-list-styles.vue b/src/components/model-goods-list/model-goods-list-styles.vue
index 84166eea..2adb4b5b 100644
--- a/src/components/model-goods-list/model-goods-list-styles.vue
+++ b/src/components/model-goods-list/model-goods-list-styles.vue
@@ -14,20 +14,39 @@
                         <upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
                     </div>
                 </el-form-item>
-                <el-form-item label="商品名称">
-                    <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-                <el-form-item label="商品简述">
-                    <color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
-                        <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
-                            <slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
+                <template v-if="data.is_show.includes('title')">
+                    <el-form-item label="商品名称">
+                        <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('simple_desc') && ['0', '1', '2', '3', '5'].includes(theme)">
+                    <el-form-item label="商品简述">
+                        <color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
+                            <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                                <slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
+                            </el-form-item>
+                        </color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('price')">
+                    <el-form-item label="商品价格">
+                        <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
+                    </el-form-item>
+                    <el-form-item label="售价符号">
+                        <color-text-size-group v-model:color="form.shop_price_symbol_color" v-model:size="form.shop_price_symbol_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                    <template v-if="data.is_show.includes('price_unit')">
+                        <el-form-item label="售价单位">
+                            <color-text-size-group v-model:color="form.shop_price_unit_color" v-model:size="form.shop_price_unit_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
                         </el-form-item>
-                    </color-text-size-group>
-                </el-form-item>
-                <el-form-item label="商品价格">
-                    <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-                <template v-if="theme != '6'">
+                    </template>
+                </template>
+                <template v-if="data.is_show.includes('original_price') && ['0', '1', '2'].includes(theme)">
+                    <el-form-item label="商品原价">
+                        <color-text-size-group v-model:color="form.shop_original_price_color" v-model:size="form.shop_original_price_size" default-color="#999" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('sales_count') && ['0', '1', '2'].includes(theme) ">
                     <el-form-item label="已售数量">
                         <color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="大小" default-color="#000000"></color-text-size-group>
                     </el-form-item>
@@ -97,24 +116,26 @@
                 <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
                 <div class="divider-line"></div>
             </template>
-            <card-container>
-                <div class="mb-12">购物车按钮</div>
-                <el-form-item label="按钮颜色" class="topic">
-                    <flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
-                </el-form-item>
-                <template v-if="data.shop_type == 'text'">
-                    <el-form-item label="文字设置">
-                        <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+            <template v-if="data.is_shop_show == '1'">
+                <card-container>
+                    <div class="mb-12">购物车按钮</div>
+                    <el-form-item label="按钮颜色" class="topic">
+                        <flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
                     </el-form-item>
-                </template>
-                <template v-else>
-                    <el-form-item label="图标设置">
-                        <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
-                    </el-form-item>
-                </template>
-            </card-container>
+                    <template v-if="data.shop_type == 'text'">
+                        <el-form-item label="文字设置">
+                            <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+                        </el-form-item>
+                    </template>
+                    <template v-else>
+                        <el-form-item label="图标设置">
+                            <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
+                        </el-form-item>
+                    </template>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
         </el-form>
-        <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
     </div>
 </template>
diff --git a/src/components/model-goods-tabs/model-goods-tabs-styles.vue b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
index 9dbf7a48..b66b7dc2 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -40,13 +40,39 @@
                         <upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
                     </div>
                 </el-form-item>
-                <el-form-item label="商品名称">
-                    <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-                <el-form-item label="商品价格">
-                    <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
-                <template v-if="theme != '6'">
+                <template v-if="data.is_show.includes('title')">
+                    <el-form-item label="商品名称">
+                        <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('simple_desc') && ['0', '1', '2', '3', '5'].includes(theme)">
+                    <el-form-item label="商品简述">
+                        <color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
+                            <el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
+                                <slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
+                            </el-form-item>
+                        </color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('price')">
+                    <el-form-item label="商品价格">
+                        <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
+                    </el-form-item>
+                    <el-form-item label="售价符号">
+                        <color-text-size-group v-model:color="form.shop_price_symbol_color" v-model:size="form.shop_price_symbol_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                    <template v-if="data.is_show.includes('price_unit')">
+                        <el-form-item label="售价单位">
+                            <color-text-size-group v-model:color="form.shop_price_unit_color" v-model:size="form.shop_price_unit_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
+                        </el-form-item>
+                    </template>
+                </template>
+                <template v-if="data.is_show.includes('original_price') && ['0', '1', '2'].includes(theme)">
+                    <el-form-item label="商品原价">
+                        <color-text-size-group v-model:color="form.shop_original_price_color" v-model:size="form.shop_original_price_size" default-color="#999" :type-list="['color', 'size']"></color-text-size-group>
+                    </el-form-item>
+                </template>
+                <template v-if="data.is_show.includes('sales_count') && ['0', '1', '2'].includes(theme) ">
                     <el-form-item label="已售数量">
                         <color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="大小" default-color="#000000"></color-text-size-group>
                     </el-form-item>
@@ -116,24 +142,26 @@
                 <subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
                 <div class="divider-line"></div>
             </template>
-            <card-container>
-                <div class="mb-12">购物车按钮</div>
-                <el-form-item label="按钮颜色" class="topic">
-                    <flex-gradients-create :color-list="form.shop_button_color" default-color="#2a94ff"></flex-gradients-create>
-                </el-form-item>
-                <template v-if="data.shop_type == 'text'">
-                    <el-form-item label="文字设置">
-                        <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+            <template v-if="data.is_shop_show == '1'">
+                <card-container>
+                    <div class="mb-12">购物车按钮</div>
+                    <el-form-item label="按钮颜色" class="topic">
+                        <flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
                     </el-form-item>
-                </template>
-                <template v-else>
-                    <el-form-item label="图标设置">
-                        <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
-                    </el-form-item>
-                </template>
-            </card-container>
+                    <template v-if="data.shop_type == 'text'">
+                        <el-form-item label="文字设置">
+                            <color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
+                        </el-form-item>
+                    </template>
+                    <template v-else>
+                        <el-form-item label="图标设置">
+                            <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
+                        </el-form-item>
+                    </template>
+                </card-container>
+                <div class="divider-line"></div>
+            </template>
         </el-form>
-        <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
     </div>
 </template>
diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts
index b9818306..fb0b7401 100644
--- a/src/config/const/article-list.ts
+++ b/src/config/const/article-list.ts
@@ -29,6 +29,7 @@ interface DefaultArticleList {
         subscript_img_src: uploadList[];
         subscript_icon_class: string;
         subscript_text: string;
+        name_float: string;
     };
     style: {
         article_direction: string,
@@ -38,6 +39,11 @@ interface DefaultArticleList {
         name_weight: string;
         name_size: number;
         name_color: string;
+        name_bg_color_list: color_list[];
+        name_bg_direction: string,
+        name_bg_margin: marginStyle,
+        name_bg_padding: paddingStyle,
+        name_bg_radius: radiusStyle,
         desc_color: string;
         desc_size: number;
         name_desc_space: number;
@@ -83,6 +89,7 @@ const defaultArticleList: DefaultArticleList = {
         subscript_img_src: [],
         subscript_icon_class: '',
         subscript_text: '',
+        name_float: '0'
     },
     style: {
         article_direction: '90deg',
@@ -91,7 +98,30 @@ const defaultArticleList: DefaultArticleList = {
         article_background_img: [],
         name_weight: '500',
         name_size: 14,
-        name_color: 'rgba(51, 51, 51, 1)',
+        name_color: '#333',
+        name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
+        name_bg_direction: '180deg',
+        name_bg_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        name_bg_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        name_bg_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
         desc_color: '#999',
         desc_size: 12,
         name_desc_space: 4,
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index 51d1551a..fb59afb4 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -36,6 +36,7 @@ interface DefaultArticleTabs {
         subscript_img_src: uploadList[];
         subscript_icon_class: string;
         subscript_text: string;
+        name_float: string;
     };
     style: {
         tabs_one_theme: string;
@@ -57,6 +58,11 @@ interface DefaultArticleTabs {
         name_weight: string;
         name_size: number;
         name_color: string;
+        name_bg_color_list: color_list[];
+        name_bg_direction: string,
+        name_bg_margin: marginStyle,
+        name_bg_padding: paddingStyle,
+        name_bg_radius: radiusStyle,
         desc_color: string;
         desc_size: number;
         name_desc_space: number;
@@ -103,6 +109,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         subscript_img_src: [],
         subscript_icon_class: '',
         subscript_text: '',
+        name_float: '0',
     },
     style: {
         tabs_one_theme: '0',
@@ -133,7 +140,30 @@ const defaultArticleTabs: DefaultArticleTabs = {
         article_background_img: [],
         name_weight: '500',
         name_size: 14,
-        name_color: 'rgba(51, 51, 51, 1)',
+        name_color: '#333',
+        name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
+        name_bg_direction: '180deg',
+        name_bg_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
+        name_bg_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 10,
+            padding_right: 10,
+        },
+        name_bg_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
+        },
         desc_color: '#999',
         desc_size: 12,
         name_desc_space: 4,
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index c4196149..34038c7d 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -58,6 +58,12 @@ interface DefaultProductList {
         shop_price_typeface: string;
         shop_price_size: number;
         shop_price_color: string;
+        shop_price_symbol_color: string;
+        shop_price_symbol_size: number;
+        shop_price_unit_color: string;
+        shop_price_unit_size: number;
+        shop_original_price_color: string;
+        shop_original_price_size: number;
         shop_sold_number_typeface: string;
         shop_sold_number_size: number;
         shop_sold_number_color: string;
@@ -169,6 +175,12 @@ const defaultProductList: DefaultProductList = {
         shop_price_typeface: '500',
         shop_price_size: 18,
         shop_price_color: "#EA3323;",
+        shop_price_symbol_color: '#EA3323',
+        shop_price_symbol_size: 9,
+        shop_price_unit_color: '#EA3323',
+        shop_price_unit_size: 9,
+        shop_original_price_color: '#999',
+        shop_original_price_size: 12,
         shop_sold_number_typeface: '400',
         shop_sold_number_size: 10,
         shop_sold_number_color: "#999999",
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 6deed05d..f8bc81b7 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -79,6 +79,12 @@ interface DefaultProductList {
         shop_price_typeface: string;
         shop_price_size: number;
         shop_price_color: string;
+        shop_price_symbol_color: string;
+        shop_price_symbol_size: number;
+        shop_price_unit_color: string;
+        shop_price_unit_size: number;
+        shop_original_price_color: string;
+        shop_original_price_size: number;
         shop_sold_number_typeface: string;
         shop_sold_number_size: number;
         shop_sold_number_color: string;
@@ -211,6 +217,12 @@ const defaultProductList: DefaultProductList = {
         shop_price_typeface: '500',
         shop_price_size: 18,
         shop_price_color: '#EA3323;',
+        shop_price_symbol_color: '#EA3323',
+        shop_price_symbol_size: 9,
+        shop_price_unit_color: '#EA3323',
+        shop_price_unit_size: 9,
+        shop_original_price_color: '#999',
+        shop_original_price_size: 12,
         shop_sold_number_typeface: '400',
         shop_sold_number_size: 10,
         shop_sold_number_color: '#999999',