From c2866301131db5f8433ff80a15a7404ac1b5522e Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Mon, 06 Apr 2020 12:08:27 +0800
Subject: [PATCH] 工作台
---
src/components/common/NotifyList/index.scss | 35 ++++
src/components/common/BreadcrumbView/index.scss | 3
src/components/page/workbench/index.jsx | 39 ++++
src/components/page/workbench/index.scss | 13 +
src/pages/index/workbench.jsx | 19 -
src/components/common/HeadView/index.jsx | 2
src/style/reset.scss | 1
src/components/common/TopListTableView/index.jsx | 57 +++++++
src/components/common/TopListTableView/index.scss | 175 +++++++++++++++++++++
src/components/common/HotListTableView/index.jsx | 51 ++++++
src/components/common/HotListTableView/index.scss | 17 ++
src/components/common/NotifyList/index.jsx | 53 ++++++
12 files changed, 451 insertions(+), 14 deletions(-)
diff --git a/src/components/common/BreadcrumbView/index.scss b/src/components/common/BreadcrumbView/index.scss
index ae85be1..f518468 100644
--- a/src/components/common/BreadcrumbView/index.scss
+++ b/src/components/common/BreadcrumbView/index.scss
@@ -7,12 +7,13 @@
/** Happy Coding */
.breadcrumb-view {
&-main {
+ padding: 16px 24px;
+ background: #fff;
.ant-breadcrumb {
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
font-weight: bold;
- margin-bottom: 20px;
}
}
}
diff --git a/src/components/common/HeadView/index.jsx b/src/components/common/HeadView/index.jsx
index 1de9d85..96ed163 100644
--- a/src/components/common/HeadView/index.jsx
+++ b/src/components/common/HeadView/index.jsx
@@ -15,6 +15,6 @@
export default function MenuView({ }) {
return (
- <Header style={{ background: '#fff', padding: 0 }} />
+ <Header style={{ background: '#fff', padding: 0, boxShadow: 'inset 0 -1px 0 0 #E5E5E5' }} />
);
}
diff --git a/src/components/common/HotListTableView/index.jsx b/src/components/common/HotListTableView/index.jsx
new file mode 100644
index 0000000..0e30d9d
--- /dev/null
+++ b/src/components/common/HotListTableView/index.jsx
@@ -0,0 +1,51 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 11:50:58 AM
+ * doc comment for the file goes here
+ */
+
+/** 行业热点知识库 */
+import React, { ReactNode, ReactEventHandler, Component } from 'react';
+import BreadcrumbView from '../BreadcrumbView';
+import TableView from '../TableView';
+
+import { Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
+import './index.scss';
+
+export default class HotListTableView extends Component {
+ constructor(props) {
+ super(props);
+ this.config = {
+ };
+ this.state = {
+ };
+ }
+
+ componentWillMount() { }
+
+ componentDidMount() { }
+
+ render() {
+ return (
+ <div className="hot-list-table-view-main">
+ <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
+ <div className="hot-list-table-view-main-content">
+ <Tabs defaultActiveKey="1" >
+ <TabPane tab="Tab 1" key="1">
+ Content of Tab Pane 1
+ </TabPane>
+ <TabPane tab="Tab 2" key="2">
+ Content of Tab Pane 2
+ </TabPane>
+ <TabPane tab="Tab 3" key="3">
+ Content of Tab Pane 3
+ </TabPane>
+ </Tabs>
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/src/components/common/HotListTableView/index.scss b/src/components/common/HotListTableView/index.scss
new file mode 100644
index 0000000..a3c6610
--- /dev/null
+++ b/src/components/common/HotListTableView/index.scss
@@ -0,0 +1,17 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 11:50:58 AM
+ * doc comment for the file goes here
+ */
+
+/** Happy Coding */
+.hot-list-table-view {
+ &-main {
+ margin: 24px 0;
+ background: #fff;
+ &-content {
+ margin: 0 24px 24px 24px;
+ border: 1px solid #e6e6e6;
+ }
+ }
+}
diff --git a/src/components/common/NotifyList/index.jsx b/src/components/common/NotifyList/index.jsx
new file mode 100644
index 0000000..4c7b328
--- /dev/null
+++ b/src/components/common/NotifyList/index.jsx
@@ -0,0 +1,53 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 10:41:26 AM
+ * doc comment for the file goes here
+ */
+
+/** 通知列表 */
+import React, { ReactNode, ReactEventHandler, Component } from 'react';
+import { Alert } from 'antd';
+
+import './index.scss';
+
+export default class NotifyList extends Component {
+ constructor(props) {
+ super(props);
+ this.config = {
+ };
+ this.state = {
+ };
+ }
+
+ componentWillMount() { }
+
+ componentDidMount() { }
+
+ renderDom = () => {
+ return <div className="notify-list-main-dom">
+ <span className="notify-list-main-dom-msg">最新通知：公司本部从XX时间开始，调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始，调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始，调整省略很长很长的内容调整省略很长很长的内容</span>
+ <span className="notify-list-main-dom-fuc">[查看全部]</span>
+ </div>
+ }
+
+ render() {
+ return (
+ <div className="notify-list-main">
+ <Alert
+ // message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+ message={this.renderDom()}
+ type="warning"
+ closable={false}
+ // onClose={onClose}
+ />
+ </div>
+ )
+ }
+}
+//export default function NotifyList({ }) {
+// return (
+// <div className="notify-list-main">
+//
+// </div>
+// )
+//}
diff --git a/src/components/common/NotifyList/index.scss b/src/components/common/NotifyList/index.scss
new file mode 100644
index 0000000..a8b6d28
--- /dev/null
+++ b/src/components/common/NotifyList/index.scss
@@ -0,0 +1,35 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 10:41:26 AM
+ * doc comment for the file goes here
+ */
+
+/** Happy Coding */
+.notify-list {
+ &-main {
+ margin: 20px 0;
+ & .ant-alert-warning {
+ background: #fff9e5 !important;
+ border: 0 !important;
+ }
+ &-dom {
+ width: 100%;
+ display: flex;
+ &-msg {
+ width: 55%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ &-fuc {
+ font-family: PingFangSC-Medium;
+ font-size: 14px;
+ color: #559DE6;
+ line-height: 22px;
+ cursor: pointer;
+ letter-spacing: 1px;
+ }
+ }
+ }
+}
diff --git a/src/components/common/TopListTableView/index.jsx b/src/components/common/TopListTableView/index.jsx
new file mode 100644
index 0000000..6adcb29
--- /dev/null
+++ b/src/components/common/TopListTableView/index.jsx
@@ -0,0 +1,57 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 11:03:52 AM
+ * doc comment for the file goes here
+ */
+
+/** 榜单table列表 */
+import React, { ReactNode, ReactEventHandler, Component } from 'react';
+import { Table, Row, Col } from 'antd';
+import './index.scss';
+
+
+export default class TopListTableView extends Component {
+ constructor(props) {
+ super(props);
+ this.config = {
+ };
+ this.state = {
+ };
+ }
+
+ componentWillMount() { }
+
+ componentDidMount() { }
+
+ renderDom = () => {
+ return <div className="top-list-table-view-main-table">
+ <div className="top-list-table-view-main-table-title">主题</div>
+ <Table
+ dataSource={[{ age: 1 }]}
+ columns={[{
+ title: '年龄',
+ dataIndex: 'age',
+ key: 'age'
+ }]}
+ size="small"
+ bordered={false}
+ pagination={false}
+ />
+ </div>
+ }
+
+ render() {
+
+ return (
+ <div className="top-list-table-view-main">
+ <Row type="flex" gutter={12}>
+ {
+ [1, 2, 3].map((item, idx) => {
+ return <Col span={24 / 3} key={idx}>{this.renderDom()}</Col>;
+ })
+ }
+ </Row>
+ </div>
+ )
+ }
+}
diff --git a/src/components/common/TopListTableView/index.scss b/src/components/common/TopListTableView/index.scss
new file mode 100644
index 0000000..369fd80
--- /dev/null
+++ b/src/components/common/TopListTableView/index.scss
@@ -0,0 +1,175 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 11:03:52 AM
+ * doc comment for the file goes here
+ */
+
+/** Happy Coding */
+.top-list-table-view {
+ &-main {
+ &-table {
+ background: #fff;
+ padding: 16px 9px;
+ & .ant-table-small > .ant-table-content > .ant-table-body {
+ margin: 0 !important;
+ }
+ &
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-header
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-body
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-scroll
+ > .ant-table-header
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-scroll
+ > .ant-table-body
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-left
+ > .ant-table-header
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-right
+ > .ant-table-header
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-left
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-right
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-header
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-body
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-scroll
+ > .ant-table-header
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-scroll
+ > .ant-table-body
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-left
+ > .ant-table-header
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-right
+ > .ant-table-header
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-left
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-tbody
+ > tr
+ > td,
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-right
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-tbody
+ > tr
+ > td {
+ padding: 2px 7px !important;
+ }
+ & .ant-table-placeholder {
+ display: none !important;
+ }
+ & .ant-table-small {
+ border: 0 !important;
+ }
+ & .ant-table-column-title {
+ font-weight: bold;
+ }
+ & .ant-table-thead {
+ background: #dce8f5 !important;
+ height: 24px !important;
+ font-family: PingFangSC-Medium;
+ font-size: 12px;
+ color: #323232;
+ line-height: 20px;
+ }
+ &-title {
+ font-family: PingFangSC-Medium;
+ font-size: 14px;
+ color: #323232;
+ text-align: center;
+ line-height: 22px;
+ padding-bottom: 15px;
+ font-weight: bold;
+ }
+ }
+ }
+}
diff --git a/src/components/page/workbench/index.jsx b/src/components/page/workbench/index.jsx
new file mode 100644
index 0000000..733a1f1
--- /dev/null
+++ b/src/components/page/workbench/index.jsx
@@ -0,0 +1,39 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 10:34:31 AM
+ * doc comment for the file goes here
+ */
+
+/** 首页--工作台 */
+import React, { ReactNode, ReactEventHandler, Component } from 'react';
+import NotifyList from '../../common/NotifyList'; //通知列表
+import TopListTableView from '../../common/TopListTableView'; //榜单列表
+import HotListTableView from '../../common/HotListTableView'; //行业热点知识库
+
+import './index.scss';
+
+
+export default class Workbench extends Component {
+ constructor(props) {
+ super(props);
+ this.config = {
+ };
+ this.state = {
+ };
+ }
+
+ componentWillMount() { }
+
+ componentDidMount() { }
+
+ render() {
+ return (
+ <div className="workbench-main">
+ <NotifyList />
+ <TopListTableView />
+ <HotListTableView />
+ </div>
+ )
+ }
+}
+
diff --git a/src/components/page/workbench/index.scss b/src/components/page/workbench/index.scss
new file mode 100644
index 0000000..4ca2bc2
--- /dev/null
+++ b/src/components/page/workbench/index.scss
@@ -0,0 +1,13 @@
+/* eslint-disable */
+/**柯礼钦
+ * 4/6/2020, 10:34:31 AM
+ * doc comment for the file goes here
+ */
+
+/** Happy Coding */
+.workbench {
+ &-main {
+ padding: 0 14px;
+
+ }
+}
diff --git a/src/pages/index/workbench.jsx b/src/pages/index/workbench.jsx
index b56a768..569a806 100644
--- a/src/pages/index/workbench.jsx
+++ b/src/pages/index/workbench.jsx
@@ -6,11 +6,11 @@
/** 首页 -- 工作台 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
-// import { Link } from 'react-router-dom';
-// import { Icon } from 'antd';
+import BreadcrumbView from '../../components/common/BreadcrumbView';
+import WorkbenchPage from '../../components/page/workbench'
export default class Workbench extends Component {
- constructor(props) {
+ constructor(props) {
super(props);
this.config = {
};
@@ -26,16 +26,11 @@
render() {
return (
- <div className="workbench-main">
-
+ <div className="workbench-page-main">
+ <BreadcrumbView data={[{ name: '工作台' }]} />
+ <WorkbenchPage />
</div>
)
}
}
-//export default function Workbench({ }) {
-// return (
-// <div className="workbench-main">
-//
-// </div>
-// )
-//}
+
diff --git a/src/style/reset.scss b/src/style/reset.scss
index b6fc7af..791988d 100644
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -5,3 +5,4 @@
.ant-layout-sider-trigger{
background: #CC4E45;
}
+
--
Gitblit v1.8.0