Skip to content

J
jinfa-platform
Commit faebd18f authored by Bill's avatar Bill
Browse files
Options

完成首页静态页

parent 43038fff
Show whitespace changes
Inline Side-by-side
Showing with 705 additions and 14 deletions
src/pages/home/components/AnyQuestion/index.less
View file @ faebd18f
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
margin-bottom: 16px; margin-bottom: 16px;
cursor: pointer;
} }
.ask_image { .ask_image {
......
src/pages/home/components/Centers/AfterSoldCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import { Row, Col } from 'antd';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
interface Iprops {};
const SettlementAbility: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
{
id: 2,
list: [1,2,3,4]
},
{
id: 3,
list: [1,2,3,4,5]
},
]
return (
<AbilityContainer
title="售后中心"
tips="轻松完成订单售后在线换货、退货、维修环节"
extra={
<a>进入售后中心</a>
}
>
<div>
{
data.map((record) => {
return (
<Row key={record.id} className={styles.row}>
<Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
<Col span={20} className={styles.colRow}>
{
record.list.map((item) => {
return (
<Col span={4} key={item}>
<div className={styles.colTitle}>待提交审核咨询单</div>
<div className={styles.colValue}>5</div>
</Col>
)
})
}
</Col>
</Row>
)
})
}
</div>
</AbilityContainer>
)
}
export default SettlementAbility
\ No newline at end of file
src/pages/home/components/Centers/Container.less 0 → 100644
View file @ faebd18f
.container {
padding: 24px 24px 0 24px ;
background-color: #fff;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
.left {
.title {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 16px;
}
.tips {
font-size: 12px;
font-weight: 400;
color: #909399;
}
}
}
.body {
margin-top: 12px;
}
}
\ No newline at end of file
src/pages/home/components/Centers/Container.tsx 0 → 100644
View file @ faebd18f
import React, { ReactNode } from 'react';
import styles from './Container.less';
interface Iprops {
title: string,
tips: string,
extra?: ReactNode
};
const AbilityContainer: React.FC<Iprops> = (props) => {
const { title = '', tips = '' } = props;
return (
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.left}>
<div className={styles.title}>{title}</div>
<div className={styles.tips}>{tips}</div>
</div>
<div className={styles.extra}>
{props.extra}
</div>
</div>
<div className={styles.body}>
{props.children}
</div>
</div>
)
}
export default AbilityContainer;
\ No newline at end of file
src/pages/home/components/Centers/LogisticsCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import styles from './center.less'
import logistics from '@/assets/imgs/logistics.png';
import logistics_form from '@/assets/imgs/logistics_form.png';
import logistics_address from '@/assets/imgs/logistics_address.png';
import logistics_cost from '@/assets/imgs/logistics_cost.png';
interface Iprops {};
const LogisticsCenter: React.FC<Iprops> = () => {
const data = [
{
icon: logistics,
text: '物流派单'
},
{
icon: logistics_form,
text: '接单报价'
},
{
icon: logistics_address,
text: '收货地址管理'
},
{
icon: logistics_address,
text: '发货地址管理'
},
{
icon: logistics_cost,
text: '运费模板'
}
]
return (
<AbilityContainer
title="物流中心"
tips={"快速完成物流派单、接单、报价、物流信息对接"}
extra={
<a>进入物流中心</a>
}
>
<div className={styles.tags}>
{
data.map((item) => {
return (
<div className={styles.tagsItem} key={item.text}>
<div className={styles.icon}>
<img src={item.icon} />
</div>
<div className={styles.text}>{item.text}</div>
</div>
)
})
}
</div>
</AbilityContainer>
)
}
export default LogisticsCenter
\ No newline at end of file
src/pages/home/components/Centers/ProcessCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import { Row, Col } from 'antd';
import styles from './center.less'
interface Iprops {};
const ProcessCenter: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
]
return (
<AbilityContainer
title="加工中心"
tips="提供外发生产、加工、装配全流程环节管控"
extra={
<a>进入加工中心</a>
}
>
{
data.map((record) => {
return (
<Row key={record.id} className={styles.row}>
<Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
<Col span={20} className={styles.colRow}>
{
record.list.map((item) => {
return (
<Col span={4} key={item}>
<div className={styles.colTitle}>待提交审核咨询单</div>
<div className={styles.colValue}>5</div>
</Col>
)
})
}
</Col>
</Row>
)
})
}
</AbilityContainer>
)
}
export default ProcessCenter
\ No newline at end of file
src/pages/home/components/Centers/ProductCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import { Row, Col, Space } from 'antd';
import styles from './center.less'
interface Iprops {};
const ProductCenter: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
]
return (
<AbilityContainer
tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
title="商品中心"
extra={
<Space>
<a>设置库存</a>
<a>创建品牌</a>
<a>创建商品</a>
</Space>
}
>
{
data.map((record) => {
return (
<Row key={record.id} className={styles.row}>
<Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
<Col span={20} className={styles.colRow}>
{
record.list.map((item) => {
return (
<Col span={4} key={item}>
<div className={styles.colTitle}>待提交审核咨询单</div>
<div className={styles.colValue}>5</div>
</Col>
)
})
}
</Col>
</Row>
)
})
}
</AbilityContainer>
)
}
export default ProductCenter
\ No newline at end of file
src/pages/home/components/Centers/SettlementCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import { Row, Col } from 'antd';
import styles from './center.less'
import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
import settlement_accountReceive from '@/assets/imgs/settlement_accountReceive.png';
import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.png';
import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
interface Iprops {};
const SettlementCenter: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
{
id: 2,
list: [1,2,3,4]
},
{
id: 3,
list: [1,2,3,4,5]
},
]
const tagsList = [
{
icon: settlement_platformCollection,
text: '平台代收款结算'
},
{
icon: settlement_integrate,
text: '平台积分结算'
},
{
icon: settlement_accountReceive,
text: '应收账款结算'
},
{
icon: settlement_accountPayable,
text: '应付账款结算'
},
{
icon: settlement_invoice,
text: '开票管理'
}
]
return (
<AbilityContainer
title="结算中心"
tips="提供资资金结算、发票管理等功能"
extra={
<a>进入资金与结算中心</a>
}
>
<div>
<div className={styles.tags}>
{
tagsList.map((item) => {
return (
<div className={styles.tagsItem} key={item.text}>
<div className={styles.icon}>
<img src={item.icon} />
</div>
<div className={styles.text}>{item.text}</div>
</div>
)
})
}
</div>
<div>
{
data.map((record) => {
return (
<Row key={record.id} className={styles.row}>
<Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
<Col span={20} className={styles.colRow}>
{
record.list.map((item) => {
return (
<Col span={4} key={item}>
<div className={styles.colTitle}>待提交审核咨询单</div>
<div className={styles.colValue}>5</div>
</Col>
)
})
}
</Col>
</Row>
)
})
}
</div>
</div>
</AbilityContainer>
)
}
export default SettlementCenter
\ No newline at end of file
src/pages/home/components/Centers/ShopCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
import { BellOutlined } from '@ant-design/icons'
interface Iprops {}
const ShopCenter: React.FC<Iprops> = () => {
return (
<AbilityContainer
title="店铺中心"
tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
extra={
<div>
<a>进入店铺中心</a>
</div>
}
>
<div className={styles.tags}>
<div className={styles.tagsSpecial} >
<div className={styles.tagsItem}>
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>创建店铺</div>
</div>
<div className={styles.ding_tips}>
<div className={styles.ding_icon}>
<BellOutlined />
</div>
<span>你还没有创建店铺，请先创建店铺</span>
</div>
</div>
<div className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>店铺模板</div>
</div>
<div className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>店铺装修</div>
</div>
</div>
</AbilityContainer>
)
}
export default ShopCenter
\ No newline at end of file
src/pages/home/components/Centers/TradeCenter.tsx 0 → 100644
View file @ faebd18f
import React from 'react';
import AbilityContainer from './Container';
import { Row, Col } from 'antd';
import styles from './center.less'
interface Iprops {};
const TradeCenter: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
{
id: 2,
list: [1,2,3,4]
},
{
id: 3,
list: [1,2,3,4,5]
},
{
id: 4,
list: [1,2,3,4,5,6]
},
{
id: 5,
list: [1,2,3,4,5,6]
},
{
id: 6,
list: [1]
}
]
return (
<AbilityContainer
title="交易中心"
tips="提供在线发布需求，在线询价、在线报价、订单交易、签订电子合同等功能"
extra={
<div>
<a>进入交易中心</a>
</div>
}
>
{
data.map((record) => {
return (
<Row key={record.id} className={styles.row}>
<Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
<Col span={20} className={styles.colRow}>
{
record.list.map((item) => {
return (
<Col span={4} key={item}>
<div className={styles.colTitle}>待提交审核咨询单</div>
<div className={styles.colValue}>5</div>
</Col>
)
})
}
</Col>
</Row>
)
})
}
</AbilityContainer>
)
}
export default TradeCenter
\ No newline at end of file
src/pages/home/components/Centers/center.less 0 → 100644
View file @ faebd18f
.row {
padding: 24px 0;
.rowTitle {
font-size: 14;
font-weight: 400;
color: #303133;
}
.colRow {
display: flex;
.colTitle {
font-size: 12px;
font-weight: 400;
color: #909399;;
}
.colValue {
font-weight: 500;
font-size: 24px;
margin-top: 16px;
color: #303133;
&:hover {
text-decoration: underline;
color: @main-color;
cursor: pointer;
}
}
}
}
.tags {
padding: 24px 0;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.tagsItem {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 16px;
background: #FAFBFC;
width: 212px;
margin: 0 16px 16px 0;
cursor: pointer;
align-self: flex-start;
// position: relative;
.icon {
width: 32px;
height: 32px;
margin-right: 16px;
}
.text {
font-size: 14px;
font-weight: 400;
color: #303133;
}
}
.tagsSpecial {
display: flex;
flex-direction: column;
.ding_tips {
width: 212px;
color: @main-color;
background: rgba(0, 179, 122, 0.12);
padding: 10px;
display: flex;
flex-direction: row;
position: relative;
.ding_icon {
margin-right: 10px;
}
&:before {
content: '';
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
}
}
}
}
src/pages/home/components/Centers/index.tsx 0 → 100644
View file @ faebd18f
import TradeCenter from './TradeCenter';
import ShopCenter from './ShopCenter';
import ProductCenter from './ProductCenter';
import SettlementCenter from './SettlementCenter';
import AfterSoldCenter from './AfterSoldCenter'
import LogisticsCenter from './LogisticsCenter'
import ProcessCenter from './ProcessCenter';
export {
TradeCenter,
ShopCenter,
ProductCenter,
SettlementCenter,
AfterSoldCenter,
LogisticsCenter,
ProcessCenter
}
\ No newline at end of file
src/pages/home/components/UseGuaid/index.tsx
View file @ faebd18f
...@@ -65,10 +65,7 @@ const UseGuaid: React.FC<{}> = () => { ...@@ -65,10 +65,7 @@ const UseGuaid: React.FC<{}> = () => {
</Col> </Col>
</Row> </Row>
</Space> </Space>
<div className={styles.controller}>
<CompassFilled className={styles.icon} />
<span className={styles.text}>使用向导</span>
</div>
</div> </div>
) )
} }
......
src/pages/home/index.less
View file @ faebd18f
.userGuaid {
margin-bottom: 24px;
}
.main { .main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -6,6 +10,10 @@ ...@@ -6,6 +10,10 @@
// flex-basis: 1206px; // flex-basis: 1206px;
margin-right: 23px; margin-right: 23px;
flex: 1; flex: 1;
.ability {
margin-top: 24px;
}
} }
.rightSide { .rightSide {
...@@ -17,5 +25,27 @@ ...@@ -17,5 +25,27 @@
.announce { .announce {
margin-top: 24px; margin-top: 24px;
} }
.controller {
background-color: @main-color;
width: 181px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
color: #fff;
display: flex;
flex-direction: row;
margin-left: auto;
cursor: pointer;
.icon {
font-size: 24px;
}
.text {
margin-left: 8px;
}
}
} }
} }
\ No newline at end of file
src/pages/home/index.tsx
View file @ faebd18f
...@@ -8,22 +8,54 @@ import LatestAnnounce from './components/LatestAnnounces'; ...@@ -8,22 +8,54 @@ import LatestAnnounce from './components/LatestAnnounces';
import RecentVisit from './components/RecentVisit'; import RecentVisit from './components/RecentVisit';
import AnyQuestion from './components/AnyQuestion'; import AnyQuestion from './components/AnyQuestion';
import AdvertisementSpace from './components/AdvertisementSpace'; import AdvertisementSpace from './components/AdvertisementSpace';
import { TradeCenter, ShopCenter, ProductCenter, SettlementCenter, AfterSoldCenter, LogisticsCenter, ProcessCenter } from './components/Centers';
import styles from './index.less' import styles from './index.less'
import { CompassFilled } from '@ant-design/icons';
const Home: React.FC<{}> = () => { const Home: React.FC<{}> = () => {
const [visible, setVisible] = useState(false);
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<>
<div className={styles.userGuaid} style={{display: visible ? 'block': 'none'}}>
<UseGuaid/>
</div>
<div className={styles.main}> <div className={styles.main}>
<div className={styles.mainSide}> <div className={styles.mainSide}>
<div> <div>
<UserCenter /> <UserCenter />
</div> </div>
<div className={styles.ability}>
<TradeCenter />
</div>
<div className={styles.ability}>
<ShopCenter />
</div>
<div className={styles.ability}>
<ProductCenter />
</div>
<div className={styles.ability}>
<SettlementCenter />
</div>
<div className={styles.ability}>
<AfterSoldCenter />
</div>
<div className={styles.ability}>
<LogisticsCenter />
</div>
<div className={styles.ability}>
<ProcessCenter />
</div>
</div> </div>
<div className={styles.rightSide}> <div className={styles.rightSide}>
<Row gutter={24}> <Row gutter={24}>
<Col><CustomWorkBench /></Col> <Col><CustomWorkBench /></Col>
<Col><CustomWorkBench /></Col> <Col>
<div className={styles.controller} onClick={() => setVisible((state) => !state)}>
<CompassFilled className={styles.icon} />
<span className={styles.text}>使用向导</span>
</div>
</Col>
</Row> </Row>
<div className={styles.announce}> <div className={styles.announce}>
<LatestAnnounce /> <LatestAnnounce />
...@@ -34,18 +66,19 @@ const Home: React.FC<{}> = () => { ...@@ -34,18 +66,19 @@ const Home: React.FC<{}> = () => {
<div className={styles.announce}> <div className={styles.announce}>
<AnyQuestion /> <AnyQuestion />
</div> </div>
<div className={styles.announce}> {
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" /> [1,2,3,4].map((item) => {
</div> return (
<div className={styles.announce}> <div className={styles.announce} key={item}>
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
</div>
<div className={styles.announce}>
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" /> <AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
</div> </div>
)
})
}
</div> </div>
</div> </div>
</>
</PageHeaderWrapper> </PageHeaderWrapper>
) )
} }
......
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