diff --git a/mini-program/src/pages/main/RecordView.vue b/mini-program/src/pages/main/RecordView.vue index 728ca1c..14a2493 100644 --- a/mini-program/src/pages/main/RecordView.vue +++ b/mini-program/src/pages/main/RecordView.vue @@ -183,249 +183,11 @@ const addFilter = () => { padding-bottom: 238rpx; } -.profile-card { - position: relative; - overflow: hidden; - border-radius: 34rpx; - padding: 34rpx 30rpx 28rpx; -} - -.profile-card::after { - content: ''; - position: absolute; - right: -28rpx; - bottom: -20rpx; - width: 220rpx; - height: 156rpx; - background: radial-gradient(circle, rgba(122, 58, 255, 0.35), transparent 62%); - border: 1rpx solid rgba(158, 88, 255, 0.26); - border-radius: 50%; - transform: rotate(-18deg); -} - -.profile-top, -.meta-grid, -.hobby-row { - position: relative; - z-index: 1; -} - -.profile-top { - display: flex; - align-items: center; - gap: 22rpx; -} - -.avatar-wrap { - position: relative; - flex-shrink: 0; - width: 112rpx; - height: 112rpx; - padding: 5rpx; - border-radius: 50%; - background: linear-gradient(135deg, #fff, #9b54ff 38%, #4a67ff); - box-shadow: 0 0 34rpx rgba(149, 89, 255, 0.52); -} - -.avatar { - width: 100%; - height: 100%; - border-radius: 50%; - background: #20123d; -} - -.avatar-edit { - position: absolute; - right: -5rpx; - bottom: -5rpx; - width: 40rpx; - height: 40rpx; - border-radius: 50%; - background: linear-gradient(135deg, #8b4dff, #4a2cff); - box-shadow: 0 0 20rpx rgba(158, 91, 255, 0.6); -} - -.edit-pen, -.tiny-pen { - width: 18rpx; - height: 6rpx; - border-radius: 6rpx; - background: #fff; - transform: rotate(-45deg); - margin: 17rpx auto; -} - -.profile-info { - flex: 1; - min-width: 0; -} - -.name-row { - display: flex; - align-items: center; - gap: 14rpx; -} - -.profile-name { - color: #fff; - font-size: 36rpx; - line-height: 1.1; - font-weight: 800; -} - .star { color: #ffd589; font-size: 26rpx; } -.profile-subtitle { - display: block; - margin-top: 10rpx; - color: rgba(239, 232, 255, 0.78); - font-size: 24rpx; -} - -.edit-profile { - flex-shrink: 0; - height: 56rpx; - padding: 0 18rpx; - border-radius: 999rpx; - display: flex; - align-items: center; - gap: 8rpx; - color: #dccbff; - font-size: 22rpx; -} - -.tiny-pen { - width: 16rpx; - margin: 0; - background: currentColor; -} - -.profile-divider { - position: relative; - z-index: 1; - height: 1rpx; - margin: 28rpx 0 20rpx; - background: rgba(180, 139, 255, 0.22); -} - -.profile-divider.small { - margin: 20rpx 0; -} - -.meta-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); -} - -.meta-item { - min-width: 0; - display: flex; - align-items: center; - gap: 10rpx; - padding-right: 12rpx; - border-right: 1rpx solid rgba(180, 139, 255, 0.22); -} - -.meta-item + .meta-item { - padding-left: 16rpx; -} - -.meta-item.no-border { - border-right: 0; -} - -.meta-item > view, -.hobby-row > view { - min-width: 0; -} - -.meta-icon, -.heart { - color: #a855ff; - font-size: 34rpx; - line-height: 1; - text-shadow: 0 0 24rpx rgba(168, 85, 255, 0.7); -} - -.person-icon, -.job-icon { - position: relative; - width: 32rpx; - height: 32rpx; - flex-shrink: 0; -} - -.person-icon::before { - content: ''; - position: absolute; - left: 8rpx; - top: 0; - width: 14rpx; - height: 14rpx; - border: 3rpx solid #a855ff; - border-radius: 50%; -} - -.person-icon::after { - content: ''; - position: absolute; - left: 1rpx; - bottom: 0; - width: 28rpx; - height: 16rpx; - border: 3rpx solid #a855ff; - border-radius: 18rpx 18rpx 4rpx 4rpx; -} - -.job-icon { - border: 4rpx solid #a855ff; - border-radius: 8rpx; - box-sizing: border-box; -} - -.job-icon::before { - content: ''; - position: absolute; - left: 8rpx; - top: -8rpx; - width: 12rpx; - height: 7rpx; - border: 3rpx solid #a855ff; - border-bottom: 0; - border-radius: 8rpx 8rpx 0 0; -} - -.meta-label, -.meta-value, -.hobby-text { - display: block; -} - -.meta-label { - color: rgba(219, 204, 247, 0.54); - font-size: 20rpx; -} - -.meta-value, -.hobby-text { - margin-top: 3rpx; - color: #fff; - font-size: 23rpx; - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.hobby-row { - display: flex; - align-items: center; - gap: 22rpx; -} - .section-head { display: flex; align-items: center;