wxserver/pages/person-detail/person-detail.wxss

/* person-detail.wxss
 * 视觉方向：纸感编辑风（A 方案，与全局一致）
 */

.container {
  min-height: 100vh;
  background-color: #FAF6ED;
  padding: 24rpx 24rpx 120rpx;
}

/* ───── 人员卡片 ───── */
.person-card {
  background-color: #FFFFFF;
  border: 1rpx solid #E8E2D5;
  border-radius: 14rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.person-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background-color: #EFE9DC;
}

.person-info {
  flex: 1;
  min-width: 0;
}

.person-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #1F1D2B;
  display: block;
  margin-bottom: 6rpx;
}

.person-nickname {
  font-size: 24rpx;
  color: #8A8278;
}

.person-remark {
  font-size: 26rpx;
  color: #5A5247;
  line-height: 1.65;
  margin-bottom: 20rpx;
  padding: 18rpx 22rpx;
  background-color: #FAF6ED;
  border-radius: 10rpx;
}

.actions {
  display: flex;
  gap: 20rpx;
  margin-top: 24rpx;
}

.action-btn {
  flex: 1;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 500;
  background-color: #FFFFFF;
  color: #1F1D2B;
  border: 1rpx solid #E8E2D5;
  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.action-btn:active {
  background-color: #F2EEE5;
}

.action-btn.danger {
  background-color: #FFFFFF;
  color: #C8412F;
  border-color: #E8BCA7;
}

.action-btn.danger:active {
  background-color: #FFF1EA;
}

.action-btn::after {
  border: none;
}

/* ───── 纪念日列表 ───── */
.section {
  padding: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 0 8rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1F1D2B;
  letter-spacing: 1rpx;
}

.add-btn {
  padding: 10rpx 22rpx;
  background-color: #1F1D2B;
  color: #FAF6ED;
  border-radius: 36rpx;
  font-size: 22rpx;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

.add-btn::after {
  border: none;
}

/* ───── 纪念日卡片 ───── */
.anniversary-card {
  background-color: #FFFFFF;
  border: 1rpx solid #E8E2D5;
  border-radius: 14rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 16rpx;
}

.anniversary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.anniversary-type {
  display: flex;
  align-items: center;
  min-width: 0;
}

.type-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.type-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1F1D2B;
}

.importance-badge {
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
  font-size: 20rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.importance-high {
  background-color: #FFE3D7;
  color: #C8412F;
}

.importance-medium {
  background-color: #FFEFD9;
  color: #B36A1F;
}

.importance-low {
  background-color: #F2EEE5;
  color: #8A8278;
}

.anniversary-date {
  margin-bottom: 8rpx;
  font-size: 24rpx;
  color: #5A5247;
}

.anniversary-lunar {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 12rpx;
  font-size: 22rpx;
  color: #8A8278;
}

.lunar-icon {
  font-size: 20rpx;
  opacity: 0.7;
}

.date-label {
  color: #8A8278;
}

.date-text {
  color: #1F1D2B;
  font-weight: 500;
  margin-right: 12rpx;
}

.lunar-badge {
  display: inline-block;
  padding: 3rpx 12rpx;
  background-color: #F2EEE5;
  color: #8A8278;
  border-radius: 18rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.days-info {
  margin: 12rpx 0;
}

.days-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #6F8C58;
}

.days-text.urgent {
  color: #C8412F;
  font-weight: 600;
}

.days-text.warning {
  color: #B36A1F;
}

.days-text.past {
  color: #A9A096;
}

.anniversary-remark {
  font-size: 24rpx;
  color: #5A5247;
  line-height: 1.65;
  margin: 14rpx 0;
  padding: 14rpx 18rpx;
  background-color: #FAF6ED;
  border-radius: 8rpx;
}

.anniversary-actions {
  display: flex;
  gap: 14rpx;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #E8E2D5;
}

.edit-btn,
.delete-btn {
  flex: 1;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  font-size: 22rpx;
  border: 1rpx solid #E8E2D5;
  background-color: #FFFFFF;
  font-weight: 500;
}

.edit-btn {
  color: #1F1D2B;
}

.delete-btn {
  color: #C8412F;
  border-color: #E8BCA7;
}

.edit-btn::after,
.delete-btn::after {
  border: none;
}

/* ───── 空状态 ───── */
.empty-state {
  text-align: center;
  padding: 96rpx 40rpx;
}

.empty-state .icon {
  font-size: 96rpx;
  display: block;
  margin-bottom: 20rpx;
  opacity: 0.7;
}

.empty-state .text {
  font-size: 26rpx;
  color: #A9A096;
}