fqsz/pages/theme/theme.wxss

.theme-container {
  padding: 30rpx;
  min-height: 100vh;
  transition: all 0.3s ease;
}

.theme-header {
  padding: 20rpx 0 40rpx;
}

.theme-title {
  font-size: 36rpx;
  font-weight: bold;
}

.theme-desc {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.theme-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.theme-option {
  width: 210rpx;
  height: 280rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  border: 2rpx solid #eee;
  transition: all 0.3s ease;
}

.theme-option.active {
  border-color: var(--primaryColor, #E7624F);
}

.theme-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.preview-title {
  font-size: 30rpx;
  font-weight: 500;
}

.theme-check {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-check.checked {
  background-color: var(--primaryColor, #E7624F);
}

.theme-check image {
  width: 24rpx;
  height: 24rpx;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.color-option {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  position: relative;
  border: 2rpx solid #eee;
  transition: all 0.3s ease;
}

.color-option:active {
  transform: scale(0.95);
}

.color-check {
  position: absolute;
  bottom: -5rpx;
  right: -5rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid white;
  transition: all 0.3s ease;
}

.color-check.checked {
  background-color: var(--primaryColor, #E7624F);
}

.color-check image {
  width: 20rpx;
  height: 20rpx;
}

.apply-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: white;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 60rpx;
  transition: all 0.3s ease;
}

.apply-btn:active {
  opacity: 0.8;
}