<script setup>
import { computed, ref, watch } from 'vue';

const TEXTS = {
  TDS: {
    instruction: '点击"开始检测"按钮测试TDS值',
    tips: {
      default: 'TDS代表总溶解固体，数值越低水质越纯净',
      testing: '安吉尔RO反渗透技术可将TDS降至15以下',
      result: '优质饮用水TDS值应低于50ppm',
    },
    label: 'TDS值',
    polluted: '450',
    purified: '15',
  },
  PH: {
    instruction: "点击‘开始检测’测试水的酸碱度",
    tips: {
      default: '理想饮用水pH值应在6.5-8.5之间',
      testing: 'pH试纸通过颜色变化判断酸碱性',
      result: '中性水(pH 7.0)对人体最温和,是理想的饮用水',
    },
    label: 'PH值',
    polluted: '8.5',
    purified: '7.0',
  },
  placeholder: '？？？',
};

const IMAGES = {
  // 两个选项图片
  tabActiveTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b91478ab6f2d4c2186a948ae9b614f45Group%20348447426.webp',
  tabActivePh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b9c5667e95ea48a1b4c10f2d9ee84db6Group%20348447426.webp',
  tabInactiveTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a4bd654c5fd4401bb4d09ce1a8e08aa3Group%20348447427.webp',
  tabInactivePh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-02-26/023189e7e11545e6bd49c1f37d9a1478iHA7EcKejNiNbde90471ce05a5bbbc559a25533ed83d.webp',
  // 介绍内部图片
  instructionTds: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/1a62746fad3743d19f01e8b612ed8d42Group%20348447435.webp',
  instructionPh: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/32ac38db03994072aca53ae518b996eeGroup%20348447450.webp',
  phLabel: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/536133e8a44f4482b2848016385d79cbPH.webp',
  cardBg: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp',
  // 进度条
  progressResult: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp',
  progressInitial: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp',
  // 结果内部图片
  warningIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp',
  successIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp',
  successIconFrame: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp',
  badgeIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/44463cae0882429ebd84049240ff5330Group%20348447451.webp',
  phChart: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp',
  phBefore: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8756b9fccb61450a96f34e2b0e938552Group%20348447464.webp',
  phAfter: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/200ccfb61dce458799879093341107f9Group%20348447463.webp',
  // 灯泡
  bulbIcon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp',
};

