fnvtk/soul
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
afc2376e96312f7420cef544b0060f98cf8242f8
soul/miniprogram/pages/my/my.wxss
卡若 afc2376e96 v1.19 全面改版：VIP会员系统、我的收益、创业老板排行、阅读量排序 
- 后端: users表新增VIP字段, 4个VIP API (purchase/status/profile/members)
- 后端: hot接口改按user_tracks阅读量排序
- 后端: orders表支持vip产品类型, migrate新增vip_fields迁移
- 小程序「我的」: 推广中心改为我的收益, 头像VIP标识, VIP入口卡片
- 小程序「我的」: 最近阅读显示真实章节名称
- 小程序首页: 去掉内容概览, 新增创业老板排行(4列网格)
- 小程序首页: 精选推荐从hot接口获取, goToRead增加track记录
- 新增页面: VIP详情页, 会员详情页
- 开发文档精简为10个标准目录, 创建SKILL.md, 需求日志规范化

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-23 14:07:41 +08:00

1136 lines
18 KiB
Plaintext
Raw Blame History

/**
* Soul创业实验 - 我的页面样式
* 1:1还原Web版本UI
*/
.page {
min-height: 100vh;
background: #000000;
padding-bottom: 200rpx;
}
/* ===== 导航栏 ===== */
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(40rpx);
border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
}
.nav-content {
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 36rpx;
font-weight: 600;
}
.brand-color {
color: #00CED1;
}
.gold-color {
color: #FFD700;
}
.pink-color {
color: #E91E63;
}
.nav-placeholder {
width: 100%;
}
/* ===== 用户卡片 ===== */
.user-card {
margin: 32rpx;
padding: 32rpx;
}
.card-gradient {
background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
border-radius: 32rpx;
border: 2rpx solid rgba(0, 206, 209, 0.2);
}
/* ===== 新版用户头部布局 ===== */
.user-header-row {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 32rpx;
width: 100%;
}
/* 头像容器 */
.avatar-wrapper {
position: relative;
flex-shrink: 0;
width: 120rpx;
height: 120rpx;
}
/* 头像按钮样式 - 简化版 */
.avatar-btn-simple {
flex-shrink: 0;
width: 120rpx;
height: 120rpx;
min-width: 120rpx;
min-height: 120rpx;
padding: 0;
margin: 0;
background: transparent !important;
border: none;
line-height: normal;
border-radius: 50%;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-btn-simple::after { border: none; }
/* 用户名样式 */
.user-name {
font-size: 32rpx;
font-weight: 600;
color: #fff;
max-width: 300rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-icon-small {
font-size: 24rpx;
color: rgba(255,255,255,0.5);
margin-left: 12rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 4rpx solid #00CED1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 206, 209, 0.2) 0%, transparent 100%);
overflow: hidden;
box-sizing: border-box;
}
.avatar-img {
width: 100%;
height: 100%;
}
.avatar-edit-hint {
position: absolute;
bottom: 0;
right: 0;
width: 36rpx;
height: 36rpx;
background: #00CED1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3rpx solid #000;
}
.edit-icon {
font-size: 20rpx;
color: #000;
}
.avatar-empty {
border-style: dashed;
border-color: rgba(0, 206, 209, 0.5);
}
.avatar-icon {
font-size: 64rpx;
opacity: 0.3;
}
.avatar-text {
font-size: 44rpx;
font-weight: 700;
color: #00CED1;
}
.user-info-block {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10rpx;
min-width: 0;
padding-top: 4rpx;
}
.user-name-row {
display: flex;
align-items: center;
gap: 10rpx;
line-height: 1.2;
}
.user-name {
font-size: 36rpx;
font-weight: 600;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 320rpx;
line-height: 1.3;
}
.edit-name-icon {
font-size: 24rpx;
color: rgba(255,255,255,0.4);
flex-shrink: 0;
}
.user-id-row {
display: flex;
align-items: center;
gap: 8rpx;
}
.copy-icon {
font-size: 22rpx;
opacity: 0.5;
}
.user-wechat {
font-size: 24rpx;
color: #00CED1;
}
.user-badge-small {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 6rpx 14rpx;
background: rgba(0, 206, 209, 0.15);
border: 1rpx solid rgba(0, 206, 209, 0.3);
border-radius: 20rpx;
}
.badge-star {
font-size: 18rpx;
}
.badge-label {
font-size: 20rpx;
color: #00CED1;
}
.user-id {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.35);
}
/* 兼容旧样式 */
.user-header {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 32rpx;
}
.user-info {
flex: 1;
}
.login-btn {
font-size: 36rpx;
font-weight: 600;
color: #00CED1;
}
.user-subtitle {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.3);
display: block;
margin-top: 4rpx;
}
/* ===== 登录卡片样式 ===== */
.login-card {
min-height: 400rpx;
display: flex;
align-items: center;
justify-content: center;
}
.login-prompt {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40rpx 0;
width: 100%;
}
.login-icon-large {
font-size: 80rpx;
margin-bottom: 32rpx;
}
.login-title {
font-size: 36rpx;
font-weight: 600;
color: #ffffff;
margin-bottom: 16rpx;
}
.login-desc {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 48rpx;
line-height: 1.6;
}
.btn-wechat-large {
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
width: 80%;
padding: 28rpx 0;
background: linear-gradient(135deg, #07C160 0%, #06AD56 100%);
border-radius: 48rpx;
border: none;
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
.btn-wechat-large .btn-icon {
width: 48rpx;
height: 48rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 700;
}
.user-name {
font-size: 36rpx;
font-weight: 600;
color: #ffffff;
display: block;
}
.user-id {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.3);
display: block;
margin-top: 4rpx;
}
.user-badge {
padding: 8rpx 20rpx;
background: rgba(0, 206, 209, 0.2);
border: 2rpx solid rgba(0, 206, 209, 0.3);
border-radius: 32rpx;
display: flex;
align-items: center;
gap: 8rpx;
}
.badge-icon {
font-size: 22rpx;
}
.badge-text {
font-size: 22rpx;
color: #00CED1;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
padding-top: 32rpx;
border-top: 2rpx solid rgba(255, 255, 255, 0.1);
}
.stat-item {
text-align: center;
padding: 16rpx;
background: rgba(255, 255, 255, 0.05);
border-radius: 16rpx;
}
.stat-value {
font-size: 40rpx;
font-weight: 700;
display: block;
}
.stat-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.4);
}
/* ===== 收益卡片 ===== */
.earnings-card {
margin: 32rpx;
padding: 32rpx;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border-radius: 32rpx;
border: 2rpx solid rgba(0, 206, 209, 0.2);
position: relative;
overflow: hidden;
}
.earnings-bg {
position: absolute;
top: 0;
right: 0;
width: 256rpx;
height: 256rpx;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
border-radius: 50%;
transform: translate(50%, -50%);
}
.earnings-content {
position: relative;
z-index: 1;
}
.earnings-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32rpx;
}
.earnings-title {
display: flex;
align-items: center;
gap: 16rpx;
}
.title-icon {
font-size: 36rpx;
}
.title-text {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
}
.earnings-link {
display: flex;
align-items: center;
gap: 8rpx;
}
.link-text {
font-size: 24rpx;
color: #00CED1;
}
.link-arrow {
font-size: 24rpx;
color: #00CED1;
}
.earnings-data {
display: flex;
align-items: flex-end;
gap: 48rpx;
margin-bottom: 32rpx;
}
.data-item {
display: flex;
flex-direction: column;
}
.data-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8rpx;
}
.data-value {
font-size: 40rpx;
font-weight: 700;
color: #ffffff;
}
.gold-gradient {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 56rpx;
}
.earnings-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
padding: 24rpx;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.8) 0%, rgba(255, 165, 0, 0.8) 100%);
border-radius: 24rpx;
font-weight: 600;
}
.btn-icon {
font-size: 28rpx;
}
.btn-text {
font-size: 28rpx;
color: #000000;
}
/* ===== 推广入口 ===== */
.referral-card {
display: flex;
align-items: center;
justify-content: space-between;
margin: 32rpx;
padding: 32rpx;
background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, #1c1c1e 100%);
border: 2rpx solid rgba(255, 215, 0, 0.2);
border-radius: 32rpx;
}
.referral-left {
display: flex;
align-items: center;
gap: 24rpx;
}
.referral-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
.gold-bg {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}
.referral-info {
display: flex;
flex-direction: column;
}
.referral-title {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
}
.referral-desc {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.4);
margin-top: 4rpx;
}
.referral-btn {
padding: 16rpx 32rpx;
background: rgba(255, 215, 0, 0.2);
color: #FFD700;
font-size: 26rpx;
font-weight: 500;
border-radius: 16rpx;
}
/* ===== Tab切换 ===== */
.tab-bar-custom {
display: flex;
gap: 16rpx;
margin: 32rpx;
}
.tab-item {
flex: 1;
padding: 20rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
background: #1c1c1e;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
}
.tab-active {
background: rgba(0, 206, 209, 0.2);
color: #00CED1;
border: 2rpx solid rgba(0, 206, 209, 0.3);
}
.tab-icon {
font-size: 28rpx;
}
/* ===== Tab内容 ===== */
.tab-content {
padding: 0 32rpx;
width: 100%;
box-sizing: border-box;
}
/* ===== 菜单卡片 ===== */
.card {
background: #1c1c1e;
border-radius: 24rpx;
border: 2rpx solid rgba(255, 255, 255, 0.05);
overflow: hidden;
margin: 0 0 24rpx 0;
width: 100%;
box-sizing: border-box;
}
.menu-card {
padding: 0;
width: 100%;
box-sizing: border-box;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx 32rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item:active {
background: rgba(255, 255, 255, 0.05);
}
.menu-left {
display: flex;
align-items: center;
gap: 24rpx;
}
.menu-icon {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
background: rgba(255, 255, 255, 0.1);
}
.icon-brand {
background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
}
.icon-gray {
background: rgba(128, 128, 128, 0.2);
}
.menu-title {
font-size: 28rpx;
color: #ffffff;
}
.menu-right {
display: flex;
align-items: center;
gap: 16rpx;
}
.menu-count {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.4);
}
.menu-badge {
font-size: 26rpx;
font-weight: 500;
}
.menu-arrow {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.3);
}
/* ===== 统计卡片 ===== */
.stats-card {
padding: 32rpx;
}
.card-title {
display: flex;
align-items: center;
gap: 16rpx;
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
margin-bottom: 24rpx;
}
.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24rpx;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx;
background: rgba(255, 255, 255, 0.05);
border-radius: 24rpx;
}
.stat-icon {
font-size: 36rpx;
margin-bottom: 8rpx;
}
.stat-num {
font-size: 32rpx;
font-weight: 700;
color: #ffffff;
}
.stat-text {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.4);
margin-top: 4rpx;
}
/* ===== 最近阅读 ===== */
.recent-card {
padding: 32rpx;
}
.recent-list {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.recent-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
background: rgba(255, 255, 255, 0.05);
border-radius: 24rpx;
}
.recent-left {
display: flex;
align-items: center;
gap: 24rpx;
}
.recent-index {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.3);
}
.recent-title {
font-size: 26rpx;
color: #ffffff;
}
.recent-btn {
font-size: 24rpx;
color: #00CED1;
}
/* ===== 空状态 ===== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 48rpx;
}
.empty-icon {
font-size: 64rpx;
opacity: 0.5;
margin-bottom: 16rpx;
}
.empty-text {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.4);
}
.empty-btn {
margin-top: 16rpx;
font-size: 26rpx;
color: #00CED1;
}
/* ===== 匹配记录 ===== */
.match-card {
padding: 32rpx;
}
/* ===== 登录弹窗 ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(20rpx);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 48rpx;
}
.modal-content {
width: 100%;
max-width: 640rpx;
background: #1c1c1e;
border-radius: 32rpx;
padding: 48rpx;
position: relative;
}
.modal-close {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.6);
}
.login-icon {
font-size: 96rpx;
text-align: center;
display: block;
margin-bottom: 24rpx;
}
.login-title {
font-size: 36rpx;
font-weight: 700;
color: #ffffff;
text-align: center;
display: block;
margin-bottom: 16rpx;
}
.login-desc {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.6);
text-align: center;
display: block;
margin-bottom: 48rpx;
}
.btn-wechat {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
padding: 28rpx;
background: #07C160;
color: #ffffff;
font-size: 28rpx;
font-weight: 500;
border-radius: 24rpx;
margin-bottom: 24rpx;
border: none;
}
.btn-wechat::after {
border: none;
}
.btn-wechat-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.btn-phone {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
padding: 28rpx;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 28rpx;
border-radius: 24rpx;
border: 2rpx solid rgba(255, 255, 255, 0.1);
}
.btn-phone::after {
border: none;
}
.btn-phone-icon {
font-size: 32rpx;
}
.login-notice {
display: block;
margin-top: 32rpx;
font-size: 22rpx;
color: rgba(255, 255, 255, 0.3);
text-align: center;
}
/* ===== 底部留白 ===== */
.bottom-space {
height: 40rpx;
}
/* ===== 推广入口卡片 ===== */
.promo-entry-card {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24rpx 24rpx 0;
padding: 32rpx;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
border: 2rpx solid rgba(255, 215, 0, 0.3);
border-radius: 24rpx;
}
.promo-entry-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.promo-entry-icon {
width: 80rpx;
height: 80rpx;
background: rgba(255, 215, 0, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
}
.promo-entry-info {
display: flex;
flex-direction: column;
gap: 4rpx;
}
.promo-entry-title {
font-size: 30rpx;
color: #ffffff;
font-weight: 600;
}
.promo-entry-desc {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.5);
}
.promo-entry-right {
display: flex;
align-items: center;
gap: 16rpx;
}
.promo-entry-earnings {
font-size: 32rpx;
color: #FFD700;
font-weight: 600;
}
.promo-entry-arrow {
font-size: 28rpx;
color: #FFD700;
}
/* 账号设置 */
.settings-card {
margin-top: 24rpx;
}
.settings-list {
margin-top: 16rpx;
}
.settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
}
.settings-item:last-child {
border-bottom: none;
}
.settings-label {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.85);
}
.settings-right {
display: flex;
align-items: center;
gap: 12rpx;
}
.settings-value {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.4);
}
.logout-item {
justify-content: center;
margin-top: 16rpx;
border-bottom: none;
}
.logout-text {
color: #ff4d4f;
font-size: 28rpx;
}
/* === VIP 头像标识 === */
.avatar-normal {
border: 4rpx solid rgba(255,255,255,0.2);
}
.avatar-vip {
border: 4rpx solid #FFD700;
box-shadow: 0 0 16rpx rgba(255,215,0,0.5);
position: relative;
}
.vip-badge {
position: absolute;
bottom: -4rpx;
right: -4rpx;
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #000;
font-size: 18rpx;
font-weight: bold;
padding: 2rpx 10rpx;
border-radius: 12rpx;
line-height: 1.4;
}
.vip-tag {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #000;
font-size: 20rpx;
font-weight: 600;
padding: 4rpx 14rpx;
border-radius: 16rpx;
margin-left: 12rpx;
}
/* === VIP入口卡片 === */
.vip-card {
margin: 16rpx 24rpx;
border-radius: 20rpx;
overflow: hidden;
}
.vip-card-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 28rpx;
background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,165,0,0.08));
border: 1rpx solid rgba(255,215,0,0.25);
border-radius: 20rpx;
}
.vip-card-inner.vip-active {
background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.12));
border-color: rgba(255,215,0,0.4);
}
.vip-card-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.vip-card-icon {
font-size: 44rpx;
}
.vip-card-info {
display: flex;
flex-direction: column;
}
.vip-card-title {
font-size: 30rpx;
font-weight: 600;
color: rgba(255,255,255,0.95);
}
.vip-card-desc {
font-size: 22rpx;
color: rgba(255,255,255,0.5);
margin-top: 4rpx;
}
.vip-card-price {
display: flex;
align-items: baseline;
}
.vip-price-num {
font-size: 36rpx;
font-weight: bold;
color: #FFD700;
}
.vip-price-unit {
font-size: 22rpx;
color: rgba(255,215,0,0.7);
margin-left: 4rpx;
}
.vip-manage-btn {
font-size: 26rpx;
color: #FFD700;
}
Reference in New Issue View Git Blame Copy Permalink