107 lines
2.0 KiB
Vue
107 lines
2.0 KiB
Vue
<template>
|
||
<view class="member-page">
|
||
<image class="member-bg" src="https://imgs.agrimedia.cn/jiuye-haibao.png" mode="aspectFit"></image>
|
||
<view class="page-overlay">
|
||
<view class="back-btn" :style="{ top: statusBarHeight + 12 + 'px' }" @click="$tools.goBack(1)">
|
||
<text class="back-arrow">‹</text>
|
||
</view>
|
||
<view class="action-wrap" :style="{ paddingBottom: safeBottom + 16 + 'px' }">
|
||
<view class="open-btn" @click="handleOpenMember">开通会员</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: 20,
|
||
safeBottom: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = systemInfo.statusBarHeight || 20
|
||
const safeAreaInsets = systemInfo.safeAreaInsets || {}
|
||
this.safeBottom = safeAreaInsets.bottom || 0
|
||
},
|
||
methods: {
|
||
handleOpenMember() {
|
||
uni.showToast({
|
||
title: '支付正在对接中…',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
page {
|
||
background: #1c0d0d;
|
||
}
|
||
|
||
.member-page {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
background: #f23f3e;
|
||
}
|
||
|
||
.member-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.page-overlay {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.back-btn {
|
||
position: fixed;
|
||
left: 24rpx;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
background: #f23f3e;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.back-arrow {
|
||
color: #ffffff;
|
||
font-size: 52rpx;
|
||
line-height: 1;
|
||
margin-top: -4rpx;
|
||
}
|
||
|
||
.action-wrap {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
}
|
||
|
||
.open-btn {
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
background: linear-gradient(135deg, #f8e2b7 0%, #d8b06b 100%);
|
||
color: #6b2b10;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.18);
|
||
}
|
||
</style>
|