From 33c729c8be4f952b0f3493fdb1382195bf54f875 Mon Sep 17 00:00:00 2001 From: callmeyan Date: Mon, 10 Jun 2024 11:40:39 +0800 Subject: [PATCH] update app theme style --- .gitignore | 1 + src/assets/index.less | 138 ++++++++++++++++++++----- src/components/bill/bill.less | 8 +- src/components/bill/list.tsx | 2 +- src/components/bill/search-form.tsx | 43 ++++---- src/components/card/card.less | 2 +- src/pages/bill/reconciliation.tsx | 4 +- src/pages/manual/index.tsx | 8 +- src/pages/pay/result.tsx | 2 +- src/routes/layout/dashboard-layout.tsx | 4 +- 10 files changed, 156 insertions(+), 56 deletions(-) diff --git a/.gitignore b/.gitignore index a547bf3..36ea263 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ lerna-debug.log* node_modules dist dist-ssr +test *.local # Editor directories and files diff --git a/src/assets/index.less b/src/assets/index.less index 94bf1db..299d6d7 100644 --- a/src/assets/index.less +++ b/src/assets/index.less @@ -9,8 +9,11 @@ -moz-osx-font-smoothing: grayscale; //user-select: none; --dashboard-header-height: 50px; - --dashboard-layout-padding:20px; - --dashboard-navigation-width:250px; + --dashboard-layout-padding: 20px; + --dashboard-navigation-width: 250px; + + // overrides + --brand-color: #43ABFF; } * { @@ -19,7 +22,12 @@ outline: none; font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif; } - +body #root .dashboard-layout{ + --semi-color-primary: var(--brand-color) !important; + --semi-border-radius-small: 5px; + --semi-border-radius-medium: 8px; + --semi-border-radius-large: 12px; +} .cursor-pointer { cursor: pointer; } @@ -27,49 +35,61 @@ .semi-layout { min-height: 100vh; } -.text-center{ + +.text-center { text-align: center; } -.text-right{ + +.text-right { text-align: right; } .space-between { justify-content: space-between; } -.space-center{ + +.space-center { justify-content: center; } -.no-wrap{ + +.no-wrap { white-space: nowrap; } + .align-center { display: flex; align-items: center; } -.money-format{ + +.money-format { white-space: nowrap; } -.btn-auth-login{ + +.btn-auth-login { box-sizing: border-box; text-decoration: none; + border-radius: 10px; } + .page-content-container { max-width: 90%; width: 1400px; margin: auto; } -.main-bg-container{ - .main-content{ + +.main-bg-container { + .main-content { } } + .main-bg-container { background: url(./images/auth/bg.jpg); background-attachment: fixed; - .main-content{ + + .main-content { display: flex; - align-items:center; + align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(2px); @@ -80,30 +100,80 @@ } } +/***************** semi overrides ****************/ .semi-dropdown-item-active { background-color: var(--semi-color-default-active); } -.semi-tabs{ - &.no-border{ - .semi-tabs-bar-line.semi-tabs-bar-top{ - border-bottom: none; + +.semi-tabs { + &.no-border { + .semi-tabs-bar-line.semi-tabs-bar-top { + border-bottom: none; } } } -.semi-radio-inner{ + +.semi-radio-inner { width: 20px; height: 20px; - .semi-radio-inner-display{ + + .semi-radio-inner-display { width: 20px; height: 20px; - .semi-icon{ + + .semi-icon { font-size: 18px; } } } +// input +.semi-input-wrapper, .semi-select,.semi-datepicker-range-input { + background-color: transparent; + border: 1px var(--semi-color-fill-2) solid; + border-radius: var(--semi-border-radius-small); + + &:hover, &:focus { + background-color: transparent; + border: 1px solid var(--semi-color-focus-border); + } +} + +.semi-input-wrapper-focus, +.semi-datepicker-range-input-active, +.semi-datepicker-range-input-active:focus-within{ + background-color: transparent; + border: 1px solid var(--semi-color-focus-border); +} + +.semi-input-wrapper-error { + border: 1px solid #FF4D4F; + color: #FF4D4F; + + .semi-input { + &::placeholder { + color: #FF4D4F; + } + } +} +.semi-datepicker-range-input{ + .semi-input-wrapper,.semi-input-wrapper-focus,.semi-datepicker-range-input-wrapper-active { + background-color: transparent; + border: 1px transparent solid; + border-radius: var(--semi-border-radius-small); + + &:hover, &:focus { + background-color: transparent; + border: 1px solid transparent; + } + } +} + +/************ end overrides ****************/ + .dashboard-menu-container { - padding: var(--dashboard-layout-padding,15px); + padding: var(--dashboard-layout-padding, 15px); + .nav-item { padding: 15px; display: flex; @@ -111,21 +181,39 @@ text-decoration: none; border-radius: 10px; color: #999999; - .svg-icon{ + + .svg-icon { font-size: 22px; } - .menu-text{ + + .menu-text { margin-left: 10px; font-size: 14px; } + &.active { background-color: #fff; - .svg-icon{ + + .svg-icon { color: #FFC65F; } - .menu-text{ + + .menu-text { color: #2D3748; } } } +} +.dashboard-layout{ + min-width: 1000px; +} +@media screen and (max-width: 1280px) { + :root { + --dashboard-navigation-width: 200px; + } + .dashboard-menu-container .nav-item{ + .menu-text{ + //display: none; + } + } } \ No newline at end of file diff --git a/src/components/bill/bill.less b/src/components/bill/bill.less index d20df50..639a5fb 100644 --- a/src/components/bill/bill.less +++ b/src/components/bill/bill.less @@ -16,13 +16,17 @@ display: flex; align-items: center; margin-right: 5px; - + --active-color:#00C479; + &.current-amount{ + --active-color:#FF8432; + } &:before { content: ' '; width: 6px; height: 6px; display: block; - background-color: #00C479; + background-color: var(--active-color); + border: solid 2px #efefef; margin-right: 5px; border-radius: 50%; } diff --git a/src/components/bill/list.tsx b/src/components/bill/list.tsx index 468049d..0934c7d 100644 --- a/src/components/bill/list.tsx +++ b/src/components/bill/list.tsx @@ -174,7 +174,7 @@ export const BillList: React.FC = (props) => {
- {t('bill.query_amount_current_page')} : + {t('bill.query_amount_current_page')} :
} diff --git a/src/components/bill/search-form.tsx b/src/components/bill/search-form.tsx index b3ad3ad..46fa3ce 100644 --- a/src/components/bill/search-form.tsx +++ b/src/components/bill/search-form.tsx @@ -47,6 +47,9 @@ const SearchForm: React.FC = (props) => { if (value.bill_status) { params.status = value.bill_status; } + if(props.showApply){ + params.status = 'PAID' + } // 支付方式 if (value.payment_channel) { params.payment_channel = value.payment_channel; @@ -74,20 +77,20 @@ const SearchForm: React.FC = (props) => {
onSubmit={formSubmit}> - + - + - + - + ASIAPAY @@ -95,21 +98,23 @@ const SearchForm: React.FC = (props) => { PPS - - - {billStatusOptions.map((item, index) => ( - {item.label}))} - - - {props.showApply && - - {applyStatusOptions.map((item, index) => ( - {item.label}))} - - } - + {props.showApply && <> + + + {billStatusOptions.map((item, index) => ( + {item.label}))} + + + + + {applyStatusOptions.map((item, index) => ( + {item.label}))} + + + } + diff --git a/src/components/card/card.less b/src/components/card/card.less index d2f6625..93ef196 100644 --- a/src/components/card/card.less +++ b/src/components/card/card.less @@ -7,7 +7,7 @@ .card-header { margin-bottom: 10px; - color: #666; + color: #333; display: flex; justify-content: space-between; align-items: flex-start; diff --git a/src/pages/bill/reconciliation.tsx b/src/pages/bill/reconciliation.tsx index e43886f..585f0b2 100644 --- a/src/pages/bill/reconciliation.tsx +++ b/src/pages/bill/reconciliation.tsx @@ -8,7 +8,9 @@ import {useState} from "react"; const BillReconciliation = () => { const {t} = useTranslation() - const [queryParams, setBillQueryParams] = useSetState({}); + const [queryParams, setBillQueryParams] = useSetState({ + status:'PAID' + }); const {data, loading,refresh} = useRequest(() => billList(queryParams), { refreshDeps: [queryParams] }) diff --git a/src/pages/manual/index.tsx b/src/pages/manual/index.tsx index 8e5f535..6e82aa6 100644 --- a/src/pages/manual/index.tsx +++ b/src/pages/manual/index.tsx @@ -68,7 +68,7 @@ export default function Index() { layout='horizontal' onValueChange={() => setState({errorMessage: ''})} onSubmit={handleSubmit} ref={frm}>
- + {state.errorMessage &&
{state.errorMessage}
} diff --git a/src/pages/pay/result.tsx b/src/pages/pay/result.tsx index 065af8e..15d301f 100644 --- a/src/pages/pay/result.tsx +++ b/src/pages/pay/result.tsx @@ -19,7 +19,7 @@ const PayIndex = () => { const {t} = useTranslation() const {downloadPDF} = useDownloadReceiptPDF() const [state, setState] = useSetState<{ - from?: 'asia_spay' | 'flywire' | string; + from?: 'ASIAPAY' | 'FLYWIRE' | string; result?: PayResult; id?: string; bill?: BillModel diff --git a/src/routes/layout/dashboard-layout.tsx b/src/routes/layout/dashboard-layout.tsx index 2220c48..190440d 100644 --- a/src/routes/layout/dashboard-layout.tsx +++ b/src/routes/layout/dashboard-layout.tsx @@ -110,13 +110,13 @@ export const BaseLayout: React.FC = ({children}) => { return nav?.key }, [location.pathname]) - return ( + return ( - +