ai-c/pages/service/service.wxss

/* 服务页面样式 - 按照Figma设计实现 */
page {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
}

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  background: #fff;
}

/* 顶部导航栏已移除，改用全局 unified-header */

/* 内容滚动区域 */
.content-scroll {
  flex: 1;
  width: 100%;
}

/* 搜索栏 - 常规样式 */
.search-section {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  margin-top: 16rpx;
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  height: 80rpx;
  background: #F5F7FA;
  border-radius: 40rpx;
  padding: 0 24rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
  opacity: 0.5;
}

.search-input-wrap {
  flex: 1;
  margin: 0 16rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #101828;
}

.placeholder {
  color: #99A1AF;
  font-size: 28rpx;
}

.search-btn {
  padding: 12rpx 32rpx;
  background: #914584;
  border-radius: 32rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
  flex-shrink: 0;
}

/* 轮播图 Banner */
.banner-section {
  padding: 24rpx 32rpx;
}

.banner-swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx -8rpx rgba(243, 244, 246, 1), 0 20rpx 30rpx -6rpx rgba(243, 244, 246, 1);
}

/* 防止轮播图闪烁 */
swiper-item {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* 防止图片闪烁 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 服务类型 6宫格 - 按Figma设计: 358.77x239.94, 3列2行 */
.service-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 718rpx;
  margin: 0 auto;
  padding: 24rpx 0;
  row-gap: 64rpx;
}

.service-type-item {
  width: 218rpx;
  height: 208rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24rpx;
  box-sizing: border-box;
}

.service-type-icon {
  width: 168rpx;
  height: 168rpx;
  border-radius: 9999rpx;
  flex-shrink: 0;
}

.service-type-name {
  font-family: Arial, sans-serif;
  font-size: 36rpx;
  font-weight: 700;
  color: #364153;
  line-height: 1.56;
  text-align: center;
}

/* 精选服务区域 */
.featured-section {
  background: #fff;
  border-top: 2rpx solid #F9FAFB;
  padding: 48rpx 32rpx 0;
}

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

.section-title {
  font-family: Arial, sans-serif;
  font-size: 40rpx;
  font-weight: 900;
  color: #101828;
  line-height: 1.33;
}

.view-more {
  display: flex;
  align-items: center;
  gap: 0;
}

.more-text {
  font-family: Arial, sans-serif;
  font-size: 32rpx;
  color: #6A7282;
}

.arrow-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 分类标签 */
.category-tabs {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 8rpx;
}

.tabs-container {
  display: inline-flex;
  gap: 64rpx;
}

.tab-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 8rpx;
}

.tab-text {
  font-family: Arial, sans-serif;
  font-size: 32rpx;
  color: #4A5565;
}

.tab-item.active .tab-text {
  color: #914584;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #914584;
  border-radius: 9999rpx;
}

/* 服务人员列表 */
.provider-list {
  padding: 32rpx;
}

