Skip to content

Commit

Permalink
feat(cp): adjust style
Browse files Browse the repository at this point in the history
  • Loading branch information
@shihyuchou621
shihyuchou621 committed Sep 1, 2023
1 parent 493ae90 commit ce8f131
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 87 deletions.
74 changes: 37 additions & 37 deletions app/routes/($lang).choice.tsx
View file
Expand Up @@ -91,73 +91,73 @@ export default function () {
className="choice-img"
style={{ backgroundImage: `url(${choice1})` }}
>
<div className="img-box img1-box">
<div className="img-box">
<div className="img-title img1-title">{t("imgTitle1")}</div>
<div
className="img-text img1-text [&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText1").replace(
"{{underline}}",
`<span>${t("imgTextU1")}</span>`
),
}}
/>
</div>
</div>
<div
className="img-text img1-text [&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText1").replace(
"{{underline}}",
`<span>${t("imgTextU1")}</span>`
),
}}
/>
</div>
<div className="choice-img-container">
<div
className="choice-img"
style={{ backgroundImage: `url(${choice2})` }}
>
<div className="img-box img2-box">
<div className="img-text img2-text">
<div
className="[&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText21").replace(
"{{underline}}",
`<span>${t("imgTextU21")}</span>${t("imgTextU22")}<span>${t(
"imgTextU23"
)}</span>${t("imgTextU24")}`
),
}}
/>
<div>{t("imgText22")}</div>
</div>
<div className="img-box">
<div className="img-title img2-title">{t("imgTitle2")}</div>
</div>
</div>
<div className="img-text img2-text">
<div>{t("imgText22")}</div>
<div
className="[&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText21").replace(
"{{underline}}",
`<span>${t("imgTextU21")}</span>${t("imgTextU22")}<span>${t(
"imgTextU23"
)}</span>${t("imgTextU24")}`
),
}}
/>
</div>
</div>
<div className="choice-img-container">
<div
className="choice-img"
style={{ backgroundImage: `url(${choice3})` }}
>
<div className="img-box img3-box">
<div className="img-box">
<div className="img-title img3-title">{t("imgTitle3")}</div>
<div
className="img-text img3-text [&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText3").replace(
"{{underline}}",
`<span>${t("imgTextU3")}</span>`
),
}}
/>
</div>
</div>
<div
className="img-text img3-text [&>span]:underline"
dangerouslySetInnerHTML={{
__html: t("imgText3").replace(
"{{underline}}",
`<span>${t("imgTextU3")}</span>`
),
}}
/>
</div>
<div className="choice-img-container">
<div
className="choice-img"
style={{ backgroundImage: `url(${choice4})` }}
>
<div className="img-box img4-box">
<div className="img-text img4-text">{t("imgText4")}</div>
<div className="img-box">
<div className="img-title img4-title">{t("imgTitle4")}</div>
</div>
</div>
<div className="img-text img4-text">{t("imgText4")}</div>
</div>
</div>
);
Expand Down
67 changes: 17 additions & 50 deletions app/styles/choice.css
View file
Expand Up @@ -15,6 +15,7 @@
.choice-all-content {
padding: 60px 50px 70px 50px;
display: flex;
gap: 20px;
flex-direction: row;
max-width: 1150px;
margin: auto;
Expand All @@ -38,7 +39,7 @@

.choice-img-container {
width: 100%;
padding: 10px;
padding: 30px 10px;
}

.choice-img {
Expand All @@ -55,28 +56,27 @@
opacity: 85%;
padding: 0 20px;
font-size: 50px;
width: fit-content;
border-radius: 10px;
width: 100%;
text-align: center;
border-radius: 10px 10px 0 0;
}

.img-text {
width: 100%;
max-width: 1024px;
margin: 0 auto;
opacity: 80%;
font-size: 26px;
padding: 4px 8px;
border-radius: 6px;
border-radius: 0 0 6px 6px;
}

.img-box {
display: flex;
position: absolute;
flex-direction: column;
}

.img1-box {
bottom: 20%;
right: 10px;
width: 590px;
align-items: end;
position: absolute;
bottom: 0;
width: 100%;
}

.img1-title {
Expand All @@ -89,13 +89,6 @@
background-color: #fbf7ee;
}

.img2-box {
bottom: 20%;
left: 10px;
width: 570px;
align-items: end;
}

.img2-title {
color: #ffffff;
background-color: #e82012;
Expand All @@ -106,12 +99,6 @@
background-color: #f3f2ea;
}

.img3-box {
bottom: 20%;
left: 10px;
width: 620px;
}

.img3-title {
color: #ffffff;
background-color: #808b96;
Expand All @@ -122,13 +109,6 @@
background-color: #a7c5cc;
}

.img4-box {
bottom: 40px;
right: 10px;
width: 900px;
align-items: end;
}

.img4-title {
font-size: 55px;
color: #ffffff;
Expand All @@ -141,7 +121,7 @@
background-color: #a7c5cc;
}

.img .icons-container {
.icons-container {
width: 370px;
}

Expand Down Expand Up @@ -192,16 +172,9 @@
.banner-text {
font-size: 1.5rem;
}
.img-box {
bottom: 10%;
width: 90%;
}
.img-text {
font-size: 30px;
}
.img-title {
font-size: 60px;
border-radius: 6px;
border-radius: 6px 6px 0 0;
}
.img4-title {
font-size: 46px;
Expand All @@ -216,7 +189,7 @@
width: 50%;
}
.img-text {
font-size: 20px;
font-size: 22px;
}
.img-title {
font-size: 44px;
Expand All @@ -240,25 +213,19 @@
}
.img-text {
width: 100%;
font-size: 16px;
font-size: 20px;
}
.img-title {
font-size: 30px;
}
.img4-title {
font-size: 24px;
}
.img-box {
width: 95%;
}
}

@media (max-width: 375px) {
.img-box {
bottom: 6px;
}
.img-text {
font-size: 12px;
font-size: 16px;
}
.img-title {
font-size: 20px;
Expand Down

0 comments on commit ce8f131

Please sign in to comment.