Commit 02e45b8d authored by maple's avatar maple

[new]提交

parent fe1f28aa
Pipeline #131 failed with stages
......@@ -2,6 +2,8 @@
import { defineConfig } from 'umi';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import component from '@/locales/en-US/component';
import route from 'mock/route';
const { REACT_APP_ENV } = process.env;
......@@ -43,6 +45,11 @@ export default defineConfig({
path: '/user/login',
component: './user/login',
},
{
name: 'login',
path: '/user/forget',
component: './user/login',
},
],
},
{
......@@ -56,45 +63,134 @@ export default defineConfig({
routes: [
{
path: '/',
redirect: '/welcome',
redirect: '/runTest',
},
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
path: '/runTest',
name: 'Monitoring Center',
icon: 'PieChartOutlined',
component: './runTest/Template',
},
// {
// path: '/runTest',
// component: './runTest/Template',
// },
{
path: '/admin',
name: 'admin',
icon: 'crown',
component: './Admin',
authority: ['admin'],
path: '/UserManagement',
name: 'User Management',
icon:'ProfileOutlined',
routes: [
{
path: '/admin/sub-page',
name: 'sub-page',
icon: 'smile',
component: './Welcome',
authority: ['admin'],
path: '/UserManagement/LIFEUserManagement',
name: 'LIFE Users',
component:'./UserManagement/LIFEUserManagement/LIFEUserManagement'
},
],
{
path: '/UserManagement/ServiceProviderManagement',
name: 'Service Providers',
component:'./UserManagement/ServiceProviderManagement/ServiceProviderManagement'
},
]
},
{
name: 'welcome',
icon: 'table',
path: '/runTest',
component: './runTest/Template',
path: '/PropertyManagement/PropertyManagement',
name: 'Property Management',
icon:'ReconciliationOutlined',
component:'./runTest/Template'
},
{
name: 'welcome',
icon: 'table',
path: '/runTest2',
component: './runTest/Template',
path: '/CommercialService',
name: 'Commercial Service',
icon:'ConsoleSqlOutlined',
routes: [
{
path: '/CommercialService/OwnerComplaints',
name: 'Owner Complaints',
component:'./runTest/Template'
},
{
path: '/CommercialService/ProblemFeedback',
name: 'Problem Feedback',
component:'./runTest/Template'
},
{
path: '/CommercialService/RenovationApplication',
name: 'Renovation Application',
component:'./runTest/Template'
},
{
path: '/CommercialService/AccessCardApplication',
name: 'AccessCard Application',
component:'./runTest/Template'
},
{
path: '/CommercialService/Report Online',
name: 'Report Online',
component:'./runTest/Template'
},
{
path: '/CommercialService/Shelf life Service',
name: 'Shelf life Service',
component:'./runTest/Template'
},
]
},
{
path: '/OrderManagement/OrderManagement',
name: 'Order Management',
icon: 'ContainerOutlined',
component:'./runTest/Template'
},
{
path: '/ContractManagement/ContractManagement',
name: 'Contract Management',
icon: 'SwitcherOutlined',
component:'./runTest/Template'
},
{
path: '/CommunityManagement',
name: 'Community Management',
icon:'HddOutlined',
routes: [
{
path: '/CommunityManagement/CellList',
name: 'Cell List',
component:'./runTest/Template'
},
{
path: '/CommunityManagement/CommunityAnnouncement',
name: 'Community Announcement',
component:'./runTest/Template'
},
{
path: '/CommunityManagement/FacilityBookings',
name: 'Facility Bookings',
component:'./runTest/Template'
},
{
path: '/CommunityManagement/VisitorRecord',
name: 'Visitor Record',
component:'./runTest/Template'
},
]
},
{
path: '/AccountManagement',
name: 'Account Management',
icon:'UserSwitchOutlined',
routes: [
{
path: '/AccountManagement/AccountManagement',
name: 'Account Management',
component:'./runTest/Template'
},
{
path: '/AccountManagement/CompanyInformation',
name: 'Company Information',
component:'./runTest/Template'
},
{
path: '/AccountManagement/LanguageSettings',
name: 'Language Settings',
component:'./runTest/Template'
},
]
},
{
component: './404',
......
......@@ -79,7 +79,7 @@ export default {
],
'POST /api/login/account': (req: Request, res: Response) => {
const { password, userName, type } = req.body;
if (password === 'ant.design' && userName === 'admin') {
if (password === 'admin' && userName === 'admin') {
res.send({
status: 'ok',
type,
......
......@@ -27,10 +27,9 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
if (theme === 'dark' && layout === 'topmenu') {
className = `${styles.right} ${styles.dark}`;
}
return (
<div className={className}>
<HeaderSearch
{/* <HeaderSearch
className={`${styles.action} ${styles.search}`}
placeholder="站内搜索"
defaultValue="umi ui"
......@@ -52,8 +51,8 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
// onSearch={value => {
// //console.log('input', value);
// }}
/>
<Tooltip title="使用文档">
/> */}
{/* <Tooltip title="使用文档">
<a
target="_blank"
href="https://pro.ant.design/docs/getting-started"
......@@ -62,14 +61,14 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
>
<QuestionCircleOutlined />
</a>
</Tooltip>
</Tooltip> */}
<Avatar />
{REACT_APP_ENV && (
<span>
<Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
</span>
)}
<SelectLang className={styles.action} />
{/* <SelectLang className={styles.action} /> */}
</div>
);
};
......
......@@ -14,7 +14,7 @@
.right {
display: flex;
float: right;
height: @layout-header-height;
height: 64px;//@layout-header-height;
margin-left: auto;
overflow: hidden;
.action {
......
......@@ -141,20 +141,20 @@ class SelectOptions extends React.Component {
{
this.state.componetVisible=="展开"?
<div style={{width:"100%",height:30, position:"relative"}}>
<div style={{width:"100%",height:48, position:"relative"}}>
<div style={{ position:"absolute",left:5,top:5}}>已选{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div>
<div style={{ position:"absolute",right:5,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
</div>
:
<div style={{width:"100%",backgroundColor:"#eeeeee"}}>
<div style={{width:"100%",height:30, position:"relative"}}>
<div style={{width:"100%",height:48, position:"relative"}}>
<div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?'全不选':'已选'}{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div>
<div style={{ position:"absolute",right:5,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
</div>
<div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}>
<div style={{width:"100%",height:40, position:"relative"}}>
<div style={{fontSize:14,position:"absolute"}}>
<a style={{marginLeft:10}} onClick={this.itemSelectAll.bind(this)}>所有</a>
<a style={{marginLeft:16}} onClick={this.itemSelectAll.bind(this)}>所有</a>
{
menuListNormal.map((item, index) => {
if(this.state.menuList.indexOf(item)>-1){
......@@ -168,15 +168,15 @@ class SelectOptions extends React.Component {
<Checkbox style={{ position:"absolute",right:100}} indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>全选</Checkbox>
<Checkbox style={{ position:"absolute",right:0}} onChange={this.onCheckAllChangeOver} checked={this.state.checkNone} >全不选</Checkbox>
</div>
<div style={{width:"100%",paddingLeft:10,paddingRight:10}}>
<div style={{width:"100%",paddingLeft:16,paddingRight:16}}>
<div style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}>
<div><h1> </h1></div>
<Input.Search placeholder="搜索小区" onSearch={this.getSearchValue.bind(this)} style={{width:200}} />
<Input.Search placeholder="搜索小区" onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} />
<div><h1> </h1></div>
<CheckboxGroup
options={ this.state.checkedListOptions}
value={this.state.checkedList}
onChange={this.onChangeValue}/>
onChange={this.onChangeValue} style={{marginLeft:16}}/>
<div><h1> </h1></div>
</div>
</div>
......
......@@ -18,6 +18,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
import { ConnectState } from '@/models/connect';
import { getAuthorityFromRouter } from '@/utils/utils';
import logo from '../assets/logo.svg';
import tsIcon from '../assets/logo.png';
const noMatch = (
<Result
......@@ -128,10 +129,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
logo={logo}
formatMessage={formatMessage}
menuHeaderRender={(logoDom, titleDom) => (
<Link to="/">
{logoDom}
{titleDom}
</Link>
<div style={{ marginLeft: -25, width: 260, height: 64, backgroundColor: "#ffffff",paddingLeft:16,paddingTop:10}}>
<img src={tsIcon} style={{width:50,height:50}}/><span style={{fontSize:18,fontFamily:"Source Han Sans CN",fontWeight:"bold",color:"rgba(51,51,51,1)"}}> TOS Management</span>
</div>
// <Link to="/">
// {/* {logoDom} */}
// {titleDom}
// </Link>
)}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => {
......
......@@ -36,11 +36,15 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
const { children, loading, currentUser } = this.props;
// You can replace it to your authentication rule (such as check token exists)
// 你可以把它替换成你自己的登录认证规则(比如判断 token 是否存在)
const isLogin = currentUser && currentUser.userid;
const isLogin = currentUser && currentUser.userid;//isLogin为关键点
const queryString = stringify({
redirect: window.location.href,
});
if ((!isLogin && loading) || !isReady) {
return <PageLoading />;
}
......
......@@ -6,6 +6,19 @@
height: 100vh;
overflow: auto;
background: @layout-body-background;
background-image: url("../assets/background.png");
background-repeat: no-repeat;
background-position: center left;
margin-left: -44px;
}
.contain{
width: 700px;
height: 300px;
position: absolute;
left: 207px;
top: 50vh;
margin-top: -297px;
}
.lang {
......@@ -18,21 +31,25 @@
}
}
.content {
flex: 1;
padding: 32px 0;
}
@media (min-width: @screen-md-min) {
@media (min-width:1603px) {
.container {
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-image: url("../assets/background.png");
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
background-position: center center;
//background-size: 100%;
// background-size:100% 100%;
// background-attachment: fixed;
}
.content {
padding: 32px 0 24px;
.contain{
width: 700px;
height: 300px;
position: absolute;
left: 50vw;
top:50vh;
margin-left: -639px;
margin-top: -297px;
}
}
......@@ -69,3 +86,21 @@
color: @text-color-secondary;
font-size: @font-size-base;
}
.box1{
font-size:36px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(129,152,177,1);
line-height:48px;
margin-bottom: 26px;
}
.box2{
font-size:38px;
font-family:PingFang SC;
font-weight:800;
color:rgba(0,43,96,1);
line-height:48px;
margin-bottom: 89px;
}
\ No newline at end of file
......@@ -5,6 +5,7 @@ import React from 'react';
import SelectLang from '@/components/SelectLang';
import { ConnectState } from '@/models/connect';
import logo from '../assets/logo.svg';
import styles from './UserLayout.less';
export interface UserLayoutProps extends Partial<ConnectProps> {
......@@ -35,31 +36,15 @@ const UserLayout: React.FC<UserLayoutProps> = (props) => {
...props,
});
return (
<HelmetProvider>
<Helmet>
<title>{title}</title>
<meta name="description" content={title} />
</Helmet>
<div className={styles.container}>
<div className={styles.lang}>
<SelectLang />
</div>
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/">
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>Ant Design</span>
</Link>
</div>
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
</div>
<div className={styles.contain}>
<div className={styles.box1}>Welcome To</div>
<div className={styles.box2}>TOS Management Background</div>
{children}
</div>
<DefaultFooter />
</div>
</HelmetProvider>
);
};
......
import React from 'react';
import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { Card, Typography, Alert } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
export default (): React.ReactNode => (
<PageHeaderWrapper content=" 这个页面只有 admin 权限才能查看">
<Card>
<Alert
message="umi ui 现已发布,欢迎使用 npm run ui 启动体验。"
type="success"
showIcon
banner
style={{
margin: -12,
marginBottom: 48,
}}
/>
<Typography.Title level={2} style={{ textAlign: 'center' }}>
<SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
</Typography.Title>
</Card>
<p style={{ textAlign: 'center', marginTop: 24 }}>
Want to add more pages? Please refer to{' '}
<a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
use block
</a>
</p>
</PageHeaderWrapper>
);
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch ,getLocale, setLocale} from 'umi';
const locales = ['zh-CN','en-US'];
const LIFEUserManagement = () => {
const languageSelect = (e) => {
setLocale(locales[e.target.value])
};
const [curLang, setCurLang] = useState(0);
useEffect(() => {
if (getLocale() == "en-US") {
setCurLang(1)
} else {
setCurLang(0)
}
}, [curLang]);
return (
<div className={styles.base}>
<div className={styles.box}>Language Selection</div>
<Radio.Group onChange={languageSelect} value={curLang} >
<div className={styles.box}><Radio value={0}>Chinese</Radio></div>
<div className={styles.box}><Radio value={1}>English</Radio></div>
</Radio.Group>
</div>
);
};
export default LIFEUserManagement;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
.box{
margin-bottom: 28px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space} from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import SelectOptions from '../../../components/SelectOptions/index';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
];
const ServiceProviderManagement = () => {
const { formatMessage } = useIntl();
const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
const inputProject = formatMessage({ id: 'R.charge.input.project' })
const username = formatMessage({ id: 'R.charge.username' })
const project = formatMessage({ id: 'R.charge.project' })
const unit = formatMessage({ id: 'R.charge.unit' })
const status = formatMessage({ id: 'R.charge.status' })
const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
const actions = formatMessage({ id: 'R.charge.actions' })
const search = formatMessage({ id: 'R.charge.search' })
const addaccount = formatMessage({ id: 'R.charge.addaccount' })
const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
const menuListNormal = ["A"]
const [display, setDisplay] = useState("A");//小组件:线框
const pagination={defaultCurrent:1,total: 16}
const columns = [
{
title: username,
dataIndex: 'name',
key: 'name',
},
{
title: project,
dataIndex: 'age',
key: 'age',
},
{
title: unit,
dataIndex: 'address',
key: 'address',
},
{
title: status,
dataIndex: 'address',
key: 'address',
},
{
title: submissionTime,
dataIndex: 'address',
key: 'address',
},
{
title: actions,
key: 'action',
render: (text: any, record: any) => (
<Space size="middle">
<a>详情</a>
</Space>
),
},
];
const printContent = (comment: any)=>{
console.log(comment)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<input className={styles.item1} placeholder={nameofowner} />
</div>
<SelectOptions list={["美国","美丽的","美好","加拿大","加油","XO"].sort()} onSubmit={printContent}/>
<button className={styles.item3}>{search}</button>
{/* 内容组件 */}
<div className={styles.box2}>
<button className={styles.buttonAdd2} >Avail Services</button>
<button className={styles.buttonAdd} >Create New</button>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
</div>
);
};
export default ServiceProviderManagement;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
}
//边栏1
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.input{
width:200px;
height:32px;
background:none;
outline: none;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
font-size:14px;
font-weight:400;
line-height:30px;
text-indent: 19px;
}
.item1{
.input();
}
.item2{
.input();
margin-left: 20px;
}
.item3{
width:80px;
height:32px;
border:1px solid rgba(24,144,255,1);
border-radius:2px;
background-color:#e7f4ff;
outline: none;
font-size:14px;
font-weight:400;
color:rgba(24,144,255,1);
line-height:30px;
cursor: pointer;
margin-top: 16px;
}
.item3:active{
background-color:#ffffff;
}
//边栏2
.box2{
width: 100%;
height: 40px;
margin-top: 0px;
position: relative;
}
//小组件1
.buttonLine{
width:200px;
height:32px;
border:none;
background:none;
outline: none;
font-size:14px;
font-weight:400;
line-height:30px;
cursor: pointer;
}
.buttonWait{
.buttonLine();
border-bottom:2px solid#dedede;
color:#454545;
}
.buttonWait:hover{
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonChoose{
.buttonLine();
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonAdd{
background:none;
outline: none;
cursor: pointer;
font-size:14px;
width:154px;
height:32px;
border:1px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
border-radius:2px;
position: absolute;
right: 0;
}
.buttonAdd2{
.buttonAdd();
right: 168px;
}
@import '~antd/lib/style/themes/default.less';
.pre {
margin: 12px 0;
padding: 12px 20px;
background: @input-bg;
box-shadow: @card-shadow;
}
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Typography, Alert } from 'antd';
import styles from './Welcome.less';
const CodePreview: React.FC<{}> = ({ children }) => (
<pre className={styles.pre}>
<code>
<Typography.Text copyable>{children}</Typography.Text>
</code>
</pre>
);
export default (): React.ReactNode => (
<PageHeaderWrapper>
<Card>
<Alert
message="umi ui 现已发布,点击右下角 umi 图标即可使用"
type="success"
showIcon
banner
style={{
margin: -12,
marginBottom: 24,
}}
/>
<Typography.Text strong>
<a target="_blank" rel="noopener noreferrer" href="https://pro.ant.design/docs/block">
基于 block 开发,快速构建标准页面
</a>
</Typography.Text>
<CodePreview> npm run ui</CodePreview>
<Typography.Text
strong
style={{
marginBottom: 12,
}}
>
<a
target="_blank"
rel="noopener noreferrer"
href="https://pro.ant.design/docs/available-script#npm-run-fetchblocks"
>
获取全部区块
</a>
</Typography.Text>
<CodePreview> npm run fetch:blocks</CodePreview>
</Card>
<p
style={{
textAlign: 'center',
marginTop: 24,
}}
>
Want to add more pages? Please refer to{' '}
<a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
use block
</a>
</p>
</PageHeaderWrapper>
);
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';
import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import {
PlusCircleOutlined,
} from '@ant-design/icons';
const Template = () => {
const [state, setState] = useState(false)
const [state2,setState2] = useState(false)
const [currentvalue, setCurrentvalue] = useState('')
const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
const showModal = (value,e) => {
setState(true)
setCurrentvalue(value)
};
const handleOk = (e) => {
setState(false)
let serviceNew = service
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
serviceNew.remove(currentvalue)
setServices(serviceNew)
};
const handleCancel = (e) => {
setState(false)
};
const addModal = (e) => {
setState2(true)
};
const handleOk2 =(e) => {
setState2(false);
let serviceNew = service
serviceNew.push(currentvalue)
setServices(serviceNew)
};
const handleCancel2 = (e) => {
setState2(false)
};
const changeCurentvalue = (e) => {
setCurrentvalue(e.target.value)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Payment Settings</div>
<div className={styles.item1}>Services Available Management</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Services Available</div>
<div className={styles.box1item2}>
{
service.map((item, index) => {
return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
})
}
<div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}} onClick={addModal} /></div>
</div>
</div>
<div style={{ clear:"both"}}></div>
<div className={styles.line}></div>
<Button type="primary" size="large">提交</Button>
<div>
<Modal title="删除该选项" visible={state} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
<p>is delete service?</p>
</Modal>
<Modal title="新增该选项" visible={state2} onOk={handleOk2} onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
<Input style={{width:300}} onChange={changeCurentvalue} />
</Modal>
</div>
</div>
);
};
export default Template;
......@@ -16,7 +16,7 @@
}
.item1{
position: absolute;
width: 180px;
width: 400px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
......@@ -38,3 +38,67 @@
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 780px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
line-height: 34px;
}
.box1item2{
padding-left: 167px;
}
.item2x0{
width: 120px;
height: 34px;
background-color: rgba(238,238,238,1);
border: 1px solid rgba(217,217,217,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
}
.item2x1{
width: 120px;
height: 34px;
border: 1px solid rgba(217,217,217,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
cursor: pointer;
}
.item2x1:hover{
width: 120px;
height: 34px;
border: 1px solid rgba(24,144,255,1);
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
cursor: pointer;
}
.item2x3{
width: 120px;
height: 34px;
float: left;
text-align: center;
line-height: 34px;
margin: 10px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
const Template = () => {
return (
<div className={styles.base}>
<div className={styles.box1}>
<div className={styles.box1item1}>Management Company</div>
<div className={styles.box1item2}>Singapore Management Company</div>
<div className={styles.box1item3}> <Button>Edit</Button></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Number</div>
<div className={styles.box2item2}><Input style={{width:200}} /></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Email</div>
<div className={styles.box2item2}><Input style={{width:200}}/></div>
</div>
</div>
);
};
export default Template;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 197px;
}
.box1item3{
position: absolute;
right: 0;
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 158px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
const Template = () => {
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Add Admin Account</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Account ID</div>
<div className={styles.box1item2}><Input/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Administrator Name</div>
<div className={styles.box2item2}><Input/></div>
<div className={styles.box2item3}>Contact Details</div>
<div className={styles.box2item4}><Input/></div>
</div>
<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
<div className={styles.box3}>
<div className={styles.box3item1}>Permission Configuration</div>
<div className={styles.box3item2}>
<div className={styles.box3item2R}><Radio>Secondary Administrator</Radio></div>
<div className={styles.box3item2R}><Radio>Three Level Administrator</Radio></div>
<div className={styles.box3item2R}><Radio>Select All</Radio></div>
</div>
<div className={styles.box3item3}>
<Input />
</div>
</div>
</div>
);
};
export default Template;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 182px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 182px;
}
.box2item3{
position: absolute;
left: 537px;
}
.box2item4{
position: absolute;
left: 652px;
}
.box3{
width: 100%;
position: relative;
margin-top: 20px;
}
.box3item1{
position: absolute;
}
.box3item2{
padding-left: 182px;
}
.box3item2R{
bottom: 20px;
}
.box3item3{
position: absolute;
left: 435px;
top:19px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space} from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
];
const ChargeManager = () => {
const { formatMessage } = useIntl();
const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
const inputProject = formatMessage({ id: 'R.charge.input.project' })
const username = formatMessage({ id: 'R.charge.username' })
const project = formatMessage({ id: 'R.charge.project' })
const unit = formatMessage({ id: 'R.charge.unit' })
const status = formatMessage({ id: 'R.charge.status' })
const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
const actions = formatMessage({ id: 'R.charge.actions' })
const search = formatMessage({ id: 'R.charge.search' })
const addaccount = formatMessage({ id: 'R.charge.addaccount' })
const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
const menuListNormal = ["A"]
const [display, setDisplay] = useState("A");//小组件:线框
const pagination={defaultCurrent:1,total: 16}
const columns = [
{
title: username,
dataIndex: 'name',
key: 'name',
},
{
title: project,
dataIndex: 'age',
key: 'age',
},
{
title: unit,
dataIndex: 'address',
key: 'address',
},
{
title: status,
dataIndex: 'address',
key: 'address',
},
{
title: submissionTime,
dataIndex: 'address',
key: 'address',
},
{
title: actions,
key: 'action',
render: (text: any, record: any) => (
<Space size="middle">
<a>详情</a>
</Space>
),
},
];
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<input className={styles.item1} placeholder={nameofowner} />
<input className={styles.item2} placeholder={inputProject} />
<input className={styles.item4} placeholder="" />
<button className={styles.item3}>{search}</button>
</div>
{/* 内容组件 */}
<div className={styles.box2}>
<button className={styles.buttonAdd} >{paymentsetting}</button>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
</div>
);
};
export default ChargeManager;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
}
//边栏1
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.input{
width:200px;
height:32px;
background:none;
outline: none;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
font-size:14px;
font-weight:400;
line-height:30px;
text-indent: 19px;
}
.item1{
.input();
}
.item2{
.input();
margin-left: 20px;
}
.item4{
.input();
margin-left: 20px;
}
.item3{
width:80px;
height:32px;
border:1px solid rgba(24,144,255,1);
border-radius:2px;
background-color:#e7f4ff;
outline: none;
font-size:14px;
font-weight:400;
color:rgba(24,144,255,1);
line-height:30px;
cursor: pointer;
margin-left: 20px;
}
.item3:active{
background-color:#ffffff;
}
//边栏2
.box2{
width: 100%;
height: 40px;
margin-top: 0px;
position: relative;
}
//小组件1
.buttonLine{
width:200px;
height:32px;
border:none;
background:none;
outline: none;
font-size:14px;
font-weight:400;
line-height:30px;
cursor: pointer;
}
.buttonWait{
.buttonLine();
border-bottom:2px solid#dedede;
color:#454545;
}
.buttonWait:hover{
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonChoose{
.buttonLine();
border-bottom:3px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
}
.buttonAdd{
background:none;
outline: none;
cursor: pointer;
width:148px;
height:32px;
border:1px solid rgba(24,144,255,1);
color:rgba(24,144,255,1);
border-radius:2px;
position: absolute;
right: 0;
}
.buttonAdd2{
.buttonAdd();
right: 168px;
}
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import { PlusOutlined } from '@ant-design/icons';
import SelectOptions from '../../components/SelectOptions/index';
const printContent = (comment: any)=>{
console.log(comment)
}
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Template = () => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const handleCancel = () =>{ setPreviewVisible(false) };
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage((file.url || file.preview));
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Community Announcement</div>
<button className={styles.item3}>返回</button>
</div>
<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
<div className={styles.box1}>
<div className={styles.box1item1}>Announcement Title</div>
<div className={styles.box1item2}><Input style={{width:500}}/></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Announcement Title</div>
<div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
</div>
<div className={styles.box3}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>Entry into Force Time</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
< div className = { styles.box4 } >
<div className={styles.box4item1}>End Date</div>
<div className={styles.box4item2}><DatePicker/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default Template;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
margin-top: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 206px;
}
.box2{
width: 100%;
height: 120px;
position: relative;
margin-bottom: 17px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 206px;
}
.box3{
padding-left: 206px;
margin-bottom: 28px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 206px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import SelectOptions from '../../components/SelectOptions/index';
const Template = () => {
const printContent = (comment: any)=>{
console.log(comment)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Edit Service Provider</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Company Name</div>
<div className={styles.box1item2}><Input style={{width:260}} placeholder="Please enter company name"/></div>
<div className={styles.box1item3}>Office Address</div>
<div className={styles.box1item4}><Input style={{width:200}} placeholder="Single Line Input"/></div>
</div>
<div className={styles.line}></div>
<SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
<div className={styles.box2}>
<div className={styles.box2item1}>Services Available</div>
<div className={styles.box2item2}><Checkbox.Group options={ ["Cleaning", "Security Guard", "Maintenance",]} /></div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>Person In Charge</div>
<div className={styles.box3item2}><Input style={{width:200}} placeholder="Please enter a name"/></div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Contact Details</div>
<div className={styles.box4item2}><Input style={{width:200}} placeholder="Telephone"/></div>
<div className={styles.box4item3}><Input style={{width:200}} placeholder="E-mail"/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" >提交</Button>
</div>
);
};
export default Template;
\ No newline at end of file
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 400px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 154px;
}
.box1item3{
position: absolute;
left: 529px;
}
.box1item4{
position: absolute;
left: 650px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
margin-top: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 192px;
}
.box3{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 189px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 189px;
}
.box4item3{
position: absolute;
left: 405px;
}
.box5{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 189px;
}
.box5item3{
position: absolute;
left: 405px;
}
.box6{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 189px;
}
.box6item3{
position: absolute;
left: 405px;
}
.box7{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
}
.box7item1{
position: absolute;
}
.box7item2{
position: absolute;
left: 189px;
}
.box7item3{
position: absolute;
left: 405px;
}
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
];
const Template = () => {
const pagination={defaultCurrent:1,total: 16}
const columns = [
{
title: "username",
dataIndex: 'name',
key: 'name',
},
{
title: "project",
dataIndex: 'age',
key: 'age',
},
{
title: "unit",
dataIndex: 'address',
key: 'address',
},
{
title: "status",
dataIndex: 'address',
key: 'address',
},
{
title: "submissionTime",
dataIndex: 'address',
key: 'address',
},
{
title: "actions",
key: 'action',
render: (text: any, record: any) => (
<Space size="middle">
<a>详情</a>
</Space>
),
},
];
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Service Provider Details</div>
<button className={styles.item3}>返回</button>
</div>
<div className={styles.box1}>
<div className={styles.box1item1}>Company Name</div>
<div className={styles.box1item2}>Free Limited</div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Office Address</div>
<div className={styles.box2item2}>Albert Street, 175, Singapore, Albert, Bugis, Victoria Street, </div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>Person In Charge</div>
<div className={styles.box3item2}>Bellamy</div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Contact Details</div>
<div className={styles.box4item2}>18205462231 371712650@qq.com</div>
</div>
<div className={styles.box5}>
<div className={styles.box5item1}>Services Available</div>
<div className={styles.box5item2}>Cleaning,Security Guard</div>
</div>
<div className={styles.box6}>
<div className={styles.box1item1}>Service Community</div>
</div>
<div className={styles.box7}>
<div className={styles.box1item1}>Security Guard Account</div>
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
<Button >Cancellation</Button>
</div>
);
};
export default Template;
\ No newline at end of file
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 400px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 196px;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 196px;
}
.box3{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 196px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 196px;
}
.box5{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 196px;
}
.box6{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 196px;
}
.box7{
width: 100%;
height: 34px;
position: relative;
line-height: 34px;
margin-bottom: 28px;
}
.box7item1{
position: absolute;
}
.box7item2{
position: absolute;
left: 196px;
}
......@@ -13,10 +13,12 @@ const Template = () => {
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>Payment Settings</div>
<div className={styles.item1}>Edit Service Provider</div>
<button className={styles.item3}>返回</button>
</div>
</div>
);
};
......
......@@ -38,3 +38,4 @@
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
......@@ -92,7 +92,7 @@ const ChargeManager = () => {
</div>
{/* 列表组件 */}
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
<Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
</div>
......
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch ,getLocale, setLocale} from 'umi';
const locales = ['zh-CN','en-US'];
const Template = () => {
const languageSelect = (e) => {
setLocale(locales[e.target.value])
};
const [curLang, setCurLang] = useState(0);
useEffect(() => {
if (getLocale() == "en-US") {
setCurLang(1)
} else {
setCurLang(0)
}
}, [curLang]);
return (
<div className={styles.base}>
<div className={styles.box}>Language Selection</div>
<Radio.Group onChange={languageSelect} value={curLang} >
<div className={styles.box}><Radio value={0}>Chinese</Radio></div>
<div className={styles.box}><Radio value={1}>English</Radio></div>
</Radio.Group>
</div>
);
};
export default Template;
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
.box{
margin-bottom: 28px;
}
\ No newline at end of file
import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } from '@ant-design/icons';
import { Alert, Checkbox } from 'antd';
import React, { useState } from 'react';
import { Link, connect, Dispatch } from 'umi';
import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined,ArrowLeftOutlined } from '@ant-design/icons';
import { Alert, Checkbox, Input } from 'antd';
import React, { useState,useEffect } from 'react';
import { Link, connect, Dispatch,history, Redirect } from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';
import LoginForm from './components/Login';
import styles from './style.less';
import e from 'express';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginForm;
interface LoginProps {
......@@ -16,115 +17,79 @@ interface LoginProps {
submitting?: boolean;
}
const LoginMessage: React.FC<{
content: string;
}> = ({ content }) => (
<Alert
style={{
marginBottom: 24,
}}
message={content}
type="error"
showIcon
/>
);
const Login: React.FC<LoginProps> = (props) => {
const { userLogin = {}, submitting } = props;
const { status, type: loginType } = userLogin;
const [autoLogin, setAutoLogin] = useState(true);
const [type, setType] = useState<string>('account');
const [userName, setUsername] = useState("");
const [password, setPasswd] = useState("");
const handleSubmit = (values: LoginParamsType) => {
const { dispatch } = props;
console.log({ ...values, type,userName,password })
dispatch({
type: 'login/login',
payload: { ...values, type },
payload: { ...values, type,userName,password },
});
};
const usernameHandle = (e: any) => {
setUsername(e.target.value)
}
const passwdHandle = (e: any) => {
setPasswd(e.target.value)
}
const returnHandle = (e: any)=> {
history.push("/user/login")
}
const gotoForgetHandle = (e: any)=> {
history.push("/user/forget")
}
const { location } = props;
const [forgetflag,setForgetFlag]=useState(false)
useEffect(() => {
if (location.pathname=="/user/forget") {
setForgetFlag(true)
} else {
setForgetFlag(false)
}
}, [location.pathname]);
return (
<div className={styles.main}>
<div>
{
forgetflag?(
<div style={{ position: "absolute", top: -50, cursor: "pointer" }} onClick={returnHandle}><ArrowLeftOutlined style={{ fontSize: '28px' }} /></div>
):(<div />)
}
<LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
<Tab key="account" tab="账户密码登录">
{status === 'error' && loginType === 'account' && !submitting && (
<LoginMessage content="账户或密码错误(admin/ant.design)" />
)}
<UserName
name="userName"
placeholder="用户名: admin or user"
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<Password
name="password"
placeholder="密码: ant.design"
rules={[
{
required: true,
message: '请输入密码!',
},
]}
/>
</Tab>
<Tab key="mobile" tab="手机号登录">
{status === 'error' && loginType === 'mobile' && !submitting && (
<LoginMessage content="验证码错误" />
)}
<Mobile
name="mobile"
placeholder="手机号"
rules={[
{
required: true,
message: '请输入手机号!',
},
<div className={styles.box1}>Account Number</div>
<input className={styles.input} onChange={usernameHandle}/>
<div className={styles.box1}>{forgetflag?("Next"):("Password")}</div>
{
pattern: /^1\d{10}$/,
message: '手机号格式错误!',
},
]}
/>
<Captcha
name="captcha"
placeholder="验证码"
countDown={120}
getCaptchaButtonText=""
getCaptchaSecondText="秒"
rules={[
{
required: true,
message: '请输入验证码!',
},
]}
/>
</Tab>
forgetflag ? (
<div className={styles.box2}>
<input className={styles.input5} onChange={passwdHandle} type="password" />
<div className={styles.button2} style={{float:"right"}}>Send</div>
</div>
) : (
<div>
<Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
自动登录
</Checkbox>
<a
style={{
float: 'right',
}}
>
忘记密码
</a>
<input className={styles.input2} onChange={passwdHandle} type="password"/>
<div>
<div className={styles.input3} onClick={gotoForgetHandle}>Forget Password</div>
<div className={styles.input4}>
{status === 'error' && loginType === 'account' && !submitting && (
<div>Wrong account or password</div>
)}</div>
</div>
<Submit loading={submitting}>登录</Submit>
<div className={styles.other}>
其他登录方式
<AlipayCircleOutlined className={styles.icon} />
<TaobaoCircleOutlined className={styles.icon} />
<WeiboCircleOutlined className={styles.icon} />
<Link className={styles.register} to="/user/register">
注册账户
</Link>
</div>
)
}
<Submit className={styles.button} loading={submitting} style={{ width: 330 }}>{forgetflag?("Next"):("登录")}</Submit>
</LoginForm>
</div>
);
......
......@@ -37,3 +37,93 @@
}
}
}
.box1{
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(129,152,177,1);
margin-bottom: 20px;
}
.input{
border:none;
background:none;
outline: none;
border-bottom: 1px solid rgba(78,80,105,1);
width:330px;
margin-bottom: 20px;
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(0,26,84,1);
}
.input2{
border:none;
background:none;
outline: none;
border-bottom: 1px solid rgba(78,80,105,1);
width:330px;
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(0,26,84,1);
}
.input3{
cursor: pointer;
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(0,26,84,1);
opacity:0.3;
}
.input4{
width:400px;
height:20px;
font-size:20px;
font-family:PingFang SC;
font-weight:800;
color:rgba(255,56,56,1);
}
.button{
width:100px;
height:51px;
background:rgba(64,101,224,1);
border-radius:26px;
border: none;
}
.input5{
border:none;
background:none;
outline: none;
border-bottom: 1px solid rgba(78,80,105,1);
width:176px;
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(0,26,84,1);
}
.button2{
width: 120px;
height: 34px;
border-radius:26px;
background:none;
border: 1px solid rgba(78,80,105,1);
line-height: 34px;
text-align: center;
position: absolute;
cursor: pointer;
top:0;
left: 196px;
font-size:20px;
font-family:"PingFang SC";
font-weight:800;
color:rgba(0,26,84,1);
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 45px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment