health.applet/miniprogram/module/care/pages/careDetail/careDetail.scss

/* module/chats/pages/index/index.wxss */

.page-scroll__container {
  box-sizing: border-box;
  overflow-y: auto;
  padding-top: 10px;
  // padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  height: 100vh;
}
.fullscreen-bg {
  position: relative;
  height: 100vh;
  background-image: url("https://wx.hzliuzhi.com:4433/manager/file/statics/2025/06/17/bg_interview_20250617141722A079.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #f5f6f7;
}
.detail-container{
  background-color: #F9F9F9;
  padding: 24rpx 24rpx 18rpx 32rpx;
  margin: auto;
  width: 92%;
  border-radius: 0 0 16px 16px;
}
.detail-box {
  padding: 10px 0 0 0;
  width: 96%;
}
.info-card {
//   background: #fff;
//   background: linear-gradient(180deg, #d6e4f5 0%, #f3f4f6 100%);
//   border-radius: 16px;
// border-top: 1px solid white;
//   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
//   font-size: 28rpx;
//   margin: 24rpx 24rpx 0 0rpx;
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  color: #222;
  font-size: 28rpx;
}
.delivery{
  margin-bottom: 20rpx;
  color: #222;
}
.card-content{
  padding: 10px 0 0px 0px;
  width: 94%;
  background: white;
  margin: auto;
  border-radius: 15px;
}
.status-tag {
  background-color: #1976d2;
  margin: 0 0px 10px 16px;
  color: #fff;
  width: 150rpx;
  height: 32px;
  line-height: 32px;
  // padding: 4rpx 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
}
.status-icon {
  margin-right: 12rpx;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: black;
}
.label {
  color: #999;
  min-width: 90rpx;
  display: inline-block;
  font-size: 28rpx;
}
.address-block {
  background: #EBEEF4;
  border-radius: 10rpx;
  padding: 20rpx;
  color: #666;
  margin-bottom: 12rpx;
  font-size: 28rpx;
  line-height: 0.9;
}
// 紧凑地址与联系人两行间距
.address-block > view {
  margin: 0;
}
.address-block > view + view {
  margin-top: 6rpx;
}
.status-card {
  // border-radius: 16px;
  // margin: 24px auto;
  // width: 95%;

  // background: linear-gradient( 176deg, rgba(207,191,255,0.8) -1%, rgba(209,196,254,0.7) 0%, rgba(221,229,251,0.3) 20%);

  // background: linear-gradient(180deg, #d6e4f5 0%, #f3f4f6 100%);
  // padding: 15px 10px 10px 10px;
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 10rpx;
}
.content-box {
  background-color: white;
  border-radius: 10px;
  padding: 12px 15px;
  margin: auto;
  width: 85%;
}
.scheme-outer {
  background: linear-gradient(135deg, #e3f0ff 0%, #b3d8fd 100%);
  border-radius: 20rpx;
  padding: 24rpx 0 0 0;
  min-height: 100vh;
}
.scheme-header {
  display: flex;
  align-items: center;
  padding: 0 32rpx 16rpx 32rpx;
}
.header-icon {
  border: 1.5rpx dashed #1976d2;
  border-radius: 8rpx;
  background: #fff;
  margin-right: 16rpx;
  padding: 6rpx;
}
.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  margin-left: 12rpx;
}
.scheme-card {
  background: #fff;
  border-radius: 16rpx;
  // margin: 0 0rpx 24rpx 0rpx;
  padding: 24rpx 24rpx 18rpx 30rpx;
  width: 86%;
  margin: auto auto 10px auto;
  // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.scheme-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin-bottom: 20rpx;
  margin-top: 15rpx;
}
.divider {
  height: 1rpx;
  background: #eee;
  margin: 12rpx 0;
}
.scheme-img {
  width: 280rpx;
  height: 160rpx;
  display: block;
  margin: 0 auto 16rpx auto;
  border-radius: 12rpx;
  border: 1px solid #e5e5e5;
}
.scheme-row {
  font-size: 26rpx;
  color: #222;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.scheme-row.between {
  justify-content: space-between;
}
.scheme-row.light {
  // color: #999;
  font-size: 14px;
}
.success {
  color: #2ec4b6;
  margin: 0 4rpx;
}
.link {
  display: flex;
  align-items: center;
  color: #1976d2;
  margin-left: 16rpx;
  font-weight: 500;
  font-size: 28rpx;

}
.text-gray{
  color: #999;
  font-size: 14px;
}
.opt-box{
 position: absolute;
 right: 10px;
}
.desc-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8rpx;
}
.desc-label {
  // font-weight: bold;
  color: #222;
  margin-right: 8rpx;
  font-size: 26rpx;
}
.desc-content {
  color: #222;
  font-size: 26rpx;
  flex: 1;
  word-break: break-all;
}
.scheme-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f7fa;
  border-radius: 8rpx;
  padding: 30rpx;
  margin-top: 12rpx;
  font-size: 26rpx;
}
.next-time {
  color: #1976d2;
}
.tongue-list-outer {
  // background: #f6faff;
  background-color: white;
  border-radius: 18rpx;
  padding: 24rpx 0 24rpx 0;
  // margin: 24rpx;
  margin-top: 10px;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  width: 85%;
  margin: 10px auto;
}
.tongue-list-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  // margin-bottom: 18rpx;
  margin: 10px 0 15px 0;
}
.tongue-list-table {
  background: #fff;
  border: 1px solid #e5e5e5;
}

