1

src/components/SubscribeNotificationTip/index.scss

@@ -0,0 +1,51 @@
+.subscribe_notification_tip {
+  margin: 0 12px;
+  padding: 12px 16px;
+  background: rgba(14, 238, 193, 0.04);
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+  opacity: 0.8;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:active {
+    transform: scale(0.98);
+    opacity: 0.95;
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 20px;
+  }
+
+  &__title {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 1.33;
+    color: #000000;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__action_text {
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.4;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  &__arrow {
+    width: 16px;
+    height: 16px;
+  }
+}
+

src/components/SubscribeNotificationTip/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import { navigateTo } from '@/utils/navigation';
+import './index.scss';
+
+interface SubscribeNotificationTipProps {
+  // 自定义样式类名
+  className?: string;
+}
+
+const SubscribeNotificationTip: React.FC<SubscribeNotificationTipProps> = ({
+  className = '',
+}) => {
+  // 处理点击跳转
+  const handle_click = () => {
+    navigateTo({
+      url: '/other_pages/enable_notification/index',
+    }).catch((err) => {
+      console.error('跳转失败:', err);
+    });
+  };
+
+  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__action">
+          <Text className="subscribe_notification_tip__action_text">开启消息通知</Text>
+          <Image
+            className="subscribe_notification_tip__arrow"
+            src={require('@/static/message/ar-right.svg')}
+            mode="aspectFit"
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default SubscribeNotificationTip;
+