From 1f7d4a7896027ff800e635e3f558a0d83e826fbb Mon Sep 17 00:00:00 2001 From: dzl <786316265@qq.com> Date: Fri, 5 Sep 2025 10:38:36 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E5=8A=A0=E5=BC=BA=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage.vue | 46 +++++++++++---- src/views/MyPointsHistory.vue | 106 +++++++++++++++++++++++++++++----- 2 files changed, 128 insertions(+), 24 deletions(-) diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue index 0e92ca0..683e7bd 100644 --- a/src/views/MainPage.vue +++ b/src/views/MainPage.vue @@ -54,6 +54,8 @@ +
点击获得融豆,可兑换商城好物!
+
热门资讯
@@ -145,7 +147,7 @@ export default { { image: '/imgs/mainpage/dingdanchaxun.png', text: '订单查询', - path: '/points-history', + path: '/orders', }, { image: '/imgs/mainpage/kefuzhongxin.png', @@ -352,8 +354,11 @@ export default { align-items: center; gap: 10px; width: 100%; + overflow:hidden; } + + .action-item { flex: 1; display: flex; @@ -369,30 +374,49 @@ export default { } .action-image1 { - width: 300%; + width: 175%; height: auto; max-width: 180px; object-fit: contain; border-radius: 8px; - margin-left: 40px; + margin-left: 50px; + margin-top: -5px; } .action-image2 { - width: 300%; + width: 175%; + height: auto; + max-width: 180px; + object-fit: contain; + border-radius: 8px; + margin-left: 12px; +} + +.action-image3 { + width: 175%; height: auto; max-width: 180px; object-fit: contain; border-radius: 8px; margin-left: 20px; + margin-top: 0px; } -.action-image3 { - width: 300%; - height: auto; - max-width: 180px; - object-fit: contain; - border-radius: 8px; - margin-left: 40px; +.tips { + width: 100%; + max-width: 343px; + margin: 0 auto; + padding: 12px 20px; + text-align: center; + font-size: 14px; + font-weight: 500; + color: var(--primary-color); + background-color: rgba(67, 97, 238, 0.1); + border: 1px solid var(--primary-color); + border-radius: 25px; + box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15); + color: #22a7ff; + margin-top: -50px; } /* 热门资讯 */ diff --git a/src/views/MyPointsHistory.vue b/src/views/MyPointsHistory.vue index d72663a..3a4ab79 100644 --- a/src/views/MyPointsHistory.vue +++ b/src/views/MyPointsHistory.vue @@ -120,7 +120,7 @@
-
+
@@ -300,7 +300,7 @@ const formatDateTime = (date) => { } const viewOrder = (orderId) => { - router.push(`/orders?orderId=${orderId}`) + router.push(`/payloading?orderId=${orderId}`) } const getUserPoints = async () => { @@ -410,8 +410,10 @@ onMounted(() => { flex-direction: column; min-height: 100vh; width: 100%; + max-width: 100vw; margin: 0; padding: 0; + overflow-x: hidden; background: linear-gradient(to bottom, #72c9ffae, #f3f3f3); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } @@ -426,6 +428,8 @@ onMounted(() => { max-width: 375px; margin: 0 auto; width: 100%; + box-sizing: border-box; + overflow-x: hidden; } /* 导航栏样式 */ @@ -698,6 +702,9 @@ onMounted(() => { color: #333; font-weight: 500; line-height: 1.4; + word-wrap: break-word; + word-break: break-all; + overflow-wrap: break-word; } .item-points { @@ -726,6 +733,9 @@ onMounted(() => { font-size: 14px; color: #666; line-height: 1.4; + word-wrap: break-word; + word-break: break-all; + overflow-wrap: break-word; } .item-meta { @@ -854,13 +864,48 @@ onMounted(() => { } /* 响应式设计 */ -@media (max-width: 375px) { +@media (max-width: 480px) { .main-content { padding: 12px; + max-width: 100%; + overflow-x: hidden; + } + + .overview-card { + padding: 16px; + } + + .current-points { + flex-direction: column; + text-align: center; + gap: 12px; + padding-right: 0; + align-items: center; + } + + .balance-image { + position: static; + transform: none; + height: 80px; + max-width: 80px; + margin-top: 8px; + } + + .points-info { + text-align: center; + } + + .points-value { + font-size: 28px; } .points-stats { - gap: 16px; + gap: 24px; + justify-content: center; + } + + .stat-value { + font-size: 18px; } .item-header { @@ -875,18 +920,53 @@ onMounted(() => { gap: 4px; } - .current-points { - flex-direction: column; - text-align: center; - gap: 8px; - } - .filter-tabs { gap: 4px; } .tab-item { - padding: 5px 10px; + padding: 8px 6px; + font-size: 12px; + } + + .history-item { + padding: 12px; + } + + .item-title { + font-size: 14px; + line-height: 1.3; + } + + .item-description { + font-size: 13px; + line-height: 1.3; + } + + .item-points { + font-size: 14px; + } +} + +@media (max-width: 375px) { + .main-content { + padding: 8px; + } + + .overview-card { + padding: 12px; + } + + .points-value { + font-size: 24px; + } + + .stat-value { + font-size: 16px; + } + + .tab-item { + padding: 6px 4px; font-size: 11px; } } @@ -909,7 +989,7 @@ onMounted(() => { align-items: center; gap: 16px; margin-bottom: 24px; - padding-right: 20px; /* 为图片留出空间 */ + padding-right: 120px; /* 为图片留出更多空间 */ } /* 调整积分概览卡片为相对定位 */