deliveryman/beefast-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2025-03-02 09:48:04 +08:00
parent 7a9490d260
commit ba13b77ffa
2 changed files with 11 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/howtouse_background@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

34
src/components/HowToUse.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="how-to-use-container"> <div class="how-to-use-container">
<div class="steps-card"> <div class="steps-card">
<div class="step-item"> <div class="step-item" style="margin-top: 20px;">
<div class="step-number">第一步</div> <div class="step-number">第一步</div>
<div class="step-content"> <div class="step-content">
<div class="step-title">选择开通小区</div> <div class="step-title">选择开通小区</div>
@ -92,23 +92,21 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: 20px 15px 30px; background: linear-gradient(0deg, #ffffff 60%, #FFCC00);
background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.steps-card { .steps-card {
width: 100%; width: 100%;
max-width: 85%; background-image: url('../assets/images/howtouse_background@3x.png');
background-color: #FFFFFF; background-position: center;
border-radius: 20px; background-size: contain;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); background-repeat: no-repeat;
padding: 20px 15px; margin-top: 15px;
margin-top: 30px; height: 580px;
position: relative; position: relative;
z-index: 1; z-index: 1;
clip-path: none;
} }
.card-bottom-cutout { .card-bottom-cutout {
@ -146,11 +144,11 @@ export default {
.step-arrow { .step-arrow {
margin: 0 12px; margin: 0 12px;
font-size: 18px; font-size: 18px;
color: #FFCC00; color: #333333;
} }
.step-description { .step-description {
font-size: 14px; font-size: 16px;
color: #999999; color: #999999;
} }
@ -164,7 +162,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 35px; margin-top: 15px;
width: 85%; width: 85%;
max-width: 85%; max-width: 85%;
} }
@ -189,7 +187,6 @@ export default {
@media (max-width: 480px) { @media (max-width: 480px) {
.steps-card { .steps-card {
clip-path: none; clip-path: none;
max-width: 90%;
} }
.logo-container { .logo-container {
@ -201,23 +198,14 @@ export default {
} }
.step-number { .step-number {
font-size: 18px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.step-title {
font-size: 15px;
}
.step-arrow { .step-arrow {
margin: 0 8px; margin: 0 8px;
font-size: 16px; font-size: 16px;
} }
.step-description {
font-size: 13px;
}
.logo-bee { .logo-bee {
width: 30px; width: 30px;
height: 30px; height: 30px;