+
+
+
+
+
@@ -31,10 +47,15 @@
.container {
display: flex;
height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ background-color: #070a14;
.banner {
- width: 550px;
- background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
+ width: 560px;
+ height: 100%;
+ flex-shrink: 0;
+ position: relative;
}
.content {
@@ -44,6 +65,15 @@
align-items: center;
justify-content: center;
padding-bottom: 40px;
+ background-color: #f8fafc;
+ background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
+ background-size: 26px 26px;
+ overflow: hidden;
+ }
+
+ .content-inner {
+ position: relative;
+ z-index: 2;
}
.footer {
@@ -51,32 +81,109 @@
right: 0;
bottom: 0;
width: 100%;
+ z-index: 2;
}
}
+ // 顶栏 Logo 与品牌
.logo {
position: fixed;
top: 24px;
- left: 22px;
- z-index: 1;
+ left: 28px;
+ z-index: 20;
display: inline-flex;
align-items: center;
+ gap: 10px;
+ user-select: none;
- &-text {
- margin-right: 4px;
- margin-left: 4px;
- color: var(--color-fill-1);
- font-size: 20px;
+ &-img {
+ width: 36px;
+ height: 36px;
+ border-radius: 10px;
+ object-fit: cover;
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ }
+
+ &-title-group {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &-main-title {
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 20px;
+ letter-spacing: 0.5px;
+ }
+
+ &-sub-title {
+ color: rgba(226, 232, 240, 0.7);
+ font-size: 11px;
+ line-height: 14px;
+ }
+
+ &-badge {
+ font-size: 10px;
+ font-weight: 700;
+ padding: 2px 7px;
+ border-radius: 12px;
+ background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
+ color: #ffffff;
+ box-shadow: 0 2px 6px rgba(236, 72, 153, 0.35);
+ letter-spacing: 0.5px;
}
}
-
-