youlegames/codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxss

/* pages/date-calc/date-calc.wxss */
page {
  background-color: #f0f2f5;
  color: #333;
  --primary-color: #5b73e8;
  --primary-light: #e0e6fc;
}

.container {
  padding: 30rpx;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Tab 切换 */
.tab-header {
  display: flex;
  background: #ffffff;
  padding: 8rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.tab-pill {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  white-space: nowrap;
}

.tab-pill.active {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: bold;
}

.tab-icon {
    font-size: 32rpx;
}

/* 卡片通用样式 */
.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
}

.card-title {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
  text-transform: uppercase;
  letter-spacing: 1rpx;
}

/* 模式1：日期推算 */
.date-display {
  display: flex;
  align-items: baseline;
  padding-bottom: 20rpx;
}

.date-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.date-week {
  font-size: 28rpx;
  color: #666;
}

.edit-icon {
  margin-left: auto;
  color: var(--primary-color);
  font-size: 36rpx;
  opacity: 0.8;
}

.divider {
  height: 1px;
  background: #f0f0f0;
  margin: 30rpx 0;
}

.input-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 10rpx;
    margin-bottom: 30rpx;
}

.days-input {
    flex: 1;
    font-size: 56rpx;
    font-weight: bold;
    color: var(--primary-color);
    height: 80rpx;
}

.input-unit {
    font-size: 32rpx;
    color: #999;
}

.tags-row {
    display: flex;
    gap: 20rpx;
}

.tag {
    background: #f5f7fa;
    color: #666;
    padding: 12rpx 24rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-weight: 500;
}

.tag-red {
    background: #fff0f0;
    color: #ff4d4f;
}

/* 结果卡片 */
.result-card {
    background: var(--primary-color); /* 渐变色更好吗？先用纯色突出 */
    background: linear-gradient(135deg, #5b73e8 0%, #455ac0 100%);
    color: #fff;
    text-align: center;
    padding: 50rpx;
}

.result-header {
    font-size: 24rpx;
    opacity: 0.8;
    margin-bottom: 20rpx;
}

.result-date {
    font-size: 64rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
}

.result-week {
    font-size: 32rpx;
    opacity: 0.9;
}

/* 模式2：日期间隔 */
.date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row-label {
    font-size: 30rpx;
    color: #666;
    font-weight: bold;
}

.date-pill {
    background: #f5f7fa;
    padding: 16rpx 30rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.pill-icon {
    font-size: 20rpx;
    color: #999;
}

.timeline-connect {
    display: flex;
    align-items: center; /* 居中对齐 */
    margin: 30rpx 0;
    padding-left: 20rpx; /* 微调对齐 */
}

.dots {
    width: 2px;
    height: 40rpx;
    border-left: 2px dashed #ddd; /* 使用左边框模拟竖线 */
    margin: 0 auto; /* 水平居中 */
}

/* 实际上我想做竖向的时间轴，但在 input-card 里横向可能更好看，但这设计是竖向列表？
   重新设计 timeline 为竖向的连接线
*/
.input-card {
    position: relative;
}

/* 覆盖上面的 timeline-connect 为竖向视觉连接 */
.timeline-connect {
    display: flex;
    flex-direction: column; /* 竖向 */
    align-items: flex-start; /* 靠左对齐，或者根据布局 */
    margin: 30rpx 0;
    padding-left: 0;
    position: relative;
    height: 60rpx; /* 高度 */
    justify-content: center;
}

.dots {
   /* 复用为无形占位或改用伪元素连线 */
   display: none; 
}

.timeline-connect::before {
    content: '';
    position: absolute;
    left: 40rpx; /* 连接线的位置，约等于 row-label 的中心 */
    top: -20rpx;
    bottom: -20rpx;
    width: 2rpx;
    background: #e0e0e0;
    z-index: 0;
}

.duration-badge {
    position: relative;
    z-index: 1;
    background: #e6f7ff;
    color: #1890ff;
    font-size: 22rpx;
    padding: 6rpx 20rpx;
    border-radius: 20rpx;
    margin-left: 20rpx; /* 避开左侧文字 */
    align-self: center; /* 居中 */
}

/* 间隔结果 */
.interval-result .result-huge {
    font-size: 80rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
}

.interval-result .unit {
    font-size: 32rpx;
    font-weight: normal;
    margin-left: 10rpx;
}

.interval-result .result-sub {
    font-size: 28rpx;
    opacity: 0.9;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20rpx;
    display: inline-block;
}