From 052efdb81a8699f838565899b2ef31491b34426f Mon Sep 17 00:00:00 2001 From: aaron <> Date: Fri, 28 Feb 2025 22:12:55 +0800 Subject: [PATCH] update --- src/components/HowToUse.vue | 34 +++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/HowToUse.vue b/src/components/HowToUse.vue index 5a0a98f..a26ba6e 100644 --- a/src/components/HowToUse.vue +++ b/src/components/HowToUse.vue @@ -83,7 +83,7 @@ export default { display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: flex-start; padding: 20px 15px 30px; background: linear-gradient(to bottom, #FFCC00, #FFFFFF); position: relative; @@ -100,6 +100,15 @@ export default { margin-top: 30px; position: relative; z-index: 1; + clip-path: none; +} + +.card-bottom-cutout { + display: none; +} + +.steps-card:after { + display: none; } .step-item { @@ -163,10 +172,9 @@ export default { object-fit: contain; } -/* 响应式调整 */ @media (max-width: 480px) { .steps-card { - padding: 15px 10px; + clip-path: none; } .step-item { @@ -201,15 +209,9 @@ export default { } } -/* 添加额外的媒体查询,针对特别小的屏幕 */ @media (max-height: 640px) { - .how-to-use-container { - padding: 15px 10px 20px; - } - .steps-card { - margin-top: 15px; - padding: 10px 8px; + clip-path: none; } .step-item { @@ -235,7 +237,7 @@ export default { } .logo-container { - margin-top: 15px; + margin-top: 20px; } .logo-bee { @@ -249,9 +251,11 @@ export default { } } -/* 添加针对超小屏幕的媒体查询 */ @media (max-height: 568px) { - /* iPhone 5/SE 等超小屏幕 */ + .steps-card { + clip-path: none; + } + .logo-bee { width: 22px; height: 22px; @@ -283,5 +287,9 @@ export default { .step-description { font-size: 11px; } + + .logo-container { + margin-top: 15px; + } } \ No newline at end of file