From dc24123ab6c81f3951aa88e0ba673debf6716027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= <light.zhang@ysinc.com>
Date: Tue, 2 Dec 2025 11:16:27 +0800
Subject: [PATCH] 1

---
 .../SubscribeNotificationTip/index.scss       | 12 +++
 .../SubscribeNotificationTip/index.tsx        |  9 +-
 .../enable_notification/index.scss            | 96 ++++++++++---------
 src/other_pages/enable_notification/index.tsx | 71 +++++++-------
 src/static/message/bell-icon.svg              |  4 +
 5 files changed, 111 insertions(+), 81 deletions(-)
 create mode 100644 src/static/message/bell-icon.svg

diff --git a/src/components/SubscribeNotificationTip/index.scss b/src/components/SubscribeNotificationTip/index.scss
index 48cc498..0bd71f3 100644
--- a/src/components/SubscribeNotificationTip/index.scss
+++ b/src/components/SubscribeNotificationTip/index.scss
@@ -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 {
diff --git a/src/components/SubscribeNotificationTip/index.tsx b/src/components/SubscribeNotificationTip/index.tsx
index ea36889..22ec442 100644
--- a/src/components/SubscribeNotificationTip/index.tsx
+++ b/src/components/SubscribeNotificationTip/index.tsx
@@ -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">
-        <Text className="subscribe_notification_tip__title">不想错过约球邀请？</Text>
+        <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
diff --git a/src/other_pages/enable_notification/index.scss b/src/other_pages/enable_notification/index.scss
index 2e5984f..90a9966 100644
--- a/src/other_pages/enable_notification/index.scss
+++ b/src/other_pages/enable_notification/index.scss
@@ -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;
diff --git a/src/other_pages/enable_notification/index.tsx b/src/other_pages/enable_notification/index.tsx
index a17df19..1cb6a95 100644
--- a/src/other_pages/enable_notification/index.tsx
+++ b/src/other_pages/enable_notification/index.tsx
@@ -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>
   );
 };
diff --git a/src/static/message/bell-icon.svg b/src/static/message/bell-icon.svg
new file mode 100644
index 0000000..e8a30ab
--- /dev/null
+++ b/src/static/message/bell-icon.svg
@@ -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>
+