<script setup lang="ts">
definePage({
name: 'member',
style: {
navigationBarTitleText: '会员',
navigationStyle: 'custom',
disableScroll: true
},
})
// 会员协议
const memberAgreementCheckBox = ref(false)
// 会员套餐
const memberPackage = ref([
{
id: 1,
desc: '超维创作引擎',
type: 'SVIP 年卡',
select: true,
amount: '16888',
status: true
},
{
id: 2,
desc: '量子创意工坊',
type: 'SVIP 月卡',
select: false,
amount: '6888',
status: false
},
{
id: 3,
desc: '量子创意工坊',
type: 'SVIP 周卡',
select: false,
amount: '1888',
status: false
}
])
// 返回上一页
const onClickLeft = () => {
uni.navigateBack()
}
const activeMember = () => {
if (memberAgreementCheckBox.value) {
useGlobalToast().success('恭喜您，会员开通成功！')
} else {
useGlobalToast().info('请先阅读并同意会员协议!')
}
}
</script>
<template>
<view class="member-page-container">
<wd-navbar custom-class="ai-navbar" fixed
custom-style="background-color: transparent !important; height: 140rpx !important;"
safeAreaInsetTop>
<template #left>
<view class="left-button" @click="onClickLeft">
<wd-icon name="arrow-left1" size="22px"></wd-icon>
</view>
</template>
<template #title>
<view class="title-box">
<view class="title-text"></view>
</view>
</template>
</wd-navbar>
<view class="container">
<text class="member-page-text">开通 <text class="member-page-vip-text">SVIP</text></text>
<text class="member-page-text">畅想 AI 全功能</text>
<text class="member-page-desc">新用户享受超低折扣</text>
<scroll-view class="member-package-scroll" :scroll-x="true" :show-scrollbar="false">
<view class="member-package-box">
<view class="member-package" v-for="item in memberPackage" :key="item.id">
<text class="desc">{{ item.desc }}</text>
<text class="vip">{{ item.type }}</text>
<text class="text">开会员，天天送云点</text>
<view><text class="select" v-if="item.select">80% 选择</text></view>
<text class="amount">$<text class="amount-text"> {{ item.amount }}</text></text>
</view>
</view>
</scroll-view>
</view>
<view class="fixed-footer">
<view class="activate-box">
<wd-button type="info" plain @click="activeMember" custom-class="activate-member">
<text class="activate-text">立即开通</text>
</wd-button>
<view class="member-desc">
<wd-checkbox v-model="memberAgreementCheckBox" @click="memberAgreementCheckBox = !memberAgreementCheckBox"
shape="square" custom-style="background-color: transparent !important;">
<text class="login-clause">
勾选即代表您已阅读并同意
<text class="member-agreement" @click.stop="useGlobalToast().success('会员协议')">
《会员协议》
</text>
</text>
</wd-checkbox>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.member-page-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.left-button {
margin: 20rpx;
border-radius: 50px;
height: 80rpx;
width: 80rpx;
background-color: rgba(172, 172, 172, 0.13);
display: flex;
align-items: center;
justify-content: center;
}
.title-box {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.title-text {
font-size: 32rpx;
font-weight: 600;
/* 设置字体透明 */
color: transparent;
/* 设置线性渐变，从红色渐变到蓝色 */
background-image: linear-gradient(45deg, rgba(0, 149, 255, 0.6), rgba(31, 248, 132, 0.6));
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-webkit-background-clip: text;
/* 非Webkit内核浏览器需要使用标准前缀 */
background-clip: text;
/* 把当前元素设置为行内块，以便能够应用背景 */
display: inline-block;
}
.container {
flex: 1;
padding-top: calc(140rpx + 54px);
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden; /* 防止溢出滚动条 */
margin: 0 45rpx;
}
.member-page-text {
font-size: 58rpx;
font-weight: 900;
/* 设置字体透明 */
color: transparent;
/* 设置线性渐变，从红色渐变到蓝色 */
background-image: linear-gradient(45deg, rgba(255, 89, 239, 0.69), rgba(31, 241, 248, 0.82));
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-webkit-background-clip: text;
/* 非Webkit内核浏览器需要使用标准前缀 */
background-clip: text;
/* 把当前元素设置为行内块，以便能够应用背景 */
display: inline-block;
}
.member-page-vip-text {
font-size: 58rpx;
border-radius: 20rpx;
padding: 0 20rpx;
color: #b559ff;
background-image: linear-gradient(90deg, rgba(240, 38, 255, 0.48), rgba(255, 42, 195, 0.49));
}
.member-page-desc {
font-size: 28rpx;
color: rgba(149, 149, 149, 0.82);
}
.member-package-scroll {
width: 100%;
}
.member-package-box {
margin: 38rpx 90rpx 38rpx 0;
display: flex;
width: 100%;
height: 450rpx;
display: flex;
flex-direction: row;
}
.member-package {
display: flex;
flex: none;
flex-direction: column;
background-image: linear-gradient(45deg, rgba(70, 244, 190, 0.79), rgba(232, 121, 171, 0.85));
border-radius: 38rpx;
height: 330rpx;
width: 330rpx;
margin-right: 45rpx;
padding: 38rpx;
.desc {
color: rgba(255, 255, 255, 0.8);
font-size: 38rpx;
}
.vip {
color: rgba(213, 10, 232, 0.8);
font-size: 68rpx;
}
.text {
color: rgba(255, 255, 255, 0.8);
font-size: 23rpx;
margin: 10rpx 0;
}
.select {
margin: 12rpx 0;
padding: 5rpx 25rpx 5rpx 15rpx;
color: rgba(182, 34, 34, 0.94);
background-color: rgba(213, 83, 68, 0.61);
font-size: 25rpx;
border-radius: 0 0 25rpx 0;
}
.amount {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 38rpx;
color: rgba(232, 33, 246, 0.92);
}
.amount-text {
font-size: 68rpx;
}
}
.fixed-footer {
height: 220rpx;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
padding-top: 30rpx;
}
.activate-box {
width: 80%;
margin: 0 0 env(safe-area-inset-bottom) 0;
:deep() {
.activate-member {
font-size: 35rpx !important;
font-weight: 600 !important;
width: 100%;
height: 88rpx !important;
background-image: linear-gradient(45deg, rgba(62, 233, 255, 0.5), rgba(217, 39, 255, 0.5)) !important;
border: rgba(215, 55, 232, 0.49) 3rpx solid !important;
}
}
}
.member-desc {
display: flex;
justify-content: center;
margin-top: 20rpx;
}
.activate-text {
/* 设置字体透明 */
color: transparent;
/* 设置线性渐变，从红色渐变到蓝色 */
background-image: linear-gradient(45deg, rgba(255, 36, 237, 0.87), rgba(31, 241, 248, 0.82));
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-webkit-background-clip: text;
/* 非Webkit内核浏览器需要使用标准前缀 */
background-clip: text;
/* 把当前元素设置为行内块，以便能够应用背景 */
display: inline-block;
}
.member-agreement {
color: #007aff;
}
</style>
中间 的member-package滚动不到头
本文是一篇关于CSS布局和定位的中级教程，涵盖了display属性的不同值，width和max-width的使用方法，详细解释了position的static、relative、absolute、fixed及sticky的定位原理。此外，还讨论了z-index如何决定元素重叠时的显示顺序，并简单提及了clip剪裁在布局中的应用。这篇内容是面试中常见的知识点，适合进阶学习者参考。
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
