1
This commit is contained in:
张成
@@ -5,76 +5,82 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__scroll {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 1340rpx;
|
||||
height: calc(100vh - 98px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 示例消息卡片区域
|
||||
&__messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
padding: 0;
|
||||
margin-top: 896rpx;
|
||||
margin-bottom: 0;
|
||||
width: 648rpx;
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
top: 448px;
|
||||
width: 324px;
|
||||
height: 195px;
|
||||
}
|
||||
|
||||
&__message_card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: #ffffff;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0px 8rpx 40rpx 0px rgba(0, 0, 0, 0.08);
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
|
||||
// 第二个卡片向右偏移
|
||||
&:nth-child(2) {
|
||||
margin-left: 44rpx;
|
||||
width: calc(100% - 44rpx);
|
||||
// 第一个卡片（最下面）
|
||||
&--1 {
|
||||
width: 303.45px;
|
||||
left: 9px;
|
||||
top: 114px;
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
// 第三个卡片
|
||||
&:nth-child(3) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
// 第二个卡片（中间）
|
||||
&--2 {
|
||||
width: 301.91px;
|
||||
left: 22px;
|
||||
top: 58px;
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
|
||||
// 第三个卡片（最上面）
|
||||
&--3 {
|
||||
width: 311.91px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 80rpx;
|
||||
border: 3rpx solid #ffffff;
|
||||
width: 42.69px;
|
||||
height: 42.69px;
|
||||
border-radius: 40px;
|
||||
border: 1.5px solid #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__message_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -82,7 +88,7 @@
|
||||
&__text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
font-size: 12px;
|
||||
line-height: 1.67;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
@@ -92,8 +98,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
margin-top: 160rpx;
|
||||
gap: 16px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -105,7 +111,7 @@
|
||||
&__title {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 600;
|
||||
font-size: 48rpx;
|
||||
font-size: 24px;
|
||||
line-height: 1.17;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
@@ -114,7 +120,7 @@
|
||||
&__subtitle {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
@@ -125,8 +131,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
margin-top: 328rpx;
|
||||
gap: 16px;
|
||||
margin-top: 164px;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -136,11 +142,11 @@
|
||||
}
|
||||
|
||||
&__qr_wrapper {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0px 8rpx 72rpx 0px rgba(0, 0, 0, 0.16);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.16);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -156,7 +162,7 @@
|
||||
&__qr_text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import { GeneralNavbar } from '@/components';
|
||||
import { useGlobalState } from '@/store/global';
|
||||
import './index.scss';
|
||||
@@ -34,44 +34,45 @@ const EnableNotificationPage: React.FC = () => {
|
||||
<View className="enable_notification_page" style={{ paddingTop: `${totalHeight}px` }}>
|
||||
<GeneralNavbar title="" showBack={true} />
|
||||
|
||||
<ScrollView scrollY className="enable_notification_page__scroll" enhanced showScrollbar={false}>
|
||||
<View className="enable_notification_page__content">
|
||||
{/* 示例消息卡片 */}
|
||||
<View className="enable_notification_page__messages">
|
||||
{exampleMessages.map((message) => (
|
||||
<View key={message.id} className="enable_notification_page__message_card">
|
||||
<Image
|
||||
className="enable_notification_page__avatar"
|
||||
src={message.avatar}
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<View className="enable_notification_page__message_content">
|
||||
<Text className="enable_notification_page__name">{message.name}</Text>
|
||||
<Text className="enable_notification_page__text">{message.content}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 标题区域 */}
|
||||
<View className="enable_notification_page__title_section">
|
||||
<Text className="enable_notification_page__title">开启消息通知</Text>
|
||||
<Text className="enable_notification_page__subtitle">请放心，我们只会在必要时提醒你</Text>
|
||||
</View>
|
||||
|
||||
{/* 二维码区域 */}
|
||||
<View className="enable_notification_page__qr_section">
|
||||
<View className="enable_notification_page__qr_wrapper">
|
||||
<View className="enable_notification_page__content">
|
||||
{/* 示例消息卡片 */}
|
||||
<View className="enable_notification_page__messages">
|
||||
{exampleMessages.map((message, index) => (
|
||||
<View
|
||||
key={message.id}
|
||||
className={`enable_notification_page__message_card enable_notification_page__message_card--${index + 1}`}
|
||||
>
|
||||
<Image
|
||||
className="enable_notification_page__qr_image"
|
||||
src={require('@/static/other_pages/qr_code.svg')}
|
||||
mode="aspectFit"
|
||||
className="enable_notification_page__avatar"
|
||||
src={message.avatar}
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<View className="enable_notification_page__message_content">
|
||||
<Text className="enable_notification_page__name">{message.name}</Text>
|
||||
<Text className="enable_notification_page__text">{message.content}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* 标题区域 */}
|
||||
<View className="enable_notification_page__title_section">
|
||||
<Text className="enable_notification_page__title">开启消息通知</Text>
|
||||
<Text className="enable_notification_page__subtitle">请放心，我们只会在必要时提醒你</Text>
|
||||
</View>
|
||||
|
||||
{/* 二维码区域 */}
|
||||
<View className="enable_notification_page__qr_section">
|
||||
<View className="enable_notification_page__qr_wrapper">
|
||||
<Image
|
||||
className="enable_notification_page__qr_image"
|
||||
src={require('@/static/other_pages/qr_code.svg')}
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</View>
|
||||
<Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user