拉取合并宋杰代码

src/views/zhongchou/index.vue

@@ -4,8 +4,8 @@
         <div class="top-section">
             <!-- 主标题 -->
             <div class="main-title">
-                <img src="@/assets/img/zhongchou/大标题.png" alt="">
-                <div class="activity-period">活动时间：2025/07/26~2025/08/05</div>
+                <img src="@/assets/img/zhongchou/助力美股享实时数据.png" alt="">
+                <div class="activity-period">活动时间：{{ activityPeriod }}</div>
             </div>
 
             <!-- 活动规则按钮 -->
@@ -18,8 +18,7 @@
         <!-- 主要交互区域 -->
         <div class="main-interactive-area">
             <!-- 左侧美股区域 -->
-            <div class="stock-area left-area" @click="handleAreaClick('us')"
-                :class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }">
+            <div class="stock-area left-area" :class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }">
                 <div class="stock-content">
                     <div class="stock-card us-card">
                         <div class="card-content us-content">
@@ -66,12 +65,11 @@
             </div>
 
             <!-- 右侧港股区域 -->
-            <div class="stock-area right-area" @click="handleAreaClick('hk')"
+            <!-- <div class="stock-area right-area" @click="handleAreaClick('hk')"
                 :class="{ active: activeArea === 'hk', 'side': activeArea === 'us' }">
                 <div class="stock-content">
                     <div class="stock-card hk-card">
                         <div class="card-content hk-content">
-                            <!-- 港股剩余时间显示 -->
                             <div class="stock-info">
                                 <h3>距港股实时数据</h3>
                                 <h3>还剩{{ numberToChinese(hkDisplayTime) }}分钟</h3>
@@ -81,7 +79,6 @@
                                 <div class="progress-bar">
                                     <div class="progress-fill"></div>
                                 </div>
