页面设置开发

src/components/page-settings/index.vue

@@ -1,23 +1,23 @@
 <template>
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
-            <div class="pb-12 pl-6 pr-13 w">
+            <div class="pt-15 pl-18 pr-22 w pb-6" :style="[!isEmpty(roll_style) ? '' : 'background-color: #fff']">
                 <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
             </div>
-            <div class="model-head tc re">
+            <div class="model-head tc re mlr-12 mt-6">
                 <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
                     <template v-if="['2', '3'].includes(form.theme)">
                         <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
                     </template>
-                    <div v-if="['1', '2'].includes(form.theme)">{{ form?.title || '新建页面' }}</div>
+                    <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
                     <template v-if="['3', '5'].includes(form.theme)">
                         <div class="flex-1" style="padding-right:90px">
                             <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
                         </div>
                     </template>
                 </div>
-                <div class="flex align-c h gap-10">
+                <div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
-                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name || '默认定位名称' }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
+                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
                     <template v-if="['5'].includes(form.theme)">
                         <div class="flex-1" style="padding-right:90px">
                             <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
@@ -33,7 +33,7 @@
 </template>
 <script setup lang="ts">
 import { background_computer, gradient_computer } from '@/utils';
-
+import { isEmpty } from 'lodash';
 interface Props {
     pageData: any;
     showPage: boolean;
@@ -61,6 +61,7 @@ const roll_style = computed(() => {
     } else {
         style += `background: transparent;`;
     }
+    console.log(style);
     return style
 });
 const url_computer = (name: string) => {
@@ -78,7 +79,7 @@ const text_style = computed(() => `font-weight:${ new_style.value.header_backgro
     transform: translateX(-50%);
     .roll {
         width: 39rem;
-        padding: 1.5rem 1.2rem 0.9rem 1.2rem;
+        padding-bottom: 0.9rem;
         margin: 0 auto;
         cursor: pointer;
     }

src/components/page-settings/page-content.vue

@@ -82,7 +82,6 @@ const base_list = reactive({
         { id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
         { id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
         { id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
-        { id: '6', name: '风格6', url: new URL(`../../assets/images/components/page-settings/theme-6.png`, import.meta.url).href },
     ],
     bottom_navigation: [
         { name: '显示', value: '1' },

src/components/page-settings/page-setting.vue

@@ -23,9 +23,9 @@ const default_data = {
     header_background_direction: '180deg',
     header_background_img_style: 2,
     header_background_img_url: [],
-    header_background_title_color: '#000',
+    header_background_title_color: '#333',
     header_background_title_typeface: '500',
-    header_background_title_size: 14,
+    header_background_title_size: 16,
     function_buttons_type: 'black',
     immersive_style: false,
     up_slide_display: true,
@@ -56,16 +56,10 @@ const default_data = {
 const default_config = {
     style: {
         theme_1: {},
-        theme_2: {
+        theme_2: {},
-        },
+        theme_3: {},
-        theme_3: {
+        theme_4: {},
-        },
+        theme_5: {},
-        theme_4: {
-        },
-        theme_5: {
-        },
-        theme_6: {
-        },
     },
 };
 const form = ref(props.value);

src/components/page-settings/page-styles.vue

@@ -54,7 +54,7 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
-                    <color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>
@@ -91,8 +91,8 @@ const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
 const mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.background_color_list = arry;
+    form.value.header_background_color_list = arry;
-    form.value.background_direction = type.toString();
+    form.value.header_background_direction = type.toString();
 };
 </script>
 <style lang="scss" scoped>

src/layout/components/main/default/header-nav.ts

@@ -59,10 +59,10 @@ const defaultFooterNav: DefaultFooterNav = {
     content: {
         theme: '1',
         logo: [],
-        title: '',
+        title: '新建页面',
         link: {},
         indicator_location: 'center',
-        positioning_name: '',
+        positioning_name: '默认定位名称',
         is_arrows_show: true,
         is_center: false,
         is_icon_show: true,
@@ -91,9 +91,9 @@ const defaultFooterNav: DefaultFooterNav = {
         header_background_direction: '180deg',
         header_background_img_style: 2,
         header_background_img_url: [],
-        header_background_title_color: '#000',
+        header_background_title_color: '#333',
         header_background_title_typeface: '500',
-        header_background_title_size: 14,
+        header_background_title_size: 16,
         function_buttons_type: 'black',
         immersive_style: false,
         up_slide_display: true,