Skip to content

J
jinfa-admin
Commit a8c71b5f authored by Bill's avatar Bill
Browse files
Options

fix: 修改首页，自适应

parent 1279d962
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 113 deletions
src/pages/home/components/DataCenter/index.less
View file @ a8c71b5f
......@@ -4,16 +4,12 @@
color: #909399;
}
.dataRiskAction{
.item {
display: flex;
> div{
width: 240px;
height: 48px;
background: #FAFBFC;
line-height: 48px;
margin-right: 24px;
> img{
align-items: center;
.icon {
margin: 8px 16px;
}
}
}
src/pages/home/components/DataCenter/index.tsx
View file @ a8c71b5f
......@@ -12,9 +12,33 @@ import dataRiskIcon8 from '@/asserts/home-icon-8.png'
const DataCenter: React.FC = () => {
const data = [
{
title: '网站运营数据',
icon: dataRiskIcon3
},
{
title: 'APP运营数据',
icon: dataRiskIcon4
},
{
title: '用户分析',
icon: dataRiskIcon5
},
{
title: '商品分析',
icon: dataRiskIcon6
},
{
title: '交易分析',
icon: dataRiskIcon7
},
{
title: '售后分析',
icon: dataRiskIcon8
}
]
return (
<Row gutter={[24, 12]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title={
......@@ -26,35 +50,23 @@ const DataCenter: React.FC = () => {
bordered={false}
extra={<a href="#">进入数据中心</a>}
>
<div className={styles.dataRiskAction}>
<div>
<img src={dataRiskIcon3} alt=""/>
<span>网站运营数据</span>
</div>
<div>
<img src={dataRiskIcon4} alt=""/>
<span>APP运营数据</span>
</div>
<div>
<img src={dataRiskIcon5} alt=""/>
<span>用户分析</span>
</div>
<div>
<img src={dataRiskIcon6} alt=""/>
<span>商品分析</span>
</div>
<div>
<img src={dataRiskIcon7} alt=""/>
<span>交易分析</span>
</div>
<div>
<img src={dataRiskIcon8} alt=""/>
<span>售后分析</span>
</div>
<Row gutter={[24,24]}>
{
data.map((item) => {
return (
<Col xxl={4} xl={6} lg={6} md={8} sm={12} xs={24} key={item.title} >
<div className={styles.item}>
<img src={item.icon} className={styles.icon} alt=""/>
<span>{item.title}</span>
</div>
</Card>
</Col>
)
})
}
</Row>
</Card>
)
}
export default DataCenter
src/pages/home/components/MemberStatistics/index.tsx
View file @ a8c71b5f
......@@ -84,7 +84,7 @@ const MemberStatistics: React.FC<Iprops> = (props) => {
{
data.map((item) => {
return (
<Col span={6} key={item.tips}>
<Col xxl={6} xl={6} lg={12} md={12} sm={24} xs={24} key={item.tips}>
<div className={styles.lineDesc}>
<img src={item.icon} className={styles.icon} alt=""/>
<div className={styles.lineDescText}>
......
src/pages/home/components/MemberStatistics/lineChart.tsx
View file @ a8c71b5f
......@@ -8,7 +8,7 @@ interface IProps {
const LineChart: React.FC<IProps> = (props) => {
return (
<Chart height={360} data={props.data} forceFit>
<Chart height={360} autoFit data={props.data}>
<Legend position="top-left" />
{/* <Axis name="dateTime" />
<Axis name="count"/> */}
......
src/pages/home/components/OrderStatistics/index.less
View file @ a8c71b5f
......@@ -18,6 +18,7 @@
font-size: 24px;
font-weight: 500;
color: #303133;
overflow: hidden;
}
.lineDescTip{
font-size: 12px;
......
src/pages/home/components/OrderStatistics/index.tsx
View file @ a8c71b5f
......@@ -34,22 +34,22 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
const data = [
{
icon: todayIcon,
value: orderData.todayCount,
value: orderData.todayAmount ,
tips: `今日营业额（${orderData.todayCount}单）`
},
{
icon: weekIcon,
value: orderData.weekCount,
tips: `最近7日营业额（${orderData.weekAmount}单）`
value: orderData.weekAmount,
tips: `最近7日营业额（${orderData.weekCount}单）`
},
{
icon: monthIcon,
value: orderData.monthCount,
tips: `最近30日营业额（${orderData.monthAmount}单）`
value: orderData.monthAmount,
tips: `最近30日营业额（${orderData.monthCount}单）`
},
{
icon: totalIcon,
value: orderData.totalCount,
value: orderData.totalAmount,
tips: `累计营业额（${orderData.totalCount}单）`
}
]
......@@ -77,7 +77,7 @@ const OrderStatistics: React.FC<Iprops> = (props) => {
{
data.map((item,key) => {
return (
<Col span={6} key={key}>
<Col xxl={6} xl={6} lg={12} md={12} sm={24} xs={24} key={key}>
<div className={styles.lineDesc}>
<img src={item.icon} className={styles.icon} alt=""/>
<div className={styles.lineDescText}>
......
src/pages/home/components/RiseCenter/index.less
View file @ a8c71b5f
......@@ -4,16 +4,12 @@
color: #909399;
}
.dataRiskAction{
.item {
display: flex;
> div{
width: 240px;
height: 48px;
background: #FAFBFC;
line-height: 48px;
margin-right: 24px;
> img{
align-items: center;
.icon {
margin: 8px 16px;
}
}
}
src/pages/home/components/RiseCenter/index.tsx
View file @ a8c71b5f
......@@ -10,32 +10,43 @@ import dataRiskIcon2 from '@/asserts/home-icon-2.png'
interface Iprops {}
const RiskCenter: React.FC<Iprops> = () => {
const data = [
{
title: '预警规则',
icon: dataRiskIcon1
},
{
title: '预警控制台',
icon: dataRiskIcon2
},
{
title: '预警处理',
icon: dataRiskIcon1
},
]
return (
<Row gutter={[24, 12]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title={<><p>风控中心</p><p className={styles.dataRiskTip}>全面的风控体系，监控交易异常、资金异常、行为异常，并实时预警</p></>}
bordered={false}
extra={<a href="#">进入风控中心</a>}
>
<div className={styles.dataRiskAction}>
<div>
<img src={dataRiskIcon1} alt=""/>
<span>预警规则</span>
</div>
<div>
<img src={dataRiskIcon2} alt=""/>
<span>预警控制台<Badge count={4} size="small" /></span>
</div>
<div>
<img src={dataRiskIcon1} alt=""/>
<span>预警处理</span>
</div>
<Row gutter={[24,24]}>
{
data.map((item) => {
return (
<Col xxl={4} xl={6} lg={6} md={8} sm={12} xs={24} key={item.title} >
<div className={styles.item}>
<img src={item.icon} className={styles.icon} alt=""/>
<span>{item.title} <Badge count={4} size="small" /></span>
</div>
</Card>
</Col>
)
})
}
</Row>
</Card>
)
}
......
src/pages/home/components/Settlement/index.less
View file @ a8c71b5f
// 便签样式
.notePaperBox{
width: 100%;
height: 248px;
height: 100%;
background: #6C9CEB;
border-radius: 3px;
.notePaperContainer{
......@@ -97,6 +97,7 @@
margin-bottom: 0;
}
.lineDescTip {
height: 36px;
font-size: 12px;
color: #909399;
margin-bottom: 0;
......
src/pages/home/components/Settlement/index.tsx
View file @ a8c71b5f
......@@ -43,8 +43,8 @@ const Settlement: React.FC = () => {
}
}, [inViewPort])
return (
<Row gutter={[24, 12]} style={{marginTop: 9, marginBottom: 0}} ref={ref}>
<Col span={5} style={{paddingBottom:0}}>
<Row gutter={[24, 24]} style={{marginTop: 9, marginBottom: 0}} ref={ref}>
<Col xxl={5} xl={5} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<div className={styles.notePaperBox}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
......@@ -59,7 +59,7 @@ const Settlement: React.FC = () => {
</div>
</div>
</Col>
<Col span={5} style={{paddingBottom:0}}>
<Col xxl={5} xl={5}lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<div className={cx(styles.notePaperBox, styles.notePaperBoxGreen)}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
......@@ -74,7 +74,7 @@ const Settlement: React.FC = () => {
</div>
</div>
</Col>
<Col span={7} style={{paddingBottom:0}}>
<Col xxl={7} xl={7} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<Row >
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
......@@ -85,7 +85,7 @@ const Settlement: React.FC = () => {
<p className={styles.lineDescTip}>待提现申请</p>
</div>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
<a>查看&nbsp;<RightOutlined /></a>
</div>
</Col>
<Col span={24} style={{paddingBottom:0, marginTop: '12px'}}>
......@@ -97,12 +97,12 @@ const Settlement: React.FC = () => {
<p className={styles.lineDescTip}>待支付提现申请</p>
</div>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
<a>查看&nbsp;<RightOutlined /></a>
</div>
</Col>
</Row>
</Col>
<Col span={7} style={{paddingBottom:0}}>
<Col xxl={7} xl={7} lg={12} md={12} sm={24} xs={24} style={{paddingBottom:0}}>
<Row>
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
......
src/pages/home/components/StatisticsColumn/index.less
View file @ a8c71b5f
......@@ -23,9 +23,9 @@
align-items: center;
flex: 1;
&:first-child {
margin-right: 50px;
}
// &:first-child {
// margin-right: 50px;
// }
.left {
display: flex;
flex-direction: row;
......
src/pages/home/components/StatisticsColumn/index.tsx
View file @ a8c71b5f
......@@ -14,7 +14,7 @@ const StatisticsColumn = (props) => {
const { loading, data } = props;
return (
<Row gutter={[24, 12]}>
<Col span={12}>
<Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
<Row>
<Col span={24}>
<Card
......@@ -30,7 +30,8 @@ const StatisticsColumn = (props) => {
<span>全部商品</span>
<p>{data?.productCount}</p>
</div>
<div className={styles.commodityTotalDesc}>
<Row gutter={[24, 12]}>
<Col xxl={12} xl={12} lg={24} md={12} sm={24} xs={24} className={styles.commodityTotalDesc}>
<div className={styles.container}>
<div className={styles.left}>
<img src={totalCommdity} alt=""/>
......@@ -41,6 +42,8 @@ const StatisticsColumn = (props) => {
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
<Col xxl={12} xl={12} lg={24} md={12} sm={24} xs={24} className={styles.commodityTotalDesc} >
<div className={styles.container}>
<div className={styles.left}>
<img src={totalIcona3} alt=""/>
......@@ -51,16 +54,16 @@ const StatisticsColumn = (props) => {
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</div>
</Col>
</Row>
</>
}
</Card>
</Col>
</Row>
</Col>
<Col span={12}>
<Col xxl={12} xl={12} lg={12} md={24} xs={24}>
<Row>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
......@@ -75,7 +78,8 @@ const StatisticsColumn = (props) => {
<span>全部品牌</span>
<p>{data?.brandCount}</p>
</div>
<div className={styles.commodityTotalDesc}>
<Row gutter={[24, 12]}>
<Col xxl={12} xl={12} lg={24} md={12} sm={24} xs={24} className={styles.commodityTotalDesc} >
<div className={styles.container}>
<div className={styles.left}>
<img src={totalBrand1} alt=""/>
......@@ -86,6 +90,8 @@ const StatisticsColumn = (props) => {
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
<Col xxl={12} xl={12} lg={24} md={12} sm={24} xs={24} className={styles.commodityTotalDesc}>
<div className={styles.container}>
<div className={styles.left}>
<img src={totalBrand2} alt=""/>
......@@ -96,7 +102,9 @@ const StatisticsColumn = (props) => {
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</div>
</Col>
</Row>
</>
}
......
src/pages/home/components/TodayAdd/index.tsx
View file @ a8c71b5f
......@@ -47,7 +47,7 @@ const TodayAdd: React.FC<Iprops> = (props) => {
{
list.map((item, key) => {
return (
<Col span={6} key={key}>
<Col xxl={6} xl={6} lg={12} md={12} sm={24} xs={24} key={key}>
<div className={styles.homeCard}>
<div className={styles.body}>
<div className={styles.content}>
......
src/pages/home/index.less
View file @ a8c71b5f
......@@ -14,7 +14,7 @@
}
.sideAdBox{
height: 100px;
margin: 22px 0px 13px 0;
margin: 0px 0px 20px 0;
border-radius: 5px;
background-color: #6C9CEB;
position: relative;
......@@ -34,6 +34,29 @@
}
.members {
padding: 18px 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F4F5F7;
// background: #F4F5F7;
.text {
font-weight: 500;
color: #303133;
font-size: 24px;
margin-bottom: 8px;
// padding-bottom: 8px;
}
.desc {
font-size: 12px;
font-weight: 400;
color: #909399;
}
}
// 适配
@media screen and (max-width: 1441px) {
.homeCard{
......@@ -60,3 +83,14 @@
}
}
}
@media (min-width: 1600px) {
.lastCard {
margin-top: 12px;
}
}
// @media (max-width: 1599px) {
// .lastCard___z6zQF {
// margin-top: 0px;
// }
// }
src/pages/home/index.tsx
View file @ a8c71b5f
......@@ -150,21 +150,17 @@ const Home: React.FC<{}> = () => {
{/* 会员统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={18}>
<Col xxl={18} xl={24} lg={24}>
<MemberStatistics memberData={memberData} />
</Col>
<Col span={6}>
<Col xxl={6} xl={24} lg={24}>
<Card
headStyle={{borderBottom:'none'}}
bodyStyle={{padding: '0px'}}
title="待处理会员"
bordered={false}
>
<Row>
<Col span={24}>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
{
processingMemberLoading
? [1,2].map((item) => {
......@@ -172,21 +168,21 @@ const Home: React.FC<{}> = () => {
})
: processingMembers.map((item: any, key: number) => {
return (
<List.Item
key={item.name}
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title={item.count.toString()}
description={<><Badge status={PROCESS_STATUS[key]} text={item.name}></Badge></>}
/>
</List.Item>
<Col xxl={24} xl={12} md={12} sm={24} xs={24} key={key}>
<div className={styles.members}>
<div className={styles.numbers}>
<div className={styles.text}>2</div>
<div className={styles.desc}>
<Badge status={PROCESS_STATUS[key]} text={item.name}></Badge>
</div>
</div>
<div><a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a></div>
</div>
</Col>
)
})
}
</List>
</Col>
<Col span={24}>
<Col span={24} style={{padding: '0 24px'}}>
<div className={styles.sideAdBox}>
<a href=""><span>会员维护&nbsp;<RightCircleFilled /></span></a>
<img src={sideIcon} alt=""/>
......@@ -201,8 +197,8 @@ const Home: React.FC<{}> = () => {
<div id="trade">
<Space direction="vertical" style={{width:'100%', height: '100%'}} >
<Row gutter={[24, 12]} style={{display: 'flex', flexDirection: 'row'}}>
<Col span={6} style={{display: 'flex', flexDirection: 'column'}}>
<Row style={{height: '100%'}}>
<Col xxl={6} xl={24} lg={24} md={24} sm={24} xs={24} style={{display: 'flex', flexDirection: 'column'}}>
<Row style={{height: '100%'}} gutter={[24, 12]}>
{
tradeStatus.loading
? [1,2].map((item) => {
......@@ -216,12 +212,13 @@ const Home: React.FC<{}> = () => {
})
: Object.keys(tradeAndSold).map((item, key) => {
return (
<Col span={24} style={key == 1 ? { marginTop: '18px', flex: 1} : {}} key={item}>
<Col xxl={24} xl={12} lg={12} md={24} sm={24} xs={24} key={item}>
<Card
headStyle={{borderBottom:'none'}}
title={item === 'afterSaleList' ? '待处理售后' : '待处理交易'}
bordered={false}
style={{height: '100%'}}
className={key == 1 ? styles.lastCard : ''}
>
<List
itemLayout="horizontal"
......@@ -251,7 +248,7 @@ const Home: React.FC<{}> = () => {
}
</Row>
</Col>
<Col span={18}>
<Col xxl={18} xl={24} lg={24}>
<div id="order">
<OrderStatistics orderData={orderData}/>
</div>
......
ytt.config.ts
View file @ a8c71b5f
......@@ -20,7 +20,6 @@ const getConfigMap = (tokens) => tokens.map(v => ({
enabled: false,
},
outputFilePath: `src/services/${v.name}Api`,
requestFunctionFilePath: 'request.ts',
dataKey: 'data',
projects: [
{
......
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