bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-12-02 11:16:27 +08:00
parent 592be1f602
commit dc24123ab6
5 changed files with 111 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/SubscribeNotificationTip/index.scss
View File

@@ -18,7 +18,19 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 20.5px;
}
&__title_wrapper {
display: flex;
align-items: center;
gap: 4px;
}
&__bell_icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
&__title {

7
src/components/SubscribeNotificationTip/index.tsx
View File

@@ -23,7 +23,14 @@ const SubscribeNotificationTip: React.FC<SubscribeNotificationTipProps> = ({
return (
<View className={`subscribe_notification_tip ${className}`} onClick={handle_click}>
<View className="subscribe_notification_tip__content">
<View className="subscribe_notification_tip__title_wrapper">
<Image
className="subscribe_notification_tip__bell_icon"
src={require('@/static/message/bell-icon.svg')}
mode="aspectFit"
/>
<Text className="subscribe_notification_tip__title">不想错过约球邀请？</Text>
</View>
<View className="subscribe_notification_tip__action">
<Text className="subscribe_notification_tip__action_text">开启消息通知</Text>
<Image

96
src/other_pages/enable_notification/index.scss
View File

@@ -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;

11
src/other_pages/enable_notification/index.tsx
View File

@@ -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,12 +34,14 @@ 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">
{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__avatar"
src={message.avatar}
@@ -71,7 +73,6 @@ const EnableNotificationPage: React.FC = () => {
<Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
</View>
</View>
</ScrollView>
</View>
);
};

4
src/static/message/bell-icon.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6925 13.7368C17.0025 13.0069 15.7114 11.909 15.7114 8.3125C15.7114 5.58086 13.7657 3.39414 11.1421 2.85766V2.125C11.1421 1.50379 10.6307 1 10 1C9.36929 1 8.85786 1.50379 8.85786 2.125V2.85766C6.2343 3.39414 4.28859 5.58086 4.28859 8.3125C4.28859 11.909 2.99752 13.0069 2.30752 13.7368C2.09324 13.9635 1.99824 14.2346 2.00002 14.5C2.00395 15.0766 2.46359 15.625 3.14645 15.625H16.8536C17.5364 15.625 17.9964 15.0766 18 14.5C18.0018 14.2346 17.9068 13.9632 17.6925 13.7368ZM4.4118 13.9375C5.16966 12.9542 5.99823 11.3243 6.00216 8.33289C6.00216 8.32586 6.00001 8.31953 6.00001 8.3125C6.00001 6.13773 7.79072 4.375 10 4.375C12.2093 4.375 14 6.13773 14 8.3125C14 8.31953 13.9978 8.32586 13.9978 8.33289C14.0018 11.3247 14.8303 12.9545 15.5882 13.9375H4.4118ZM10 19C11.2614 19 12.2846 17.9928 12.2846 16.75H7.71536C7.71536 17.9928 8.73857 19 10 19Z" fill="#00E5AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 979 B