project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update app theme style

Browse Source
This commit is contained in:
LittleBoy 2024-06-10 11:40:39 +08:00
parent 33f2341ed3
commit 33c729c8be
10 changed files with 156 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -10,6 +10,7 @@ lerna-debug.log*
node_modules
dist
dist-ssr
test
*.local
# Editor directories and files

138
src/assets/index.less
View File

@ -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;
}
}
}

8
src/components/bill/bill.less
View File

@ -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%;
}

2
src/components/bill/list.tsx
View File

@ -174,7 +174,7 @@ export const BillList: React.FC<BillListProps> = (props) => {
<MoneyFormat money={props.source?.pagination.recordTotal || 0}/>
</div>
<div className="bill-info-item">
<span className="bill-info-title">{t('bill.query_amount_current_page')} :</span>
<span className="bill-info-title current-amount">{t('bill.query_amount_current_page')} :</span>
<MoneyFormat money={currentTotalAmount || 0}/>
</div>
</div>}

43
src/components/bill/search-form.tsx
View File

@ -47,6 +47,9 @@ const SearchForm: React.FC<SearchFormProps> = (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<SearchFormProps> = (props) => {
<div className="bill-search-form">
<Form<SearchFormFields> onSubmit={formSubmit}>
<Row type={'flex'} gutter={20}>
<Col span={4} md={6}>
<Col xxl={4} xl={6} md={8}>
<Form.DatePicker type={'dateRange'} field="dateRange" label={t('bill.bill_date')}
style={{width: '100%'}}>
</Form.DatePicker>
</Col>
<Col span={4} md={6}>
<Col xxl={4} xl={6} md={8}>
<Form.Input field='student_number' label={t('base.student_number')} trigger='blur'
placeholder={t('base.please_enter')}/>
</Col>
<Col span={4} md={6}>
<Col xxl={4} xl={6} md={8}>
<Form.Input field='application_number' label={t('base.bill_number')} trigger='blur'
placeholder={t('base.please_enter')}/>
</Col>
<Col span={4} md={6}>
<Col xxl={4} xl={6} md={8}>
<Form.Select showClear field="payment_channel" label={t('bill.title_pay_method')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
<Form.Select.Option value="ASIAPAY">ASIAPAY</Form.Select.Option>
@ -95,21 +98,23 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
<Form.Select.Option value="PPS">PPS</Form.Select.Option>
</Form.Select>
</Col>
<Col span={4} md={6}>
<Form.Select showClear field="bill_status" label={t('bill.pay_status')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
{billStatusOptions.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Form.Select>
</Col>
{props.showApply && <Col span={4} md={6}>
<Form.Select showClear field="apply_status" label={t('bill.title_reconciliation_status')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
{applyStatusOptions.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Form.Select>
</Col>}
<Col span={4} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}>
{props.showApply && <>
<Col xxl={4} xl={6} md={8}>
<Form.Select showClear field="bill_status" label={t('bill.pay_status')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
{billStatusOptions.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Form.Select>
</Col>
<Col xxl={4} xl={6} md={8}>
<Form.Select showClear field="apply_status" label={t('bill.title_reconciliation_status')}
placeholder={t('base.please_select')} style={{width: '100%'}}>
{applyStatusOptions.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
</Form.Select>
</Col>
</>}
<Col xxl={4} xl={6} md={8} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}>
<Button loading={props.loading} style={{width: 100}} htmlType={'submit'} theme={'solid'}
type={'primary'}>{t('base.btn_search_submit')}</Button>
</Col>

2
src/components/card/card.less
View File

@ -7,7 +7,7 @@
.card-header {
margin-bottom: 10px;
color: #666;
color: #333;
display: flex;
justify-content: space-between;
align-items: flex-start;

4
src/pages/bill/reconciliation.tsx
View File

@ -8,7 +8,9 @@ import {useState} from "react";
const BillReconciliation = () => {
const {t} = useTranslation()
const [queryParams, setBillQueryParams] = useSetState<BillQueryParams>({});
const [queryParams, setBillQueryParams] = useSetState<BillQueryParams>({
status:'PAID'
});
const {data, loading,refresh} = useRequest(() => billList(queryParams), {
refreshDeps: [queryParams]
})

8
src/pages/manual/index.tsx
View File

@ -68,7 +68,7 @@ export default function Index() {
layout='horizontal' onValueChange={() => setState({errorMessage: ''})}
onSubmit={handleSubmit} ref={frm}>
<Form.Select
field="bill_type" style={{width: 176}}
field="bill_type" style={{width: 200}}
label={t('manual.bill_type')}
placeholder={t('manual.bill_type')}
rules={[{required: true, message: t('manual.bill_type_required')}]}
@ -79,7 +79,7 @@ export default function Index() {
}
</Form.Select>
<Form.Input
field='amount' label={t('manual.amount')} style={{minWidth: 120}}
field='amount' label={t('manual.amount')} style={{minWidth: 200}}
placeholder={t('manual.amount')}
rules={[
{required: true, message: t('manual.amount_required')},
@ -94,13 +94,13 @@ export default function Index() {
]}
/>
<Form.Input
field='student_number' label={t('manual.student_number')} style={{minWidth: 150}}
field='student_number' label={t('manual.student_number')} style={{minWidth: 200}}
placeholder={t('manual.student_number')}
rules={[{required: true, message: t('manual.student_number_required')}]}
/>
<div className={styles.generateButtonContainer}>
<Space>
<Button loading={state.loading} htmlType="submit">{t('manual.btn_generate')}</Button>
<Button loading={state.loading} htmlType="submit" theme={'solid'}>{t('manual.btn_generate')}</Button>
{state.errorMessage && <div className={'semi-form-field-error-message'}>
<IconAlertTriangle/>{state.errorMessage}</div>}
</Space>

2
src/pages/pay/result.tsx
View File

@ -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

4
src/routes/layout/dashboard-layout.tsx
View File

@ -110,13 +110,13 @@ export const BaseLayout: React.FC<LayoutProps> = ({children}) => {
return nav?.key
}, [location.pathname])
return (<Layout>
return (<Layout className={'dashboard-layout'}>
<CommonHeader/>
<Layout style={{
backgroundColor: '#f8f9fa',
minHeight: 'calc(100vh - var(--dashboard-header-height,50px))',
}}>
<Sider style={{minWidth: 'var(--dashboard-navigation-width,250px)'}}>
<Sider style={{minWidth: 'var(--dashboard-navigation-width,250px)',transition:'all 0.5s'}}>
<DashboardNavigation/>
</Sider>
<Content style={{padding: 'var(--dashboard-layout-padding)'}}>