From 6a99c1121b083b115efbfca4b6aa3d03358962eb Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 10 Oct 2026 18:18:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(order):=20=E8=A7=A3=E5=86=B3=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=BC=B9=E7=AA=97=E5=9B=A0=20CSS=20display?=
 =?UTF-8?q?=20!important=20=E5=AF=BC=E8=87=B4=20Vue=20v-show=20=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E5=A4=B1=E6=95=88=E6=97=A0=E6=B3=95=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 根因定位：.mobile-popup-form 设置了 display: flex !important，该样式在 CSS 特异性中强于 Vue v-show 生成的行内 style="display: none;"；当弹窗点击关闭后，Vue 将变量置为 false 并完成退场动画，但由于样式强制 flex，弹窗退场后立刻以 flex 状态重新暴露在屏幕上（即“又弹出一个”），且由于此时 Vue 响应式状态已是 false，再次点击关闭按钮不会触发状态改变（即“第二次无法关闭”）
- 解耦容器与弹窗：移除 .mobile-popup-form 根节点上的 display: flex !important 与 overflow 强覆盖，弹窗内部增加 .popup-inner 容器承载垂直 flex 列布局与吸顶/吸底/滚动分区
- 严格验证：运行全量检查 ./scripts/check.sh，Go测试、MySQL测试、TypeScript检查及Vite生产构建 100% 通过
---
 .../orders/views/MobileOrderDetailView.css    |  14 +-
 .../orders/views/MobileOrderDetailView.vue    | 384 +++++++++---------
 2 files changed, 206 insertions(+), 192 deletions(-)

diff --git a/frontend/src/features/orders/views/MobileOrderDetailView.css b/frontend/src/features/orders/views/MobileOrderDetailView.css
index 0b34651..276e702 100644
--- a/frontend/src/features/orders/views/MobileOrderDetailView.css
+++ b/frontend/src/features/orders/views/MobileOrderDetailView.css
@@ -216,11 +216,19 @@
 
 /* ========== Popups ========== */
 .mobile-popup-form {
-  display: flex !important;
-  flex-direction: column !important;
   max-height: 85vh;
   max-height: 85dvh;
-  overflow: hidden !important;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.popup-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 85vh;
+  max-height: 85dvh;
+  overflow: hidden;
   box-sizing: border-box;
 }
 
