From 155dad2da4f524497e556474d1b8dddd8a40612a Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 25 Sep 2024 09:56:47 +0800
Subject: [PATCH] 1.diy---header

---
 components/diy/header.vue | 142 ++++++++++++++++++++------------------
 pages/diy/diy.vue         |   8 +--
 2 files changed, 77 insertions(+), 73 deletions(-)

diff --git a/components/diy/header.vue b/components/diy/header.vue
index 23c6f9ed..b8cd3712 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -1,39 +1,41 @@
 <template>
-    <view class="bg-white pf top-0 left-0 right-0" :style="'padding-top:' + bar_height + 'rpx'">
-        <view class="header-content flex-row align-c" :style="nav_bar_height">
-            <view class="model-top flex-1" :style="position">
-                <view class="roll pr z-i" :style="roll_style">
-                    <view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
-                        <view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
-                            <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
-                                <template v-if="['2', '3'].includes(form.content.theme)">
-                                    <view class="logo-outer-style">
-                                        <image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
-                                    </view>
-                                </template>
-                                <view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
-                                <template v-if="['3', '5'].includes(form.content.theme)">
-                                    <view class="flex-1">
-                                        <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
-                                    </view>
-                                </template>
-                            </view>
-                            <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
-                                <view class="flex-row align-c gap-2">
-                                    <iconfont name="icon-location" size="12" color="0"></iconfont>
-                                    <span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
-                                    <iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
+    <view class="header-container" :style="roll_style + position">
+        <view class="bg-white pf top-0 left-0 right-0 margin-bottom-sm" :style="top_content_style">
+            <view class="header-content flex-row align-c">
+                <view class="model-top flex-1">
+                    <view class="roll pr z-i">
+                        <view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
+                            <view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
+                                <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
+                                    <template v-if="['2', '3'].includes(form.content.theme)">
+                                        <view class="logo-outer-style">
+                                            <image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
+                                        </view>
+                                    </template>
+                                    <view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
+                                    <template v-if="['3', '5'].includes(form.content.theme)">
+                                        <view class="flex-1">
+                                            <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
+                                        </view>
+                                    </template>
                                 </view>
-                                <template v-if="['5'].includes(form.content.theme)">
-                                    <view class="flex-1">
-                                        <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
+                                <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
+                                    <view class="flex-row align-c gap-2">
+                                        <iconfont name="icon-location" size="12" color="0"></iconfont>
+                                        <span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
+                                        <iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
+                                    </view>
+                                    <template v-if="['5'].includes(form.content.theme)">
+                                        <view class="flex-1">
+                                            <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
+                                        </view>
+                                    </template>
+                                </view>
+                                <view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
+                                    <view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
+                                        <image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
+                                        <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
                                     </view>
-                                </template>
-                            </view>
-                            <view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
-                                <view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
-                                    <image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
-                                    <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
                                 </view>
                             </view>
                         </view>
@@ -67,15 +69,22 @@
         },
         data() {
             return {
-                bar_height: bar_height,
                 form: {},
                 new_style: {},
                 position: '',
                 roll_style: '',
                 text_style: '',
                 header_style: 'max-width:100%',
-                // 导航栏高度
-                nav_bar_height: 'height:120rpx;',
+                common_app_is_header_nav_fixed: 0,
+                // #ifdef MP
+                top_content_style: 'padding-top:' + (bar_height + 5) + 'px;',
+                // #endif
+                // #ifdef H5 || MP-TOUTIAO
+                top_content_style: 'padding-top:' + (bar_height + 7) + 'px;',
+                // #endif
+                // #ifdef APP
+                top_content_style: 'padding-top:' + bar_height + 'px;',
+                // #endif
             };
         },
         created() {
@@ -100,21 +109,16 @@
                 // 小程序下，获取小程序胶囊的宽度
                 let menuButtonInfo = 'max-width:100%';
 
-                //获取手机状态栏高度
-                let new_nav_bar_height = 60;
                 // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
                 const custom = uni.getMenuButtonBoundingClientRect();
-                new_nav_bar_height = custom.height + (custom.top - bar_height) * 2;
-                console.log('new_nav_bar_height', new_nav_bar_height);
-                menuButtonInfo = `max-width:calc(100% - ${custom.width + 130}rpx);padding-top:${new_nav_bar_height}rpx`;
+                menuButtonInfo = `max-width:calc(100% - ${custom.width + 130}rpx);`;
                 // #endif
                 this.setData({
                     form: this.value,
-                    nav_bar_height: `height:${new_nav_bar_height * 2}rpx;`,
-                    position: (new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;') + 'top:' + bar_height + 'rpx;',
+                    position: new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;',
                     roll_style: new_roll_style,
                     text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
-                    header_style: `height:${new_nav_bar_height * 2}rpx;` + menuButtonInfo,
+                    header_style: menuButtonInfo,
                 });
             },
         },
@@ -122,37 +126,37 @@
 </script>
 
 <style lang="scss" scoped>
-    .model-top {
-        left: 50%;
+    .header-container {
         z-index: 2;
-        transform: translateX(-50%);
-        .roll {
-            width: 780rpx;
-            height: 100%;
-            margin: 0 auto;
-            cursor: pointer;
+        .model-top {
+            .roll {
+                width: 780rpx;
+                height: 100%;
+                margin: 0 auto;
+                cursor: pointer;
+            }
+            .img {
+                width: 680rpx;
+            }
         }
-        .img {
-            width: 680rpx;
+        .model-head {
+            overflow: hidden;
         }
-    }
-    .model-head {
-        overflow: hidden;
-    }
-    .model-head-icon {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        height: 64rpx;
-        .function-icon {
+        .model-head-icon {
+            position: absolute;
+            right: 0;
+            bottom: 0;
             height: 64rpx;
+            .function-icon {
+                height: 64rpx;
+            }
         }
-    }
-    .logo-outer-style {
-        height: 64rpx;
-        .logo-style {
+        .logo-outer-style {
             height: 64rpx;
-            width: 64rpx;
+            .logo-style {
+                height: 64rpx;
+                width: 64rpx;
+            }
         }
     }
 </style>
diff --git a/pages/diy/diy.vue b/pages/diy/diy.vue
index 25069ef3..774b688a 100644
--- a/pages/diy/diy.vue
+++ b/pages/diy/diy.vue
@@ -1,23 +1,23 @@
 <template>
     <view>
-        <componentDiy :value="diy_data"></componentDiy>
+        <!-- <componentDiy :value="diy_data"></componentDiy> -->
     </view>
 </template>
 
 <script>
     import componentDiy from '@/components/diy/diy';
-    import initData from './init_data';
+    // import initData from './init_data';
     export default {
         components: {
             componentDiy,
         },
         data() {
             return {
-                diy_data: initData,
+                // diy_data: initData,
             };
         },
         mounted() {
-            console.log(initData);
+            // console.log(initData);
         },
         methods: {},
     };