''

.eslintrc

@@ -65,6 +65,7 @@
     "prefer-object-spread": 0,
     "react/jsx-props-no-spreading": 0,
     "lines-between-class-members": 0,
-    "react/no-array-index-key": 0
+    "react/no-array-index-key": 0,
+    "react/react-in-jsx-scope": 0
   }
 }
\ No newline at end of file

src/common/menuconfig.js

@@ -190,6 +190,21 @@ export default {
           },
           isFather: false,
           noIcon: true,
+          path: '/sjd/coursegather',
+          relativePath: ['/sjd/coursegather'],
+        },
+        {
+          id: '33',
+          fatherId: '30',
+          name: '素材库',
+          style: {
+            width: '20px',
+            height: '20px',
+          },
+          path: '/sjd/coursemateria',
+          relativePath: ['/sjd/coursemateria'],
+          isFather: false,
+          noIcon: true,
         },
       ],
     },

src/models/coursemateria.js

+
+import { routerRedux } from 'dva/router';
+import { message } from 'antd';
+import {
+  LocalStorage,
+  SessionStorage,
+  isExpired,
+  showWeekDay,
+  showMonthDay,
+} from '../utils/index';
+import errorcode from '../common/errorcode';
+import * as headquartersAjax from '../services/headquarters';
+export default {
+  namespace: 'coursemateria',
+  state: {
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {  // eslint-disable-line
+    },
+  },
+  effects: {
+  },
+  reducers: {
+    save(state, action) {
+      return { ...state, ...action.payload };
+    },
+    updateState(state, action) {
+      return { ...state, ...action.payload };
+    },
+  },
+};

src/models/index.js

@@ -40,6 +40,7 @@ import integralModel from './integral';
 import createThemeModal from './createtheme';
 import analyzecenterModal from './analyzecenter';
 import onlineclassesModal from './onlineclasses';
+import coursemateria from './coursemateria';
 export default {
   loginModel,
   indexstaicModel,
@@ -74,4 +75,5 @@ export default {
   createThemeModal,
   analyzecenterModal,
   onlineclassesModal,
+  coursemateria,
 };

src/models/webapp.js

@@ -830,6 +830,17 @@ export default {
             },
           });
         }
+        if (pathname === '/sjd/coursemateria') {
+          dispatch({
+            type: 'updateState',
+            payload: {
+              breadcrumbList: [{
+                path: pathname,
+                name: '素材管理',
+              }],
+            },
+          });
+        }
       });
     },
   },

src/pages/coursegather/Card.js

