/* ===== 页面与滚动 ===== */ .page { background: #fefbf6; min-height: 100vh; display: flex; flex-direction: column; } .page-title { padding: 24rpx 24rpx 0; } .title { color: #ff8a00; /* 主标题亮橙 */ font-size: 40rpx; font-weight: 700; } .content { flex: 1; padding: 24rpx; box-sizing: border-box; } .no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ===== 卡片通用 ===== */ .card { background: #ffffff; border-radius: 18rpx; padding: 24rpx; border: 2rpx solid #ffeaa7; /* 浅橙描边 */ box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05); } .card + .card { margin-top: 20rpx; } /* ===== 表单 ===== */ .form-card .field + .field { margin-top: 20rpx; } .field-label { font-size: 28rpx; color: #555555; margin-bottom: 12rpx; display: block; } .input-box { background: #ffffff; border: 2rpx solid #ffeaa7; border-radius: 12rpx; padding: 0 20rpx; height: 84rpx; display: flex; align-items: center; } .input { flex: 1; font-size: 28rpx; color: #1f1f1f; } .ph { color: #b8b8b8; } /* 按钮 */ .btn { height: 88rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; margin-top: 24rpx; } .btn-primary { background: linear-gradient(180deg, #ffa400 0%, #ff8a00 100%); color: #ffffff; box-shadow: 0 6rpx 14rpx rgba(255, 138, 0, 0.30); } /* ===== 空状态 ===== */ .empty { padding: 120rpx 0 40rpx; display: flex; flex-direction: column; align-items: center; color: #999999; } .empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; } .empty-text { font-size: 26rpx; } /* ===== 业绩卡片 ===== */ .topline { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-bottom: 8rpx; } .id-and-name { display: flex; align-items: baseline; gap: 16rpx; flex-wrap: wrap; } .no { font-size: 24rpx; color: #666666; } .name { font-size: 28rpx; color: #1f1f1f; font-weight: 600; } .link-btn { height: 56rpx; padding: 0 18rpx; border-radius: 999rpx; background: #fff6e6; display: inline-flex; align-items: center; justify-content: center; border: 1rpx solid #ffd6b3; } .link-text { font-size: 24rpx; color: #ff8a00; font-weight: 600; } /* 行:键值对 */ .row { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 0; border-top: 1rpx dashed #f0f0f0; } .row-key { font-size: 26rpx; color: #666666; } .row-val { display: flex; align-items: center; gap: 16rpx; } .mono { font-size: 28rpx; color: #1f1f1f; font-family: monospace; letter-spacing: 1rpx; } .copy { font-size: 24rpx; color: #ff8a00; padding: 8rpx 14rpx; border-radius: 12rpx; background: #fff4f2; border: 1rpx solid #ffd6cc; } /* 徽标 chips */ .chips { display: flex; gap: 12rpx; flex-wrap: wrap; margin: 12rpx 0 4rpx; } .chip { padding: 10rpx 16rpx; background: #f7f9fc; color: #3d4f6e; border: 1rpx solid #e6edf7; border-radius: 12rpx; font-size: 24rpx; } /* 九宫格:3 列自适应 */ .grid { margin-top: 8rpx; margin-left: -10rpx; margin-right: -10rpx; display: flex; flex-wrap: wrap; } .grid-item { width: 33.3333%; padding: 14rpx 10rpx; box-sizing: border-box; } .gi-label { font-size: 24rpx; color: #666666; } .gi-value { display: block; margin-top: 10rpx; font-size: 30rpx; font-weight: 700; color: #1f1f1f; } /* 金额类,用主题橙强调 */ .grid-item:nth-child(2) .gi-value, .grid-item:nth-child(3) .gi-value, .grid-item:nth-child(4) .gi-value, .grid-item:nth-child(6) .gi-value, .grid-item:nth-child(8) .gi-value, .grid-item:nth-child(9) .gi-value { color: #ff8a00; } /* 小屏两列适配 */ @media (max-width: 360px) { .grid-item { width: 50%; } }