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

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

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

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

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

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