From 7f5df0e0d930435408f2d4b5486a585e86642a62 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, 28 Aug 2024 15:31:08 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/layout/main/main-top.png | Bin 4001 -> 3389 bytes src/components/page-settings/index.vue | 29 +++++-- src/components/page-settings/page-content.vue | 6 +- src/components/page-settings/page-setting.vue | 22 +++++ src/components/page-settings/page-styles.vue | 75 ++++++++++++++++++ .../components/main/default/header-nav.ts | 32 ++++++-- src/layout/components/main/index.vue | 44 ++++++---- src/layout/components/settings/index.vue | 12 ++- 8 files changed, 182 insertions(+), 38 deletions(-) create mode 100644 src/components/page-settings/page-setting.vue create mode 100644 src/components/page-settings/page-styles.vue diff --git a/src/assets/images/layout/main/main-top.png b/src/assets/images/layout/main/main-top.png index fc26fe9339db531796e34656933fb9d5a4081096..8443a8cae4b091baff4fb3e10f056a9e224f5935 100644 GIT binary patch literal 3389 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 diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue index ae70fef2..0237ed39 100644 --- a/src/components/page-settings/index.vue +++ b/src/components/page-settings/index.vue @@ -1,8 +1,8 @@ diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue new file mode 100644 index 00000000..4489b1e8 --- /dev/null +++ b/src/components/page-settings/page-setting.vue @@ -0,0 +1,22 @@ + + diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue new file mode 100644 index 00000000..b461ce5d --- /dev/null +++ b/src/components/page-settings/page-styles.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts index ee7197e0..e443e1e8 100644 --- a/src/layout/components/main/default/header-nav.ts +++ b/src/layout/components/main/default/header-nav.ts @@ -1,19 +1,41 @@ +import defaultCommon from './index'; + interface DefaultFooterNav { content: { color_list: color_list[]; title: string; - direction: string; - background_img_style: number; - background_img_url: uploadList[]; }; + style: { + background_type: string; + background_color_list: color_list[]; + background_direction: string; + background_img_url: uploadList[]; + background_title_color: string, + background_title_typeface: string, + background_title_size: number, + function_buttons_type: string, + immersive_style: boolean, + up_slide_display: boolean, + common_style: object; + } } const defaultFooterNav: DefaultFooterNav = { content: { color_list: [{ color: '#f5f5f5', color_percentage: '' }], title: '', - direction: '180deg', - background_img_style: 2, + }, + style: { + background_type: 'color', + background_color_list: [{ color: '#fff', color_percentage: '' }], + background_direction: '180deg', background_img_url: [], + background_title_color: '#000', + background_title_typeface: '500', + background_title_size: 14, + function_buttons_type: 'black', + immersive_style: false, + up_slide_display: true, + common_style: defaultCommon, }, }; diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue index c2bf16c8..08a2fb21 100644 --- a/src/layout/components/main/index.vue +++ b/src/layout/components/main/index.vue @@ -17,21 +17,20 @@
-
- 页面设置 - 导出 - 导入 - 清空 -
+
+ 页面设置 + 导出 + 导入 + 清空 +
-
- +
-
+
@@ -182,11 +181,23 @@ watch( page_settings(); } ); +const top_padding = ref(90); +const top_margin = ref(0); watchEffect(() => { - if (props.header.com_data?.content) { - const content = props.header.com_data?.content; - const container_common_styles = gradient_computer(content) + background_computer(content); - content_style.value = container_common_styles; + if (page_data.value.com_data) { + const { immersive_style, up_slide_display } = page_data.value.com_data.style; + // 不开启沉浸式 和 上滑显示 + if (immersive_style || !up_slide_display) { + top_padding.value = 2; + } else { + top_padding.value = 90; + } + // 开启沉浸式并且没有开通上滑显示 + if (immersive_style && !up_slide_display) { + top_margin.value = -90; + } else { + top_margin.value = 0; + } } }); watch( @@ -575,7 +586,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri position: absolute; left: 50%; margin-left: 26rem; - top: 4.7rem; + top: 0; display: flex; flex-direction: column; gap: 2rem; @@ -595,7 +606,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri height: 100%; .model-content { position: relative; - height: 84.4rem; + height: 84.6rem; .model-bottom { position: absolute; bottom: 0; @@ -613,6 +624,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri .model-drag { overflow-y: auto; + padding-top: 0.2rem; max-height: 84.4rem; &::-webkit-scrollbar { display: none; @@ -622,7 +634,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri background: #f5f5f5; margin: 0 auto; .drag-area { - min-height: 75.5rem; + min-height: 68.1rem; } .drag-area .float-window { position: fixed; diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue index 331f6519..6ad99be2 100644 --- a/src/layout/components/settings/index.vue +++ b/src/layout/components/settings/index.vue @@ -3,17 +3,15 @@
{{ value.name }}
- + + 内容 + 样式 +