kj1352
4 年前
共有 10 个文件被更改，包括 235 次插入 和 26 次删除
合并视图
Diff 选项
-
+12 -9public/index.html
-
+1 -1src/App.tsx
-
+1 -0src/assets/svg/cash-outline.svg
-
+1 -0src/assets/svg/cog-outline.svg
-
+1 -0src/assets/svg/line-chart.svg
-
+0 -0src/pages/accounts/Accounts.module.scss
-
+0 -14src/pages/accounts/Accounts.tsx
-
+125 -0src/pages/accounts/accounts.module.scss
-
+65 -0src/pages/accounts/accounts.tsx
-
+29 -2src/theme/variables.css
+ 12
- 9
public/index.html
查看文件
| @@ -1,16 +1,14 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | |||||
| <head> | |||||
| <meta charset="utf-8" /> | <meta charset="utf-8" /> | ||||
| <title>Ionic App</title> | <title>Ionic App</title> | ||||
| <base href="/" /> | <base href="/" /> | ||||
| <meta name="color-scheme" content="light dark" /> | <meta name="color-scheme" content="light dark" /> | ||||
| <meta | |||||
| name="viewport" | |||||
| content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" | |||||
| /> | |||||
| <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |||||
| <meta name="format-detection" content="telephone=no" /> | <meta name="format-detection" content="telephone=no" /> | ||||
| <meta name="msapplication-tap-highlight" content="no" /> | <meta name="msapplication-tap-highlight" content="no" /> | ||||
| @@ -22,10 +20,15 @@ | |||||
| <meta name="apple-mobile-web-app-capable" content="yes" /> | <meta name="apple-mobile-web-app-capable" content="yes" /> | ||||
| <meta name="apple-mobile-web-app-title" content="Ionic App" /> | <meta name="apple-mobile-web-app-title" content="Ionic App" /> | ||||
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||||
| </head> | |||||
| <body> | |||||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |||||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |||||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" | |||||
| rel="stylesheet"> | |||||
| </head> | |||||
| <body> | |||||
| <div id="root"></div> | <div id="root"></div> | ||||
| </body> | |||||
| </body> | |||||
| </html> | |||||
| </html> | |||||
+ 1
- 1
src/App.tsx
查看文件
| @@ -20,7 +20,7 @@ import '@ionic/react/css/display.css'; | |||||
| /* Theme variables */ | /* Theme variables */ | ||||
| import './theme/variables.css'; | import './theme/variables.css'; | ||||
| import Accounts from './pages/accounts/Accounts'; | |||||
| import Accounts from './pages/accounts/accounts'; | |||||
| const App: React.FC = () => ( | const App: React.FC = () => ( | ||||
| <IonApp> | <IonApp> | ||||
+ 1
- 0
src/assets/svg/cash-outline.svg
查看文件
| @@ -0,0 +1 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-l</title><rect x="32" y="80" width="448" height="256" rx="16" ry="16" transform="translate(512 416) rotate(180)" style="fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px"/><line x1="64" y1="384" x2="448" y2="384" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="96" y1="432" x2="416" y2="432" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="208" r="80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,160a80,80,0,0,1-80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,160a80,80,0,0,0,80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,256a80,80,0,0,0-80,80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,256a80,80,0,0,1,80,80" style="stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> | |||||
+ 1
- 0
src/assets/svg/cog-outline.svg
查看文件
| @@ -0,0 +1 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-m</title><path d="M456.7,242.27l-26.08-4.2a8,8,0,0,1-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08,8.08,0,0,1,3.9-8.62l23.09-12.82a8.05,8.05,0,0,0,3.9-9.92l-4-11a7.94,7.94,0,0,0-9.4-5l-25.89,5a8,8,0,0,1-8.59-4.11q-2.25-4.2-4.8-8.41a8.16,8.16,0,0,1,.7-9.52l17.29-19.94a8,8,0,0,0,.3-10.62l-7.49-9a7.88,7.88,0,0,0-10.5-1.51l-22.69,13.63a8,8,0,0,1-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8,8,0,0,1-2.5-9.11l9.4-24.75A8,8,0,0,0,365,78.77l-10.2-5.91a8,8,0,0,0-10.39,2.21L327.77,95.91a7.15,7.15,0,0,1-8.5,2.5s-5.6-2.3-9.8-3.71A8,8,0,0,1,304,87l.4-26.45a8.07,8.07,0,0,0-6.6-8.42l-11.59-2a8.07,8.07,0,0,0-9.1,5.61l-8.6,25.05a8,8,0,0,1-7.79,5.41h-9.8a8.07,8.07,0,0,1-7.79-5.41l-8.6-25.05a8.07,8.07,0,0,0-9.1-5.61l-11.59,2a8.07,8.07,0,0,0-6.6,8.42l.4,26.45a8,8,0,0,1-5.49,7.71c-2.3.9-7.3,2.81-9.7,3.71-2.8,1-6.1.2-8.8-2.91L167.14,75.17A8,8,0,0,0,156.75,73l-10.2,5.91A7.94,7.94,0,0,0,143.25,89l9.4,24.75a8.06,8.06,0,0,1-2.5,9.11c-2.5,2-5,4.11-7.4,6.22a8,8,0,0,1-9.39.9L111,116.14a8,8,0,0,0-10.5,1.51l-7.49,9a8,8,0,0,0,.3,10.62l17.29,19.94a8,8,0,0,1,.7,9.52q-2.55,4-4.8,8.41a8.11,8.11,0,0,1-8.59,4.11l-25.89-5a8,8,0,0,0-9.4,5l-4,11a8.05,8.05,0,0,0,3.9,9.92L85.58,213a7.94,7.94,0,0,1,3.9,8.62c-.6,3.2-1.2,6.31-1.7,9.51a8.08,8.08,0,0,1-6.6,6.82l-26.08,4.2a8.09,8.09,0,0,0-7.1,7.92v11.72a7.86,7.86,0,0,0,7.1,7.92l26.08,4.2a8,8,0,0,1,6.6,6.82c.5,3.2,1,6.41,1.7,9.51a8.08,8.08,0,0,1-3.9,8.62L62.49,311.7a8.05,8.05,0,0,0-3.9,9.92l4,11a7.94,7.94,0,0,0,9.4,5l25.89-5a8,8,0,0,1,8.59,4.11q2.25,4.2,4.8,8.41a8.16,8.16,0,0,1-.7,9.52L93.28,374.62a8,8,0,0,0-.3,10.62l7.49,9a7.88,7.88,0,0,0,10.5,1.51l22.69-13.63a8,8,0,0,1,9.39.9c2.4,2.11,4.9,4.21,7.4,6.22a8,8,0,0,1,2.5,9.11l-9.4,24.75a8,8,0,0,0,3.3,10.12l10.2,5.91a8,8,0,0,0,10.39-2.21l16.79-20.64c2.1-2.6,5.5-3.7,8.2-2.6,3.4,1.4,5.7,2.2,9.9,3.61a8,8,0,0,1,5.49,7.71l-.4,26.45a8.07,8.07,0,0,0,6.6,8.42l11.59,2a8.07,8.07,0,0,0,9.1-5.61l8.6-25a8,8,0,0,1,7.79-5.41h9.8a8.07,8.07,0,0,1,7.79,5.41l8.6,25a8.07,8.07,0,0,0,9.1,5.61l11.59-2a8.07,8.07,0,0,0,6.6-8.42l-.4-26.45a8,8,0,0,1,5.49-7.71c4.2-1.41,7-2.51,9.6-3.51s5.8-1,8.3,2.1l17,20.94A8,8,0,0,0,355,439l10.2-5.91a7.93,7.93,0,0,0,3.3-10.12l-9.4-24.75a8.08,8.08,0,0,1,2.5-9.12c2.5-2,5-4.1,7.4-6.21a8,8,0,0,1,9.39-.9L401,395.66a8,8,0,0,0,10.5-1.51l7.49-9a8,8,0,0,0-.3-10.62l-17.29-19.94a8,8,0,0,1-.7-9.52q2.55-4.05,4.8-8.41a8.11,8.11,0,0,1,8.59-4.11l25.89,5a8,8,0,0,0,9.4-5l4-11a8.05,8.05,0,0,0-3.9-9.92l-23.09-12.82a7.94,7.94,0,0,1-3.9-8.62c.6-3.2,1.2-6.31,1.7-9.51a8.08,8.08,0,0,1,6.6-6.82l26.08-4.2a8.09,8.09,0,0,0,7.1-7.92V250A8.25,8.25,0,0,0,456.7,242.27ZM256,112A143.82,143.82,0,0,1,395.38,220.12,16,16,0,0,1,379.85,240l-105.24,0a16,16,0,0,1-13.91-8.09l-52.1-91.71a16,16,0,0,1,9.85-23.39A146.94,146.94,0,0,1,256,112ZM112,256a144,144,0,0,1,43.65-103.41,16,16,0,0,1,25.17,3.47L233.06,248a16,16,0,0,1,0,15.87l-52.67,91.7a16,16,0,0,1-25.18,3.36A143.94,143.94,0,0,1,112,256ZM256,400a146.9,146.9,0,0,1-38.19-4.95,16,16,0,0,1-9.76-23.44l52.58-91.55a16,16,0,0,1,13.88-8H379.9a16,16,0,0,1,15.52,19.88A143.84,143.84,0,0,1,256,400Z"/></svg> | |||||
+ 1
- 0
src/assets/svg/line-chart.svg
查看文件
| @@ -0,0 +1 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-p</title><path d="M480,496H48a32,32,0,0,1-32-32V32a16,16,0,0,1,32,0V464H480a16,16,0,0,1,0,32Z"/><path d="M156,432H116a36,36,0,0,1-36-36V244a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,156,432Z"/><path d="M300,432H260a36,36,0,0,1-36-36V196a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,300,432Z"/><path d="M443.64,432h-40a36,36,0,0,1-36-36V132a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,443.64,432Z"/></svg> | |||||
+ 0
- 0
src/pages/accounts/Accounts.module.scss
查看文件
+ 0
- 14
src/pages/accounts/Accounts.tsx
查看文件
| @@ -1,14 +0,0 @@ | |||||
| import { IonContent, IonPage } from '@ionic/react'; | |||||
| import styles from './Accounts.module.scss'; | |||||
| const Accounts: React.FC = () => { | |||||
| return ( | |||||
| <IonPage> | |||||
| <IonContent> | |||||
| </IonContent> | |||||
| </IonPage> | |||||
| ); | |||||
| }; | |||||
| export default Accounts; | |||||
+ 125
- 0
src/pages/accounts/accounts.module.scss
查看文件
| @@ -0,0 +1,125 @@ | |||||
| .pageHeader { | |||||
| position: relative; | |||||
| padding: 25px 0; | |||||
| background-color: var(--black-medium); | |||||
| h4 { | |||||
| font-size: var(--page-header-size); | |||||
| text-align: center; | |||||
| color: white; | |||||
| } | |||||
| button { | |||||
| width: 40px; | |||||
| height: 40px; | |||||
| position: absolute; | |||||
| right: 15px; | |||||
| top: 15px; | |||||
| svg { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| fill: white; | |||||
| } | |||||
| } | |||||
| } | |||||
| .upfold { | |||||
| background-color: var(--black); | |||||
| border-bottom-left-radius: 30px; | |||||
| } | |||||
| .segments { | |||||
| text-align: center; | |||||
| padding: 0 15px; | |||||
| background-color: var(--black-medium); | |||||
| button { | |||||
| padding: 5px 12px; | |||||
| border: 1px solid var(--dark-grey); | |||||
| border-radius: 20px; | |||||
| font-size: 12px; | |||||
| color: var(--light-grey); | |||||
| margin: 0 10px; | |||||
| font-weight: 500; | |||||
| &.active { | |||||
| background-color: white; | |||||
| color: var(--dark-grey); | |||||
| } | |||||
| } | |||||
| } | |||||
| .statisticalDetails { | |||||
| background-color: var(--black-medium); | |||||
| display: flex; | |||||
| align-items: stretch; | |||||
| justify-content: space-between; | |||||
| padding: 25px 40px; | |||||
| margin: 0 auto; | |||||
| border-bottom-left-radius: 30px; | |||||
| li { | |||||
| padding: 10px 15px; | |||||
| border-radius: 20px; | |||||
| color: white; | |||||
| width: calc(50% - 10px); | |||||
| &:nth-child(1) { | |||||
| background-color: var(--red); | |||||
| } | |||||
| &:nth-child(2) { | |||||
| background-color: var(--teal); | |||||
| } | |||||
| label { | |||||
| font-size: 12px; | |||||
| span { | |||||
| vertical-align: middle; | |||||
| } | |||||
| svg { | |||||
| vertical-align: middle; | |||||
| width: 15px; | |||||
| height: 15px; | |||||
| fill: white; | |||||
| margin-right: 5px; | |||||
| } | |||||
| } | |||||
| h3 { | |||||
| font-weight: 500; | |||||
| font-size: 18px; | |||||
| margin-top: 10px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .actions { | |||||
| white-space: nowrap; | |||||
| overflow-x: auto; | |||||
| padding: 20px; | |||||
| li { | |||||
| display: inline-block; | |||||
| margin: 0 10px; | |||||
| button { | |||||
| width: 40px; | |||||
| height: 40px; | |||||
| border: 1px solid var(--dark-grey); | |||||
| border-radius: 10px; | |||||
| display: block; | |||||
| margin: 0 auto 10px; | |||||
| } | |||||
| label { | |||||
| color: var(--light-grey); | |||||
| font-weight: 500; | |||||
| display: block; | |||||
| font-size: 12px; | |||||
| } | |||||
| } | |||||
| } | |||||
+ 65
- 0
src/pages/accounts/accounts.tsx
查看文件
| @@ -0,0 +1,65 @@ | |||||
| import { IonContent, IonPage } from '@ionic/react'; | |||||
| import { ReactComponent as CogIcon } from '../../assets/svg/cog-outline.svg'; | |||||
| import { ReactComponent as CashIcon } from '../../assets/svg/cash-outline.svg'; | |||||
| import { ReactComponent as LineChartIcon } from '../../assets/svg/line-chart.svg'; | |||||
| import styles from './accounts.module.scss'; | |||||
| const Accounts: React.FC = () => { | |||||
| return ( | |||||
| <IonPage> | |||||
| <IonContent> | |||||
| <header className={styles.pageHeader}> | |||||
| <h4> Accounts </h4> | |||||
| <button> <CogIcon /> </button> | |||||
| </header> | |||||
| <section className={styles.upfold}> | |||||
| <section className={styles.segments}> | |||||
| <button className={styles.active}> Sep </button> | |||||
| <button> 1Q </button> | |||||
| <button> 6M </button> | |||||
| <button> 1FY </button> | |||||
| </section> | |||||
| <ul className={styles.statisticalDetails}> | |||||
| <li> | |||||
| <label> <LineChartIcon /> <span> Expenses </span> </label> | |||||
| <h3> ₹ 5,00,000 </h3> | |||||
| </li> | |||||
| <li> | |||||
| <label> <LineChartIcon /> <span> Income </span> </label> | |||||
| <h3> ₹ 20,00,000 </h3> | |||||
| </li> | |||||
| </ul> | |||||
| <ul className={styles.actions}> | |||||
| <li> | |||||
| <button> </button> | |||||
| <label> Add Expense </label> | |||||
| </li> | |||||
| <li> | |||||
| <button> </button> | |||||
| <label> Add Invoice </label> | |||||
| </li> | |||||
| <li> | |||||
| <button> </button> | |||||
| <label> E-Statement </label> | |||||
| </li> | |||||
| <li> | |||||
| <button> </button> | |||||
| <label> Reports </label> | |||||
| </li> | |||||
| <li> | |||||
| <button> </button> | |||||
| <label> Projection </label> | |||||
| </li> | |||||
| </ul> | |||||
| </section> | |||||
| </IonContent> | |||||
| </IonPage> | |||||
| ); | |||||
| }; | |||||
| export default Accounts; | |||||
+ 29
- 2
src/theme/variables.css
查看文件
| @@ -79,10 +79,37 @@ http://ionicframework.com/docs/theming/ */ | |||||
| /* Custom Colors */ | /* Custom Colors */ | ||||
| --red: #c35a5b; | --red: #c35a5b; | ||||
| --teal: #36b583; | --teal: #36b583; | ||||
| --black: #0d0d0d; | |||||
| --black-medium: #212121; | --black-medium: #212121; | ||||
| --black-dark: #0d0d0d; | |||||
| --dark-grey: #565656; | --dark-grey: #565656; | ||||
| --grey: #898989; | --grey: #898989; | ||||
| --light-grey: #bcbcbc; | --light-grey: #bcbcbc; | ||||
| --warning: #ce7f01; | |||||
| --warning: #ce7f01; | |||||
| --page-header-size: 21px; | |||||
| } | |||||
| * { | |||||
| text-decoration: none; | |||||
| outline: none; | |||||
| box-sizing: border-box; | |||||
| font-family: 'Poppins', sans-serif; | |||||
| } | |||||
| h1, h2, h3, h4, h5, h6 { | |||||
| margin: 0; | |||||
| font-weight: 700; | |||||
| } | |||||
| button { | |||||
| background-color: transparent; | |||||
| } | |||||
| ul { | |||||
| list-style: none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | } | ||||