.header-cell {
  flex: 1; /* 其他列占用剩余空间 */
  text-align: center;
  position: relative; /* 使边框定位相对 */
}

.header-cell:not(:last-child) {
  border-right: 1rpx solid #e5e5e5; /* 添加右边框，排除最后一个标题 */
}

.cell {
  flex: 1;
  padding: 18rpx;

  .cell-content {
    display: flex;
    align-items: center;

    .column {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .divider {
      width: 1px;
      height: 24rpx;
      background: #eee;
      margin: 0 16rpx;
    }
  }
}
.tongue-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  object-fit: contain;
  background: #f3f3f3;
}
.report-btn {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  color: #1976d2;
  background: #eaf2ff;
  border-radius: 8rpx;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  cursor: pointer;
}
.report-btn t-icon {
  margin-right: 6rpx;
}
.symptom-list-outer {
  background: white;
  border-radius: 18rpx;
  padding: 10px 16px 16px 16px;
  // margin: 24rpx;
  margin-top: 10px;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 width: 86%;
 margin: auto auto 10px auto;
}
.symptom-list-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  margin: 10px 10px 15px 10px;
}
.symptom-list-table {
  background: #fff;
  // border-radius: 12rpx;
  overflow: auto;
  border: 1px solid #e5e5e5;
}
.table-header {
  display: flex;
  background: #EEEEEE;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 20px;
}

.table-row {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fff;
  min-height: 80rpx;
}
.tongue-list-outer{
  padding: 10px 16px 16px 16px;
}
.cell {
  flex: 1;
  text-align: center;
  // padding: 18rpx 0;
  font-size: 28rpx;
  color: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border-right: 1rpx solid #e5e5e5;
  &:last-child {
    border-right: none;
  }
}
.symptom-cell {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  // width: 200px; /* 设置固定宽度 */
  // overflow-x: auto; /* 允许整体横向滚动 */
}
.symptom-scroll {
  width: 100%;
  overflow-x: auto; /* 允许整体横向滚动 */
  // flex: 1; /* 使其占据剩余空间 */
}
.symptom-cols {
  display: flex;
  width: auto; /* 允许根据内容宽度自适应 */
}
.symptom-col {
  flex: none; /* 不使用 flex 属性，确保每个症状列宽度一致 */
  text-align: center;
  padding: 0 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48rpx;
  width: 100px; /* 设置固定宽度以确保对齐 */
  border-right: 1rpx solid #e5e5e5;
  font-size: 28rpx;
  box-sizing: border-box;

  &.empty {
    color: #999; /* 占位符颜色 */
    font-style: italic; /* 斜体显示 */
  }
}
.highlight {
  color: #2ec4b6;
  font-weight: 600;
}
.chart-container {
  width: 100%;
  height: 400rpx;
  margin: 20rpx 0;
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
}

