工作台

Mr Ke

2020-04-06 c2866301131db5f8433ff80a15a7404ac1b5522e

工作台

 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;
    }
  }
}

 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' }} />
    );
}

 src/components/common/HotListTableView/index.jsx

New file
@@ -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>
    )
  }
}

 src/components/common/HotListTableView/index.scss

New file
@@ -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;
    }
  }
}

 src/components/common/NotifyList/index.jsx

New file
@@ -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>
//    )
//}

 src/components/common/NotifyList/index.scss

New file
@@ -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;
      }
    }
  }
}

 src/components/common/TopListTableView/index.jsx

New file
@@ -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>
    )
  }
}

 src/components/common/TopListTableView/index.scss

New file
@@ -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;
      }
    }
  }
}

 src/components/page/workbench/index.jsx

New file
@@ -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>
    )
  }
}


 src/components/page/workbench/index.scss

New file
@@ -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;

  }
}

 src/pages/index/workbench.jsx

@@ -6,8 +6,8 @@

/** 首页 -- 工作台 */
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) {
@@ -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>
//    )
//}


 src/style/reset.scss

@@ -5,3 +5,4 @@
.ant-layout-sider-trigger{
  background: #CC4E45;
}