-                                <!-- 港股区域刻度 -->
                                 <div class="time-markers">
                                     <div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{
                                         'reached': (15 - hkUsedTime) <= time,
@@ -93,7 +90,6 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 港股助力按钮和底座 -->
                     <div class="boost-section">
                         <div class="boost-btn hk-boost-btn" :class="{ 'boosted': hkBoostStatus }"
                             @click.stop="handleBoostClick('hk')"></div>
@@ -102,7 +98,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </div>
 
         <!-- 活动规则弹窗 -->
@@ -128,6 +124,20 @@
 <script setup>
 import { addRecordAPI, getActivity1API } from '../../api/API'
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
+
+// 活动时间显示
+const activityPeriod = ref('加载中...')
+
+// 格式化日期函数
+const formatDate = (dateString) => {
+    if (!dateString) return ''
+    const date = new Date(dateString)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}/${month}/${day}`
+}
+
 // 在组件中使用
 async function fetchActivity() {
     try {
@@ -135,12 +145,44 @@ async function fetchActivity() {
         if (response.code === 200) {
             console.log('活动数据:', response.data)
             // 处理返回的数据
-            // response.data 包含：marketOne, marketTwo, startTime, endTime 等字段
+            const { startTime, endTime, marketTwoStatus, marketTwoCount } = response.data
+            if (startTime && endTime) {
+                const formattedStartTime = formatDate(startTime)
+                const formattedEndTime = formatDate(endTime)
+                activityPeriod.value = `${formattedStartTime}~${formattedEndTime}`
+            } else {
+                activityPeriod.value = '时间待定'
+            }
+
+            // 根据marketTwoStatus设置助力状态
+            if (marketTwoStatus === '已助力') {
+                usBoostStatus.value = true
+            } else {
+                usBoostStatus.value = false
+            }
+
+            // 根据marketTwoCount计算进度和剩余时间
+            if (marketTwoCount !== undefined) {
+                const totalPeople = 1500 // 总人数1500人
+                const currentCount = marketTwoCount || 0 // 当前助力人数
+
+                // 计算进度百分比 (0-100)
+                const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
+
+                // 根据进度计算剩余时间 (15分钟对应100%进度)
+                const usedTime = (progressPercent / 100) * 15
+                const remainingTime = Math.max(0, 15 - usedTime)
+
+                usRemainingTime.value = Math.round(remainingTime)
+                console.log(`助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`)
+            }
         } else {
             console.error('获取活动失败:', response.message)
+            activityPeriod.value = '获取失败'
         }
     } catch (error) {
         console.error('请求错误:', error)
+        activityPeriod.value = '网络错误'
     }
 }
 const numberToChinese = (num) => {
@@ -178,44 +220,44 @@ const showRules = ref(false)
 // 原有的组件状态
 const activeArea = ref(null)
 const usBoostStatus = ref(false)
-const hkBoostStatus = ref(false)
+// const hkBoostStatus = ref(false)
 const showRulesModal = ref(false)
 
-// 剩余时间数据 - 可控制的初始值
-const usRemainingTime = ref(9) // 美股剩余分钟
-const hkRemainingTime = ref(6)  // 港股剩余分钟
+// 剩余时间数据 - 从接口获取marketTwoCount计算
+const usRemainingTime = ref(15) // 美股剩余分钟，初始值15分钟
+// const hkRemainingTime = ref(6)  // 港股剩余分钟
 const usTotalTime = ref(15)     // 美股总时间15分钟
-const hkTotalTime = ref(15)     // 港股总时间15分钟
+// const hkTotalTime = ref(15)     // 港股总时间15分钟
 
 // 计算属性：根据剩余时间计算进度条高度
 const usProgressHeight = computed(() => {
     return getProgressHeight(usRemainingTime.value, usTotalTime.value)
 })
 
-const hkProgressHeight = computed(() => {
-    return getProgressHeight(hkRemainingTime.value, hkTotalTime.value)
-})
+// const hkProgressHeight = computed(() => {
+//     return getProgressHeight(hkRemainingTime.value, hkTotalTime.value)
+// })
 
 // 计算属性：显示的剩余时间
 const usDisplayTime = computed(() => {
     return Math.max(0, usRemainingTime.value)
 })
 
-const hkDisplayTime = computed(() => {
-    return Math.max(0, hkRemainingTime.value)
-})
+// const hkDisplayTime = computed(() => {
+//     return Math.max(0, hkRemainingTime.value)
+// })
 
 // 计算已使用时间用于刻度显示
 const usUsedTime = computed(() => {
     return usTotalTime.value - usRemainingTime.value
 })
 
-const hkUsedTime = computed(() => {
-    return hkTotalTime.value - hkRemainingTime.value
-})
+// const hkUsedTime = computed(() => {
+//     return hkTotalTime.value - hkRemainingTime.value
+// })
 
 // 监听剩余时间变化，更新进度条
-watch([usRemainingTime, hkRemainingTime], () => {
+watch([usRemainingTime], () => {
     nextTick(() => {
         updateProgressDisplay()
     })
@@ -230,10 +272,10 @@ const updateProgressDisplay = () => {
     }
 
     // 更新港股进度条
-    const hkFill = document.querySelector('.hk-content .progress-fill')
-    if (hkFill) {
-        hkFill.style.height = `${hkProgressHeight.value}%`
-    }
+    // const hkFill = document.querySelector('.hk-content .progress-fill')
+    // if (hkFill) {
+    //     hkFill.style.height = `${hkProgressHeight.value}%`
+    // }
 }
 
 // 组件挂载时初始化
@@ -253,39 +295,28 @@ onMounted(() => {
     })
 })
 
-// 模拟时间减少的函数（用于测试）
-const simulateTimeDecrease = (area) => {
-    if (area === 'us' && usRemainingTime.value > 0) {
-        usRemainingTime.value = Math.max(0, usRemainingTime.value - 1)
-    } else if (area === 'hk' && hkRemainingTime.value > 0) {
-        hkRemainingTime.value = Math.max(0, hkRemainingTime.value - 1)
-    }
-}
 
-
-
-const handleAreaClick = (area) => {
-    if (activeArea.value === area) {
-        activeArea.value = null
-    } else {
-        activeArea.value = area
-    }
-}
+// const handleAreaClick = (area) => {
+//     if (activeArea.value === area) {
+//         activeArea.value = null
+//     } else {
+//         activeArea.value = area
+//     }
+// }
 
 const handleBoostClick = async (area) => {
     if (area === 'us' && !usBoostStatus.value) {
         try {
             // 调用助力API
             const response = await addRecordAPI({
-                "activityId": 1,
-                "marketSign": 5
+                "activityId": 40,
+                "marketSign": 8
             });
 
             if (response.code === 200) {
-                usBoostStatus.value = true
-                // 助力后减少1分钟时间
-                simulateTimeDecrease('us')
                 console.log('美股助力成功：', response.message)
+                // 重新获取活动数据以更新按钮状态和进度
+                await fetchActivity()
                 console.log('美股已助力，剩余时间：', usRemainingTime.value)
             } else {
                 console.error('美股助力失败：', response.message)
@@ -293,27 +324,28 @@ const handleBoostClick = async (area) => {
         } catch (error) {
             console.error('美股助力请求失败：', error)
         }
-    } else if (area === 'hk' && !hkBoostStatus.value) {
-        try {
-            // 调用助力API
-            const response = await addRecordAPI({
-                "activityId": 1,
-                "marketSign": 8
-            });
-
-            if (response.code === 200) {
-                hkBoostStatus.value = true
-                // 助力后减少1分钟时间
-                simulateTimeDecrease('hk')
-                console.log('港股助力成功：', response.message)
-                console.log('港股已助力，剩余时间：', hkRemainingTime.value)
-            } else {
-                console.error('港股助力失败：', response.message)
-            }
-        } catch (error) {
-            console.error('港股助力请求失败：', error)
-        }
     }
+    // else if (area === 'hk' && !hkBoostStatus.value) {
+    //     try {
+    //         // 调用助力API
+    //         const response = await addRecordAPI({
+    //             "activityId": 1,
+    //             "marketSign": 5
+    //         });
+
+    //         if (response.code === 200) {
+    //             hkBoostStatus.value = true
+    //             // 助力后减少1分钟时间
+    //             simulateTimeDecrease('hk')
+    //             console.log('港股助力成功：', response.message)
+    //             console.log('港股已助力，剩余时间：', hkRemainingTime.value)
+    //         } else {
+    //             console.error('港股助力失败：', response.message)
+    //         }
+    //     } catch (error) {
+    //         console.error('港股助力请求失败：', error)
+    //     }
+    // }
 }
 
 const showRulesFunc = () => {
@@ -359,8 +391,6 @@ const hideRules = () => {
 .top-section {
     display: flex;
     width: 100%;
-    margin-top: -7%;
-    margin-bottom: 10%;
 }
 
 /* 主标题样式 */
@@ -389,12 +419,20 @@ const hideRules = () => {
     flex-direction: column;
     margin-right: 3%;
     cursor: pointer;
+    /* 确保按钮在屏幕缩放时保持比例 */
+    transform-origin: center;
+    transition: transform 0.2s ease;
 }
 
 .rules-btn img {
     width: auto;
     height: 45px;
     margin-bottom: 5px;
+    object-fit: contain;
+    /* 确保图片在屏幕缩放时保持比例 */
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+    transform-origin: center;
 }
 
 .rules-text {
@@ -431,6 +469,13 @@ const hideRules = () => {
     display: inline-block;
     padding: 10px 20px;
     min-width: fit-content;
+    /* 确保文字始终在容器内 */
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 
@@ -441,21 +486,21 @@ const hideRules = () => {
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 400px;
+    height: 700px;
     position: relative;
-    perspective: 1200px;
+    /* perspective: 1200px; */
     transform-style: preserve-3d;
 }
 
 /* 股票区域基础样式 */
 .stock-area {
     position: absolute;
-    width: 25vw;
-    height: 28vw;
-    min-width: 300px;
-    min-height: 350px;
-    max-width: 500px;
-    max-height: 600px;
+    width: 48vw;
+    height: 38vw;
+    min-width: 560px;
+    min-height: 480px;
+    max-width: 900px;
+    max-height: 800px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -473,66 +518,65 @@ const hideRules = () => {
     -webkit-backface-visibility: hidden;
     transform: translateZ(0);
 } */
-/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */
+/* 美股卡片默认位置 - 居中显示，移除放大效果 */
 .left-area {
-    transform: translateX(-25vw) rotateY(25deg) scale(1.5);
+    transform: translateX(0) rotateY(0deg);
 }
 
 /* 港股卡片默认位置 - 火箭右侧，向内倾斜 */
-.right-area {
+/* .right-area {
     transform: translateX(25vw) rotateY(-25deg) scale(1.5);
-}
+} */
 
-/* 美股hover效果 - 在原有倾斜基础上轻微上移 */
+/* 美股hover效果 - 移除放大效果，仅保持轻微上移 */
 .left-area:hover:not(.active):not(.side) {
-    transform: translateX(-25vw) rotateY(35deg) translateY(-10px) scale(1.55);
+    transform: translateX(0) rotateY(0deg) translateY(-10px);
     transition: transform 0.3s ease;
 }
 
 /* 港股hover效果 - 在原有倾斜基础上轻微上移 */
-.right-area:hover:not(.active):not(.side) {
+/* .right-area:hover:not(.active):not(.side) {
     transform: translateX(25vw) rotateY(-35deg) translateY(-10px) scale(1.55);
     transition: transform 0.3s ease;
-}
+} */
 
-/* 美股激活时 - 移动到页面中心并取消倾斜 */
+/* 美股激活时 - 移动到页面中心并取消倾斜，移除放大效果 */
 .left-area.active {
-    transform: translateX(0) rotateY(0deg) scale(1.6);
+    transform: translateX(0) rotateY(0deg);
     z-index: 20;
 }
 
 /* 港股激活时 - 移动到页面中心并取消倾斜 */
-.right-area.active {
+/* .right-area.active {
     transform: translateX(0) rotateY(0deg) scale(1.6);
     z-index: 20;
-}
+} */
 
 /* 美股在港股激活时 - 移动到后面并保持倾斜 */
-.left-area.side {
+/* .left-area.side {
     transform: translateX(-35vw) rotateY(25deg) scale(0.9) !important;
     z-index: 1 !important;
     opacity: 0.4;
-}
+} */
 
 /* 港股在美股激活时 - 移动到后面并保持倾斜 */
-.right-area.side {
+/* .right-area.side {
     transform: translateX(35vw) rotateY(-25deg) scale(0.9) !important;
     z-index: 1 !important;
     opacity: 0.4;
-}
+} */
 
-/* 火箭区域 - 始终在圆筒中心 */
+/* 火箭区域 - 位于美股卡片右边，不覆盖卡片 */
 .rocket-area {
     position: absolute;
     z-index: 10;
-    transform: translateZ(0);
-    /* 新增位置调整 */
-    top: 80%;
-    /* 垂直居中，可调整为具体像素值如 100px */
-    left: 50%;
-    /* 水平居中，可调整为具体像素值如 200px */
-    transform: translate(-50%, -50%) translateZ(0);
-    /* 居中偏移 */
+    /* 位置调整到美股卡片右边，确保不覆盖 */
+    top: 50%;
+    /* 垂直居中 */
+    left: calc(50% + 25vw);
+    /* 美股卡片右边位置，增加间距 */
+    transform: translate(0, -50%) translateZ(0);
+    /* 左对齐，垂直居中 */
 }
 
 .rocket-area.hidden {
@@ -542,7 +586,7 @@ const hideRules = () => {
 /* 股票卡片样式 */
 .stock-card {
     width: 100%;
-    height: 345px;
+    height: 475px;
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -554,35 +598,25 @@ const hideRules = () => {
 }
 
 /* 港股卡片背景 */
-.hk-card {
+/* .hk-card {
     background-image: url('@/assets/img/zhongchou/港股.png') !important;
-}
-
-
+} */
 
 .card-content {
     width: 100%;
     height: auto;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: flex-start;
     gap: 20px;
     padding: 20px 20px 20px 20px;
     box-sizing: border-box;
-    /* 确保padding不会增加总宽度 */
-    overflow: hidden;
-    /* 防止内容溢出 */
-}
-
-/* 美股内容布局 - 进度条在左边 */
-.us-content {
-    flex-direction: row;
 }
 
 /* 港股内容布局 - 进度条在右边 */
-.hk-content {
+/* .hk-content {
     flex-direction: row;
-}
+} */
 
 /* 股票信息 */
 .stock-info {
@@ -591,19 +625,12 @@ const hideRules = () => {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
-    /* 从 flex-start 改为 center */
-    align-items: center;
-    min-width: 0;
-    /* 允许flex项目收缩到内容以下 */
-    max-width: 150px;
-    /* 限制最大宽度 */
 }
 
 /* 股票信息标题样式 */
 .stock-info h3 {
     margin: 5px 0;
-    font-size: 1.33rem;
+    font-size: 2rem;
     line-height: 1.2;
     word-wrap: break-word;
     /* 允许长单词换行 */
@@ -621,11 +648,6 @@ const hideRules = () => {
     gap: 15px;
 }
 
-/* 美股内容布局 - 进度条在右边，刻度在左边 */
-.us-content {
-    flex-direction: row;
-}
-
 .us-content .progress-section {
     display: flex;
     align-items: center;
@@ -636,7 +658,7 @@ const hideRules = () => {
 }
 
 /* 港股内容布局 - 进度条在左边，刻度在右边 */
-.hk-content {
+/* .hk-content {
     flex-direction: row;
 }
 
@@ -647,15 +669,17 @@ const hideRules = () => {
     gap: 15px;
     flex-direction: row;
     /* 进度条在左，刻度在右 */
-}
+/* } */
 
 /* 默认进度条容器样式 */
 .progress-bar {
-    width: 20px;
-    height: 350px;
+    width: 100%;
+    height: auto;
     border-radius: 10px;
     position: relative;
     overflow: visible;
+    min-width: 20px;
+    min-height: 30rem;
 }
 
 /* 美股进度条容器 - 蓝色主题背景 */
@@ -669,21 +693,22 @@ const hideRules = () => {
 }
 
 /* 港股进度条容器 - 红色主题背景 */
-.hk-content .progress-bar {
+/* .hk-content .progress-bar {
     background: linear-gradient(to top,
             rgba(255, 138, 128, 0.2),
             rgba(255, 87, 34, 0.3),
             rgba(211, 47, 47, 0.4));
     border: 1px solid rgba(255, 87, 34, 0.5);
     box-shadow: 0 0 10px rgba(255, 87, 34, 0.3);
-}
+} */
 
 .time-markers {
     display: flex;
     flex-direction: column;
-    height: 350px;
+    height: auto;
     justify-content: space-between;
     align-items: center;
+    min-height: 30rem;
 }
 
 /* 股票内容容器 */
@@ -729,14 +754,14 @@ const hideRules = () => {
 }
 
 /* 港股助力按钮 */
-.hk-boost-btn {
+/* .hk-boost-btn {
     background-image: url('@/assets/img/zhongchou/助力港股.png');
 }
 
 /* 港股已助力状态 */
-.hk-boost-btn.boosted {
+/* .hk-boost-btn.boosted {
     background-image: url('@/assets/img/zhongchou/港股已助力.png');
-}
+} */
 
 /* 底座样式 */
 .base-image {
@@ -765,9 +790,9 @@ const hideRules = () => {
 }
 
 /* 港股进度条填充 - 红色系渐变 */
-.hk-content .progress-fill {
+/* .hk-content .progress-fill {
     background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F);
-}
+} */
 
 /* 在进度条填充部分顶部添加火箭gif */
 .progress-fill::after {
@@ -793,10 +818,11 @@ const hideRules = () => {
     font-size: 1.4rem;
     font-weight: 700;
     font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
-    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3);
     transition: all 0.5s ease;
     letter-spacing: 0.5px;
     text-rendering: optimizeLegibility;
+    text-align: center;
+    min-width: 30px;
 }
 
 /* 为刻度数字添加连接线 */
@@ -813,31 +839,30 @@ const hideRules = () => {
 
 /* 美股刻度连接线 - 从右侧连接到进度条 */
 .us-content .marker::before {
-    right: -20px;
+    right: -13px;
     background-color: #00BFFF;
     /* 蓝色 */
     box-shadow: 0 0 4px rgba(0, 191, 255, 0.5);
 }
 
 /* 港股刻度连接线 - 从左侧连接到进度条 */
-.hk-content .marker::before {
+/* .hk-content .marker::before {
     left: -20px;
     background-color: #FF4444;
     /* 红色 */
-    box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
-}
+/* box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
+} */
 
 /* 美股激活刻度 */
 .us-content .marker.reached {
     color: #00BFFF !important;
-    text-shadow: 0 0 10px rgba(0, 191, 255, 0.8) !important;
 }
 
 /* 港股激活刻度 */
-.hk-content .marker.reached {
+/* .hk-content .marker.reached {
     color: #FF4444 !important;
     text-shadow: 0 0 10px rgba(255, 68, 68, 0.8) !important;
-}
+} */
 
 /* 刻度字体增强样式 */
 /* .marker-text {
@@ -861,11 +886,11 @@ const hideRules = () => {
     box-shadow: 0 5px 15px rgba(0, 100, 255, 0.4);
 }
 
-.hk-btn {
+/* .hk-btn {
     background: linear-gradient(45deg, #cc3333, #ff6666);
     color: white;
     box-shadow: 0 5px 15px rgba(255, 50, 50, 0.4);
-}
+} */
 
 .boost-btn:hover {
     background-size: 110%;
@@ -952,27 +977,61 @@ const hideRules = () => {
     }
 
     .stock-area {
-        width: 35vw;
-        height: 40vw;
-        min-width: 280px;
-        min-height: 320px;
+        width: 58vw;
+        height: 50vw;
+        min-width: 480px;
+        min-height: 440px;
         margin: 0;
     }
 
     .left-area {
-        transform: translateX(-40vw) rotateY(25deg) scale(1.3);
+        transform: translateX(0) rotateY(0deg);
     }
 
-    .right-area {
-        transform: translateX(40vw) rotateY(-25deg) scale(1.3);
+    /* 移动端火箭位置调整 - 确保不覆盖卡片 */
+    .rocket-area {
+        left: calc(50% + 30vw);
+        top: 50%;
+        transform: translate(0, -50%) translateZ(0);
+    }
+
+    /* 移动端规则按钮适配 */
+    .rules-btn img {
+        height: 35%;
+        /* 移动端适当缩小图片尺寸 */
+    }
+
+    .rules-text {
+        font-size: 0.9rem;
+        /* 移动端适当缩小文字尺寸 */
+    }
+
+    /* 移动端活动时间容器适配 */
+    .activity-period {
+        font-size: 1.1rem;
+        padding: 8px 15px;
+        max-width: 90vw;
+        /* 确保在小屏幕上不会超出视口 */
     }
+
+    /* .right-area {
+        transform: translateX(40vw) rotateY(-25deg) scale(1.3);
+    } */
 }
 
-/* @media (max-width: 480px) {
+@media (max-width: 480px) {
     .main-title img {
         max-height: 50px;
     }
-} */
+
+    /* 极小屏幕活动时间容器适配 */
+    .activity-period {
+        font-size: 0.9rem;
+        padding: 6px 12px;
+        max-width: 85vw;
+        /* 在极小屏幕上进一步缩小 */
+    }
+}
 
 /* 弹窗样式 */
 .modal-overlay {
@@ -999,7 +1058,7 @@ const hideRules = () => {
 
 .modal-background {
     width: 100%;
-    height: 100%;
+    height: auto;
     background-image: url('@/assets/img/zhongchou/框.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;