diff --git a/frontend/src/features/orders/views/MobileOrderDetailView.vue b/frontend/src/features/orders/views/MobileOrderDetailView.vue
index 8eb10e2..51978cb 100644
--- a/frontend/src/features/orders/views/MobileOrderDetailView.vue
+++ b/frontend/src/features/orders/views/MobileOrderDetailView.vue
@@ -594,104 +594,106 @@ async function copyListingCode() {
       class="mobile-popup-form"
       @close="markPopupClosed"
     >
-      <header class="popup-header">
-        <h3>修改结账方案</h3>
-        <button
-          type="button"
-          class="popup-close"
-          aria-label="关闭"
-          @click.stop.prevent="closeCounterPopup"
-        >
-          <van-icon name="cross" :size="18" />
-        </button>
-      </header>
-      <div class="popup-body">
-        <p class="form-hint-info">
-          {{
-            checkoutRoundLabel
-          }}。可填实际哈夫币消耗（允许超过发布量），打超按比例从押金扣。提案将交给对方确认。
-        </p>
-        <div class="counter-input-card">
-          <div class="counter-input-row">
-            <label class="counter-label" for="counter-consumable">物资/损耗金额</label>
-            <div class="counter-input-wrapper">
-              <input
-                id="counter-consumable"
-                v-model.number="counterForm.consumableAmountYuan"
-                type="number"
-                placeholder="0"
-                class="counter-input-control"
-              />
-              <span class="counter-unit">元</span>
+      <div class="popup-inner">
+        <header class="popup-header">
+          <h3>修改结账方案</h3>
+          <button
+            type="button"
+            class="popup-close"
+            aria-label="关闭"
+            @click.stop.prevent="closeCounterPopup"
+          >
+            <van-icon name="cross" :size="18" />
+          </button>
+        </header>
+        <div class="popup-body">
+          <p class="form-hint-info">
+            {{
+              checkoutRoundLabel
+            }}。可填实际哈夫币消耗（允许超过发布量），打超按比例从押金扣。提案将交给对方确认。
+          </p>
+          <div class="counter-input-card">
+            <div class="counter-input-row">
+              <label class="counter-label" for="counter-consumable">物资/损耗金额</label>
+              <div class="counter-input-wrapper">
+                <input
+                  id="counter-consumable"
+                  v-model.number="counterForm.consumableAmountYuan"
+                  type="number"
+                  placeholder="0"
+                  class="counter-input-control"
+                />
+                <span class="counter-unit">元</span>
+              </div>
+            </div>
+            <div class="counter-input-row">
+              <label class="counter-label" for="counter-coin">实际消耗哈夫币</label>
+              <div class="counter-input-wrapper">
+                <input
+                  id="counter-coin"
+                  v-model.number="counterForm.coin_consumed_m"
+                  type="number"
+                  placeholder="0"
+                  class="counter-input-control"
+                />
+                <span class="counter-unit">M</span>
+              </div>
+            </div>
+            <div class="counter-input-row">
+              <label class="counter-label" for="counter-deposit-deduct">押金赔付(损坏等)</label>
+              <div class="counter-input-wrapper">
+                <input
+                  id="counter-deposit-deduct"
+                  v-model.number="counterForm.depositDeductAmountYuan"
+                  type="number"
+                  placeholder="0"
+                  class="counter-input-control"
+                />
+                <span class="counter-unit">元</span>
+              </div>
             </div>
           </div>
-          <div class="counter-input-row">
-            <label class="counter-label" for="counter-coin">实际消耗哈夫币</label>
-            <div class="counter-input-wrapper">
-              <input
-                id="counter-coin"
-                v-model.number="counterForm.coin_consumed_m"
-                type="number"
-                placeholder="0"
-                class="counter-input-control"
-              />
-              <span class="counter-unit">M</span>
-            </div>
-          </div>
-          <div class="counter-input-row">
-            <label class="counter-label" for="counter-deposit-deduct">押金赔付(损坏等)</label>
-            <div class="counter-input-wrapper">
-              <input
-                id="counter-deposit-deduct"
-                v-model.number="counterForm.depositDeductAmountYuan"
-                type="number"
-                placeholder="0"
-                class="counter-input-control"
-              />
-              <span class="counter-unit">元</span>
-            </div>
-          </div>
-        </div>
 
-        <!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
-        <CheckoutTrialPreview :simulation="checkoutSimulation" variant="mobile" />
-        <van-field
-          v-model="counterForm.reason"
-          rows="2"
-          autosize
-          required
-          label="修改原因"
-          type="textarea"
-          placeholder="请说明调整原因（必填）"
-          class="popup-field"
-        />
-        <van-field
-          v-model="counterForm.evidenceText"
-          rows="2"
-          autosize
-          label="扣款证据"
-          type="textarea"
-          placeholder="证据链接（每行一个）"
-          class="popup-field"
-        />
-        <div class="evidence-upload-row">
-          <span>上传新证据截图：</span>
-          <input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
+          <!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
+          <CheckoutTrialPreview :simulation="checkoutSimulation" variant="mobile" />
+          <van-field
+            v-model="counterForm.reason"
+            rows="2"
+            autosize
+            required
+            label="修改原因"
+            type="textarea"
+            placeholder="请说明调整原因（必填）"
+            class="popup-field"
+          />
+          <van-field
+            v-model="counterForm.evidenceText"
+            rows="2"
+            autosize
+            label="扣款证据"
+            type="textarea"
+            placeholder="证据链接（每行一个）"
+            class="popup-field"
+          />
+          <div class="evidence-upload-row">
+            <span>上传新证据截图：</span>
+            <input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
+          </div>
         </div>
+        <footer class="popup-footer">
+          <van-button
+            type="warning"
+            block
+            round
+            :loading="countering"
+            loading-text="提交中..."
+            @click="handleCounterCheckout"
+            class="popup-submit"
+          >
+            提交给对方确认
+          </van-button>
+        </footer>
       </div>
-      <footer class="popup-footer">
-        <van-button
-          type="warning"
-          block
-          round
-          :loading="countering"
-          loading-text="提交中..."
-          @click="handleCounterCheckout"
-          class="popup-submit"
-        >
-          提交给对方确认
-        </van-button>
-      </footer>
     </van-popup>
 
     <!-- POPUP: Renter Reject Counter Proposal Reason -->
@@ -702,44 +704,46 @@ async function copyListingCode() {
       class="mobile-popup-form"
       @close="markPopupClosed"
     >
-      <header class="popup-header">
-        <h3>拒绝修正扣款说明</h3>
-        <button
-          type="button"
-          class="popup-close"
-          aria-label="关闭"
-          @click.stop.prevent="closeRejectPopup"
-        >
-          <van-icon name="cross" :size="18" />
-        </button>
-      </header>
-      <div class="popup-body">
-        <p class="form-hint-info">
-          拒绝号主的修正提案后，订单将立即自动发起争议，由客服介入根据证据判定。
-        </p>
-        <van-field
-          v-model="rejectReason"
-          rows="3"
-          autosize
-          label="拒绝原因"
-          type="textarea"
-          placeholder="请详细叙述拒绝号主扣款的理由，这些信息将被客服作为判定依据"
-          class="popup-field"
-        />
+      <div class="popup-inner">
+        <header class="popup-header">
+          <h3>拒绝修正扣款说明</h3>
+          <button
+            type="button"
+            class="popup-close"
+            aria-label="关闭"
+            @click.stop.prevent="closeRejectPopup"
+          >
+            <van-icon name="cross" :size="18" />
+          </button>
+        </header>
+        <div class="popup-body">
+          <p class="form-hint-info">
+            拒绝号主的修正提案后，订单将立即自动发起争议，由客服介入根据证据判定。
+          </p>
+          <van-field
+            v-model="rejectReason"
+            rows="3"
+            autosize
+            label="拒绝原因"
+            type="textarea"
+            placeholder="请详细叙述拒绝号主扣款的理由，这些信息将被客服作为判定依据"
+            class="popup-field"
+          />
+        </div>
+        <footer class="popup-footer">
+          <van-button
+            type="danger"
+            block
+            round
+            :loading="rejectingCheckout"
+            loading-text="发起争议中..."
+            @click="handleRejectCheckout"
+            class="popup-submit"
+          >
+            提交原因并提起争议
+          </van-button>
+        </footer>
       </div>
-      <footer class="popup-footer">
-        <van-button
-          type="danger"
-          block
-          round
-          :loading="rejectingCheckout"
-          loading-text="发起争议中..."
-          @click="handleRejectCheckout"
-          class="popup-submit"
-        >
-          提交原因并提起争议
-        </van-button>
-      </footer>
     </van-popup>
 
     <!-- POPUP: Create Generic Order Dispute -->
@@ -750,67 +754,69 @@ async function copyListingCode() {
       class="mobile-popup-form"
       @close="markPopupClosed"
     >
-      <header class="popup-header">
-        <h3>发起申诉争议</h3>
-        <button
-          type="button"
-          class="popup-close"
-          aria-label="关闭"
-          @click.stop.prevent="closeDisputePopup"
-        >
-          <van-icon name="cross" :size="18" />
-        </button>
-      </header>
-      <div class="popup-body">
-        <van-field v-if="!isCheckoutDisputeStage" label="申诉类型" class="popup-field">
-          <template #input>
-            <select v-model="disputeType" class="custom-select">
-              <option value="cannot_login">无法登录</option>
-              <option value="false_description">虚假描述</option>
-              <option value="account_banned">账号被封</option>
-              <option value="asset_loss">资产损失</option>
-              <option value="haf_coin_dispute">哈夫币争议</option>
-              <option value="handoff_timeout">超时未交接</option>
-              <option value="return_timeout">超时未归还</option>
-            </select>
-          </template>
-        </van-field>
-        <van-field
-          v-model="disputeDescription"
-          rows="3"
-          autosize
-          label="经过说明"
-          type="textarea"
-          placeholder="请在此描述您的诉求、事件经过、时间点等详细情况"
-          class="popup-field"
-        />
-        <van-field
-          v-model="disputeEvidenceText"
-          rows="2"
-          autosize
-          label="证据列表"
-          type="textarea"
-          placeholder="证据链接（每行一个）"
-          class="popup-field"
-        />
-        <div class="evidence-upload-row">
-          <span>上传证据截图：</span>
-          <input type="file" accept="image/*" @change="handleEvidenceUpload" />
+      <div class="popup-inner">
+        <header class="popup-header">
+          <h3>发起申诉争议</h3>
+          <button
+            type="button"
+            class="popup-close"
+            aria-label="关闭"
+            @click.stop.prevent="closeDisputePopup"
+          >
+            <van-icon name="cross" :size="18" />
+          </button>
+        </header>
+        <div class="popup-body">
+          <van-field v-if="!isCheckoutDisputeStage" label="申诉类型" class="popup-field">
+            <template #input>
+              <select v-model="disputeType" class="custom-select">
+                <option value="cannot_login">无法登录</option>
+                <option value="false_description">虚假描述</option>
+                <option value="account_banned">账号被封</option>
+                <option value="asset_loss">资产损失</option>
+                <option value="haf_coin_dispute">哈夫币争议</option>
+                <option value="handoff_timeout">超时未交接</option>
+                <option value="return_timeout">超时未归还</option>
+              </select>
+            </template>
+          </van-field>
+          <van-field
+            v-model="disputeDescription"
+            rows="3"
+            autosize
+            label="经过说明"
+            type="textarea"
+            placeholder="请在此描述您的诉求、事件经过、时间点等详细情况"
+            class="popup-field"
+          />
+          <van-field
+            v-model="disputeEvidenceText"
+            rows="2"
+            autosize
+            label="证据列表"
+            type="textarea"
+            placeholder="证据链接（每行一个）"
+            class="popup-field"
+          />
+          <div class="evidence-upload-row">
+            <span>上传证据截图：</span>
+            <input type="file" accept="image/*" @change="handleEvidenceUpload" />
+          </div>
         </div>
+        <footer class="popup-footer">
+          <van-button
+            type="warning"
+            block
+            round
+            :loading="disputing"
+            loading-text="正在发起申诉..."
+            @click="handleCreateDispute"
+            class="popup-submit"
+          >
+            提交申诉客服仲裁
+          </van-button>
+        </footer>
       </div>
-      <footer class="popup-footer">
-        <van-button
-          type="warning"
-          block
-          round
-          :loading="disputing"
-          loading-text="正在发起申诉..."
-          @click="handleCreateDispute"
-          class="popup-submit"
-        >
-          提交申诉客服仲裁
-        </van-button>
-      </footer>
     </van-popup>
   </main>
 </template>