Skip to content

J
jinfa-admin
Commit 397d560a authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix: home

parent b005eb1c
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 71 deletions
src/components/StatusTag/index.tsx
View file @ 397d560a
......@@ -5,13 +5,13 @@
* @LastEditTime: 2020-08-31 18:59:18
* @Description: 状态 tag
*/
import React from 'react';
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import styles from './index.less';
interface StatusTagProps {
type: 'success' | 'warnning' | 'default' | 'danger' | 'primary';
title: string;
title: string | ReactNode;
};
const StatusTag: React.FC<StatusTagProps> = ({ type, title }) => {
......
src/pages/home.tsx
View file @ 397d560a
import React, { Component } from 'react';
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Button, Steps, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Divider, Image } from 'antd'
class Home extends Component {
render() {
return (
<div
style={{
margin: '-24px',
}}
>
<img
src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/bc7f3a2385c0438bafcf1b74212cc7721601275065050.png"
width="100%"
height="auto"
/>
</div>
);
}
import styles from './index.less'
import StatusTag from '@/components/StatusTag'
import { CaretUpOutlined } from '@ant-design/icons'
// 图标图片集
import totalIcona1 from '../asserts/home-icon-23.png'
import totalIcona2 from '../asserts/home-icon-12.png'
import totalIcona3 from '../asserts/home-icon-10.png'
import totalIcona4 from '../asserts/home-icon-11.png'
const Home: React.FC<{}> = () => {
return (
// <PageHeaderWrapper
// title="首页"
// >
<div>
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增订单(元)"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona1} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增会员"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona2} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增商品"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona3} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增品牌"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona4} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
</Row>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={18}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增订单(元)"
bordered={false}
>
<Row>
<Col span={24}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
</Row>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增会员"
bordered={false}
>
<Row>
<Col span={24}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
</Row>
</Card>
</Col>
</Row>
</Space>
</div>
);
}
export default Home
export default Home
\ No newline at end of file
src/pages/index.less
View file @ 397d560a
.normal {
}
.title {
font-size: 24px;
color: #666;
}
// 500 error
// .wrapper{
// }
.errorBox{
width: 100%;
.desc{
......@@ -24,3 +15,28 @@
height: 100%;
}
}
// home页面样式
.homeCard{
border-radius: 3px;
position: relative;
:global {
.ant-card-head-title{
font-size: 12px;
color: #909399;
}
}
.numberDesc{
font-size: 32px;
font-weight: 500;
color: #303133;
}
.numberIcon{
text-align: right;
position: absolute;
top: -10px;
right: 0px;
}
}
src/pages/test.tsx deleted 100644 → 0
View file @ b005eb1c
import React, {Component} from 'react';
import { Button } from 'antd';
import styles from '../layouts/index.less';
import { inject, observer } from 'mobx-react'
import { ITestModule } from '@/module/testModule'
import { IStore } from '@/store';
import Loading from '@/components/Loading' // 测试loading组件
export interface ITestProps {
testStore?: ITestModule
}
@inject((store: IStore) => ({
testStore: store.testStore
}))
@observer
class Index extends Component<ITestProps, {}> {
render() {
const { testText, testNumber, testList,printInfo, setText, setNumber, getAsyncInfo } = this.props.testStore!
return <div>
{/* <Loading /> */}
<h3>{testText}|{testNumber}</h3>
<h3>{printInfo}</h3>
<h5>测试页面</h5>
<div>
<ul>
{
testList.length>0 && testList.map((item, index) => {
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
<Button onClick={() => {setText('调用mobx改变Text')}}>mobx改变Text</Button>
<Button onClick={() => {setNumber(10086)}}>mobx改变Number</Button>
<Button onClick={() => {getAsyncInfo()}}>mobx改变异步数据</Button>
</div>
}
}
export default Index
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