const props = defineProps({
  isTesting: {
    type: Boolean,
    default: false,
  },
  isSecondTest: {
    type: Boolean,
    default: false,
  },
  triggerShowFinalCard: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['resultShown', 'progressFinished']);

const showResults = ref(false);
const showFinalCard = ref(false);

const activeTabImage = computed(() => {
  return props.isSecondTest ? IMAGES.tabInactivePh : IMAGES.tabActiveTds;
});

const inactiveTabImage = computed(() => {
  return props.isSecondTest ? IMAGES.tabActivePh : IMAGES.tabInactiveTds;
});

const instructionText = computed(() => {
  return props.isSecondTest ? TEXTS.PH.instruction : TEXTS.TDS.instruction;
});

const instructionIcon = computed(() => {
  return props.isSecondTest ? IMAGES.instructionPh : IMAGES.instructionTds;
});

const iconMode = computed(() => {
  return props.isSecondTest ? 'aspectFit' : 'heightFix';
});

const tipsText = computed(() => {
  const content = props.isSecondTest ? TEXTS.PH : TEXTS.TDS;

  if (showFinalCard.value) {
    return content.tips.result;
  }
  if (props.isTesting) {
    return content.tips.testing;
  }
  return content.tips.default;
});

const resultLabel = computed(() => {
  return props.isSecondTest ? TEXTS.PH.label : TEXTS.TDS.label;
});

const pollutedValue = computed(() => {
  if (!showResults.value) return TEXTS.placeholder;
  return props.isSecondTest ? TEXTS.PH.polluted : TEXTS.TDS.polluted;
});

const purifiedValue = computed(() => {
  if (!showResults.value) return TEXTS.placeholder;
  return props.isSecondTest ? TEXTS.PH.purified : TEXTS.TDS.purified;
});

const handleImageError = (e) => {
  console.error('Image load failed:', e.detail.errMsg);
};

watch(
  () => props.isTesting,
  (newVal) => {
    if (newVal) {
      showResults.value = false;
      showFinalCard.value = false;

      setTimeout(() => {
        showResults.value = true;
        emit('progressFinished');
      }, 1000);
    } else {
      showResults.value = false;
      showFinalCard.value = false;
    }
  }
);

watch(
  () => props.triggerShowFinalCard,
  (newVal) => {
    if (newVal) {
      showFinalCard.value = true;
      emit('resultShown');
    }
  }
);
</script>

<template>
  <view class="tabs-instructions-container">
    <view class="tabs-row">
      <template v-if="!isSecondTest">
        <view class="tab-container">
          <image
            class="tab-btn-active tds-active-tab"
            :src="activeTabImage"
            mode="scaleToFill"
          />
        </view>
        <view class="tab-container">
          <image class="tab-btn" :src="inactiveTabImage" mode="scaleToFill" />
        </view>
      </template>

      <template v-else>
        <view class="tab-container">
          <image
            class="tab-btn ph-inactive-tab"
            :src="inactiveTabImage"
            mode="scaleToFill"
          />
        </view>
        <view class="tab-container">
          <image
            class="tab-btn-active ph-active-tab"
            :src="activeTabImage"
            mode="scaleToFill"
          />
        </view>
      </template>
    </view>

    <view class="instructions-card" v-if="!isTesting">
      <image class="card-bg" :src="IMAGES.cardBg" mode="scaleToFill" />
      <view class="card-content">
        <view class="card-title">操作说明</view>
        <view class="card-body">
          <text class="instruction-text">{{ instructionText }}</text>
          <image
            class="ppm-icon"
            :class="{ 'ph-icon': isSecondTest }"
            :src="instructionIcon"
            :mode="iconMode"
            v-if="instructionIcon"
            @error="handleImageError"
          />
          <image
            class="ph-label-img"
            :src="IMAGES.phLabel"
            mode="aspectFit"
            v-if="isSecondTest"
          />
        </view>
      </view>
    </view>

    <view class="progress-panel" v-else>
      <view class="progress-bar-container" v-if="!showFinalCard">
        <image
          class="progress-bar-bg result-img"
          :src="IMAGES.progressResult"
          mode="scaleToFill"
          v-if="showResults"
        />
        <image
          class="progress-bar-bg initial-img"
          :src="IMAGES.progressInitial"
          mode="scaleToFill"
          v-if="!showResults"
        />
      </view>

      <view class="result-card" :class="{ 'ph-result-card': isSecondTest }" v-if="showFinalCard">
        <image class="card-bg" :src="IMAGES.cardBg" mode="scaleToFill" />
        <view class="card-content">
          <view class="card-title" :class="{ 'ph-result-title': isSecondTest }">检测结果</view>

          <view class="card-body result-body" v-if="!isSecondTest">
            <view class="comparison-section">
              <text class="section-title">TDS值对比</text>
              <view class="comparison-row">
                <view class="value-badge before">
                  <text>前: 450ppm</text>
                </view>
                <text class="arrow">→</text>
                <view class="value-badge after">
                  <text>后: 15ppm</text>
                </view>
              </view>
              <view class="rate-row">
                <text class="rate-label">净化率：</text>
                <text class="rate-value">96.7%</text>
                <view class="rate-bar">
                  <view class="rate-fill" :style="{ width: '93.7%' }"></view>
                </view>
              </view>
            </view>

            <view class="chart-section">
              <view class="chart-container">
                <view class="bar-group red">
                  <text class="bar-label">450ppm</text>
                  <view class="bar"></view>
                </view>
                <view class="bar-group green">
                  <text class="bar-label">15ppm</text>
                  <view class="bar"></view>
                </view>
              </view>
              <image class="badge-icon" :src="IMAGES.badgeIcon" mode="aspectFit" />
            </view>
          </view>

          <view class="card-body ph-result-body" v-else>
            <view class="ph-comparison-row">
              <view class="ph-value-group">
                <text class="label">前: </text>
                <text class="value highlight-green">8.5</text>
                <view class="ph-tag alkaline">
                  <text>偏碱性</text>
                </view>
              </view>

              <image class="ph-warning-icon" :src="IMAGES.warningIcon" mode="aspectFit" />

              <text class="ph-arrow">→</text>

              <view class="ph-value-group">
                <text class="label">后: </text>
                <text class="value highlight-lime">7.0</text>
                <view class="ph-tag neutral">
                  <text>中性</text>
                </view>
              </view>

              <image class="ph-success-icon" :src="IMAGES.successIcon" mode="aspectFit" />
            </view>

            <image class="ph-before-img" :src="IMAGES.phBefore" mode="aspectFit" />
            <image class="ph-after-img" :src="IMAGES.phAfter" mode="aspectFit" />

            <view class="ph-chart-container">
              <image class="ph-chart-img" :src="IMAGES.phChart" mode="widthFix" />
              <view class="ph-scale-row">
                <text v-for="i in 15" :key="i" class="scale-text">{{ i - 1 }}</text>
              </view>
            </view>

            <view class="ph-footer-row">
              <text class="ph-footer-label"
                >酸碱度：<text class="highlight">已优化</text></text
              >
              <view class="ph-badge">适合饮用</view>
            </view>
          </view>
        </view>
      </view>

      <view class="result-boxes" v-if="!showFinalCard">
        <view class="result-box">
          <text class="box-title">污染水</text>
          <text
            class="box-value"
            :class="{ 'text-polluted': showResults, 'text-primary': !showResults }"
            >{{ resultLabel }}：{{ pollutedValue }}</text
          >
          <image
            class="status-icon"
            :src="IMAGES.warningIcon"
            alt="警告"
            v-if="showResults"
          />
        </view>
        <view class="result-box">
          <text class="box-title">净化水</text>
          <text
            class="box-value"
            :class="{ 'text-purified': showResults, 'text-primary': !showResults }"
            >{{ resultLabel }}：{{ purifiedValue }}</text
          >
          <image
            class="status-icon"
            :src="IMAGES.successIconFrame"
            alt="通过"
            v-if="showResults"
          />
        </view>
      </view>
    </view>

    <view class="tips-card">
      <view class="tips-header">
        <image class="bulb-icon" :src="IMAGES.bulbIcon" mode="widthFix" />
        <text class="tips-title">你知道吗？</text>
      </view>
      <view class="tips-body">
        <text>{{ tipsText }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tabs-instructions-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -32rpx;
}

.tabs-row {
  display: flex;
  justify-content: center;
  gap: 60rpx;
  margin-bottom: 0.5vh;

  .tab-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab-btn-active {
    width: 280rpx;
    height: 84rpx;

    &.tds-active-tab {
      width: 280rpx;
      height: 124rpx;
    }

    &.ph-active-tab {
      width: 274rpx;
      height: 128rpx;
      margin-top: 10rpx;
    }
  }

  .tab-btn {
    width: 240rpx;
    height: 84rpx;

    &.ph-inactive-tab {
      width: 242rpx;
      height: 94rpx;
      margin-left: 20rpx;
    }
  }
}

.instructions-card {
  position: relative;
  width: 120%;
  max-width: 710rpx;
  height: 224rpx;
  margin: 1vh 0;
  border-radius: 24rpx;
  border: 4rpx solid #457AAB;
  background: #BEDCF3;
  box-sizing: border-box;
  flex-shrink: 0;

  .card-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    height: 94%;
    z-index: 0;
    display: block;
  }

  .card-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .card-title {
      text-align: center;
      font-size: 34rpx;
      font-weight: 600;
      color: #25334D;
    }

    .card-body {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20rpx;

      .instruction-text {
        font-size: 30rpx;
        color: #25334D;
        font-weight: 600;
      }

      .ppm-icon {
        height: 84rpx;
        margin-left: 10rpx;
      }

      .ph-icon {
        width: 112rpx;
        height: 160rpx;
        margin-top: 0;
        position: absolute;
        right: 12rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .ph-label-img {
        position: absolute;
        right: 96rpx;
        top: 28%;
        transform: translateY(-50%);
        width: 50rpx;
        height: 28rpx;
      }
    }
  }
}

