From 9a5ee579920433b02facf92a3d6b31a3c7787321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Wed, 1 Mar 2023 00:26:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B2=89=E6=B5=B8=E5=BC=8F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        |  38 ++++++
 src/components/layout/layout.vue   |   5 +-
 src/pages/auth/auth.vue            | 181 ++++++++++++++---------------
 src/pages/index/index.vue          | 123 ++++++++++----------
 src/pages/member/member.vue        |  28 ++---
 src/static/temp/{member => }/1.png | Bin
 6 files changed, 201 insertions(+), 174 deletions(-)
 rename src/static/temp/{member => }/1.png (100%)

diff --git a/src/App.vue b/src/App.vue
index c78aabb..3c3425f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,4 +57,42 @@ export default {
 .placeholder-style-4 {
     color: #999999;
 }
+// 沉浸样式
+.immerse-image {
+    width: 100%;
+    line-height: 0;
+    .image {
+        width: 100%;
+        height: 590rpx;
+    }
+}
+.immerse-main {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    box-sizing: border-box;
+    .head-title {
+        width: 100%;
+        text-align: center;
+        padding: 30rpx 0 40rpx 0;
+        .title {
+            font-size: 56rpx;
+            font-weight: bold;
+            font-style: italic;
+            color: #ffffff;
+            line-height: 56rpx;
+        }
+        .color {
+            color: #ffce25;
+        }
+        .desc {
+            display: block;
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24rpx;
+            margin-top: 42rpx;
+        }
+    }
+}
 </style>
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index a1e5db9..6a15bd8 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -94,9 +94,10 @@ export default {
         this.header.pt = 0;
         this.header.height = this.$utils.rpx2px(headerHeight * 2);
         // #endif
+        let safePt = this.header.pt + this.header.height;
+        this.$emit("input", safePt);
         if (this.hasPaddingTop) {
-            this.bodyPt = this.header.pt + this.header.height;
-            this.$emit("input", this.bodyPt);
+            this.bodyPt = safePt;
         }
     },
     methods: {
diff --git a/src/pages/auth/auth.vue b/src/pages/auth/auth.vue
index e7f0c09..3ffe577 100644
--- a/src/pages/auth/auth.vue
+++ b/src/pages/auth/auth.vue
@@ -1,90 +1,96 @@
 <template>
-    <app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
+    <app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
         <view class="auth-container">
-            <view class="page-background-image">
-                <image class="background-image" :src="backgroundImage" mode="aspectFill" />
+            <view class="immerse-image">
+                <image class="image" :src="backgroundImage" mode="aspectFill" />
             </view>
-            <view class="auth-form">
-                <view class="select-group">
-                    <view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
-                        <text>账号登录</text>
-                    </view>
-                    <view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
-                        <text>免费注册</text>
-                    </view>
+            <view class="immerse-main" :style="{ top: safePt + utils.rpx2px(20) + 'px' }">
+                <view class="head-title">
+                    <text class="title">熊熊建材安装<text class="color">师傅版</text></text>
+                    <text class="desc">将好师傅交给用户让好服务走进万家 </text>
                 </view>
-                <view class="tab-group">
-                    <view class="tab-item" v-show="tabIndex == 0">
-                        <view class="input-item">
-                            <input
-                                class="input"
-                                type="number"
-                                v-model="mobile"
-                                placeholder="请输入手机号"
-                                placeholder-class="placeholder-style-3"
-                            />
+                <view class="section">
+                    <view class="select-group">
+                        <view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
+                            <text>账号登录</text>
                         </view>
-                        <view class="input-item">
-                            <input
-                                class="input"
-                                type="password"
-                                v-model="password"
-                                placeholder="请输入6位以上密码 "
-                                placeholder-class="placeholder-style-3"
-                            />
-                        </view>
-                        <view class="helper">
-                            <text class="forget-password" @click="forgetPassword">忘记密码？</text>
-                        </view>
-                        <view class="form-save-btn" @click="login">
-                            <text>登录</text>
-                        </view>
-                        <view class="bottom-link">
-                            <text>没有账号？</text>
-                            <text class="link" @click="tabIndex = 1">免费注册</text>
+                        <view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
+                            <text>免费注册</text>
                         </view>
                     </view>
-                    <view class="tab-item" v-show="tabIndex == 1">
-                        <view class="input-item">
-                            <input
-                                class="input"
-                                type="number"
-                                v-model="mobile"
-                                placeholder="请输入手机号"
-                                placeholder-class="placeholder-style-3"
-                            />
-                        </view>
-                        <view class="input-item">
-                            <input
-                                class="input"
-                                type="number"
-                                v-model="mobile"
-                                placeholder="请输入验证码"
-                                placeholder-class="placeholder-style-3"
-                            />
-                            <view class="get-code" @click="getVerifyCode">
-                                <text class="text active" v-if="canUse">获取验证码</text>
-                                <text class="text" v-else>{{ sec }}s后重新获取</text>
+                    <view class="tab-group">
+                        <view class="tab-item" v-show="tabIndex == 0">
+                            <view class="input-item">
+                                <input
+                                    class="input"
+                                    type="number"
+                                    v-model="mobile"
+                                    placeholder="请输入手机号"
+                                    placeholder-class="placeholder-style-3"
+                                />
+                            </view>
+                            <view class="input-item">
+                                <input
+                                    class="input"
+                                    type="password"
+                                    v-model="password"
+                                    placeholder="请输入6位以上密码 "
+                                    placeholder-class="placeholder-style-3"
+                                />
+                            </view>
+                            <view class="helper">
+                                <text class="forget-password" @click="forgetPassword">忘记密码？</text>
+                            </view>
+                            <view class="form-save-btn" @click="login">
+                                <text>登录</text>
+                            </view>
+                            <view class="bottom-link">
+                                <text>没有账号？</text>
+                                <text class="link" @click="tabIndex = 1">免费注册</text>
                             </view>
                         </view>
-                        <view class="input-item">
-                            <input
-                                class="input"
-                                type="password"
-                                v-model="password"
-                                placeholder="请输入6位以上密码 "
-                                placeholder-class="placeholder-style-3"
-                            />
-                        </view>
-                        <view class="helper">
-                            <app-agreement v-model="isAgree" />
-                        </view>
-                        <view class="form-save-btn" @click="register">
-                            <text>同意协议并注册</text>
-                        </view>
-                        <view class="bottom-link">
-                            <text>已有账号？</text>
-                            <text class="link" @click="tabIndex = 0">立即登录</text>
+                        <view class="tab-item" v-show="tabIndex == 1">
+                            <view class="input-item">
+                                <input
+                                    class="input"
+                                    type="number"
+                                    v-model="mobile"
+                                    placeholder="请输入手机号"
+                                    placeholder-class="placeholder-style-3"
+                                />
+                            </view>
+                            <view class="input-item">
+                                <input
+                                    class="input"
+                                    type="number"
+                                    v-model="mobile"
+                                    placeholder="请输入验证码"
+                                    placeholder-class="placeholder-style-3"
+                                />
+                                <view class="get-code" @click="getVerifyCode">
+                                    <text class="text active" v-if="canUse">获取验证码</text>
+                                    <text class="text" v-else>{{ sec }}s后重新获取</text>
+                                </view>
+                            </view>
+                            <view class="input-item">
+                                <input
+                                    class="input"
+                                    type="password"
+                                    v-model="password"
+                                    placeholder="请输入6位以上密码 "
+                                    placeholder-class="placeholder-style-3"
+                                />
+                            </view>
+                            <view class="helper">
+                                <app-agreement v-model="isAgree" />
+                            </view>
+                            <view class="form-save-btn" @click="register">
+                                <text>同意协议并注册</text>
+                            </view>
+                            <view class="bottom-link">
+                                <text>已有账号？</text>
+                                <text class="link" @click="tabIndex = 0">立即登录</text>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -100,7 +106,9 @@ export default {
     name: "auth",
     data() {
         return {
-            backgroundImage: require("@/static/temp/auth/1.png"),
+            utils: this.$utils,
+            safePt: 0,
+            backgroundImage: require("@/static/temp/1.png"),
             canUse: true,
             sec: 0,
             timeTask: null,
@@ -162,21 +170,12 @@ export default {
     width: 100%;
     padding-bottom: 30rpx;
 }
-.page-background-image {
-    width: 100%;
-    line-height: 0;
-    .background-image {
-        width: 100%;
-        height: 590rpx;
-    }
-}
-.auth-form {
-    position: relative;
+.section {
     width: 710rpx;
-    background: #ffffff;
-    margin: -225rpx auto 0 auto;
+    margin: 20rpx auto 0 auto;
     box-sizing: border-box;
     padding: 46rpx 30rpx 150rpx 30rpx;
+    background-color: #ffffff;
 }
 .select-group {
     width: 100%;
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 52d02a0..ab9ff17 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,57 +1,63 @@
 <template>
-    <app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
+    <app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
         <view class="index-container">
-            <view class="page-background-image">
-                <image class="background-image" :src="backgroundImage" mode="aspectFill" />
+            <view class="immerse-image">
+                <image class="image" :src="backgroundImage" mode="aspectFill" />
             </view>
-            <view class="index-body">
-                <view class="notify">
-                    <view class="icon">
-                        <text class="iconfont icon-gonggao"></text>
-                        <text class="text">公告</text>
-                    </view>
-                    <view class="slide-box">
-                        <swiper
-                            class="notify-swiper"
-                            circular
-                            :indicator-dots="false"
-                            :autoplay="true"
-                            :vertical="true"
-                            interval="3000"
-                            duration="1000"
-                        >
-                            <swiper-item v-for="(item, index) in notifyList" :key="index">
-                                <view class="swiper-item notify-item">
-                                    <text class="limit-line clamp-1">
-                                        {{ item.title }}
-                                    </text>
-                                </view>
-                            </swiper-item>
-                        </swiper>
-                    </view>
+            <view class="immerse-main" :style="{ top: safePt + utils.rpx2px(20) + 'px' }">
+                <view class="head-title">
+                    <text class="title">熊熊建材安装<text class="color">师傅版</text></text>
+                    <text class="desc">将好师傅交给用户让好服务走进万家 </text>
                 </view>
-                <view class="nav">
-                    <view class="nav-item" v-for="(item, index) in navList" :key="index">
-                        <image class="icon" :src="item.icon" mode="aspectFill" />
-                        <text class="title">{{ item.name }}</text>
+                <view class="section">
+                    <view class="notify">
+                        <view class="icon">
+                            <text class="iconfont icon-gonggao"></text>
+                            <text class="text">公告</text>
+                        </view>
+                        <view class="slide-box">
+                            <swiper
+                                class="notify-swiper"
+                                circular
+                                :indicator-dots="false"
+                                :autoplay="true"
+                                :vertical="true"
+                                interval="3000"
+                                duration="1000"
+                            >
+                                <swiper-item v-for="(item, index) in notifyList" :key="index">
+                                    <view class="swiper-item notify-item">
+                                        <text class="limit-line clamp-1">
+                                            {{ item.title }}
+                                        </text>
+                                    </view>
+                                </swiper-item>
+                            </swiper>
+                        </view>
                     </view>
-                </view>
-                <view class="action-group">
-                    <view class="item">
-                        <text class="num">{{ action.item1 }}</text>
-                        <text class="title">立即抢单</text>
+                    <view class="nav">
+                        <view class="nav-item" v-for="(item, index) in navList" :key="index">
+                            <image class="icon" :src="item.icon" mode="aspectFill" />
+                            <text class="title">{{ item.name }}</text>
+                        </view>
                     </view>
-                    <view class="item">
-                        <text class="num">{{ action.item2 }}</text>
-                        <text class="title">立即报价</text>
-                    </view>
-                    <view class="item">
-                        <text class="num">{{ action.item3 }}</text>
-                        <text class="title">配送抢单</text>
-                    </view>
-                    <view class="item">
-                        <text class="num">{{ action.item4 }}</text>
-                        <text class="title">指派专区</text>
+                    <view class="action-group">
+                        <view class="item">
+                            <text class="num">{{ action.item1 }}</text>
+                            <text class="title">立即抢单</text>
+                        </view>
+                        <view class="item">
+                            <text class="num">{{ action.item2 }}</text>
+                            <text class="title">立即报价</text>
+                        </view>
+                        <view class="item">
+                            <text class="num">{{ action.item3 }}</text>
+                            <text class="title">配送抢单</text>
+                        </view>
+                        <view class="item">
+                            <text class="num">{{ action.item4 }}</text>
+                            <text class="title">指派专区</text>
+                        </view>
                     </view>
                 </view>
             </view>
@@ -65,7 +71,9 @@ export default {
     name: "index",
     data() {
         return {
-            backgroundImage: require("@/static/temp/auth/1.png"),
+            utils: this.$utils,
+            safePt: 0,
+            backgroundImage: require("@/static/temp/1.png"),
             notifyList: [
                 {
                     id: 1,
@@ -135,21 +143,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.page-background-image {
-    width: 100%;
-    line-height: 0;
-    .background-image {
-        width: 100%;
-        height: 590rpx;
-    }
-}
-.index-body {
-    position: relative;
+.section {
     width: 710rpx;
-    background: #ffffff;
-    margin: -225rpx auto 0 auto;
-    box-sizing: border-box;
     padding: 20rpx;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    margin: 24rpx auto 0 auto;
 }
 .notify {
     display: flex;
diff --git a/src/pages/member/member.vue b/src/pages/member/member.vue
index ff20fca..81dae7c 100644
--- a/src/pages/member/member.vue
+++ b/src/pages/member/member.vue
@@ -1,10 +1,10 @@
 <template>
-    <app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
+    <app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
         <view class="member-container">
-            <view class="page-background-image">
-                <image class="background-image" :src="backgroundImage" mode="aspectFill" />
+            <view class="immerse-image">
+                <image class="image" :src="backgroundImage" mode="aspectFill" />
             </view>
-            <view class="main-container">
+            <view class="immerse-main" :style="{ top: safePt + utils.rpx2px(20) + 'px' }">
                 <view class="head">
                     <view class="headimg">
                         <image class="image" :src="userInfo.headimg" mode="aspectFill" />
@@ -69,8 +69,10 @@ export default {
     name: "member",
     data() {
         return {
+            utils: this.$utils,
             models: this.$models,
-            backgroundImage: require("@/static/temp/member/1.png"),
+            safePt: 0,
+            backgroundImage: require("@/static/temp/1.png"),
             userInfo: {
                 headimg: require("@/static/temp/member/2.png"),
                 username: "李师傅",
@@ -95,23 +97,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.page-background-image {
-    width: 100%;
-    line-height: 0;
-    .background-image {
-        width: 100%;
-        height: 590rpx;
-    }
+.immerse-main {
+    padding: 0 20rpx;
 }
 .member-container {
     width: 100%;
-    .main-container {
-        position: relative;
-        width: 100%;
-        margin: -450rpx 0 0 0;
-        box-sizing: border-box;
-        padding: 0 20rpx;
-    }
 }
 .head {
     width: 100%;
diff --git a/src/static/temp/member/1.png b/src/static/temp/1.png
similarity index 100%
rename from src/static/temp/member/1.png
rename to src/static/temp/1.png