.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; &__content { padding: 0; display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; overflow: hidden; } // 示例消息卡片区域 &__messages { position: absolute; left: 33px; top: 448px; width: 324px; height: 195px; } &__message_card { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 16px; background: #ffffff; border: 0.5px solid rgba(0, 0, 0, 0.08); border-radius: 20px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; position: absolute; // 第三个卡片(最上面) &--3 { width: 311.91px; left: 0; top: 0; transform: rotate(2deg); } // 第二个卡片(中间) &--2 { width: 301.91px; left: 22px; top: 58px; transform: rotate(-2deg); } // 第一个卡片(最下面) &--1 { width: 303.45px; left: 9px; top: 114px; transform: rotate(4deg); } } &__avatar { 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: 4px; flex: 1; } &__name { font-family: 'PingFang SC'; font-weight: 600; font-size: 14px; line-height: 1.43; color: #000000; } &__text { font-family: 'PingFang SC'; font-weight: 400; font-size: 12px; line-height: 1.67; color: rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // 标题区域 &__title_section { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 80px; margin-bottom: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; } &__title { font-family: 'PingFang SC'; font-weight: 600; font-size: 24px; line-height: 1.17; color: #000000; text-align: center; } &__subtitle { font-family: 'PingFang SC'; font-weight: 500; font-size: 14px; 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: 16px; margin-top: 164px; margin-bottom: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; } &__qr_wrapper { 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; justify-content: center; background: #ffffff; } &__qr_image { width: 100%; } &__qr_placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } &__qr_loading { font-family: 'PingFang SC'; font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, 0.4); } &__qr_text { font-family: 'PingFang SC'; font-weight: 400; font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, 0.4); text-align: center; } }