page { background-color: #222238; border-top: 1px solid hsla(0,31%,87%,.5); } .container { font-family: Arial; padding: 20px; } .desc{ white-space: pre-wrap; /* 支持换行 */ color: #fff; font-size: 22rpx; font-weight: 300; } .status-section { background: linear-gradient(90deg,#8d72d2,#7183f3); display: flex; justify-content: space-between; margin-bottom: 20px; text-align: center; } .footer,.recharge-options,.status-section { border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.1); color: #a790e2; padding: 20px 10px; width: 100%; } .card { align-items: center; background-color: #2f2f50; border-radius: 20rpx; box-shadow: 0 4px 6px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.08); display: flex; margin-top: 10px; padding: 10px; transition: all .2s; } .card-icon { height: 50px; margin-right: 10px; width: 50px; } .card-content { flex-grow: 1; width: 60%; } .card-title { color: #a790e2; font-size: 16px; font-weight: 700; } .price-wrapper { align-items: center; display: flex; } .original-price { color: #97a09a; margin-right: 10rpx; text-decoration: line-through; } .current-price { color: #f861f8; } .renew-button { line-height: 2.4rem; } .open-button,.renew-button { background: linear-gradient(90deg,#592bcc,#d231d8); border: none; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,.2); color: #fff; cursor: pointer; font-size: 1rem; height: 2.5rem; margin-top: 10px; padding: .5rem 1rem; text-align: center; transition: background-color .3s,box-shadow .3s; width: 6rem; } .open-button { line-height: 1.9rem; } .open-button:hover,.renew-button:hover { background-color: #e43333; box-shadow: 0 6px 12px rgba(0,0,0,.3); } .small-button { padding: 5px; } .footer { color: #777; font-size: 14px; text-align: center; } .user-vip,.user-vip .user-pic { height: 130rpx; margin: 0 auto; width: 130rpx; } .user-vip .user-pic { background: #fff; border-radius: 50%; display: block; overflow: hidden; } .right { color: #fff; }