topnuomi
/
xx-worker-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化沉浸式页面

This commit is contained in:
TOP糯米 2023-03-01 00:26:17 +08:00
parent d15fdeddf7
commit 9a5ee57992
6 changed files with 201 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.vue
View File

@ -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>

5
src/components/layout/layout.vue
View File

@ -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: {

33
src/pages/auth/auth.vue
View File

@ -1,10 +1,15 @@
<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="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="section">
<view class="select-group">
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
<text>账号登录</text>
@ -90,6 +95,7 @@
</view>
</view>
</view>
</view>
</app-layout>
</template>
@ -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%;

35
src/pages/index/index.vue
View File

@ -1,10 +1,15 @@
<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="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="section">
<view class="notify">
<view class="icon">
<text class="iconfont icon-gonggao"></text>
@ -56,6 +61,7 @@
</view>
</view>
</view>
</view>
</app-layout>
</template>
@ -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;

28
src/pages/member/member.vue
View File

@ -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%;

0
src/static/temp/member/1.png → src/static/temp/1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB