1
This commit is contained in:
张成
6
src/other_pages/enable_notification/index.config.ts
Normal file
6
src/other_pages/enable_notification/index.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '开启消息通知',
|
||||
navigationStyle: 'custom',
|
||||
enablePullDownRefresh: false,
|
||||
});
|
||||
|
||||
166
src/other_pages/enable_notification/index.scss
Normal file
166
src/other_pages/enable_notification/index.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
.enable_notification_page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(191, 255, 239, 1) 0%, rgba(255, 255, 255, 1) 37%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__scroll {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 1340rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 示例消息卡片区域
|
||||
&__messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
padding: 0;
|
||||
margin-top: 896rpx;
|
||||
margin-bottom: 0;
|
||||
width: 648rpx;
|
||||
}
|
||||
|
||||
&__message_card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
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%;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 第二个卡片向右偏移
|
||||
&:nth-child(2) {
|
||||
margin-left: 44rpx;
|
||||
width: calc(100% - 44rpx);
|
||||
}
|
||||
|
||||
// 第三个卡片
|
||||
&:nth-child(3) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
border-radius: 80rpx;
|
||||
border: 3rpx solid #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__message_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.43;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.67;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
// 标题区域
|
||||
&__title_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
margin-top: 160rpx;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 600;
|
||||
font-size: 48rpx;
|
||||
line-height: 1.17;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.4;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 二维码区域
|
||||
&__qr_section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
margin-top: 328rpx;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__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);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&__qr_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__qr_text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.4;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
80
src/other_pages/enable_notification/index.tsx
Normal file
80
src/other_pages/enable_notification/index.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components';
|
||||
import { GeneralNavbar } from '@/components';
|
||||
import { useGlobalState } from '@/store/global';
|
||||
import './index.scss';
|
||||
|
||||
const EnableNotificationPage: React.FC = () => {
|
||||
const { statusNavbarHeightInfo } = useGlobalState() || {};
|
||||
const { totalHeight = 98 } = statusNavbarHeightInfo || {};
|
||||
|
||||
// 示例消息数据
|
||||
const exampleMessages = [
|
||||
{
|
||||
id: '1',
|
||||
avatar: require('@/static/userInfo/default_avatar.svg'),
|
||||
name: 'Albert',
|
||||
content: '发现一家宝藏新球场，周末一起去试试吗？',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
avatar: require('@/static/userInfo/default_avatar.svg'),
|
||||
name: 'Evelyn',
|
||||
content: '周五晚混双比赛，寻找NTRP 3.5队友！',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
avatar: require('@/static/userInfo/default_avatar.svg'),
|
||||
name: 'CiCi',
|
||||
content: '我也在黄浦，明早8点晨练打球吗？',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<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">
|
||||
<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>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnableNotificationPage;
|
||||
|
||||
Reference in New Issue
Block a user