|
|
@ -1,100 +1,132 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="login"> |
|
|
|
|
|
|
|
|
|
|
|
<view class="logo"> |
|
|
|
|
|
<image :src="configList.config_app_logo" mode=""></image> |
|
|
|
|
|
<view class="text"> |
|
|
|
|
|
{{ configList.config_app_name }} |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="page__view"> |
|
|
|
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
申请获取你的头像、昵称 |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
<navbar title="修改信息" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" /> |
|
|
|
|
|
|
|
|
<view class="form"> |
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<view class="label"> |
|
|
|
|
|
头像 |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
|
|
|
|
|
|
|
|
<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" class="avatar" |
|
|
|
|
|
mode=""></image> |
|
|
|
|
|
|
|
|
<view class="main"> |
|
|
|
|
|
|
|
|
<view v-else class="avatar" style="background-color: #C7C7C7; border-radius: 50%;"> |
|
|
|
|
|
<uv-icon name="account-fill" color="#ffffff" size="70rpx"></uv-icon> |
|
|
|
|
|
|
|
|
<view class="card"> |
|
|
|
|
|
<view class="card-header">个人信息</view> |
|
|
|
|
|
<view class="form"> |
|
|
|
|
|
<uv-form |
|
|
|
|
|
ref="form" |
|
|
|
|
|
:model="form" |
|
|
|
|
|
:rules="rules" |
|
|
|
|
|
errorType="toast" |
|
|
|
|
|
> |
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<uv-form-item prop="nickName" :customStyle="formItemStyle"> |
|
|
|
|
|
<view class="form-item-label">昵称</view> |
|
|
|
|
|
<view class="form-item-content input"> |
|
|
|
|
|
<formInput v-model="form.nickName"></formInput> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-form-item> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<view class="label"> |
|
|
|
|
|
昵称 |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" |
|
|
|
|
|
placeholder-class="uni-placeholder" |
|
|
|
|
|
v-model="userInfoForm.nickName" |
|
|
|
|
|
/> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<view class="label"> |
|
|
|
|
|
手机号 |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<input v-if="userInfoForm.phone" |
|
|
|
|
|
placeholder-class="uni-placeholder" |
|
|
|
|
|
placeholder="请输入手机号" |
|
|
|
|
|
style="text-align: right;" |
|
|
|
|
|
disabled |
|
|
|
|
|
v-model="userInfoForm.phone" |
|
|
|
|
|
/> |
|
|
|
|
|
<view v-else> |
|
|
|
|
|
<button |
|
|
|
|
|
:plain="true" :hairline="false" |
|
|
|
|
|
class="btn-phone" |
|
|
|
|
|
open-type="getPhoneNumber" |
|
|
|
|
|
@getphonenumber="getPhone" |
|
|
|
|
|
> |
|
|
|
|
|
获取电话号码 |
|
|
|
|
|
</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<uv-form-item prop="phone" :customStyle="formItemStyle"> |
|
|
|
|
|
<view class="form-item-label">电话</view> |
|
|
|
|
|
<view class="form-item-content input"> |
|
|
|
|
|
<formInput v-if="form.phone" v-model="form.phone"></formInput> |
|
|
|
|
|
<view v-else> |
|
|
|
|
|
<button |
|
|
|
|
|
class="btn btn-phone" |
|
|
|
|
|
open-type="getPhoneNumber" |
|
|
|
|
|
@getphonenumber="getPhone" |
|
|
|
|
|
> |
|
|
|
|
|
<view class="text placeholder">获取电话号码</view> |
|
|
|
|
|
</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-form-item> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="form-item"> |
|
|
|
|
|
<uv-form-item prop="phone" :customStyle="formItemStyle"> |
|
|
|
|
|
<view class="form-item-label">头像</view> |
|
|
|
|
|
<view class="form-item-content input"> |
|
|
|
|
|
<button class="btn btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
|
|
|
|
<view v-if="form.headImage" class="avatar"> |
|
|
|
|
|
<image class="img" :src="form.headImage" mode="aspectFill"></image> |
|
|
|
|
|
<view class="flex mask"> |
|
|
|
|
|
<image class="icon" src="@/pages_order/static/center/icon-change.png" mode="widthFix" /> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view v-else class="flex avatar is-empty"> |
|
|
|
|
|
<image class="icon" src="@/pages_order/static/comment/icon-plus.png" mode="widthFix" /> |
|
|
|
|
|
</view> |
|
|
|
|
|
</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-form-item> |
|
|
|
|
|
</view> |
|
|
|
|
|
</uv-form> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="btn" @click="submit"> |
|
|
|
|
|
确认 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="bottom"> |
|
|
|
|
|
<button class="btn" @click="onSubmit">保存</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import { mapState } from 'vuex' |
|
|
|
|
|
|
|
|
|
|
|
import formInput from '@/pages_order/components/formInput.vue' |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
|
|
|
components: { |
|
|
|
|
|
formInput, |
|
|
|
|
|
}, |
|
|
|
|
|
props: { |
|
|
|
|
|
mode: { |
|
|
|
|
|
type: String, |
|
|
|
|
|
default: null, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
userInfoForm: { |
|
|
|
|
|
headImage: '', |
|
|
|
|
|
nickName: '', |
|
|
|
|
|
phone: '', |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
form: { |
|
|
|
|
|
nickName: null, |
|
|
|
|
|
phone: null, |
|
|
|
|
|
headImage: null, |
|
|
|
|
|
}, |
|
|
|
|
|
rules: { |
|
|
|
|
|
'nickName': { |
|
|
|
|
|
type: 'string', |
|
|
|
|
|
required: true, |
|
|
|
|
|
message: '请输入昵称', |
|
|
|
|
|
}, |
|
|
|
|
|
'phone': { |
|
|
|
|
|
type: 'string', |
|
|
|
|
|
required: true, |
|
|
|
|
|
message: '请输入手机号', |
|
|
|
|
|
}, |
|
|
|
|
|
'headImage': { |
|
|
|
|
|
type: 'array', |
|
|
|
|
|
required: true, |
|
|
|
|
|
message: '请选择头像', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
formItemStyle: { padding: 0 }, |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
onShow() {}, |
|
|
|
|
|
onLoad() { |
|
|
|
|
|
this.userInfoForm.nickName = this.userInfo.nickName || '' |
|
|
|
|
|
this.userInfoForm.headImage = this.userInfo.headImage || '' |
|
|
|
|
|
|
|
|
computed: { |
|
|
|
|
|
...mapState(['userInfo']), |
|
|
|
|
|
}, |
|
|
|
|
|
onLoad(arg) { |
|
|
|
|
|
this.mode = arg.mode |
|
|
|
|
|
|
|
|
|
|
|
this.form.nickName = this.userInfo.nickName || '' |
|
|
|
|
|
this.form.phone = this.userInfo.phone || '' |
|
|
|
|
|
this.form.headImage = this.userInfo.headImage || '' |
|
|
}, |
|
|
}, |
|
|
computed: {}, |
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
onChooseAvatar(res) { |
|
|
onChooseAvatar(res) { |
|
|
this.$Oss.ossUpload(res.target.avatarUrl) |
|
|
this.$Oss.ossUpload(res.target.avatarUrl) |
|
|
.then(url => { |
|
|
.then(url => { |
|
|
this.userInfoForm.headImage = url |
|
|
|
|
|
|
|
|
this.form.headImage = url |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
getPhone(e){ |
|
|
getPhone(e){ |
|
|
@ -105,7 +137,7 @@ |
|
|
let phoneObj = JSON.parse(res.result) |
|
|
let phoneObj = JSON.parse(res.result) |
|
|
|
|
|
|
|
|
if(phoneObj.errmsg == 'ok'){ |
|
|
if(phoneObj.errmsg == 'ok'){ |
|
|
this.userInfoForm.phone = phoneObj.phone_info.phoneNumber |
|
|
|
|
|
|
|
|
this.form.phone = phoneObj.phone_info.phoneNumber |
|
|
}else{ |
|
|
}else{ |
|
|
uni.showModal({ |
|
|
uni.showModal({ |
|
|
title: phoneObj.errmsg |
|
|
title: phoneObj.errmsg |
|
|
@ -114,171 +146,231 @@ |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
submit() { |
|
|
|
|
|
let self = this |
|
|
|
|
|
|
|
|
|
|
|
uni.createSelectorQuery().in(this) |
|
|
|
|
|
.select("#nickName") |
|
|
|
|
|
.fields({ |
|
|
|
|
|
properties: ["value"], |
|
|
|
|
|
}) |
|
|
|
|
|
.exec((res) => { |
|
|
|
|
|
const nickName = res?.[0]?.value |
|
|
|
|
|
self.userInfoForm.nickName = nickName |
|
|
|
|
|
|
|
|
|
|
|
if (self.$utils.verificationAll(self.userInfoForm, { |
|
|
|
|
|
headImage: '请选择头像', |
|
|
|
|
|
nickName: '请填写昵称', |
|
|
|
|
|
phone: '请填写手机号', |
|
|
|
|
|
})) { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
async onSubmit() { |
|
|
|
|
|
try { |
|
|
|
|
|
await this.$refs.form.validate() |
|
|
|
|
|
|
|
|
|
|
|
const { |
|
|
|
|
|
nickName, |
|
|
|
|
|
phone, |
|
|
|
|
|
headImage, |
|
|
|
|
|
} = this.form |
|
|
|
|
|
|
|
|
|
|
|
const params = { |
|
|
|
|
|
nickName, |
|
|
|
|
|
phone, |
|
|
|
|
|
headImage, |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const res = await this.$fetch('updateInfo', params, false) |
|
|
|
|
|
|
|
|
|
|
|
if (res.code == 200) { |
|
|
|
|
|
|
|
|
self.$api('updateInfo', { |
|
|
|
|
|
headImage : self.userInfoForm.headImage, |
|
|
|
|
|
nickName : self.userInfoForm.nickName, |
|
|
|
|
|
phone : self.userInfoForm.phone, |
|
|
|
|
|
}, res => { |
|
|
|
|
|
if (res.code == 200) { |
|
|
|
|
|
uni.reLaunch({ |
|
|
|
|
|
url:'/pages/index/index' |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
icon: 'success', |
|
|
|
|
|
title: '保存成功', |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.$store.commit('getUserInfo') |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
if (this.mode === 'edit') { |
|
|
|
|
|
this.$utils.navigateBack() |
|
|
|
|
|
return |
|
|
} |
|
|
} |
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
uni.reLaunch({ |
|
|
|
|
|
url:'/pages/index/index' |
|
|
|
|
|
}) |
|
|
|
|
|
}, 800) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} catch (err) { |
|
|
|
|
|
console.log('onSubmit err', err) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.login { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
background: $uni-fg-color; |
|
|
|
|
|
|
|
|
.page__view { |
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
min-height: 100vh; |
|
|
|
|
|
background-color: $uni-bg-color; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
.logo{ |
|
|
|
|
|
margin-top: 334rpx; |
|
|
|
|
|
width: 320rpx; |
|
|
|
|
|
image{ |
|
|
|
|
|
height: 150rpx; |
|
|
|
|
|
width: 320rpx; |
|
|
|
|
|
} |
|
|
|
|
|
.text{ |
|
|
|
|
|
margin-top: 90rpx; |
|
|
|
|
|
font-size: 38rpx; |
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Bold; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.main { |
|
|
|
|
|
padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card { |
|
|
|
|
|
padding: 32rpx; |
|
|
|
|
|
background: #FAFAFF; |
|
|
|
|
|
border: 2rpx solid #FFFFFF; |
|
|
|
|
|
border-radius: 32rpx; |
|
|
|
|
|
|
|
|
|
|
|
& + & { |
|
|
|
|
|
margin-top: 40rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
margin-top: 48rpx; |
|
|
|
|
|
|
|
|
&-header { |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 36rpx; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
color: #252545; |
|
|
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.row { |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
column-gap: 24rpx; |
|
|
|
|
|
|
|
|
|
|
|
& + & { |
|
|
|
|
|
margin-top: 32rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&-label { |
|
|
|
|
|
flex: none; |
|
|
|
|
|
font-size: 26rpx; |
|
|
|
|
|
color: #8B8B8B; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&-content { |
|
|
font-size: 32rpx; |
|
|
font-size: 32rpx; |
|
|
font-family: PingFang SC, PingFang SC-Regular; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
|
|
|
color: #181818; |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.form { |
|
|
|
|
|
margin-top: 45rpx; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.form-item { |
|
|
|
|
|
width: 85%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: baseline; |
|
|
|
|
|
padding: 11rpx 23rpx; |
|
|
|
|
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
content: " "; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 1rpx; |
|
|
|
|
|
border-top: 1px solid rgba(112, 112, 112, 0.35); |
|
|
|
|
|
transform: scaleY(.5); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.form { |
|
|
|
|
|
padding: 8rpx 0 0 0; |
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
|
width: 90rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
font-family: SimSun, SimSun-Regular; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
&-item { |
|
|
|
|
|
border-bottom: 2rpx solid #EEEEEE; |
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
|
border: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-item + .form-item { |
|
|
|
|
|
margin-top: 50rpx; |
|
|
|
|
|
|
|
|
& + & { |
|
|
|
|
|
margin-top: 40rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.btn-avatar { |
|
|
|
|
|
background: transparent; |
|
|
|
|
|
border: none; |
|
|
|
|
|
border-radius: none; |
|
|
|
|
|
box-shadow: none; |
|
|
|
|
|
padding: 0; |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
font-size: 0; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
|
|
|
&-label { |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
font-size: 26rpx; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
color: #181818; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 70rpx; |
|
|
|
|
|
height: 70rpx; |
|
|
|
|
|
margin-right: 63rpx; |
|
|
|
|
|
|
|
|
&-content { |
|
|
|
|
|
margin-top: 14rpx; |
|
|
|
|
|
padding: 6rpx 0; |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
|
padding: 2rpx 0; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
|
|
|
|
|
|
&.placeholder { |
|
|
|
|
|
color: #C6C6C6; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.btn-phone { |
|
|
|
|
|
border: none; |
|
|
|
|
|
border-radius: 0; |
|
|
|
|
|
padding: 7rpx; |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
color: #C7C7C7; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
line-height: 1; |
|
|
|
|
|
|
|
|
.btn-phone { |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
line-height: 1.4; |
|
|
|
|
|
color: #393939; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-avatar { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: auto; |
|
|
|
|
|
border: none; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 200rpx; |
|
|
|
|
|
height: 200rpx; |
|
|
|
|
|
border-radius: 24rpx; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
.img { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.mask { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: #00000080; |
|
|
|
|
|
border-radius: 24rpx; |
|
|
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 64rpx; |
|
|
|
|
|
height: 64rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&.is-empty { |
|
|
|
|
|
background: #F3F2F7; |
|
|
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 61rpx; |
|
|
|
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bottom { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
height: 200rpx; |
|
|
|
|
|
padding: 24rpx 40rpx; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
.btn { |
|
|
.btn { |
|
|
text-align: center; |
|
|
|
|
|
margin-top: 155rpx; |
|
|
|
|
|
|
|
|
|
|
|
width: 80%; |
|
|
|
|
|
height: 100rpx; |
|
|
|
|
|
border-radius: 50rpx; |
|
|
|
|
|
background-image: linear-gradient(to right, #84A73F, #D8FF8F); |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
border-radius: 50rpx; |
|
|
|
|
|
border: none; |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
padding: 16rpx 0; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 36rpx; |
|
|
|
|
|
line-height: 1; |
|
|
|
|
|
color: #FFFFFF; |
|
|
|
|
|
background-image: linear-gradient(to right, #4B348F, #845CFA); |
|
|
|
|
|
border-radius: 41rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
