优化写法，添加缺少的pH值前后显示效果

src/pages/third/components/TabsInstructionsPanel.vue

@@ -72,10 +72,10 @@
         />
       </view>
 
-      <view class="result-card" v-if="showFinalCard">
+      <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">检测结果</view>
+          <view class="card-title" :class="{ 'ph-result-title': isSecondTest }">检测结果</view>
 
           <view class="card-body result-body" v-if="!isSecondTest">
             <view class="comparison-section">
@@ -138,8 +138,14 @@
               <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">
@@ -157,7 +163,7 @@
           <text class="box-title">污染水</text>
           <text
             class="box-value"
-            :style="{ color: showResults ? '#FF3300' : '#25334D' }"
+            :class="{ 'text-polluted': showResults, 'text-primary': !showResults }"
             >{{ resultLabel }}：{{ pollutedValue }}</text
           >
           <image
@@ -171,7 +177,7 @@
           <text class="box-title">净化水</text>
           <text
             class="box-value"
-            :style="{ color: showResults ? '#00CC99' : '#25334D' }"
+            :class="{ 'text-purified': showResults, 'text-primary': !showResults }"
             >{{ resultLabel }}：{{ purifiedValue }}</text
           >
           <image
@@ -199,25 +205,32 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 
-const props = defineProps({
-  isTesting: {
-    type: Boolean,
-    default: false,
-  },
-  isSecondTest: {
-    type: Boolean,
-    default: false,
+
+const TEXTS = {
+  TDS: {
+    instruction: '点击"开始检测"按钮测试TDS值',
+    tips: {
+      default: 'TDS代表总溶解固体，数值越低水质越纯净',
+      testing: '安吉尔RO反渗透技术可将TDS降至15以下',
+      result: '优质饮用水TDS值应低于50ppm',
+    },
+    label: 'TDS值',
+    polluted: '450',
+    purified: '15',
   },
-  triggerShowFinalCard: {
-    type: Boolean,
-    default: false,
+  PH: {
+    instruction: "点击‘开始检测’测试水的酸碱度",
+    tips: {
+      default: '理想饮用水pH值应在6.5-8.5之间',
+      testing: 'pH试纸通过颜色变化判断酸碱性',
+      result: '中性水(pH 7.0)对人体最温和,是理想的饮用水',
+    },
+    label: 'PH值',
+    polluted: '8.5',
+    purified: '7.0',
   },
-});
-
-const emit = defineEmits(['resultShown', 'progressFinished']);
-
-const showResults = ref(false);
-const showFinalCard = ref(false);
+  placeholder: '？？？',
+};
 
 const IMAGES = {
   // 两个选项图片
@@ -239,10 +252,32 @@ const IMAGES = {
   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;
 });
@@ -252,9 +287,7 @@ const inactiveTabImage = computed(() => {
 });
 
 const instructionText = computed(() => {
-  return props.isSecondTest
-    ? "点击‘开始检测’测试水的酸碱度"
-    : '点击"开始检测"按钮测试TDS值';
+  return props.isSecondTest ? TEXTS.PH.instruction : TEXTS.TDS.instruction;
 });
 
 const instructionIcon = computed(() => {
@@ -266,35 +299,29 @@ const iconMode = computed(() => {
 });
 
 const tipsText = computed(() => {
-  if (props.isSecondTest) {
-    if (showFinalCard.value) {
-      return '中性水(pH 7.0)对人体最温和,是理想的饮用水';
-    }
-    if (props.isTesting) {
-      return 'pH试纸通过颜色变化判断酸碱性';
-    }
-    return '理想饮用水pH值应在6.5-8.5之间';
+  const content = props.isSecondTest ? TEXTS.PH : TEXTS.TDS;
+
+  if (showFinalCard.value) {
+    return content.tips.result;
   }
-  if (!props.isTesting) {
-    return 'TDS代表总溶解固体，数值越低水质越纯净';
+  if (props.isTesting) {
+    return content.tips.testing;
   }
-  return showFinalCard.value
-    ? '优质饮用水TDS值应低于50ppm'
-    : '安吉尔RO反渗透技术可将TDS降至15以下';
+  return content.tips.default;
 });
 
 const resultLabel = computed(() => {
-  return props.isSecondTest ? 'PH值' : 'TDS值';
+  return props.isSecondTest ? TEXTS.PH.label : TEXTS.TDS.label;
 });
 
 const pollutedValue = computed(() => {
-  if (!showResults.value) return '？？？';
-  return props.isSecondTest ? '8.5' : '450';
+  if (!showResults.value) return TEXTS.placeholder;
+  return props.isSecondTest ? TEXTS.PH.polluted : TEXTS.TDS.polluted;
 });
 
 const purifiedValue = computed(() => {
-  if (!showResults.value) return '？？？';
-  return props.isSecondTest ? '7.0' : '15';
+  if (!showResults.value) return TEXTS.placeholder;
+  return props.isSecondTest ? TEXTS.PH.purified : TEXTS.TDS.purified;
 });
 
 const handleImageError = (e) => {
@@ -337,6 +364,7 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-top: -32rpx;
 }
 
 .tabs-row {
@@ -356,13 +384,11 @@ watch(
     width: 280rpx;
     height: 84rpx;
 
-    // Specific style for TDS test active image (...426.webp)
     &.tds-active-tab {
       width: 280rpx;
       height: 124rpx;
     }
 
-    // Specific style for PH test active image (...426.webp)
     &.ph-active-tab {
       width: 274rpx;
       height: 128rpx;
@@ -374,7 +400,6 @@ watch(
     width: 240rpx;
     height: 84rpx;
 
-    // Specific style for PH test inactive image (/static/1.webp)
     &.ph-inactive-tab {
       width: 242rpx;
       height: 94rpx;
@@ -465,7 +490,6 @@ watch(
 .progress-panel {
   width: 120%;
   max-width: 710rpx;
-  margin: 1vh 0 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -499,6 +523,9 @@ watch(
     position: relative;
     width: 100%;
     height: 226rpx;
+    &.ph-result-card {
+      height: 280rpx;
+    }
     margin-bottom: 24rpx;
     border-radius: 24rpx;
     border: 4rpx solid #457AAB;
@@ -531,6 +558,10 @@ watch(
         font-weight: 600;
         color: #25334D;
       }
+      
+      .ph-result-title {
+        margin-top: 10rpx;
+      }
 
       .card-body {
         flex: 1;
@@ -720,6 +751,7 @@ watch(
             width: 100%;
             justify-content: center;
             gap: 16rpx;
+            margin-top: 20rpx;
 
             .ph-value-group {
               display: flex;
@@ -794,15 +826,49 @@ watch(
             }
           }
 
+          .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: 10rpx 0;
+            margin: 40rpx 0 30rpx;
             display: flex;
-            justify-content: center;
+            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 {
@@ -811,6 +877,7 @@ watch(
             justify-content: space-between;
             align-items: center;
             padding: 0 10rpx;
+            margin-top: -26rpx;
 
             .ph-footer-label {
               font-size: 30rpx;