@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .page.data-v-58e53c2a { position: relative; left: 0; top: 0; width: 100%; height: 100vh; background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%); background-repeat: no-repeat; background-size: 100% 100%; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; overflow-y: scroll; } .main.data-v-58e53c2a { position: relative; padding: 0 40rpx; top: 90rpx; top: 120rpx; } /* 用户信息卡片 - 结合my.vue和me copy.vue的设计 */ .user-card.data-v-58e53c2a { position: relative; margin: 30rpx 0; -webkit-animation: slideDown-data-v-58e53c2a 0.4s ease-out; animation: slideDown-data-v-58e53c2a 0.4s ease-out; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04); overflow: hidden; } .user-card-bg.data-v-58e53c2a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; } .user-card-content.data-v-58e53c2a { position: relative; padding: 30rpx; background: transparent; } .user-main.data-v-58e53c2a { display: flex; align-items: center; } .avatar-container.data-v-58e53c2a { position: relative; margin-right: 20rpx; flex-shrink: 0; } .avatar-ring.data-v-58e53c2a { position: absolute; top: -3rpx; left: -3rpx; width: 100rpx; height: 100rpx; border-radius: 50rpx; border: 2rpx solid rgba(67, 160, 71, 0.3); -webkit-animation: rotate-data-v-58e53c2a 3s linear infinite; animation: rotate-data-v-58e53c2a 3s linear infinite; } .avatar.data-v-58e53c2a { width: 94rpx; height: 94rpx; border-radius: 47rpx; border: 2rpx solid rgba(255, 255, 255, 0.9); position: relative; z-index: 1; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .user-info-wrapper.data-v-58e53c2a { flex: 1; min-width: 0; } .user-name.data-v-58e53c2a { font-size: 32rpx; font-weight: 600; color: #303133; margin-bottom: 16rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-meta.data-v-58e53c2a { display: flex; align-items: center; flex-wrap: wrap; gap: 16rpx; margin-top: 8rpx; } .role-badge.data-v-58e53c2a { display: inline-flex; align-items: center; background: rgba(67, 160, 71, 0.1); border-radius: 12rpx; padding: 6rpx 12rpx; border: 1rpx solid rgba(67, 160, 71, 0.2); font-size: 24rpx; color: #43a047; font-weight: 500; gap: 6rpx; box-sizing: border-box; } .role-badge text.data-v-58e53c2a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120rpx; display: inline-block; vertical-align: middle; } .store-badge.data-v-58e53c2a { display: inline-flex; align-items: center; background: rgba(64, 158, 255, 0.1); border-radius: 12rpx; padding: 6rpx 12rpx; border: 1rpx solid rgba(64, 158, 255, 0.2); font-size: 24rpx; color: #409EFF; font-weight: 500; gap: 6rpx; box-sizing: border-box; } .store-badge.jsj-badge.data-v-58e53c2a { background: rgba(255, 152, 0, 0.1); border: 1rpx solid rgba(255, 152, 0, 0.2); color: #ff9800; } .store-badge text.data-v-58e53c2a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120rpx; display: inline-block; vertical-align: middle; } /* 毛玻璃容器样式 - 参考home.vue */ .warpboxss.data-v-58e53c2a { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 30rpx; border-radius: 24rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04); margin-bottom: 30rpx; } .warpboxss .warpboxs-small-title.data-v-58e53c2a { display: flex; justify-content: space-between; align-items: center; font-size: 30rpx; font-weight: 600; color: #1f2937; } .warpboxss .warpboxs-small-title .warpboxs-small-title-line.data-v-58e53c2a { display: inline-block; background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%); height: 26rpx; width: 10rpx; margin-right: 12rpx; border-radius: 18rpx; box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4), 0 0 12rpx rgba(67, 160, 71, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3); position: relative; } .warpboxss .warpboxs-small-title .warpboxs-small-title-line.data-v-58e53c2a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 3rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%); pointer-events: none; } /* 统计数据区域 */ .stats-section.data-v-58e53c2a { margin-top: 0; -webkit-animation: slideDown-data-v-58e53c2a 0.5s ease-out; animation: slideDown-data-v-58e53c2a 0.5s ease-out; } .stats-container.data-v-58e53c2a { background: transparent; border-radius: 20rpx; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14rpx; } .stat-item.data-v-58e53c2a { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); border-radius: 16rpx; padding: 18rpx 14rpx; display: flex; align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03), 0 2rpx 6rpx rgba(0, 0, 0, 0.02); } .stat-item.data-v-58e53c2a:active { -webkit-transform: translateY(-2rpx) scale(0.98); transform: translateY(-2rpx) scale(0.98); box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05), 0 3rpx 8rpx rgba(0, 0, 0, 0.03); } .stat-icon.data-v-58e53c2a { width: 56rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .stat-icon image.data-v-58e53c2a { height: 56rpx; vertical-align: middle; } /* 小图标样式 - 用于卡片中的图标 */ .stat-icon-small.data-v-58e53c2a { width: 48rpx; height: 48rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; margin-right: 8rpx; flex-shrink: 0; position: relative; overflow: hidden; transition: all 0.3s ease; } .stat-icon-small.data-v-58e53c2a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12rpx; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%); opacity: 1; z-index: 1; } .stat-icon-small.data-v-58e53c2a::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%); transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; -webkit-transform: scale(0); transform: scale(0); z-index: 2; } .stat-icon-small image.data-v-58e53c2a { width: 28rpx; height: 28rpx; position: relative; z-index: 3; -webkit-filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); transition: opacity 300ms ease, -webkit-transform 300ms ease; transition: transform 300ms ease, opacity 300ms ease; transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease; } .stat-icon-small.icon-circle-bg-1.data-v-58e53c2a { background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-2.data-v-58e53c2a { background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-3.data-v-58e53c2a { background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-4.data-v-58e53c2a { background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-5.data-v-58e53c2a { background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-6.data-v-58e53c2a { background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-7.data-v-58e53c2a { background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-8.data-v-58e53c2a { background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } .stat-icon-small.icon-circle-bg-red.data-v-58e53c2a { background: linear-gradient(135deg, #EF5350 0%, #ff6b6b 50%, #e53e3e 100%); box-shadow: 0 6rpx 20rpx rgba(239, 83, 80, 0.35), 0 2rpx 8rpx rgba(239, 83, 80, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); } /* 计数图标样式 - 用于footer中的图标 */ .count-icon.data-v-58e53c2a { width: 36rpx; height: 36rpx; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; } .count-icon.data-v-58e53c2a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8rpx; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%); opacity: 1; z-index: 1; } .count-icon image.data-v-58e53c2a { width: 20rpx; height: 20rpx; position: relative; z-index: 2; -webkit-filter: brightness(1.2) drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.2)); filter: brightness(1.2) drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.2)); } .count-icon.icon-circle-bg-1.data-v-58e53c2a { background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 4rpx 12rpx rgba(30, 136, 229, 0.3), 0 2rpx 6rpx rgba(30, 136, 229, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-2.data-v-58e53c2a { background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.3), 0 2rpx 6rpx rgba(67, 160, 71, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-3.data-v-58e53c2a { background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 4rpx 12rpx rgba(211, 47, 47, 0.3), 0 2rpx 6rpx rgba(211, 47, 47, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-4.data-v-58e53c2a { background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); box-shadow: 0 4rpx 12rpx rgba(0, 131, 143, 0.3), 0 2rpx 6rpx rgba(0, 131, 143, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-5.data-v-58e53c2a { background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); box-shadow: 0 4rpx 12rpx rgba(245, 124, 0, 0.3), 0 2rpx 6rpx rgba(245, 124, 0, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-6.data-v-58e53c2a { background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); box-shadow: 0 4rpx 12rpx rgba(123, 31, 162, 0.3), 0 2rpx 6rpx rgba(123, 31, 162, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-7.data-v-58e53c2a { background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); box-shadow: 0 4rpx 12rpx rgba(194, 24, 91, 0.3), 0 2rpx 6rpx rgba(194, 24, 91, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .count-icon.icon-circle-bg-8.data-v-58e53c2a { background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); box-shadow: 0 4rpx 12rpx rgba(249, 168, 37, 0.3), 0 2rpx 6rpx rgba(249, 168, 37, 0.2), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3), inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1); } .stat-info.data-v-58e53c2a { flex: 1; min-width: 0; } .stat-num.data-v-58e53c2a { font-size: 28rpx; font-weight: 600; color: #303133; line-height: 1.2; margin-bottom: 4rpx; text-align: center; } .stat-name.data-v-58e53c2a { font-size: 24rpx; color: #909399; text-align: center; } /* 业绩数据板块样式 */ .performance-layout.data-v-58e53c2a { display: flex; gap: 20rpx; margin-bottom: 40rpx; } .performance-left.data-v-58e53c2a { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 28rpx; border-radius: 20rpx; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20rpx); -webkit-backdrop-filter: blur(20rpx); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); border: 1px solid rgba(255, 255, 255, 0.9); } .performance-right.data-v-58e53c2a { flex: 1; display: flex; flex-direction: column; gap: 16rpx; } .performance-text-item.data-v-58e53c2a { display: flex; flex-direction: column; gap: 10rpx; padding: 20rpx 0; border-bottom: 1rpx solid rgba(0, 0, 0, 0.08); position: relative; } .performance-text-item.data-v-58e53c2a:last-of-type { border-bottom: none; padding-bottom: 0; } .performance-text-item.data-v-58e53c2a:nth-child(1) { padding-top: 0; } .performance-text-item:nth-child(1) .performance-text-value.data-v-58e53c2a { color: #f57c00; font-size: 36rpx; } .performance-text-item:nth-child(2) .performance-text-value.data-v-58e53c2a { color: #c62828; font-size: 36rpx; } .performance-text-label.data-v-58e53c2a { font-size: 24rpx; color: #909399; font-weight: 400; letter-spacing: 0.5rpx; } .performance-text-value.data-v-58e53c2a { font-size: 32rpx; font-weight: 700; line-height: 1.3; } .performance-radio-group.data-v-58e53c2a { display: flex; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid rgba(0, 0, 0, 0.08); } .performance-radio-item.data-v-58e53c2a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10rpx; padding: 20rpx 12rpx; border-radius: 16rpx; background: rgba(255, 255, 255, 0.6); min-height: 120rpx; transition: all 0.3s ease; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .performance-radio-item.data-v-58e53c2a:nth-child(1) { background: linear-gradient(135deg, rgba(224, 247, 250, 0.8) 60%, rgba(178, 235, 242, 0.8) 100%); box-shadow: 0 2rpx 12rpx rgba(0, 188, 212, 0.15); } .performance-radio-item:nth-child(1) .radio-value.data-v-58e53c2a { color: #00838f; } .performance-radio-item.data-v-58e53c2a:nth-child(2) { background: linear-gradient(135deg, rgba(255, 249, 196, 0.8) 60%, rgba(255, 245, 157, 0.8) 100%); box-shadow: 0 2rpx 12rpx rgba(255, 193, 7, 0.15); } .performance-radio-item:nth-child(2) .radio-value.data-v-58e53c2a { color: #f57f17; } .radio-value.data-v-58e53c2a { font-size: 36rpx; font-weight: 700; line-height: 1.2; } .radio-label.data-v-58e53c2a { font-size: 24rpx; color: #606266; font-weight: 500; } .performance-box.data-v-58e53c2a { flex: 1; border-radius: 16rpx; padding: 24rpx 20rpx; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); display: flex; flex-direction: column; gap: 12rpx; min-height: 120rpx; justify-content: center; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .performance-box-label.data-v-58e53c2a { font-size: 26rpx; color: #303133; font-weight: 500; } .performance-box-value.data-v-58e53c2a { font-size: 32rpx; font-weight: bold; } .performance-box-1.data-v-58e53c2a { background: linear-gradient(135deg, rgba(227, 242, 253, 0.7) 60%, rgba(187, 222, 251, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.15); } .performance-box-1 .performance-box-value.data-v-58e53c2a { color: #1976d2; } .performance-box-2.data-v-58e53c2a { background: linear-gradient(135deg, rgba(255, 243, 224, 0.7) 60%, rgba(255, 224, 178, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15); } .performance-box-2 .performance-box-value.data-v-58e53c2a { color: #f57c00; } .performance-box-3.data-v-58e53c2a { background: linear-gradient(135deg, rgba(232, 245, 233, 0.7) 60%, rgba(200, 230, 201, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15); } .performance-box-3 .performance-box-value.data-v-58e53c2a { color: #388e3c; } .performance-card.data-v-58e53c2a { background: transparent; border-radius: 20rpx; padding: 0; margin-bottom: 40rpx; } .performance-row.data-v-58e53c2a { display: flex; justify-content: space-between; margin-bottom: 20rpx; gap: 16rpx; } .performance-row.data-v-58e53c2a:last-child { margin-bottom: 0; } .performance-item.data-v-58e53c2a { flex: 1; text-align: center; padding: 16rpx 8rpx; border-radius: 16rpx; margin: 0 6rpx; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); transition: all 0.3s ease; } /* 业绩项1 - 蓝色 */ .performance-item-1.data-v-58e53c2a { background: linear-gradient(135deg, rgba(227, 242, 253, 0.7) 60%, rgba(187, 222, 251, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.15); } .performance-item-1 .performance-value.data-v-58e53c2a { color: #1976d2; } .performance-item-1 .performance-label.data-v-58e53c2a { color: #1565c0; } /* 业绩项2 - 橙色 */ .performance-item-2.data-v-58e53c2a { background: linear-gradient(135deg, rgba(255, 243, 224, 0.7) 60%, rgba(255, 224, 178, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15); } .performance-item-2 .performance-value.data-v-58e53c2a { color: #f57c00; } .performance-item-2 .performance-label.data-v-58e53c2a { color: #e65100; } /* 业绩项3 - 绿色 */ .performance-item-3.data-v-58e53c2a { background: linear-gradient(135deg, rgba(232, 245, 233, 0.7) 60%, rgba(200, 230, 201, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15); } .performance-item-3 .performance-value.data-v-58e53c2a { color: #388e3c; } .performance-item-3 .performance-label.data-v-58e53c2a { color: #2e7d32; } /* 业绩项4 - 紫色 */ .performance-item-4.data-v-58e53c2a { background: linear-gradient(135deg, rgba(243, 229, 245, 0.7) 60%, rgba(225, 190, 231, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.15); } .performance-item-4 .performance-value.data-v-58e53c2a { color: #7b1fa2; } .performance-item-4 .performance-label.data-v-58e53c2a { color: #6a1b9a; } /* 业绩项5 - 红色 */ .performance-item-5.data-v-58e53c2a { background: linear-gradient(135deg, rgba(255, 235, 238, 0.7) 60%, rgba(255, 205, 210, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.15); } .performance-item-5 .performance-value.data-v-58e53c2a { color: #c62828; } .performance-item-5 .performance-label.data-v-58e53c2a { color: #b71c1c; } /* 业绩项6 - 青色 */ .performance-item-6.data-v-58e53c2a { background: linear-gradient(135deg, rgba(224, 247, 250, 0.7) 60%, rgba(178, 235, 242, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(0, 188, 212, 0.15); } .performance-item-6 .performance-value.data-v-58e53c2a { color: #00838f; } .performance-item-6 .performance-label.data-v-58e53c2a { color: #006064; } /* 业绩项7 - 黄色 */ .performance-item-7.data-v-58e53c2a { background: linear-gradient(135deg, rgba(255, 249, 196, 0.7) 60%, rgba(255, 245, 157, 0.7) 100%); box-shadow: 0 2rpx 8rpx rgba(255, 193, 7, 0.15); } .performance-item-7 .performance-value.data-v-58e53c2a { color: #f57f17; } .performance-item-7 .performance-label.data-v-58e53c2a { color: #f57c00; } .performance-value.data-v-58e53c2a { font-size: 28rpx; font-weight: bold; margin-bottom: 6rpx; line-height: 1.2; } .performance-label.data-v-58e53c2a { font-size: 22rpx; } /* 个人服务标题样式 */ .warpboxs-small-title.data-v-58e53c2a { display: flex; justify-content: space-between; align-items: center; font-size: 30rpx; font-weight: 600; color: #1f2937; } .warpboxs-small-title .warpboxs-small-title-line.data-v-58e53c2a { display: inline-block; background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%); height: 26rpx; width: 10rpx; margin-right: 12rpx; border-radius: 18rpx; box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4), 0 0 12rpx rgba(67, 160, 71, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3); position: relative; } .warpboxs-small-title .warpboxs-small-title-line.data-v-58e53c2a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 3rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%); pointer-events: none; } /* 账户设置区域 */ .settings-section.data-v-58e53c2a { margin-top: 0; -webkit-animation: slideDown-data-v-58e53c2a 0.6s ease-out; animation: slideDown-data-v-58e53c2a 0.6s ease-out; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 30rpx; border-radius: 24rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04); margin-bottom: 40rpx; } .settings-section .settings-list.data-v-58e53c2a { background: transparent; } .settings-section .settings-item.data-v-58e53c2a { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 0; border-bottom: 1rpx solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-radius: 12rpx; margin: 0 -10rpx; padding-left: 10rpx; padding-right: 10rpx; } .settings-section .settings-item.data-v-58e53c2a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent); transition: width 0.3s ease; border-radius: 12rpx; } .settings-section .settings-item.data-v-58e53c2a:last-child { border-bottom: none; } .settings-section .settings-item.data-v-58e53c2a:active { -webkit-transform: translateX(4rpx); transform: translateX(4rpx); background: rgba(255, 255, 255, 0.05); } .settings-section .settings-item.data-v-58e53c2a:active::before { width: 100%; } .settings-section .settings-left.data-v-58e53c2a { display: flex; align-items: center; flex: 1; position: relative; z-index: 1; } .settings-section .settings-icon-wrapper.data-v-58e53c2a { display: flex; align-items: center; justify-content: center; margin-right: 16rpx; flex-shrink: 0; width: 48rpx; height: 48rpx; transition: all 0.3s ease; } .settings-section .settings-icon-wrapper image.data-v-58e53c2a { width: 35rpx; height: 35rpx; } .settings-section .settings-item:active .settings-icon-wrapper.data-v-58e53c2a { -webkit-transform: scale(1.1); transform: scale(1.1); } .settings-section .settings-text.data-v-58e53c2a { font-size: 28rpx; color: #1f2937; line-height: 1.5; font-weight: 500; } /* 动画效果 */ @-webkit-keyframes slideDown-data-v-58e53c2a { from { opacity: 0; -webkit-transform: translateY(-20rpx); transform: translateY(-20rpx); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideDown-data-v-58e53c2a { from { opacity: 0; -webkit-transform: translateY(-20rpx); transform: translateY(-20rpx); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes rotate-data-v-58e53c2a { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-data-v-58e53c2a { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 修改密码弹窗样式 */ .password-dialog.data-v-58e53c2a { padding: 40rpx; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 20rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12); min-width: 600rpx; } .dialog-title.data-v-58e53c2a { font-size: 32rpx; font-weight: 600; color: #303133; text-align: center; margin-bottom: 40rpx; position: relative; padding-bottom: 20rpx; } .dialog-title.data-v-58e53c2a::after { content: ""; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60rpx; height: 4rpx; background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%); border-radius: 2rpx; } .dialog-content.data-v-58e53c2a { margin-bottom: 40rpx; } .form-item.data-v-58e53c2a { margin-bottom: 28rpx; } .form-item.data-v-58e53c2a:last-child { margin-bottom: 0; } .form-label.data-v-58e53c2a { display: block; font-size: 28rpx; color: #606266; margin-bottom: 12rpx; font-weight: 500; } .form-input.data-v-58e53c2a { width: 100%; height: 80rpx; padding: 0 24rpx; border: 2rpx solid #e4e7ed; border-radius: 12rpx; font-size: 28rpx; color: #303133; box-sizing: border-box; background-color: #ffffff; transition: all 0.3s ease; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); } .form-input.data-v-58e53c2a:focus { border-color: #43a047; background-color: #fff; box-shadow: 0 2rpx 12rpx rgba(67, 160, 71, 0.15); } .dialog-footer.data-v-58e53c2a { display: flex; justify-content: space-between; gap: 20rpx; margin-top: 40rpx; } .dialog-btn.data-v-58e53c2a { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 12rpx; font-size: 28rpx; font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); } .cancel-btn.data-v-58e53c2a { background-color: #f5f7fa; color: #606266; border: 1rpx solid #e4e7ed; } .cancel-btn.data-v-58e53c2a:active { background-color: #e4e7ed; -webkit-transform: scale(0.98); transform: scale(0.98); box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); } .confirm-btn.data-v-58e53c2a { background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%); color: #fff; border: none; } .confirm-btn.data-v-58e53c2a:active { background: linear-gradient(135deg, #388e3c 0%, #43a047 100%); -webkit-transform: scale(0.98); transform: scale(0.98); box-shadow: 0 1rpx 4rpx rgba(67, 160, 71, 0.3); } /* 优化后的业绩数据样式 */ .performance-grid.data-v-58e53c2a { display: flex; align-items: flex-start; gap: 16rpx; margin-bottom: 30rpx; } .glass-card.data-v-58e53c2a { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 20rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04); transition: all 0.3s ease; position: relative; overflow: hidden; } .glass-card.data-v-58e53c2a:active { -webkit-transform: scale(0.98); transform: scale(0.98); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); } .billing-card.data-v-58e53c2a { width: 350rpx; height: 350rpx; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; padding: 24rpx; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); flex-shrink: 0; box-sizing: border-box; } .billing-main.data-v-58e53c2a { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; padding: 0 8rpx; } .billing-item.data-v-58e53c2a { display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 20rpx; } .billing-right.data-v-58e53c2a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; } .billing-card .stat-content.data-v-58e53c2a { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; gap: 20rpx; } .billing-card .card-label.data-v-58e53c2a { font-size: 22rpx; font-weight: 500; color: #666; } .billing-card .stat-icon-small.data-v-58e53c2a { width: 64rpx; height: 64rpx; border-radius: 14rpx; box-shadow: none !important; flex-shrink: 0; } .billing-card .stat-icon-small image.data-v-58e53c2a { width: 36rpx; height: 36rpx; -webkit-filter: none !important; filter: none !important; } .billing-value.data-v-58e53c2a { font-size: 38rpx; font-weight: bold; color: #1f2937; line-height: 1.2; } .refund-value.data-v-58e53c2a { font-size: 24rpx; color: #999999; font-style: italic; margin-top: 4rpx; } .billing-footer.data-v-58e53c2a { display: flex; align-items: center; justify-content: center; width: 100%; padding-top: 16rpx; border-top: 1px solid rgba(0, 0, 0, 0.05); margin-top: auto; gap: 20rpx; } .count-item.data-v-58e53c2a { display: flex; align-items: center; justify-content: center; flex: 1; } .count-divider.data-v-58e53c2a { width: 1rpx; height: 32rpx; background: rgba(0, 0, 0, 0.1); flex-shrink: 0; } .count-text.data-v-58e53c2a { font-size: 26rpx; color: #666666; line-height: 1.5; } .right-column.data-v-58e53c2a { display: flex; flex-direction: column; gap: 16rpx; flex: 1; height: 350rpx; min-width: 0; box-sizing: border-box; } .stat-card.data-v-58e53c2a { padding: 24rpx; display: flex; align-items: center; justify-content: flex-start; position: relative; flex: 1; min-height: 0; height: 200rpx; } .stat-item-row.data-v-58e53c2a { display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 12rpx; } .stat-info-right.data-v-58e53c2a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; } .stat-card .stat-icon-small.data-v-58e53c2a { box-shadow: none !important; flex-shrink: 0; } .stat-card .stat-icon-small image.data-v-58e53c2a { -webkit-filter: none !important; filter: none !important; } .billing-footer .count-icon.data-v-58e53c2a { box-shadow: none !important; } .billing-footer .count-icon image.data-v-58e53c2a { -webkit-filter: none !important; filter: none !important; } .stat-content.data-v-58e53c2a { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: row; align-items: center; } .stat-card .card-label.data-v-58e53c2a { font-size: 22rpx; color: #666; } .stat-value.data-v-58e53c2a { font-size: 32rpx; font-weight: bold; color: #1f2937; line-height: 1.2; } .bg-icon.data-v-58e53c2a { position: absolute; right: 20rpx; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.2; z-index: 1; pointer-events: none; }