diff --git a/src/assets/images/components/page-settings/theme_1.png b/src/assets/images/components/page-settings/theme_1.png new file mode 100644 index 00000000..f730d1d4 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_1.png differ diff --git a/src/assets/images/components/page-settings/theme_2.png b/src/assets/images/components/page-settings/theme_2.png new file mode 100644 index 00000000..a21fe464 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_2.png differ diff --git a/src/assets/images/components/page-settings/theme_3.png b/src/assets/images/components/page-settings/theme_3.png new file mode 100644 index 00000000..59bb3c61 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_3.png differ diff --git a/src/assets/images/components/page-settings/theme_4.png b/src/assets/images/components/page-settings/theme_4.png new file mode 100644 index 00000000..1e518303 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_4.png differ diff --git a/src/assets/images/components/page-settings/theme_5.png b/src/assets/images/components/page-settings/theme_5.png new file mode 100644 index 00000000..bc4762a0 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_5.png differ diff --git a/src/assets/images/components/page-settings/theme_6.png b/src/assets/images/components/page-settings/theme_6.png new file mode 100644 index 00000000..efc1aae6 Binary files /dev/null and b/src/assets/images/components/page-settings/theme_6.png differ diff --git a/src/assets/images/layout/main/function-icon-black.png b/src/assets/images/layout/main/function-icon-black.png new file mode 100644 index 00000000..f050df82 Binary files /dev/null and b/src/assets/images/layout/main/function-icon-black.png differ diff --git a/src/assets/images/layout/main/function-icon-white.png b/src/assets/images/layout/main/function-icon-white.png new file mode 100644 index 00000000..35af064e Binary files /dev/null and b/src/assets/images/layout/main/function-icon-white.png differ diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue index 3fe0bbfe..169322fe 100644 --- a/src/components/common/common-styles/index.vue +++ b/src/components/common/common-styles/index.vue @@ -63,7 +63,7 @@ const props = defineProps({ value: { type: Object, default: () => ({}), - }, + } }); // 初始化表单数据 const init_form = reactive({ diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue index 893feb98..ee315a64 100644 --- a/src/components/model-coupon/model-coupon-setting.vue +++ b/src/components/model-coupon/model-coupon-setting.vue @@ -117,20 +117,8 @@ const default_config = { }, }; const change_theme = (val: string) => { - if (val === '1') { - form.value.style = default_config.style.theme_1; - } else if (val === '2') { - form.value.style = default_config.style.theme_2; - } else if (val === '3') { - form.value.style = default_config.style.theme_3; - } else if (val === '4') { - form.value.style = default_config.style.theme_4; - } else if (val === '5') { - form.value.style = default_config.style.theme_5; - } else if (val === '6') { - form.value.style = default_config.style.theme_6; - } else if (val === '7') { - form.value.style = default_config.style.theme_7; + if (val) { + form.value.style = Object.assign({}, form.value.style, (default_config.style)[`theme_${Number(val) + 1}`]); } }; diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue index 0237ed39..2aca4f63 100644 --- a/src/components/page-settings/index.vue +++ b/src/components/page-settings/index.vue @@ -2,10 +2,15 @@
- +
-
- {{ props.pageData.com_data?.content?.title || '新建页面' }} +
+
+ {{ props.pageData.com_data?.content?.title || '新建页面' }} +
+
+ +
@@ -30,17 +35,15 @@ const new_style = computed(() => props.pageData.com_data.style); const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative'); const roll_style = computed(() => { let style = ``; - if (new_style.value.background_type === 'color') { - style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }); - } else if (new_style.value.background_type === 'image') { - style += background_computer(new_style.value); + if (new_style.value.background_type === 'color_image') { + style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value); } else { style += `background: transparent;`; } return style }); -const url_computer = () => { - const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value; +const url_computer = (name: string) => { + const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value; return new_url; }; @@ -54,8 +57,7 @@ const url_computer = () => { .roll { width: 39rem; margin: 0 auto; - // box-shadow: 0px 0 0px 0.2rem #fff; - // border-bottom: 0.1rem solid #f5f5f5; + cursor: pointer; } .img { width: 34rem; @@ -63,8 +65,15 @@ const url_computer = () => { } .model-head { height: 4.3rem; - padding: 1.1rem 0; - cursor: pointer; +} +.model-head-icon { + position: absolute; + right: 1.2rem; + bottom: 0.6rem; + height: 3.2rem; + .function-icon { + height: 3.2rem; + } } .page-settings-border { // border: 0.2rem solid $cr-main; diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue index b461ce5d..cf4dc49d 100644 --- a/src/components/page-settings/page-styles.vue +++ b/src/components/page-settings/page-styles.vue @@ -7,13 +7,24 @@
透明 - 颜色 - 图片 + 颜色/图片 -