test/pages/category/index.wxss

/* pages/category/index.wxss */
.category-container {
  display: flex;
  height: calc(100vh - 280rpx);
  background-color: #fff;
  /* padding-bottom: 10rpx !important; */
  /* box-sizing: border-box !important; */
}

/* 左侧分类导航样式 */
.category-sidebar {
  width: 180rpx;
  height: 100%;
  background-color: #f8f8f8;
}

.category-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.category-item.active {
  color: #FF5F15;
  font-weight: 500;
  background-color: #fff;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background-color: #FF5F15;
  border-radius: 4rpx;
}

/* 右侧服务列表样式 */
.service-content {
  flex: 1;
  height: 100%;
  padding: 0 30rpx;
}

.category-title {
  padding: 30rpx 0;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.category-count {
  font-size: 24rpx;
  color: #999;
  font-weight: normal;
  margin-left: 10rpx;
}

/* 服务卡片样式 */
.service-list {
  padding: 20rpx 0;
}

.service-card {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.service-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.service-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.service-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

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

.price {
  font-size: 34rpx;
  font-weight: bold;
  color: #FF5F15;
  margin-right: 10rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.service-sales {
  font-size: 24rpx;
  color: #999;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60%;
}