.provider-card {
  display: flex;
  background: #fff;
  border: 2rpx solid #F3F4F6;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

/* 左侧头像区域 */
.provider-left {
  width: 168rpx;
  flex-shrink: 0;
  margin-right: 32rpx;
  position: relative;
}

.provider-top-tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.experience-tag {
  width: 100%;
  height: 40rpx;
  background: #F9FAFB;
  border-radius: 16rpx;
  font-family: Arial, sans-serif;
  font-size: 24rpx;
  font-weight: 700;
  color: #364153;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -2.5%;
}

.rating-wrap {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.star-icon {
  width: 20rpx;
  height: 20rpx;
}

.rating-text {
  font-family: Arial, sans-serif;
  font-size: 22rpx;
  font-weight: 700;
  color: #364153;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-wrapper {
  width: 168rpx;
  height: 168rpx;
  border-radius: 32rpx;
  background: #F3F4F6;
  overflow: hidden;
}

.provider-avatar {
  width: 100%;
  height: 100%;
}

.verified-badge {
  margin-top: -24rpx;
  padding: 4rpx 18rpx;
  background: #FFFAF0;
  border: 2rpx solid #FFE4BA;
  border-radius: 8rpx;
  font-family: Arial, sans-serif;
  font-size: 20rpx;
  font-weight: 700;
  color: #B7791F;
  box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* 右侧信息区域 */
.provider-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  height: 56rpx;
}

.provider-name {
  font-family: Arial, sans-serif;
  font-size: 40rpx;
  font-weight: 900;
  color: #101828;
  line-height: 1.4;
}

.provider-tag {
  padding: 4rpx 12rpx;
  background: linear-gradient(180deg, #914584 0%, #B066A3 100%);
  border-radius: 16rpx;
  font-family: Arial, sans-serif;
  font-size: 20rpx;
  color: #fff;
  letter-spacing: 2.5%;
}

.provider-desc {
  font-family: Arial, sans-serif;
  font-size: 24rpx;
  color: #6A7282;
  line-height: 1.33;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-skills {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}

.skill-tag {
  height: 48rpx;
  padding: 0 16rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  font-family: Arial, sans-serif;
  font-size: 24rpx;
  color: #4A5565;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-tag.has-icon {
  gap: 8rpx;
}

.skill-icon {
  width: 24rpx;
  height: 24rpx;
}

.provider-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 2rpx solid #F9FAFB;
}

.price-section {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-family: Arial, sans-serif;
  font-size: 24rpx;
  color: #FF6B00;
}

.price-value {
  font-family: Arial, sans-serif;
  font-size: 40rpx;
  font-weight: 900;
  color: #FF6B00;
  line-height: 1.4;
}

.price-unit {
  font-family: Arial, sans-serif;
  font-size: 24rpx;
  color: #6A7282;
  margin-left: 4rpx;
}

.book-btn {
  width: 176rpx;
  height: 64rpx;
  background: linear-gradient(180deg, #FF6B6B 0%, #FF8787 100%);
  border-radius: 9999rpx;
  font-family: Arial, sans-serif;
  font-size: 28rpx;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 4rpx -2rpx #FFEDD4, 0 2rpx 6rpx #FFEDD4;
}

/* 暂无内容提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  gap: 20rpx;
}

.empty-tip image {
  width: 200rpx;
  height: 200rpx;
  opacity: 0.5;
}

.empty-tip text {
  font-size: 28rpx;
  color: #99A1AF;
}

/* 商家评分样式 */
.merchant-rating {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-left: auto;
}

.merchant-rating .star-icon {
  width: 32rpx;
  height: 32rpx;
}

.merchant-rating .rating-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #FF6B00;
}

/* 智慧康养状态标签 */
.provider-status {
  display: flex;
  margin-top: 10rpx;
}

.status-tag {
  padding: 4rpx 16rpx;
  background-color: #F3F4F6;
  color: #99A1AF;
  font-size: 22rpx;
  border-radius: 8rpx;
}

/* 底部占位 */
.bottom-placeholder {
  height: 200rpx;
}


/* 自定义底部导航栏 - 与其他页面统一 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 194rpx;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 24rpx;
  z-index: 999;
  border-top: 2rpx solid #F3F4F6;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  width: 150rpx;
  height: 120rpx;
}

.tabbar-icon {
  width: 68rpx;
  height: 68rpx;
}

.tabbar-text {
  font-family: Arial, sans-serif;
  font-size: 40rpx;
  font-weight: 700;
  color: #A58AA5;
  line-height: 1;
}

.tabbar-text.active {
  color: #B06AB3;
}

.message-icon-wrapper {
  position: relative;
  width: 68rpx;
  height: 68rpx;
}

.message-icon-wrapper .tabbar-icon {
  width: 68rpx;
  height: 68rpx;
}

.message-dot {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 24rpx;
  height: 24rpx;
  background: #FB2C36;
  border: 2rpx solid #fff;
  border-radius: 50%;
}