danyang-match/miniapp/components/service-hero/index.wxss

.service-hero {
  position:relative;
  height:300rpx;
  overflow:hidden;
  border-radius:0 0 32rpx 32rpx;
  background:var(--color-primary-light);
}

.service-hero__image,
.service-hero__veil {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.service-hero__veil {
  background:linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
}

.service-hero--night .service-hero__veil {
  background:linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
}

.service-hero__content {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:54%;
  height:100%;
  padding:0 36rpx;
  box-sizing:border-box;
}

.service-hero__eyebrow {
  margin-bottom:10rpx;
  color:var(--color-primary-strong);
  font-size:24rpx;
  font-weight:600;
  letter-spacing:2rpx;
}

.service-hero__title {
  color:var(--color-text-strong);
  font-size:40rpx;
  font-weight:700;
  line-height:1.28;
}

.service-hero__subtitle {
  margin-top:14rpx;
  color:var(--color-text-tertiary);
  font-size:24rpx;
  line-height:1.55;
}

.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
  color:var(--color-text-inverse);
}