refactor(vip): simplify user center membership summary

Remove profile identity chrome from the VIP header, keep the crown watermark, and flatten the summary into one thin card while preserving membership purchase cards. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-04 18:34:28 +08:00
parent 54e0ad4026
commit 480a0bb498
3 changed files with 117 additions and 56 deletions
@@ -0,0 +1,95 @@
+/**
+ * User Center — compact membership summary.
+ *
+ * The VIP tab keeps one thin status surface; personal profile chrome and
+ * decorative stacked-card layers belong to the user-center header, not here.
+ */
+
+.uc-vip-summary {
+  position: relative;
+  min-width: 0;
+  margin: 0 0 16px;
+  padding: 12px 16px;
+  overflow: hidden;
+  border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
+  border-radius: var(--main-radius, var(--radius, 8px));
+  background: var(--surface-1, #fff);
+  box-shadow: none;
+  isolation: isolate;
+}
+
+.uc-vip-summary__watermark {
+  position: absolute;
+  top: 50%;
+  right: -10px;
+  z-index: 0;
+  color: currentColor;
+  font-size: 160px;
+  line-height: 1;
+  opacity: 0.15;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.uc-vip-summary__watermark i {
+  font-size: inherit;
+  line-height: 1;
+}
+
+.uc-vip-status {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  column-gap: 16px;
+  row-gap: 2px;
+  min-width: 0;
+}
+
+.uc-vip-status__label {
+  padding-top: 2px;
+  color: var(--muted-2-color, var(--color-ink-4));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.uc-vip-status__body {
+  min-width: 0;
+}
+
+.uc-vip-status__main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.uc-vip-status__main > .em16 {
+  margin-right: 0;
+  font-size: 1.2em;
+  line-height: 1.25;
+}
+
+.uc-vip-status__desc {
+  margin-top: 3px;
+  line-height: 1.4;
+}
+
+@media (max-width: 767px) {
+  .uc-vip-summary {
+    padding: 10px 12px;
+  }
+
+  .uc-vip-summary__watermark {
+    font-size: 110px;
+    opacity: 0.12;
+  }
+
+  .uc-vip-status {
+    column-gap: 12px;
+  }
+}