ec-canvas {
  width: 100%;
  height: 100%;
}
.icon{
  width: 23px;
  height: 23px;
  margin-right: 10rpx;
}
.header-cell.date-cell {
  width: 100px; /* 设置固定宽度 */
  flex: none; /* 不使用 flex 属性 */
  text-align: center; /* 可选：居中对齐 */
}

.cell.date-cell {
  width: 100px; /* 设置与标题相同的固定宽度 */
  text-align: center; /* 可选：居中对齐 */
  flex: none;
}

.table-row:nth-child(odd) {
  background-color: #F9F9F9; /* 设置偶数行的背景颜色 */
}
.date-cells:nth-child(odd){
  background-color: #F9F9F9;
}
.index-title{
  text-align: center;
  font-size: 28rpx;
  color: #000;
  font-size: 16px;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e5e5e5;
  width: 92%;
  margin: auto;
  font-weight: 500;
}
.index-container{
  background-color: white;
  border-radius: 10px;
  width: 95%;
  // padding-left:10px;
  margin: auto;
}

// ====
/* 基础样式 */
.container {
  display: flex;
  flex-direction: column;
  // height: 100vh;
  width: 100%;
}

/* 表头样式 */
.table-headers {
  display: flex;
  height: 80rpx;
  background: #EEEEEE;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 20px;
}

.date-header {
  width: 200rpx;
  padding: 20rpx 0;
  text-align: center;
  border-right: 1px solid #ddd;
  flex-shrink: 0;
}

.symptoms-header-scroll {
  flex: 1;
  overflow: hidden;
}

.symptoms-header {
  padding: 20rpx;
  min-width: 100%;
  text-align: center;
}

/* 表格内容 */
.table-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  background-color: #f5f5f5;
}

/* 固定日期列 */
.date-column {
  width: 240rpx;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  background-color: white;
}

.date-cells {
  // padding: 20rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
  height: 100rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

/* 可滚动症状列 */
.symptoms-column {
  flex: 1;
  overflow: auto;
  background-color: white;
  border-right: 1px solid #eee;
}


.symptoms-grid {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
}

.symptoms-row {
  display: flex;
  min-width: fit-content;
  border-bottom: 1px solid #eee;
  height: 100rpx;
  box-sizing: border-box;
  background-color: white;
}
.symptom-row:nth-child(odd){
  background-color: #F9F9F9;
}
.symptom-cells {
  min-width: 250rpx;
  padding: 20rpx;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
// 轮播组件样式
.carousel-container {
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  height: 200rpx;
  width: 50%;
  
  .media-carousel {
    height: 100%;
  }
}

// 轮播图加载状态样式
.carousel-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  border: 1px dashed #ddd;
  border-radius: 16rpx;
}

.carousel-box{
  width: 100%;
  height: 200rpx;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx;
}
.complete-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}
.row-box{
  
  background-image: url('https://wx.hzliuzhi.com:4433/manager/file/statics/2025/08/21/WechatIMG731_20250821155626A830.jpg');
  background-size: cover;
  // background-position: center;
  padding-top: 15px;
  padding-left: 13px;
}
.bottom-box{
  background-color: #D6E4F5;
  border-radius: 16px;
  margin-top:15px;
  padding-bottom: 20px;
}
.care-box{
  // background: linear-gradient(176deg, rgba(207, 191, 255, 0.8) 0%, rgba(209, 196, 254, 0.7) 0%, rgba(221, 229, 251, 0.3) 8%);
}
.result-box{
  // background: linear-gradient(176deg, rgba(207, 191, 255, 0.8) 0%, rgba(209, 196, 254, 0.7) 0%, rgba(221, 229, 251, 0.3) 8%);
}