Skip to content

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

编辑首页

parent 744d82f5
Show whitespace changes
Inline Side-by-side
Showing with 816 additions and 134 deletions
config/routes/index.ts
View file @ 8e2047ce
......@@ -38,8 +38,8 @@ const memberCenterRoute = {
name: 'home',
icon: 'smile',
key: 'home',
component: '@/pages/index',
// component: '@/pages/home',
// component: '@/pages/index',
component: '@/pages/home',
},
...routes,
{
......
src/pages/home/components/AdvertisementSpace/index.less 0 → 100644
View file @ 8e2047ce
@color: #303133;
.advertisementSpace {
padding: 24px;
color: @color;
background-color: #fff;
border-radius: 8px;
.header {
margin-bottom: 24px;
.title {
font-size: 18px;
}
}
.body {
.tips {
font-size: 12px;
}
}
.footer {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.link {
align-self: flex-end;
}
}
}
src/pages/home/components/AdvertisementSpace/index.tsx 0 → 100644
View file @ 8e2047ce
import React from 'react';
import styles from './index.less';
import factory from '@/assets/imgs/factory.png';
interface Iprops {
title: string,
urlLink: string,
urlText: string,
tips: string,
}
const AdvertisementSpace: React.FC<Iprops> = () => {
return (
<div className={styles.advertisementSpace}>
<div className={styles.header}>
<div className={styles.title}>方案中心</div>
</div>
<div className={styles.body}>
<div className={styles.tips}>
提供品类丰富，功能强大和配置灵活的产品智能化开发方案，可一键获取和采用，轻松实现您的智能化梦想。
</div>
</div>
<div className={styles.footer}>
<div className={styles.link}>
<a>前往购买</a>
</div>
<div className={styles.img}>
<img src={factory} />
</div>
</div>
</div>
)
}
export default AdvertisementSpace
\ No newline at end of file
src/pages/home/components/AnyQuestion/index.less 0 → 100644
View file @ 8e2047ce
.anyQuestion {
background: #6790F3;
color: #fff;
border-radius: 8px;
padding: 24px;
position: relative;
.title {
font-size: 16px;
margin-bottom: 24px;
}
.body {
margin-top: 12px;
.tips {
font-size: 14px;
font-weight: 400;
}
}
.ask {
width: 128px;
height: 32px;
background: rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 14px;
margin-bottom: 16px;
}
.ask_image {
position: absolute;
bottom: 5px;
right: 5px;
}
}
\ No newline at end of file
src/pages/home/components/AnyQuestion/index.tsx 0 → 100644
View file @ 8e2047ce
import React from 'react';
import styles from './index.less';
import ask from '@/assets/imgs/ask.png';
interface Iprops {}
const AnyQuestion: React.FC<Iprops> = () => {
return (
<div className={styles.anyQuestion}>
<div className={styles.title}>平台使用中遇到问题</div>
<div className={styles.body}>
<p className={styles.tips}>您的专属服务团队</p>
<p className={styles.tips}>客户经理、项目经理、技术专家为你解答平台使用过程中遇到任何问题</p>
</div>
<div className={styles.ask}>
我要提问
</div>
<div className={styles.ask_image}>
<img src={ask} />
</div>
</div>
)
}
export default AnyQuestion
\ No newline at end of file
src/pages/home/components/CustomWorkBench/index.less 0 → 100644
View file @ 8e2047ce
.customWorkBench {
.btn {
width: 181px;
height: 48px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 400;
color: #303133;
border-radius: 8px;
cursor: pointer;
}
}
.modalContainer {
.header {
background: #FAFBFC;
height: 88px;
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #EEF0F3;
.left {
.title {
font-size: 16px;
font-weight: 400;
color: #303133;
}
.tips {
font-size: 12px;
font-weight: 400;
color: #909399;
margin-top: 16px;
}
}
.close {
color: #909399;
cursor: pointer;
}
}
.content {
padding: 24px 24px 0 24px;
height: 522px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
.item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid #EEF0F3;
width: 352px;
padding: 14px 16px;
margin-bottom: 12px;
}
}
.footer {
padding: 0 24px 24px 24px;
.sortTips {
width: 352px;
text-align: center;
font-size: 12px;
color: #C0C4CC;
}
}
}
\ No newline at end of file
src/pages/home/components/CustomWorkBench/index.tsx 0 → 100644
View file @ 8e2047ce
import React, { useState} from 'react';
import { Modal, Button, Checkbox } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
interface Iprops {}
const CustomWorkBench: React.FC<Iprops> = () => {
const [visible, setVisible] = useState(false);
const handleVisible = () => {
setVisible(true)
}
const handleCancel = () => {
setVisible(false)
}
return (
<div className={styles.customWorkBench}>
<div className={styles.btn} onClick={handleVisible}>
{/* <span></span> */}
自定义工作台
</div>
<Modal
width={800}
visible={visible}
onCancel={handleCancel}
closable={false}
bodyStyle={{padding: 0}}
>
<div className={styles.modalContainer}>
<div className={styles.header}>
<div className={styles.left}>
<div className={styles.title}>产品模块自定义</div>
<div className={styles.tips}>在此你可根据业务形态自定义展示后期可在“自定义工作台”中随时调整</div>
</div>
<div className={styles.close} onClick={handleCancel}>
<CloseOutlined />
</div>
</div>
<div className={styles.content}>
{
[1,2,3,4,5,6,7,8,9,10].map((item) => {
return (
<div className={styles.item} key={item}>
<div className={styles.name}>交易能力</div>
<div><Checkbox /></div>
</div>
)
})
}
</div>
<div className={styles.footer}>
<div className={styles.sortTips}>
(可拖动排序)
</div>
</div>
</div>
</Modal>
</div>
)
}
export default CustomWorkBench
\ No newline at end of file
src/pages/home/components/LatestAnnounces/index.less 0 → 100644
View file @ 8e2047ce
.announces {
padding: 24px;
background-color: #fff;
border-radius: 8px;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
.title {
color: #303133;
font-size: 16px;
}
.nextOrPreview {
.prev {
margin-right: 8px;
}
}
}
.body {
margin-top: 12px;
.item {
margin-bottom: 16px;
display: flex;
flex-direction: row;
align-items: center;
.date {
margin-right: 16px;
padding: 2px 6px;
display: flex;
flex-direction: column;
text-align: center;
.month {
background: #F7F8FA;
width: 36px;
margin-bottom: 1px;
}
.day {
background: #F7F8FA;
}
}
}
}
}
\ No newline at end of file
src/pages/home/components/LatestAnnounces/index.tsx 0 → 100644
View file @ 8e2047ce
import React from 'react';
import styles from './index.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { keyBy } from 'lodash';
interface Iprops {}
const LatestAnnouces: React.FC = () => {
return (
<div className={styles.announces}>
<div className={styles.header}>
<div className={styles.title}>最新公告</div>
<div className={styles.nextOrPreview}>
<Button icon={<LeftOutlined />} className={styles.prev}></Button>
<Button icon={<RightOutlined />}></Button>
</div>
</div>
<div className={styles.body}>
{
[1,2,3,4].map((item) => {
return (
<div className={styles.item} key={item}>
<div className={styles.date}>
<div className={styles.month}>09月</div>
<div className={styles.day}>17</div>
</div>
<div className={styles.content}>
最新交易板块上线，全新体验，更多交易模式，更多好玩等你发现
</div>
</div>
)
})
}
</div>
</div>
)
}
export default LatestAnnouces
\ No newline at end of file
src/pages/home/components/RecentVisit/index.less 0 → 100644
View file @ 8e2047ce
.recentVisit {
background-color: #fff;
padding: 24px;
border-radius: 8px;
.header {
.title {
font-size: 16px;
color: #303133;
}
}
.body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 24px;
justify-content: space-between;
.item {
background: #F7F8FA;
width: 157px;
text-align: center;
color: #303133;
padding: 6px;
margin-bottom: 16px;
}
}
}
\ No newline at end of file
src/pages/home/components/RecentVisit/index.tsx 0 → 100644
View file @ 8e2047ce
import React from 'react';
import styles from './index.less'
interface Iprops {}
const RecentVisit: React.FC<Iprops> = () => {
return (
<div className={styles.recentVisit}>
<div className={styles.header}>
<div className={styles.title}>最近访问</div>
</div>
<div className={styles.body}>
{
["新增商品", "快捷修改商品单价", "新增仓位库存"].map((item) => {
return (
<div className={styles.item} key={item}>
{item}
</div>
)
})
}
</div>
</div>
)
}
export default RecentVisit
\ No newline at end of file
src/pages/home/components/UseGuaid/index.less 0 → 100644
View file @ 8e2047ce
.homeGuide{
background-color: @main-color;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
height: 90px;
color: white;
position: relative;
.gridStyle{
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
border-right: 1px solid rgba(255, 255, 255, 0.2);
height: 90px;
p{
font-size: 12px;
font-weight: 400;
margin-left: 24px;
margin-bottom: 0;
padding: 0 0 8px 0;
line-height: 1;
vertical-align: middle;
}
.firstp{
height: 24px;
line-height: 24px;
}
.guideTitle{
font-size: 14px;
font-weight: 400;
}
.guideIcon{
font-size: 14px;
margin-right: 27px;
}
.guideIconFirst{
font-size: 24px;
vertical-align: bottom;
}
}
.gridStyleFirst{
flex: 0 0 16%;
}
.guideClose{
width: 56px;
height: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 0px 8px 0px 8px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
text-align: center;
}
&::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #6B778C;
content: "";
position: absolute;
right: 18px;
bottom: -7px;
}
}
.giudeMenuBox{
border-radius: 5px;
padding: 16px;
background-color: #fff;
flex: 0 0 16%;
//重写步骤条
:global{
.ant-steps-vertical.ant-steps-dot .ant-steps-item .ant-steps-icon-dot{
border: 1px solid #DFE1E6;
background-color: #fff;
}
.ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after{
background-color: #fff;
border-right: 1px dashed #DFE1E6;
}
}
}
.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-top: 24px;
margin-left: auto;
cursor: pointer;
.icon {
font-size: 24px;
}
.text {
margin-left: 8px;
}
}
\ No newline at end of file
src/pages/home/components/UseGuaid/index.tsx 0 → 100644
View file @ 8e2047ce
import { render } from '@/app';
import React from 'react';
import { Button, Space, Row, Col, Dropdown, Steps} from 'antd';
import { CompassOutlined, CompassFilled, UpOutlined } from '@ant-design/icons';
import styles from './index.less';
import cx from 'classnames';
const { Step } = Steps;
const UseGuaid: React.FC<{}> = () => {
const menu = (
<div className={styles.giudeMenuBox}>
<Steps progressDot current={1000} direction="vertical">
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
</Steps>
</div>
);
return (
<div>
<Space direction="vertical" style={{width:'100%'}}>
<Row>
<Col span={24}>
<div className={styles.homeGuide}>
<div className={cx(styles.gridStyle, styles.gridStyleFirst)}>
<p className={styles.firstp}>
<CompassFilled className={styles.guideIconFirst} />
<span>&nbsp;使用向导</span>
</p>
</div>
<Dropdown overlay={menu}>
<div className={styles.gridStyle}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
</div>
<UpOutlined className={styles.guideIcon} />
</div>
</Dropdown>
<Dropdown overlay={menu}>
<div className={styles.gridStyle}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
</div>
<UpOutlined className={styles.guideIcon} />
</div>
</Dropdown>
<Dropdown overlay={menu}>
<div className={cx(styles.gridStyle, styles.gridStyleLast)}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
</div>
<UpOutlined className={styles.guideIcon} />
</div>
</Dropdown>
<div className={styles.guideClose}>
<p>关闭</p>
</div>
</div>
</Col>
</Row>
</Space>
<div className={styles.controller}>
<CompassFilled className={styles.icon} />
<span className={styles.text}>使用向导</span>
</div>
</div>
)
}
export default UseGuaid;
\ No newline at end of file
src/pages/home/components/UserCenter/index.less 0 → 100644
View file @ 8e2047ce
@container-color: #26B599;
.container {
// width: 1206px;
.header {
padding: 0 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: @container-color;
height: 140px;
border-radius: 8px 8px 0px 0px;
.infos {
color: #fff;
.hi {
font-size: 20px;
font-weight: 500;
margin-bottom: 16px;
letter-spacing: 1px;
}
.date {
font-size: 14px;
font-weight: 400;
}
}
.images {
width: 216px;
height: 100%;
margin-right: 26px;
display: flex;
align-items: center;
}
}
.content {
height: 104px;
border-radius: 0px 0px 8px 8px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
.row {
display: flex;
flex-direction: row;
align-items: center;
.user {
padding: 0 0 0 24px;
display: flex;
flex-direction: row;
align-items: center;
.pic {
width: 56px;
height: 56px;
margin-right: 12px;
border-radius: 50%;
background-color: red;
}
.wrapper {
display: flex;
flex-direction: column;
.company {
display: flex;
flex-direction: row;
align-items: center;
.tags {
margin-left: 16px;
}
}
}
.status {
margin-top: 12px;
}
}
.level {
height: 16px;
}
}
}
}
src/pages/home/components/UserCenter/index.tsx 0 → 100644
View file @ 8e2047ce
import React from 'react';
import styles from './index.less';
import moment from 'moment';
import { Row, Col, Tag, Badge } from 'antd';
import level2 from '@/assets/imgs/level2.png';
import home_user from '@/assets/imgs/home_user.png';
interface Iprops {}
const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"]
const UserCenter: React.FC<Iprops> = () => {
const today = moment();
return (
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.infos}>
<div className={styles.hi}>
{"Hi, Zzb! 欢迎来到数商云瓴犀业务中台能力中心"}
</div>
<div className={styles.date}>
{today.format('YYYY年MM月DD日')} 星期{WEEKDAYS[today.day()]}
</div>
</div>
<div className={styles.images}>
<img src={home_user} />
</div>
</div>
<div className={styles.content}>
<Row className={styles.row}>
<Col span={11} className={styles.user}>
<div className={styles.pic}></div>
<div className={styles.wrapper}>
<div className={styles.company}>
<span>温州市隆昌皮业有限公司</span>
<div className={styles.tags}>
<Tag>采购商</Tag>
<Tag>采购商</Tag>
</div>
</div>
<div className={styles.status}>
<Badge status={"error"} text={"审核不通过"}></Badge>
</div>
</div>
</Col>
<Col span={3}>
<a>修改会员信息</a>
</Col>
<Col span={4}>
<span>会员等级： </span>
<img src={level2} className={styles.level} />
</Col>
<Col span={3}>平台积分: <strong>10,000</strong></Col>
<Col span={3}>
<a>进入会员中心</a>
</Col>
</Row>
</div>
</div>
)
}
export default UserCenter
\ No newline at end of file
src/pages/home/index.less
View file @ 8e2047ce
.homeGuide{
background-color: @main-color;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
height: 90px;
color: white;
position: relative;
.gridStyle{
.main {
display: flex;
flex-direction: row;
.mainSide {
// flex-basis: 1206px;
margin-right: 23px;
flex: 1;
justify-content: space-between;
align-items: center;
border-right: 1px solid rgba(255, 255, 255, 0.2);
height: 90px;
p{
font-size: 12px;
font-weight: 400;
margin-left: 24px;
margin-bottom: 0;
padding: 0 0 8px 0;
line-height: 1;
vertical-align: middle;
}
.firstp{
height: 24px;
line-height: 24px;
}
.guideTitle{
font-size: 14px;
font-weight: 400;
}
.guideIcon{
font-size: 14px;
margin-right: 27px;
}
.guideIconFirst{
font-size: 24px;
vertical-align: bottom;
}
}
.gridStyleFirst{
flex: 0 0 16%;
}
.guideClose{
width: 56px;
height: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 0px 8px 0px 8px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
text-align: center;
}
&::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #6B778C;
content: "";
position: absolute;
right: 18px;
bottom: -7px;
.rightSide {
width: 386px;
.actions {
display: flex;
}
}
.giudeMenuBox{
border-radius: 5px;
padding: 16px;
background-color: #fff;
flex: 0 0 16%;
//重写步骤条
:global{
.ant-steps-vertical.ant-steps-dot .ant-steps-item .ant-steps-icon-dot{
border: 1px solid #DFE1E6;
background-color: #fff;
}
.ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after{
background-color: #fff;
border-right: 1px dashed #DFE1E6;
.announce {
margin-top: 24px;
}
}
}
\ No newline at end of file
src/pages/home/index.tsx
View file @ 8e2047ce
import React, { useState, useEffect } from 'react'
import { Button, Card, Space, Steps, Dropdown, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge, Menu } from 'antd'
import cx from 'classnames'
import styles from './index.less'
import StatusTag from '@/components/StatusTag'
import { CaretUpOutlined, CompassFilled, CompassOutlined, RightCircleFilled, RightOutlined, UpOutlined } from '@ant-design/icons'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
const { Step } = Steps;
import { Row, Col } from 'antd';
import UseGuaid from './components/UseGuaid';
import UserCenter from './components/UserCenter';
import CustomWorkBench from './components/CustomWorkBench';
import LatestAnnounce from './components/LatestAnnounces';
import RecentVisit from './components/RecentVisit';
import AnyQuestion from './components/AnyQuestion';
import AdvertisementSpace from './components/AdvertisementSpace';
import styles from './index.less'
const Home: React.FC<{}> = () => {
const menu = (
<div className={styles.giudeMenuBox}>
<Steps progressDot current={1000} direction="vertical">
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
<Step title="定义产品功能" description={<><p>开发第一步，标准功能、自定义功能及云功能编辑</p><a href="">如何定义</a></>} />
</Steps>
</div>
);
return (
<PageHeaderWrapper>
<Space direction="vertical" style={{width:'100%'}}>
<Row>
<Col span={24}>
<div className={styles.homeGuide}>
<div className={cx(styles.gridStyle, styles.gridStyleFirst)}>
<p className={styles.firstp}>
<CompassFilled className={styles.guideIconFirst} />
<span>&nbsp;使用向导</span>
</p>
</div>
<Dropdown overlay={menu}>
<div className={styles.gridStyle}>
<div className={styles.main}>
<div className={styles.mainSide}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
<UserCenter />
</div>
<UpOutlined className={styles.guideIcon} />
</div>
</Dropdown>
<Dropdown overlay={menu}>
<div className={styles.gridStyle}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
<div className={styles.rightSide}>
<Row gutter={24}>
<Col><CustomWorkBench /></Col>
<Col><CustomWorkBench /></Col>
</Row>
<div className={styles.announce}>
<LatestAnnounce />
</div>
<UpOutlined className={styles.guideIcon} />
<div className={styles.announce}>
<RecentVisit />
</div>
</Dropdown>
<Dropdown overlay={menu}>
<div className={cx(styles.gridStyle, styles.gridStyleLast)}>
<div>
<p className={styles.guideTitle}>1.新建商品</p>
<p className={styles.guideDesc}>三分钟智能化，完成商品创建</p>
<div className={styles.announce}>
<AnyQuestion />
</div>
<UpOutlined className={styles.guideIcon} />
<div className={styles.announce}>
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
</div>
</Dropdown>
<div className={styles.guideClose}>
<p>关闭</p>
<div className={styles.announce}>
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
</div>
<div className={styles.announce}>
<AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
</div>
</Col>
</Row>
</Space>
</div>
</div>
</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