From 40a0ff50f7874907636a71d0ddf1c6616e697d88 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, 19 Oct 2024 15:30:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98=E5=92=8C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-article-list/index.vue | 2 +- .../model-auxiliary-line-styles.vue | 2 - src/components/model-data-magic/index.vue | 1 + src/components/model-float-window/index.vue | 3 +- src/components/model-goods-list/index.vue | 5 +- src/components/model-search/index.vue | 5 +- src/components/model-seckill/index.vue | 5 ++ src/components/model-title/index.vue | 2 +- src/components/page-settings/index.vue | 12 ++-- src/config/const/data-magic.ts | 6 ++ src/config/const/float-window.ts | 7 +++ src/config/const/goods-list.ts | 31 +++++++-- src/config/const/goods-tabs.ts | 25 +++++++- src/config/const/header-nav.ts | 63 +++++++++++++------ src/config/const/img-magic.ts | 7 +++ src/config/const/nav-group.ts | 13 +++- src/config/const/notice.ts | 21 +++++-- src/config/const/row-line.ts | 6 +- src/config/const/search.ts | 18 +++++- src/config/const/seckill.ts | 18 +++++- src/views/layout/components/main/index.vue | 13 +++- 21 files changed, 210 insertions(+), 55 deletions(-) diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue index aed3ce8f..5a79945b 100644 --- a/src/components/model-article-list/index.vue +++ b/src/components/model-article-list/index.vue @@ -242,7 +242,7 @@ watch( field_show.value = new_content.field_show; // 样式 article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';'; - article_desc.value = 'font-size:' + new_style.desc_size + 'px;' + 'color:' + new_style.desc_color + ';'; + article_desc.value = 'font-size:' + new_style.desc_size + 'px;line-height:' + new_style.desc_size + 'px;height:'+ new_style.desc_size + 'px;color:' + new_style.desc_color + ';'; article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';'; article_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';'; content_radius.value = radius_computer(new_style.content_radius); diff --git a/src/components/model-auxiliary-line/model-auxiliary-line-styles.vue b/src/components/model-auxiliary-line/model-auxiliary-line-styles.vue index ac615499..b717778d 100644 --- a/src/components/model-auxiliary-line/model-auxiliary-line-styles.vue +++ b/src/components/model-auxiliary-line/model-auxiliary-line-styles.vue @@ -27,8 +27,6 @@ const props = defineProps({ return { line_color: 'rgba(204, 204, 204, 1)', line_width: 1, - padding_top: 10, - padding_bottom: 10, }; }, }, diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue index a5a5efa7..cc4fc151 100644 --- a/src/components/model-data-magic/index.vue +++ b/src/components/model-data-magic/index.vue @@ -126,6 +126,7 @@ interface data_magic { data_content: any; data_style: any; } +// 屏幕分块 const density = ref('4'); //单元魔方宽度。 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value)); diff --git a/src/components/model-float-window/index.vue b/src/components/model-float-window/index.vue index f92089d8..382fff2d 100644 --- a/src/components/model-float-window/index.vue +++ b/src/components/model-float-window/index.vue @@ -37,12 +37,13 @@ watch(props.value, (val) => { form.value = val?.content || {}; // 样式 new_style.value = val?.style || {}; + // 默认是靠右 let location = `justify-content: flex-end;`; if (new_style.value.display_location == 'left') { location = `justify-content: flex-start;`; } - style.value = location; + // 手机端要做悬浮效果，需要抛给父组件 emits('change', { bottom: new_style.value.offset_number, location: new_style.value.display_location }); }, {immediate: true, deep: true}); diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue index 09f0dd83..daa99b9e 100644 --- a/src/components/model-goods-list/index.vue +++ b/src/components/model-goods-list/index.vue @@ -351,7 +351,7 @@ const layout_type = computed(() => { } return class_type; }); - +// 外部的样式 const layout_style = computed(() => { const radius = theme.value == '6' ? '' : content_radius.value; const padding = ['0', '4'].includes(theme.value) ? content_padding.value : ''; @@ -563,7 +563,8 @@ watchEffect(() => { } .flex-img5 { width: 100%; - min-height: 10.4rem; + height: 100%; + // min-height: 10.4rem; } :deep(.el-carousel) { width: 100%; diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue index 4b254781..a5c1f9f2 100644 --- a/src/components/model-search/index.vue +++ b/src/components/model-search/index.vue @@ -73,10 +73,9 @@ const style = computed(() => { } return common_styles; }); +// 公共样式 const style_container = computed(() => props.isPageSettings ? '' : common_styles_computer(new_style.value.common_style)); const style_img_container = computed(() => props.isPageSettings ? '' : common_img_computer(new_style.value.common_style)); - -const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius)); // 搜索框设置 const box_style = computed(() => { let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`; @@ -85,6 +84,8 @@ const box_style = computed(() => { } return style; }); +// 搜索按钮圆角 +const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius)); const search_button = computed(() => { let style = search_button_radius.value; const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = new_style.value; diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue index 8acec8e8..2ccaf8fb 100644 --- a/src/components/model-seckill/index.vue +++ b/src/components/model-seckill/index.vue @@ -283,18 +283,22 @@ const default_list = { ], }; const list = ref([]); +// 显示时间 const time_config = reactive([ { key: 'hour', value: '00' }, { key: 'minute', value: '00' }, { key: 'second', value: '00' }, ]); +// 定时任务器 const intervalId = ref(undefined); +// 数据存放，用于倒计时 const seckill_time = ref({ endTime: '2024-09-04 18:51:00', startTime: '2024-09-04 18:51:00', status: 0, time_first_text: '距结束', }); +// 倒计时执行的方法 const updateCountdown = () => { const now = new Date(); let endTime = seckill_time.value.endTime; @@ -358,6 +362,7 @@ onBeforeMount(() => { } }); }); +// 组件销毁时，清除定时器 onUnmounted(() => { clearInterval(intervalId.value); }) diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue index ec67a99d..985788e9 100644 --- a/src/components/model-title/index.vue +++ b/src/components/model-title/index.vue @@ -62,7 +62,7 @@ const title_style = computed(() => { } return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`; }); -// 标题的设置 +// 副标题的设置 const subtitle_style = computed(() => { let common_styles = ''; if (new_style.value.subtitle_weight == 'italic') { diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue index 7e9de7bc..06d88b4e 100644 --- a/src/components/page-settings/index.vue +++ b/src/components/page-settings/index.vue @@ -90,11 +90,13 @@ const page_settings = () => { }; const form = computed(() => props.pageData.com_data.content); const new_style = computed(() => props.pageData.com_data.style); - +// 是否搜索换行 const is_search_alone_row = computed(() => form.value.data_alone_row_value.includes('search')); +// 是否图标换行 const is_icon_alone_row = computed(() => form.value.data_alone_row_value.includes('icon')); - +// 沉浸式和上滑显示处理逻辑 const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative')); +// 公共样式 const roll_style = computed(() => { let style = ``; const { header_background_color_list, header_background_direction, header_background_type } = new_style.value; @@ -118,7 +120,7 @@ const roll_img_style = computed(() => { } return style; }); - +// 上滑显示渐变效果 const up_slide_style = computed(() => { let style = ``; if (props.scollTop > 20) { @@ -129,7 +131,7 @@ const up_slide_style = computed(() => { } return style; }); - +// 上滑显示图片效果 const up_slide_img_style = computed(() => { let style = ``; if (props.scollTop > 20) { @@ -140,7 +142,7 @@ const up_slide_img_style = computed(() => { } return style; }); - +// 文字样式 const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`); const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : '')); diff --git a/src/config/const/data-magic.ts b/src/config/const/data-magic.ts index 62a5c6ea..918663d0 100644 --- a/src/config/const/data-magic.ts +++ b/src/config/const/data-magic.ts @@ -21,10 +21,13 @@ interface defaultSearch { const defaultSearch: defaultSearch = { content: { + // 样式风格 style_actived: 0, + // 数据列表 data_magic_list: [], }, style: { + // 图片圆角 img_radius: { radius: 0, radius_top_left: 0, @@ -32,6 +35,7 @@ const defaultSearch: defaultSearch = { radius_bottom_left: 0, radius_bottom_right: 0, }, + // 内容圆角 data_radius: { radius: 0, radius_top_left: 0, @@ -39,7 +43,9 @@ const defaultSearch: defaultSearch = { radius_bottom_left: 0, radius_bottom_right: 0, }, + // 图片间距 image_spacing: 2, + // 公共样式 common_style: defaultCommon, }, }; diff --git a/src/config/const/float-window.ts b/src/config/const/float-window.ts index d2017b67..215c0dbd 100644 --- a/src/config/const/float-window.ts +++ b/src/config/const/float-window.ts @@ -16,15 +16,22 @@ interface defaultSearch { } const defaultSearch: defaultSearch = { content: { + // 跳转方式 button_jump: 'link', + // 图片信息 button_img: [], + // 跳转地址 button_link: {}, }, style: { + // 显示位置 display_location: 'right', + // 距离底部位置 offset_number: 120, offset_number_percentage: '100%', + // 浮动样式 float_style: 'shadow', + // 浮动样式颜色 float_style_color: '#32373a1a', }, }; diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts index a4f80f80..4d34775f 100644 --- a/src/config/const/goods-list.ts +++ b/src/config/const/goods-list.ts @@ -24,7 +24,6 @@ interface DefaultProductList { shop_button_text: string; shop_button_icon_class: string; shop_button_effect: string; - shop_button_size: string; }; style: { shop_padding: paddingStyle; @@ -62,29 +61,42 @@ interface DefaultProductList { } const defaultProductList: DefaultProductList = { content: { + // 商品风格 theme: '0', + // 商品类型 data_type: '0', + // 轮播列数 carousel_col: 3, + // 商品列表 product_show_list: [], data_list: [], data_auto_list: [], - category_ids: defaultSetting.category_ids, - brand_ids: defaultSetting.brand_ids, data_ids: [], + // 价格是否独行 is_price_solo: '1', + // 分类数组 + category_ids: defaultSetting.category_ids, + // 品牌数组 + brand_ids: defaultSetting.brand_ids, + // 排序方式和数量 number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, + // 显示内容 is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'], + // 价格图标地址 static_img: [{ id: 2, url: new_url + 'price.png', original: '角标', title: '角标', ext: '.png', type: 'img' }], + // 是否显示购买按钮 is_shop_show: '1', + // 购买按钮类型 shop_type: 'text', shop_button_text: '购买', shop_button_icon_class: 'cart', + // 点击购买按钮的操作处理 shop_button_effect: '0', - shop_button_size: '1', }, style: { + // 商品内边距 shop_padding: { padding: 10, padding_top: 10, @@ -92,6 +104,7 @@ const defaultProductList: DefaultProductList = { padding_left: 10, padding_right: 10, }, + // 图标圆角 shop_img_radius: { radius: 4, radius_top_left: 4, @@ -99,6 +112,7 @@ const defaultProductList: DefaultProductList = { radius_bottom_left: 4, radius_bottom_right: 4, }, + // 商品圆角 shop_radius: { radius: 8, radius_top_left: 8, @@ -106,11 +120,15 @@ const defaultProductList: DefaultProductList = { radius_bottom_left: 8, radius_bottom_right: 8, }, - content_outer_spacing: 10, // 商品间距 + content_outer_spacing: 10, // 商品外间距 + // 商品内间距 content_spacing: 10, + // 商品高度 content_outer_height: 232, + // 是否滚动 is_roll: '1', interval_time: 3, + // 商品内容大小和颜色设置 shop_title_typeface: '500', shop_title_size: 14, shop_title_color: "#333333", @@ -129,6 +147,7 @@ const defaultProductList: DefaultProductList = { shop_score_color: "#999999", shop_button_typeface:'400', shop_button_size: 12, + // 购买按钮渐变颜色 shop_button_color: [ { color: '#FF3D53', @@ -139,7 +158,9 @@ const defaultProductList: DefaultProductList = { color_percentage: undefined } ], + // 购买按钮文字颜色 shop_button_text_color: '#fff', + // 购买按钮图标颜色和大小 shop_icon_size: 10, shop_icon_color: "#fff", common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 }, diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts index 60bd90f2..98945f1c 100644 --- a/src/config/const/goods-tabs.ts +++ b/src/config/const/goods-tabs.ts @@ -33,7 +33,6 @@ interface DefaultProductList { shop_button_text: string; shop_button_icon_class: string; shop_button_effect: string; - shop_button_size: string; }; style: { tabs_one_theme: string; @@ -81,28 +80,39 @@ interface DefaultProductList { } const defaultProductList: DefaultProductList = { content: { + // 选项卡风格 tabs_theme: '0', + // 是否置顶 tabs_top_up: '0', + // 商品风格 theme: '0', + // 轮播数量 carousel_col: 3, + // 选项卡数据 tabs_list: [ { id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] }, { id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] }, { id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] }, { id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] }, ], + // 选中的内容索引 tabs_active_index: 0, static_img: [{ id: 2, url: new_url + 'price.png', original: '角标', title: '角标', ext: '.png', type: 'img' }], + // 显示内容 is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'], + // 是否显示购买按钮 is_shop_show: '1', + // 价格是否独行 is_price_solo: '1', + // 购买按钮类型 shop_type: 'text', shop_button_text: '购买', shop_button_icon_class: 'cart', + // 点击购买按钮的操作处理 shop_button_effect: '0', - shop_button_size: '1', }, style: { + // 选中样式风格 tabs_one_theme: '0', tabs_checked: [ { color: '#FF2222', color_percentage: undefined }, @@ -115,7 +125,9 @@ const defaultProductList: DefaultProductList = { tabs_weight: '500', tabs_size: 14, tabs_color: 'rgba(51,51,51,1)', + // tabs间距 tabs_spacing: 20, + // 商品圆角 shop_padding: { padding: 10, padding_top: 10, @@ -123,6 +135,7 @@ const defaultProductList: DefaultProductList = { padding_left: 10, padding_right: 10, }, + // 商品图片圆角 shop_img_radius: { radius: 4, radius_top_left: 4, @@ -130,6 +143,7 @@ const defaultProductList: DefaultProductList = { radius_bottom_left: 4, radius_bottom_right: 4, }, + // 商品圆角 shop_radius: { radius: 8, radius_top_left: 8, @@ -137,11 +151,16 @@ const defaultProductList: DefaultProductList = { radius_bottom_left: 8, radius_bottom_right: 8, }, + // 商品外间距 content_outer_spacing: 10, + // 商品内间距 content_spacing: 10, + // 商品高度 content_outer_height: 232, + // 轮播处理 is_roll: '1', interval_time: 3, + // 商品标题等内容处理 shop_title_typeface: '500', shop_title_size: 14, shop_title_color: '#333333', @@ -158,6 +177,7 @@ const defaultProductList: DefaultProductList = { shop_score_typeface: '400', shop_score_size: 10, shop_score_color: '#999999', + // 购买按钮显示 shop_button_typeface: '400', shop_button_size: 12, shop_button_color: [ @@ -171,6 +191,7 @@ const defaultProductList: DefaultProductList = { }, ], shop_button_text_color: '#fff', + // 购买图标的大小和颜色 shop_icon_size: 10, shop_icon_color: '#fff', common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 }, diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts index b2784398..8e1bcf00 100644 --- a/src/config/const/header-nav.ts +++ b/src/config/const/header-nav.ts @@ -79,36 +79,52 @@ interface DefaultFooterNav { } const defaultFooterNav: DefaultFooterNav = { content: { + // 页面设置的风格 theme: '1', logo: [], + // 默认文字 title: !isEmpty(common_store.common.config.site_name) ? common_store.common.config.site_name : '新建页面', + // 跳转地址 link: {}, + // 换行内容 data_alone_row_value: [], + // 对齐方式 indicator_location: 'center', - positioning_name: '未选择位置', + // 右侧图标信息 icon_setting: [{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: { name: '我的消息', page: '/pages/message/message' } }], + // 定位左侧图标内容 is_location_left_icon_show: '1', location_left_img: [], location_left_icon: 'location', + // 定位内容 + positioning_name: '未选择位置', + // 定位右侧图标内容 is_location_right_icon_show: '1', location_right_img: [], location_right_icon: 'arrow-bottom', + // 搜索框处理 内容是否居中显示 is_center: '0', + // 是否显示图标 is_icon_show: '1', icon_link: {}, icon_img: [], icon_class: 'search', + // 搜索提示信息 + tips: '请输入搜索内容', + // 搜索按钮右侧搜索内容 + is_search_show: '0', search_botton_img: [], search_botton_icon: '', is_tips_show: '1', - tips: '请输入搜索内容', - is_search_show: '0', search_type: 'text', search_tips: '搜索', + // 热词数据信息 hot_word_list: [], + // 底部导航显示 0 不显示 1 显示 bottom_navigation_show: '0', }, style: { + // 头部背景显示 header_background_type: 'color_image', header_background_color_list: [{ color: '#fff', color_percentage: undefined }], header_background_direction: '180deg', @@ -117,19 +133,45 @@ const defaultFooterNav: DefaultFooterNav = { header_background_title_color: '#333', header_background_title_typeface: '500', header_background_title_size: 14, + // 换行间距 data_alone_row_space: 5, + // 状态栏风格 function_buttons_type: '0', // 沉浸样式 immersive_style: '0', // 安全距离 general_safe_distance_value: '0', + // 上滑显示处理 up_slide_display: '1', up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }], up_slide_background_direction: '180deg', up_slide_background_img_style: '2', up_slide_background_img: [], + // 左侧返回按钮颜色 left_back_btn_color: '#333', icon_color: '#ccc', + // 定位颜色 + position_color: '#333', + // 右侧图标大小和间距 + img_size: '23', + img_space: '15', + img_color: '#666', + // 搜索提示文字颜色 + tips_color: '#ccc', + // 搜索热词文字颜色 + hot_words_color: '#999', + // 搜索边框颜色 + search_border: '#E4E4E4', + // 搜索背景颜色 + search_bg_color: '#fff', + search_border_radius: { + radius: 16, + radius_top_left: 16, + radius_top_right: 16, + radius_bottom_left: 16, + radius_bottom_right: 16, + }, + // 搜索按钮显示样式 button_inner_color: '#fff', search_botton_color_list: [ { color: '#FF973D', color_percentage: undefined }, @@ -145,21 +187,6 @@ const defaultFooterNav: DefaultFooterNav = { radius_bottom_left: 16, radius_bottom_right: 16, }, - position_color: '#333', - img_size: '23', - img_space: '15', - img_color: '#666', - tips_color: '#ccc', - hot_words_color: '#999', - search_border: '#E4E4E4', - search_bg_color: '#fff', - search_border_radius: { - radius: 16, - radius_top_left: 16, - radius_top_right: 16, - radius_bottom_left: 16, - radius_bottom_right: 16, - }, common_style: { ...defaultCommon, color_list: [{ color: '#f5f5f5', color_percentage: undefined }], diff --git a/src/config/const/img-magic.ts b/src/config/const/img-magic.ts index 44d53d53..eb787636 100644 --- a/src/config/const/img-magic.ts +++ b/src/config/const/img-magic.ts @@ -27,7 +27,9 @@ interface defaultSearch { const defaultSearch: defaultSearch = { content: { + // 图标风格 style_actived: 0, + // 图标数据 img_magic_list: [ { start: {x: 1, y: 1}, @@ -42,16 +44,21 @@ const defaultSearch: defaultSearch = { img_link: {} } ], + // 图标填充方式 img_fit: 'cover', + // 是否限制尺寸 limit_size: '0', + // 图片高度 image_height: 100, }, style: { + // 图片圆角 radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0, + // 图片间距 image_spacing: 2, common_style: defaultCommon, }, diff --git a/src/config/const/nav-group.ts b/src/config/const/nav-group.ts index 4d430455..6b1a28b8 100644 --- a/src/config/const/nav-group.ts +++ b/src/config/const/nav-group.ts @@ -40,10 +40,15 @@ interface defaultSearch { const defaultSearch: defaultSearch = { content: { + // 展示样式 display_style: 'fixed', + // 导航样式 nav_style: 'image_with_text', + // 每行显示数量 single_line: 4, + // 行数 row: 1, + // 导航组内容 nav_content_list: [ { id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题 @@ -72,16 +77,21 @@ const defaultSearch: defaultSearch = { ], }, style: { + // 数据间距 space: 10, + // 图片大小 img_size: 36, + // 图片圆角 radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0, - is_show: '1', + // 轮播处理 is_roll: '1', interval_time: 3, + // 指示器处理逻辑 + is_show: '1', indicator_style: 'dot', indicator_location: 'center', indicator_size: 5, @@ -94,6 +104,7 @@ const defaultSearch: defaultSearch = { }, actived_color: '#2A94FF', color: '#DDDDDD', + // 标题样式 title_color: '#000', title_size: 12, title_space: 10, diff --git a/src/config/const/notice.ts b/src/config/const/notice.ts index 738d93a2..24a097c3 100644 --- a/src/config/const/notice.ts +++ b/src/config/const/notice.ts @@ -44,15 +44,21 @@ interface defaultSearch { } const defaultSearch: defaultSearch = { content: { + // 风格 notice_style: 'inherit', - direction: 'vertical', + // 标题类型 title_type: 'img-icon', title: '测试标题', img_src: [], - icon_class: '', - is_right_button: '1', + + // 滚动方式 + direction: 'vertical', interval_time: 3, + // 更多配置 + is_right_button: '1', more_link: {}, + icon_class: '', + // 公告内容 notice_list: [ { id: get_math(), @@ -63,9 +69,11 @@ const defaultSearch: defaultSearch = { ], }, style: { + // 内容标题 news_color: '#000', news_typeface: '400', news_size: 12, + // 标题背景 title_color_list: [ { color: '', @@ -76,15 +84,18 @@ const defaultSearch: defaultSearch = { color_percentage: undefined, }, ], + // 标题信息 title_color: '#000', title_typeface: '400', title_size: 14, title_width: 24, - title_height: 24, - container_height: 44, + title_height: 24, icon_size: 12, icon_color: '#999', button_color: '#999', + // 容器高度 + container_height: 44, + // 容器信息 container_color_list: [{ color: '#fff', color_percentage: undefined }], container_direction: '180deg', container_background_img_style: '2', diff --git a/src/config/const/row-line.ts b/src/config/const/row-line.ts index 8937fe08..351643f1 100644 --- a/src/config/const/row-line.ts +++ b/src/config/const/row-line.ts @@ -6,20 +6,18 @@ interface DefaultRowLine { style: { line_color: string; line_width: number; - padding_top: number; - padding_bottom: number; common_style: object; }; } const defaultRowLine: DefaultRowLine = { content: { + // 线条样式 styles: 'solid', }, style: { + // 线条颜色 line_color: 'rgba(204, 204, 204, 1)', line_width: 1, - padding_top: 10, - padding_bottom: 10, common_style: { ...defaultCommon, padding_top: 10, diff --git a/src/config/const/search.ts b/src/config/const/search.ts index 2ba73cce..9948ed52 100644 --- a/src/config/const/search.ts +++ b/src/config/const/search.ts @@ -42,23 +42,31 @@ interface defaultSearch { } const defaultSearch: defaultSearch = { content: { + // 搜索提示是否居中 is_center: '0', + // 是否显示左侧icon is_icon_show: '1', icon_link: {}, icon_img: [], icon_class: '', - search_botton_img: [], - search_botton_icon: '', + // 搜索提示信息 is_tips_show: '1', tips: '请输入搜索内容', + // 搜索按钮显示逻辑 + search_botton_img: [], + search_botton_icon: '', is_search_show: '0', search_type: 'text', search_tips: '搜索', + // 是否显示热词 is_hot_word_show: '0', + // 热词数据 hot_word_list: [], }, style: { + // 搜索图标颜色 icon_color: '#ccc', + // 搜索按钮显示样式 button_inner_color: '#fff', search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }], search_botton_direction: '90deg', @@ -71,10 +79,15 @@ const defaultSearch: defaultSearch = { radius_bottom_left: 16, radius_bottom_right: 16, }, + // 搜索提示颜色 tips_color: '#ccc', + // 搜索热词颜色 hot_words_color: '#999', + // 搜索边框颜色 search_border: '#fff', + // 搜索背景颜色 search_bg_color: '#fff', + // 搜索圆角 search_border_radius: { radius: 16, radius_top_left: 16, @@ -82,6 +95,7 @@ const defaultSearch: defaultSearch = { radius_bottom_left: 16, radius_bottom_right: 16, }, + // 热词轮播 is_roll: '1', interval_time: 3, common_style: { diff --git a/src/config/const/seckill.ts b/src/config/const/seckill.ts index 154ae90b..5bc34374 100644 --- a/src/config/const/seckill.ts +++ b/src/config/const/seckill.ts @@ -75,38 +75,50 @@ interface DefaultSeckill { } const defaultSeckill: DefaultSeckill = { content: { + // 头部状态 head_state: '1', + // 主题风格配置 theme: '1', title_type: 'image', title_src: [{ id: 1, url: new_url + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }], theme_4_static_img: [{ id: 2, url: new_url + 'time.png', original: '时钟', title: '时钟', ext: '.png', type: 'img' }], title_text: '限时秒杀', + // 右侧按钮处理 button_status: '1', button_text: '更多', + // 风格类型 shop_style_type: '1', + // 轮播数量 carousel_col: 3, shop_number: 10, + // 商品显示信息 is_show: ['title', 'price', 'original_price'], + // 商品按钮显示 is_shop_show: '1', shop_type: 'text', shop_button_text: '去抢购', shop_button_icon_class: 'cart', + // 秒杀角标配置 seckill_subscript_show: '1', subscript_text: '秒杀', }, style: { + // 文字颜色 title_color: '#fff', title_size: 18, + // 按钮设置 head_button_color: '#fff', head_button_size: 12, end_text_color: '#fff', countdown_bg_color_list: [{ color: '#fff', color_percentage: undefined }], countdown_direction: '180deg', countdown_color: '#FF1818', + // 头部背景设置 header_background_color_list: [{ color: '', color_percentage: undefined }], header_background_direction: '180deg', header_background_img_style: '2', header_background_img: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }], + // 商品内容圆角 shop_radius: { radius: 8, radius_top_left: 8, @@ -114,6 +126,7 @@ const defaultSeckill: DefaultSeckill = { radius_bottom_left: 8, radius_bottom_right: 8, }, + // 商品图片圆角 shop_img_radius: { radius: 4, radius_top_left: 4, @@ -121,6 +134,7 @@ const defaultSeckill: DefaultSeckill = { radius_bottom_left: 4, radius_bottom_right: 4, }, + // 商品间距 shop_padding: { padding: 10, padding_top: 10, @@ -128,8 +142,10 @@ const defaultSeckill: DefaultSeckill = { padding_left: 10, padding_right: 10, }, - content_outer_spacing: 10, // 商品间距 + content_outer_spacing: 10, // 商品外间距 + // 商品内间距 content_spacing: 10, + // 商品高度 content_outer_height: 232, shop_title_typeface: '500', shop_title_size: 14, diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue index ecce364f..fbf41e46 100644 --- a/src/views/layout/components/main/index.vue +++ b/src/views/layout/components/main/index.vue @@ -156,11 +156,18 @@ const bottom_navigation_show = ref(true); // 更新数据第一个的安全距离 const set_padding_top_value = () => { if (diy_data.value.length > 0) { + // 初始数据为0 + let padding_top_index = 0; + // 如果前几个为悬浮按钮，则加一，找到不是悬浮按钮的第一个处理 diy_data.value.forEach((item: any, index: number) => { - if (index === 0) { - item.com_data.style.common_style.padding_top_safe_value = common_store.header_height; + if (index === padding_top_index && item.key === 'float-window') { + padding_top_index = index + 1; } else { - item.com_data.style.common_style.padding_top_safe_value = 0; + if (index === padding_top_index && item.key !== 'float-window') { + item.com_data.style.common_style.padding_top_safe_value = common_store.header_height; + } else { + item.com_data.style.common_style.padding_top_safe_value = 0; + } } }); }