Skip to content

Commit

Permalink
feat(cp): cp page style
Browse files Browse the repository at this point in the history
  • Loading branch information
@shihyuchou621
shihyuchou621 committed Jul 19, 2023
1 parent fc272f0 commit 68dc1b6
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 96 deletions.
194 changes: 98 additions & 96 deletions app/routes/($lang).curing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,107 +12,109 @@ export default function () {
return (
<div>
<div className="cp-banner" />
<div className="mx-[10px] inline-block w-[600px]">
<div className="cp-title cp-title1">
<div className="cp-title-text">
<div className="leading-[80px]">症狀控制藥</div>
<div className="cp-title-content">
Naproxen（能百鎮）
<br />
Tranexamic acid（斷血炎）
<br />
Ergonovine（縮水蘋果酸麥角新鹼片）
<div className="mx-auto mt-16 w-fit">
<div className="mx-auto inline-block w-[600px] align-top">
<div className="cp-title cp-title1">
<div className="cp-title-text">
<div className="leading-[80px]">症狀控制藥</div>
<div className="cp-title-content">
Naproxen（能百鎮）
<br />
Tranexamic acid（斷血炎）
<br />
Ergonovine（縮水蘋果酸麥角新鹼片）
</div>
</div>
</div>
<div className="cp-short">
<div className="cp-short-text">微專業短評</div>
<div className="cp-short-divider" />
</div>
<div className="cp-short-content">
這些藥物是平常我們最容易在藥局、國外代購入手的居家備品，通常以迅速止痛、止血為目標；然而事實上以止血來說，每種藥物平均只能減少30-50%出血量，因此偶而會有女性抱怨即使吃了止血藥仍然在流血。若無法改善症狀，仍應尋求專業醫師協助找出病因。
</div>
</div>
<div className="cp-short">
<div className="cp-short-text">微專業短評</div>
<div className="cp-short-divider" />
</div>
<div className="cp-short-content">
這些藥物是平常我們最容易在藥局、國外代購入手的居家備品，通常以迅速止痛、止血為目標；然而事實上以止血來說，每種藥物平均只能減少30-50%出血量，因此偶而會有女性抱怨即使吃了止血藥仍然在流血。若無法改善症狀，仍應尋求專業醫師協助找出病因。
<div className="mx-[30px] inline-block w-[330px] pt-[40px] text-[#857162]">
<table>
<tr>
<th>藥效</th>
<th></th>
<th>起效速度</th>
</tr>
<tr>
<td>
<div className="align-center flex">
<StarUnCheck />
<StarCheck />
<StarCheck />
</div>
</td>
<td>
<div className="pink-bg cell">緩解經痛</div>
</td>
<td>當天</td>
</tr>
<tr>
<td>
<div className="align-center flex justify-center">
<StarUnCheck />
<StarCheck />
<StarCheck />
</div>
</td>
<td>
<div className="brown-bg cell">減少出血</div>
</td>
<td>當天</td>
</tr>
<tr>
<td>
<div className="align-center flex justify-center">
<StarUnCheck />
<StarUnCheck />
<StarUnCheck />
</div>
</td>
<td>
<div className="pink-bg cell">預防復發</div>
</td>
<td></td>
</tr>
</table>
<div className="cp-effect-divider " />
<table>
<tr>
<th>價錢</th>
<th>便利性</th>
</tr>
<tr>
<td>
<div className="w-[207px]">健保給付</div>
</td>
<td>
<div className="w-[123px]">月經期間每天服用2-3次。</div>
</td>
</tr>
</table>
<div className="cp-effect-divider " />
<table>
<tr>
<th>副作用</th>
</tr>
<tr>
<td>
<div>
=5%：失眠、盗汗、熱潮紅、水腫
<br />
1-5%：骨質疏鬆、骨折、情緒障礙
<br />
{"<1%：肺部纖維化"}
</div>
</td>
</tr>
</table>
</div>
</div>
<div className="mx-[30px] inline-block w-[330px] text-[#857162]">
<table>
<tr>
<th>藥效</th>
<th></th>
<th>起效速度</th>
</tr>
<tr>
<td>
<div className="align-center flex">
<StarUnCheck />
<StarCheck />
<StarCheck />
</div>
</td>
<td>
<div className="pink-bg cell">緩解經痛</div>
</td>
<td>當天</td>
</tr>
<tr>
<td>
<div className="align-center flex justify-center">
<StarUnCheck />
<StarCheck />
<StarCheck />
</div>
</td>
<td>
<div className="brown-bg cell">減少出血</div>
</td>
<td>當天</td>
</tr>
<tr>
<td>
<div className="align-center flex justify-center">
<StarUnCheck />
<StarUnCheck />
<StarUnCheck />
</div>
</td>
<td>
<div className="pink-bg cell">預防復發</div>
</td>
<td></td>
</tr>
</table>
<div className="cp-effect-divider " />
<table>
<tr>
<th>價錢</th>
<th>便利性</th>
</tr>
<tr>
<td>
<div className="w-[207px]">健保給付</div>
</td>
<td>
<div className="w-[123px]">月經期間每天服用2-3次。</div>
</td>
</tr>
</table>
<div className="cp-effect-divider " />
<table>
<tr>
<th>副作用</th>
</tr>
<tr>
<td>
<div>
=5%：失眠、盗汗、熱潮紅、水腫
<br />
1-5%：骨質疏鬆、骨折、情緒障礙
<br />
{"<1%：肺部纖維化"}
</div>
</td>
</tr>
</table>
</div>
</div>
);
}
1 change: 1 addition & 0 deletions app/styles/curing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
}

.cp-short-content {
min-height: 300px;
font-size: 22px;
color: #a78f7e;
padding: 10px;
Expand Down

0 comments on commit 68dc1b6

Please sign in to comment.