1

2025-12-02 11:06:18 +08:00
parent e1545c9a83
commit 592be1f602
10 changed files with 368 additions and 0 deletions
--- a/src/other_pages/enable_notification/index.scss
+++ b/src/other_pages/enable_notification/index.scss
@@ -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;
+  }
+
+}
+