+import React from 'react';
+import { Icon } from 'antd';
+import pageStyle from './Card.less';
+const MediaCard = (props) => {
+  const {
+    type,
+    style,
+  } = props;
+  return (
+    <div className={pageStyle.box} {...props}>
+      <img className={pageStyle.image} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+      <div className={pageStyle.infobox}>
+        <div className={pageStyle.topbox}>
+          <div className={pageStyle.title}>超值体验课，</div>
+          <div className={pageStyle.time}>2019-11-12 18:21</div>
+        </div>
+        <div className={pageStyle.bottombox}>
+          <div className={pageStyle.bluedot} />
+          <div className={pageStyle.coursecount}>5个课程</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MediaCard;
+

src/pages/coursegather/Card.less

+.box {
+    border-radius: 8px;
+    overflow: hidden;
+    width: 316px;
+    height: 110px;
+    border-radius: 6px;
+    box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+    background:rgba(255,255,255,1);
+    padding: 10px;
+    display: flex;
+    .image {
+        width: 90px;
+        height: 90px;
+        border-radius: 6px;
+        display: block;
+        margin-right: 17px;
+    }
+    .infobox {
+        width: 187px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .topbox {
+            .title {
+                color: #575757;
+                font-size: 16px;
+                text-overflow: -o-ellipsis-lastline;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+            .time {
+                color: #7C7C7C;
+                font-size: 14px;
+            }
+        }
+        .bottombox {
+            display: flex;
+            align-items: center;
+            .bluedot {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: #2194FF;
+                margin-right: 6px;
+            }
+            .coursecount {
+                color: #7C7C7C;
+                font-size: 14px;
+                line-height: 1;
+            }
+        }
+    }
+}
\ No newline at end of file

src/pages/coursegather/detail/index.js

+import React from 'react';
+import {
+  Router,
+  Route,
+  Switch,
+  Redirect,
+  routerRedux,
+} from 'dva/router';
+import $ from 'jquery';
+import { connect } from 'dva';
+import { Button, Row, Col, Modal, Icon, DatePicker, Spin } from 'antd';
+import Card from '../Card';
+import pageStyle from './index.less';
+import { pageIn } from '../../../utils/index';
+class StaticCenter extends React.Component {
+  componentDidMount() { // 挂载
+    pageIn('轻校-素材库');
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  render() {
+    const that = this;
+    return (
+      <div className={pageStyle.container}>
+        <div className={pageStyle.tabbox}>
+          <Button type="primary" className={pageStyle.uploadbtn}>创 建 专 栏</Button>
+        </div>
+        <div className={pageStyle.mediaCardBox}>
+          <Card
+            type={1}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={2}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={3}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+StaticCenter.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  // const {
+  // } = state.coursemateria;
+  return {
+  };
+}
+export default connect(mapStateToProps)(StaticCenter);
+

src/pages/coursegather/detail/index.less

+@import '../../../less/variables.less';
+.container {
+    background-color: #fff;
+    border-radius: 6px;
+}
+.tabbox {
+    box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
+    padding: 20px;
+    .uploadbtn {
+        letter-spacing: 2px;
+    }
+}
+.mediaCardBox {
+    padding: 27px 20px;
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file

src/pages/coursegather/index/index.js

+import React from 'react';
+import {
+  Router,
+  Route,
+  Switch,
+  Redirect,
+  routerRedux,
+} from 'dva/router';
+import $ from 'jquery';
+import { connect } from 'dva';
+import { Button, Row, Col, Modal, Icon, DatePicker, Spin } from 'antd';
+import Card from '../Card';
+import pageStyle from './index.less';
+import { pageIn } from '../../../utils/index';
+class StaticCenter extends React.Component {
+  componentDidMount() { // 挂载
+    pageIn('轻校-素材库');
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  render() {
+    const that = this;
+    return (
+      <div className={pageStyle.container}>
+        <div className={pageStyle.tabbox}>
+          <Button type="primary" className={pageStyle.uploadbtn}>创 建 专 栏</Button>
+        </div>
+        <div className={pageStyle.mediaCardBox}>
+          <Card
+            type={1}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={2}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={3}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <Card
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+StaticCenter.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  // const {
+  // } = state.coursemateria;
+  return {
+  };
+}
+export default connect(mapStateToProps)(StaticCenter);
+

src/pages/coursegather/index/index.less

+@import '../../../less/variables.less';
+.container {
+    background-color: #fff;
+    border-radius: 6px;
+}
+.tabbox {
+    box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
+    padding: 20px;
+    .uploadbtn {
+        letter-spacing: 2px;
+    }
+}
+.mediaCardBox {
+    padding: 27px 20px;
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file

src/pages/coursemateria/MediaCard.js

+import React from 'react';
+import { Icon } from 'antd';
+import pageStyle from './MediaCard.less';
+const MediaCard = (props) => {
+  const {
+    type,
+    style,
+  } = props;
+  return (
+    <div className={pageStyle.box} {...props}>
+      {type == 1 &&
+        <div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`}>
+          <img className={pageStyle.image} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+          <img className={pageStyle.imageicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+        </div>}
+      {type == 2 &&
+        <div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`}>
+          <img className={pageStyle.videoposter} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+          <img className={pageStyle.videoicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+          <div className={pageStyle.videoplay}>
+            <img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" />
+          </div>
+        </div>}
+      {type == 3 &&
+        <div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`}>
+          <img className={pageStyle.fileIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+          <div className={pageStyle.fileName}>11月上课素材.doc</div>
+        </div>}
+      {type == 4 &&
+        <div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`}>
+          <img className={pageStyle.audioIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
+          <div className={pageStyle.audioTime}>60&ldquo;</div>
+        </div>}
+      <div className={pageStyle.bottom}>
+        <span className={pageStyle.time}>2019-11-12</span>
+        <Icon type="delete" className={pageStyle.deleteIcon} />
+      </div>
+    </div>
+  );
+};
+export default MediaCard;
+

src/pages/coursemateria/MediaCard.less

+.box {
+    border-radius: 8px;
+    overflow: hidden;
+    width: 200px;
+    .mediaBox {
+        // width: 200px;
+        height: 164px;
+        position: relative;;
+        &.imgBox {
+            .imageicon {
+                width: 25px;
+                height: 25px;
+                position: absolute;
+                top: 9px;
+                right: 9px;
+            }
+            .image {
+                width: 200px;
+                height: 164px;
+            }
+            
+        }
+        &.videoBox {
+            .videoicon {
+                width: 25px;
+                height: 25px;
+                position: absolute;
+                top: 9px;
+                right: 9px;
+            }
+            .videoposter {
+                width: 200px;
+                height: 164px;
+            }
+            .videoplay {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 55px;
+                height: 55px;
+                border-radius: 50%;
+                border:2px solid rgba(255,255,255,1);
+                background:rgba(0,0,0,0.3);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                .videoplayicon {
+                    width: 14px;
+                    height: 16px;
+                }
+            }
+        }
+        &.audioBox {
+            background-color: #1EB8FF;
+            padding-top: 55px;
+            .audioIcon {
+                width: 88px;
+                height: 35px;
+                display: block;
+                margin: 0 auto 30px;
+            }
+            .audioTime {
+                text-align: center;
+                color: #FFFFFF;
+                font-size: 16px;
+                line-height: 1;
+            }
+        }
+        &.fileBox {
+            background-color: #FFB879;
+            padding-top: 52px;
+            .fileIcon {
+                width: 57px;
+                height: 51px;
+                margin: 0 auto 18px;
+                display: block;
+            }
+            .fileName {
+                color:rgba(255,255,255,1);
+                text-align: center;
+                margin: 0 auto;
+                text-align: center;
+                max-width: 80%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+    .bottom {
+        height: 40px;
+        line-height: 40px;
+        background-color: #F0F2F5;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 8px 0 15px;
+        .time {
+            color: rgba(109,109,109,1);
+            font-size: 14px;
+        }
+        .deleteIcon {
+            color: red;
+            cursor: pointer;
+            font-size: 16px;
+        }
+    }
+}
\ No newline at end of file

src/pages/coursemateria/index.js

+import React from 'react';
+import {
+  Router,
+  Route,
+  Switch,
+  Redirect,
+  routerRedux,
+} from 'dva/router';
+import $ from 'jquery';
+import { connect } from 'dva';
+import { Button, Row, Col, Modal, Icon, DatePicker, Spin } from 'antd';
+import MediaCard from './MediaCard';
+import pageStyle from './index.less';
+import { pageIn } from '../../utils/index';
+const { RangePicker } = DatePicker;
+class StaticCenter extends React.Component {
+  componentDidMount() { // 挂载
+    pageIn('轻校-素材库');
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  render() {
+    const that = this;
+    return (
+      <div className={pageStyle.container}>
+        <div className={pageStyle.tabbox}>
+          <div className={`${pageStyle.tabitem} ${pageStyle.active}`}>全部</div>
+          <div className={pageStyle.tabitem}>图片</div>
+          <div className={pageStyle.tabitem}>音频</div>
+          <div className={pageStyle.tabitem}>视频</div>
+          <div className={pageStyle.tabitem}>文件</div>
+          <Button type="primary" className={pageStyle.uploadbtn}>添加素材</Button>
+        </div>
+        <div className={pageStyle.mediaCardBox}>
+          <MediaCard
+            type={1}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={2}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={3}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+          <MediaCard
+            type={4}
+            style={{ marginRight: '20px', marginBottom: '20px' }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+StaticCenter.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  // const {
+  // } = state.coursemateria;
+  return {
+  };
+}
+export default connect(mapStateToProps)(StaticCenter);
+

src/pages/coursemateria/index.less

+@import '../../less/variables.less';
+.container {
+    background-color: #fff;
+    border-radius: 6px;
+}
+.tabbox {
+    display: flex;
+    align-items: center;
+    box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.04);
+    .tabitem {
+        color: #000000;
+        font-size: 16px;
+        line-height: 1;
+        padding: 26px 11px 24px;
+        border-bottom: 3px solid transparent;
+        margin: 0 20px;
+        cursor: pointer;
+        &.active {
+            border-color: #1890FF;
+            color: #1890FF;
+        }
+        &:hover {
+            border-color: #1890FF;
+            color: #1890FF;
+        }
+    }
+    .uploadbtn {
+        margin-left: 60px;
+    }
+}
+.mediaCardBox {
+    padding: 27px 20px;
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file

src/router.js

@@ -195,6 +195,21 @@ const SingleClass = props => (
     { SingleClass => (<SingleClass {...props} />) }
   </Bundle>
 );
+const CourseMateria = props => (
+  <Bundle load={() => import(/* webpackChunkName:"CourseMateria" */'./pages/coursemateria/index')}>
+    { CourseMateria => (<CourseMateria {...props} />) }
+  </Bundle>
+);
+const CourseGather = props => (
+  <Bundle load={() => import(/* webpackChunkName:"CourseGather" */'./pages/coursegather/index/index')}>
+    { CourseGather => (<CourseGather {...props} />) }
+  </Bundle>
+);
+const CourseGatherDetail = props => (
+  <Bundle load={() => import(/* webpackChunkName:"CourseGatherDetail" */'./pages/coursegather/detail/index')}>
+    { CourseGatherDetail => (<CourseGatherDetail {...props} />) }
+  </Bundle>
+);
 function RouterConfig({ history }) {
   return (
     <ConfigProvider locale={zhCN}>
@@ -230,6 +245,9 @@ function RouterConfig({ history }) {
                 <Route path="/sjd/newtheme/calendarclock/:id/:isCopy" exact component={CalendarClock} />
                 <Route path="/sjd/datacenter" exact component={DataCenter} />
                 <Route path="/sjd/singleclass" exact component={SingleClass} />
+                <Route path="/sjd/coursemateria" exact component={CourseMateria} />
+                <Route path="/sjd/coursegather" exact component={CourseGather} />
+                <Route path="/sjd/gatherdetail" exact component={CourseGatherDetail} />
               </SjdIndex>
             )}
           />