修改

pages/tournament/details.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-content">
+  <view class="app-content" :class="{ 'pc-fixed-frame': isPc }">
     <view v-show="matchInfo.id">
       <view class="head">
         <view class="title"> {{ matchInfo?.matchName }} </view>
@@ -95,14 +95,36 @@
 
 <script setup>
 import { ref } from "vue";
-import { onLoad, onReachBottom, onShareAppMessage } from "@dcloudio/uni-app";
+import { onLoad, onUnload, onReachBottom, onShareAppMessage } from "@dcloudio/uni-app";
 import { navigateTo, downloadFile, processedContent } from "@/utils/utils.js";
 import { useListQuery } from "@/mixins/useListQuery.js";
 import { matchDetailInfo, projectListByMatchId } from "@/api/tournament.js";
 
 const matchInfo = ref({});
 const pagesLoading = ref(false);
+const isPc = ref(false);
+
+let originalBodyBackground = "";
+
+const detectIsPcOnH5 = () => {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const isMobileUa =
+    /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua) ||
+    /iPad/i.test(ua) ||
+    (/Macintosh/i.test(ua) && navigator.maxTouchPoints > 1);
+  return !isMobileUa;
+};
+
 onLoad(async (options) => {
+  // #ifdef H5
+  isPc.value = detectIsPcOnH5();
+  if (isPc.value && typeof document !== "undefined") {
+    originalBodyBackground = document.body.style.background || "";
+    document.body.style.background = "#e9e9e9";
+  }
+  // #endif
+
   queryForm.matchId = options.id;
   if (!options.id) {
     pagesLoading.value = true;
@@ -140,6 +162,14 @@ onReachBottom(() => {
     loadMore();
   }
 });
+
+onUnload(() => {
+  // #ifdef H5
+  if (isPc.value && typeof document !== "undefined") {
+    document.body.style.background = originalBodyBackground;
+  }
+  // #endif
+});
 </script>
 <style lang="scss" scoped>
 .app-content {
@@ -243,4 +273,17 @@ onReachBottom(() => {
     }
   }
 }
+
+.pc-fixed-frame {
+  width: 390px;
+  height: auto;
+  min-height: unset !important;
+  margin: 24px auto;
+  padding: 0 !important;
+  // overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 16px;
+  background-color: #f5f5f5;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+}
 </style>