fix(ui): VIP equity list wrap and theme toggle moon/sun icons
This commit is contained in:
@@ -1076,12 +1076,171 @@ body.uc-modal-open {
|
||||
background: linear-gradient(90deg, #22c55e, #16a34a);
|
||||
}
|
||||
|
||||
/* VIP tab */
|
||||
.uc-vip-tab .user-content-myvip{position:relative;padding:16px;margin-bottom:16px}
|
||||
.uc-vip-level-cards{display:flex;flex-wrap:wrap;gap:12px}
|
||||
.uc-vip-level-card{position:relative;flex:1 1 240px;padding:18px 14px;overflow:hidden}
|
||||
.uc-vip-level-card .v-equity{text-align:left;margin:10px 0 14px;padding-left:1.1em;font-size:13px;line-height:1.55}
|
||||
.uc-vip-level-card .pay-vip{display:inline-block;margin-top:4px}
|
||||
.uc-vip-assets-entry{gap:12px}
|
||||
.jb-vip1{background:linear-gradient(90deg,#f6c453,#f39c12);color:#3b2a00;border:0}
|
||||
.jb-vip2{background:linear-gradient(90deg,#8e44ad,#3f51b5);color:#fff;border:0}
|
||||
/* VIP tab — zibll 我的会员 */
|
||||
.uc-vip-tab .user-content-myvip {
|
||||
position: relative;
|
||||
padding: 16px 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.uc-vip-tab .user-content-myvip .avatar-img img {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
.uc-vip-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.uc-vip-status .flex.ac {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.uc-vip-level-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.uc-vip-level-card {
|
||||
position: relative;
|
||||
flex: 1 1 240px;
|
||||
padding: 20px 16px 18px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.uc-vip-level-card.level-1 {
|
||||
background: linear-gradient(180deg, rgba(246, 196, 83, 0.14), rgba(255,255,255,0.02));
|
||||
}
|
||||
.uc-vip-level-card.level-2 {
|
||||
background: linear-gradient(180deg, rgba(142, 68, 173, 0.10), rgba(255,255,255,0.02));
|
||||
}
|
||||
.uc-vip-level-card .vip-baicon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
opacity: 0.08;
|
||||
font-size: 64px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.uc-vip-level-card__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.uc-vip-level-card .v-iconbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.uc-vip-level-card .v-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.05);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.uc-vip-level-card .v-info {
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.uc-vip-level-card .v-name {
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.uc-vip-level-card .v-desc {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* CRITICAL: equity must stack as list, never one jammed line */
|
||||
.uc-vip-level-card .v-equity,
|
||||
.pay-vip-info .v-equity {
|
||||
display: block !important;
|
||||
list-style: none;
|
||||
margin: 12px auto 16px;
|
||||
padding: 0;
|
||||
max-width: 240px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--muted-2-color, #888);
|
||||
}
|
||||
.uc-vip-level-card .v-equity > li,
|
||||
.pay-vip-info .v-equity > li {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
margin: 0 0 8px;
|
||||
padding: 0 0 0 14px;
|
||||
list-style: none;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
.uc-vip-level-card .v-equity > li:last-child,
|
||||
.pay-vip-info .v-equity > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.uc-vip-level-card .v-equity > li::before,
|
||||
.pay-vip-info .v-equity > li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.55em;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.uc-vip-cta {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 160px;
|
||||
padding: 10px 18px !important;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.uc-vip-cta > i {
|
||||
margin: 0 !important;
|
||||
line-height: 1;
|
||||
}
|
||||
.uc-vip-points-link {
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
.uc-vip-points-link a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.uc-vip-assets-entry {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.jb-vip1 {
|
||||
background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
|
||||
color: #866127;
|
||||
border: none;
|
||||
}
|
||||
.jb-vip2 {
|
||||
background: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%);
|
||||
color: #ddd;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.uc-vip-level-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
.uc-vip-level-card {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user