.progress-panel {
  width: 120%;
  max-width: 710rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;

  .progress-bar-container {
    width: 100%;
    height: 64rpx;
    margin-bottom: 24rpx;
    position: relative;

    .progress-bar-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .result-img {
      z-index: 1;
    }

    .initial-img {
      z-index: 2;
    }
  }

  .result-card {
    position: relative;
    width: 100%;
    height: 226rpx;
    &.ph-result-card {
      height: 280rpx;
    }
    margin-bottom: 24rpx;
    border-radius: 24rpx;
    border: 4rpx solid #457AAB;
    background: #BEDCF3;
    box-sizing: border-box;

    .card-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 98%;
      height: 94%;
      z-index: 0;
      display: block;
    }

    .card-content {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .card-title {
        text-align: center;
        font-size: 34rpx;
        font-weight: 600;
        color: #25334D;
      }
      
      .ph-result-title {
        margin-top: 10rpx;
      }

      .card-body {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;

        .instruction-text {
          font-size: 30rpx;
          color: #25334D;
        }

        &.result-body {
          justify-content: flex-start;
          align-items: flex-start;
          padding: 10rpx 40rpx;

          .comparison-section {
            display: flex;
            flex-direction: column;
            gap: 12rpx;

            .section-title {
              font-size: 30rpx;
              color: #25334D;
              font-weight: 600;
            }

            .comparison-row {
              display: flex;
              align-items: center;
              gap: 16rpx;

              .value-badge {
                padding: 6rpx 14rpx;
                border-radius: 16rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                font-weight: 600;

                &.before {
                  background: #D93A12;
                  border: 3rpx solid #9D341A;
                }

                &.after {
                  background: #0FA983;
                  border: 3rpx solid #1F8F73;
                }
              }

              .arrow {
                color: #457AAB;
                font-weight: bold;
                font-size: 28rpx;
              }
            }

            .rate-row {
              display: flex;
              align-items: center;
              margin-top: 4rpx;

              .rate-label {
                font-size: 30rpx;
                color: #25334D;
                font-weight: 600;
              }

              .rate-value {
                font-size: 32rpx;
                color: #00CC99;
                font-weight: bold;
                margin-left: 10rpx;
              }

              .rate-bar {
                width: 192rpx;
                height: 28rpx;
                background: #8FB2CE;
                border-radius: 22rpx;
                border: 1px solid rgba(69, 122, 171, 0.8);
                box-shadow: 0 3rpx 4rpx 0 rgba(90, 108, 122, 0.4) inset;
                margin-left: 20rpx;
                overflow: hidden;
                position: relative;

                .rate-fill {
                  height: 100%;
                  background: #00CC99;
                  border-radius: 22rpx;
                  box-shadow: 0 0 4rpx 0 rgba(255, 255, 255, 0.7) inset;
                }
              }
            }
          }

          .chart-section {
            width: 186rpx;
            height: 138rpx;
            background: #BEDCF3;
            border: 2rpx solid rgba(69, 122, 171, 0.5);
            border-radius: 12rpx;
            position: absolute;
            right: 20rpx;
            top: 60%;
            transform: translateY(-50%);
            box-sizing: border-box;
            z-index: 10;

            .chart-container {
              width: 100%;
              height: 100%;
              position: relative;
              display: flex;
              align-items: flex-end;
              padding: 0 20rpx 10rpx;
              box-sizing: border-box;
              gap: 30rpx;

              .bar-group {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4rpx;
                position: absolute;
                bottom: 3rpx;

                .bar-label {
                  font-size: 20rpx;
                  font-weight: 600;
                  white-space: nowrap;
                }

                .bar {
                  width: 32rpx;
                  border-radius: 4rpx 4rpx 0 0;
                }

                &.red {
                  left: 15rpx;
                  .bar-label {
                    color: #D93A12;
                  }
                  .bar {
                    height: 80rpx;
                    background: linear-gradient(180deg, #EE6E4E 0%, #D93A12 100%);
                    border: 1rpx solid #9D341A;
                  }
                }

                &.green {
                  right: 20rpx;
                  .bar-label {
                    color: #0FA983;
                    margin-bottom: 4rpx;
                  }
                  .bar {
                    height: 16rpx;
                    background: linear-gradient(180deg, #36E6BB 0%, #0FA983 100%);
                    border: 1rpx solid #1F8F73;
                  }
                }
              }
            }

            .badge-icon {
              position: absolute;
              top: 10rpx;
              right: 10rpx;
              width: 68rpx;
              height: 68rpx;
              z-index: 2;
            }
          }
        }

        &.ph-result-body {
          flex-direction: column;
          justify-content: space-between;
          padding: 10rpx 30rpx !important;

          .ph-comparison-row {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            gap: 16rpx;
            margin-top: 20rpx;

            .ph-value-group {
              display: flex;
              align-items: center;
              gap: 8rpx;

              .label {
                color: #25334D;
                font-size: 30rpx;
                font-weight: 600;
              }

              .value {
                font-size: 30rpx;
                font-weight: 600;

                &.highlight-green {
                  color: #4C9F6A;
                }

                &.highlight-lime {
                  color: #B2C849;
                }
              }

              .ph-tag {
                display: flex;
                justify-content: center;
                align-items: center;

                text {
                  color: #fff;
                  font-size: 20rpx;
                  font-weight: 600;
                  line-height: 1;
                }

                &.alkaline {
                  width: 72rpx;
                  height: 30rpx;
                  border-radius: 26rpx;
                  border: 2rpx solid #0E692E;
                  background: #4C9F6A;
                }

                &.neutral {
                  width: 56rpx;
                  height: 30rpx;
                  border-radius: 26rpx;
                  border: 2rpx solid #748A08;
                  background: #B2C849;
                }
              }
            }

            .ph-warning-icon,
            .ph-success-icon {
              width: 36rpx;
              height: 36rpx;
            }

            .ph-success-icon {
              width: 32rpx;
              height: 32rpx;
            }

            .ph-arrow {
              color: #457AAB;
              font-weight: bold;
              font-size: 32rpx;
              margin: 0 10rpx;
            }
          }

          .ph-before-img {
            position: absolute;
            top: 128rpx;
            left: 399rpx;
            width: 34rpx;
            height: 34rpx;
            z-index: 2;
          }

          .ph-after-img {
            position: absolute;
            top: 128rpx;
            right: 380rpx;
            width: 34rpx;
            height: 34rpx;
            z-index: 2;
          }

          .ph-chart-container {
            width: 100%;
            margin: 40rpx 0 30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .ph-chart-img {
              width: 95%;
            }

            .ph-scale-row {
              width: 95%;
              display: flex;
              justify-content: space-between;
              margin-left: -24rpx;

              .scale-text {
                flex: 1;
                text-align: center;
                font-size: 20rpx;
                color: #25334D;
                line-height: 1;
              }
            }
          }

          .ph-footer-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10rpx;
            margin-top: -26rpx;

            .ph-footer-label {
              font-size: 30rpx;
              color: #25334D;
              font-weight: 600;

              .highlight {
                color: #8CC24A;
              }
            }

            .ph-badge {
              background: #8CC24A;
              color: #fff;
              font-size: 24rpx;
              padding: 6rpx 16rpx;
              border-radius: 20rpx;
              font-weight: 600;
              border: 2rpx solid #6B9C35;
            }
          }
        }
      }
    }
  }

  .result-boxes {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 32rpx;

    .result-box {
      flex: 1;
      height: 140rpx;
      border-radius: 24rpx;
      border: 2rpx solid #FFF;
      background: linear-gradient(180deg, #FAFBFD 0%, #DCEEFD 100%);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-left: 32rpx;
      gap: 10rpx;
      position: relative;

      .box-title,
      .box-value {
        font-size: 32rpx;
        color: #25334D;
        line-height: 1.2;
      }

      .status-icon {
        position: absolute;
        right: 20rpx;
        top: 53%;
        transform: translateY(-50%);
        width: 92rpx;
        height: 92rpx;
      }
    }
  }
}

.tips-card {
  width: 120%;
  max-width: 710rpx;
  height: 116rpx;
  background: #BEDCF3;
  border-radius: 24rpx;
  border: 4rpx solid #457AAB;
  padding: 20rpx;
  position: relative;
  box-sizing: border-box;
  margin-top: 2vh;
  flex-shrink: 0;

  .tips-header {
    position: absolute;
    top: -24rpx;
    left: 0;
    width: 220rpx;
    height: 58rpx;
    background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
    border-radius: 48rpx;
    border: 4rpx solid #1B5CA3;
    box-shadow: 0 0 8rpx 0 #FFF inset;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 10;

    .bulb-icon {
      position: absolute;
      left: -25rpx;
      bottom: -10rpx;
      width: 80rpx;
      height: 80rpx;
      z-index: 12;
    }

    .tips-title {
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      margin-left: 28rpx;
      text-shadow: 2rpx 2rpx 0 #1B5CA3, -2rpx -2rpx 0 #1B5CA3, 2rpx -2rpx 0 #1B5CA3, -2rpx 2rpx 0 #1B5CA3;
    }
  }

  .tips-body {
    position: absolute;
    top: 10rpx;
    left: 13rpx;
    font-size: 30rpx;
    color: #25334D;
    padding: 20rpx 16rpx 10rpx 46rpx;
    border-radius: 24rpx;
    background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
    width: 96%;
    height: 80%;
    box-sizing: border-box;
    z-index: 5;
    display: flex;
    align-items: center;
    font-weight: 600;
  }
}
</style>