优化

src/common/api.js

@@ -243,4 +243,9 @@ export default {
     subjectDelete: `${dakaapi}member/website/subject/destroy`,
     subjectSort: `${dakaapi}member/website/subject/subject_sort`,
   },
+  liveClass: {
+    lives: `${dakaapi}member/lives`,
+    livesStatus: `${dakaapi}member/live/status`,
+    livesUrl: `${dakaapi}member/live/url`,
+  },
 };

src/common/menuconfig.js

@@ -210,5 +210,19 @@ export default {
         },
       ],
     },
+    {
+      id: '70',
+      name: '直播课堂',
+      key: 70,
+      isFather: false,
+      style: {
+        width: '20px',
+        height: '20px',
+      },
+      activeurl: `${__IMGCDN__}menu/crmactive.png`,
+      notactiveurl: `${__IMGCDN__}menu/crm.png`,
+      path: '/sjd/liveClass',
+      relativePath: ['/sjd/liveClass', '/sjd/addLive'],
+    },
   ],
 };

src/models/index.js

@@ -56,6 +56,7 @@ import addcrm from './addcrm';
 import crmdetail from './crmdetail';
 import holidays from './holidays';
 import officialtheme from './officialtheme';
+import liveclass from './liveclass';
 export default {
   loginModel,
   indexstaicModel,
@@ -106,4 +107,5 @@ export default {
   crmdetail,
   holidays,
   officialtheme,
+  liveclass,
 };

src/models/webapp.js

@@ -1298,6 +1298,61 @@ export default {
             },
           });
         }
+        if (pathname === '/sjd/liveClass') {
+          dispatch({
+            type: 'liveclass/queryinfo',
+          });
+          dispatch({
+            type: 'updateState',
+            payload: {
+              breadcrumbList: [{
+                path: pathname,
+                name: '直播课堂',
+              }],
+            },
+          });
+        }
+        if (pathname === '/sjd/addLive') {
+          dispatch({
+            type: 'updateState',
+            payload: {
+              breadcrumbList: [
+                {
+                  path: 'sjd/liveClass',
+                  name: '直播课堂',
+                },
+                {
+                  path: pathname,
+                  name: '添加直播',
+                },
+              ],
+            },
+          });
+        }
+        const editLiveclass = pathToRegexp('/sjd/editLive/:id').exec(pathname);
+        if (editLiveclass) {
+          dispatch({
+            type: 'liveclass/queryDetail',
+            payload: {
+              id: editLiveclass[1],
+            },
+          });
+          dispatch({
+            type: 'updateState',
+            payload: {
+              breadcrumbList: [
+                {
+                  path: 'sjd/liveClass',
+                  name: '直播课堂',
+                },
+                {
+                  path: pathname,
+                  name: '编辑直播',
+                },
+              ],
+            },
+          });
+        }
         if (pathname === '/sjd/record') {
           dispatch({
             type: 'classrecord/queryinfo',

src/pages/liveclass/AddLive.less

+@import '../../less/variables.less';
+.container {
+  background-color: #fff;
+  border-radius: 2px;
+  padding:20px;
+  padding-bottom: 50px;
+}
+.topTip {
+  font-size:14px;
+  font-family:PingFang SC;
+  font-weight:400;
+  color:rgba(33,148,255,1);
+  padding-bottom: 20px;
+}
+.headerWrap {
+  .commonTitle {
+    font-size:16px;
+    font-family:PingFangSC-Medium,PingFang SC;
+    font-weight:600;
+    line-height: 24px;
+    color:rgba(0,0,0,0.85);
+    margin-bottom: 20px;
+    .line {
+      width: 3px;
+      height: 19px;
+      background-color: #1890FF;
+      display: inline-block;
+      vertical-align: -10%;
+      margin-right: 6px;
+    }
+  }
+  :global {
+    .ant-form-item {
+      margin-bottom: 20px;
+    }
+  }
+}
+.addMobile {
+  font-size:13px;
+  font-family:PingFangSC-Regular,PingFang SC;
+  font-weight:400;
+  color:rgba(24,144,255,1);
+  line-height:18px;
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 10px;
+}
+.mobileTip {
+  font-size:12px;
+  font-weight:400;
+  color:rgba(153,153,153,1);
+  line-height:17px;
+  margin-bottom: 0;
+}
+.imgWrap {
+  display: flex;
+  .imgLeft {
+    width: 200px;
+    height: 150px;
+    margin-right: 20px;
+    .coverimg {
+      width: 100%;
+      height: 100%;
+    }
+    .imgBox {
+      width: 200px;
+      height: 150px;
+      background-color: #F7F8F9;
+      border: 1px solid #E6E6E6;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 150px;
+      .defaultImg {
+        width: 32px;
+        height: 28px;
+      }
+    }
+  }
+  .imgRight {
+    .uploadImg {
+      position: relative;
+      width: 100px;
+      height: 40px;
+      cursor: pointer;
+      .uploadInput {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        z-index: 5;
+      }
+    }
+    .imgTip {
+      font-size:14px;
+      font-family:PingFang SC;
+      font-weight:400;
+      color:rgba(143,143,143,1);
+      width: 270px;
+      &>span {
+        font-size:14px;
+        font-family:PingFang SC;
+        font-weight:400;
+        color:rgba(24,144,255,1);
+        cursor: pointer;
+      }
+    }
+  }
+}
+.radioWrap {
+  width: 100%;
+  :global {
+    .ant-form-item-children {
+      width: 100%;
+    }
+    .ant-radio-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+    .ant-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  .radioList {
+    display: flex;
+    align-items: center;
+  }
+  .radioName {
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    color:rgba(51,51,51,1);
+    display: inline-block;
+    margin-right: 20px;
+  }
+  .radioTip {
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    color:rgba(143,143,143,1);
+  }
+}
+
+.footerBox {
+  position: fixed;
+  bottom: 0;
+  background-color: #fff;
+  padding: 20px 20px 14px 20px;
+  width: 100%;
+  box-shadow:1px -6px 6px 0px rgba(0, 0, 0, 0.04);
+  transition: 0.2s left;
+  transition: 0.1s width;
+  z-index: 20;
+  text-align: left;
+}

src/pages/liveclass/DownloadModal.js

+import { connect } from 'dva';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { message, Row, Col, Input, Select, Modal, Form, InputNumber, Checkbox, Radio, Tabs } from 'antd';
+import ClipboardJS from 'clipboard';
+import { imagify, pageIn } from '../../utils/index';
+import pageStyle from './DownloadModal.less';
+const FormItem = Form.Item;
+const { TabPane } = Tabs;
+class DownloadModal extends React.Component {
+  componentWillMount() {
+  }
+  componentDidUpdate() {
+  }
+  componentWillUpdate() {
+  }
+  componentDidMount() { // 挂载
+    pageIn('直播课堂');
+    this.clipboard = new ClipboardJS('#btnCopyLink1'); // 点击按钮复制到粘贴板
+    this.clipboard = new ClipboardJS('#btnCopyLink2');
+    this.clipboard = new ClipboardJS('#btnCopyLink3');
+    this.clipboard.on('success', () => {
+      message.success('复制成功', 0.5);
+    });
+  }
+  componentWillUnmount() { // 卸载
+  }
+  close = () => {
+    const { form, close } = this.props;
+    close();
+  }
+  render() {
+    const {
+      visible,
+      form: { getFieldDecorator, getFieldValue },
+      liveUrlData,
+    } = this.props;
+    return (
+      <Modal
+        className={pageStyle.modalWrap}
+        visible={visible}
+        onCancel={this.close}
+        maskClosable={false}
+        zIndex={110}
+        width={800}
+        bodyStyle={{ borderRadius: 8 }}
+        footer={
+          <div className={pageStyle.footerTip}>
+          *若上述下载失败或要下载最新版请到OBS软件官网进行下载：https://obsproject.com/
+          </div>
+        }
+      >
+        <div className={pageStyle.wrap}>
+          <div className={pageStyle.title}>直播间创建成功，快去OBS直播客户端开始学员讲课吧</div>
+          <div className={pageStyle.titleTip}>说明：OBS是讲师进行直播推流使用的第三方软件，助教可以配合网页/h5进行直播评论互动，详情操作 查看 <span>OBS直播使用教程</span></div>
+          <div className={pageStyle.stepOne}>
+            <span>1</span>OBS推流
+          </div>
+          <div className={pageStyle.stepWrap}>
+            <div className={pageStyle.stepText}>(1) OBS推流工具下载</div>
+            <div className={pageStyle.downloadType}>
+              <div className={pageStyle.downloadItem}>
+                <img className={pageStyle.macImg} src={`${__IMGCDN__}liveclass/mac.png`} alt="" />
+                <div className={pageStyle.downloadItemRight}>
+                  <span>Mac版</span>
+                  <span className={pageStyle.dowloadSize}>下载</span>
+                </div>
+              </div>
+              <div className={pageStyle.downloadItem}>
+                <img className={pageStyle.windowsImg} src={`${__IMGCDN__}liveclass/windows.png`} alt="" />
+                <div className={pageStyle.downloadItemRight}>
+                  <span>Mac版</span>
+                  <span className={pageStyle.dowloadSize}>下载</span>
+                </div>
+              </div>
+            </div>
+            <div className={pageStyle.stepText}>(2) 推流信息 <span>在OBS软件中输入以下URL与流名称，根据桌面共享直播使用教程配置开启直播</span></div>
+            <div className={pageStyle.copyWrap}>
+              <div className={pageStyle.copyRight}>URL</div>
+              <div className={pageStyle.copyBox} id="copy1">{liveUrlData.stream_url}</div>
+              <div className={pageStyle.copyButton} data-clipboard-target="#copy1" id="btnCopyLink1">复制</div>
+            </div>
+            <div className={pageStyle.copyWrap}>
+              <div className={pageStyle.copyRight}>流名称</div>
+              <div className={pageStyle.copyBox} id="copy2">{liveUrlData.stream_name}</div>
+              <div className={pageStyle.copyButton} data-clipboard-target="#copy2" id="btnCopyLink2">复制</div>
+            </div>
+          </div>
+          <div className={pageStyle.stepOne} style={{ marginTop: 16 }}>
+            <span>2</span>网页端地址
+            <div className={pageStyle.copyWrap} style={{ marginTop: 0, marginLeft: 47 }}>
+              <div className={pageStyle.copyBox} id="copy3">https://www.baidu.com/</div>
+              <div className={pageStyle.copyButton} data-clipboard-target="#copy3" id="btnCopyLink3">复制</div>
+            </div>
+          </div>
+          <p className={pageStyle.webTip} >复制链接在网页直接打开</p>
+        </div>
+
+      </Modal>
+    );
+  }
+}
+
+const Download = Form.create()(DownloadModal);
+
+export default Download;
+

src/pages/liveclass/DownloadModal.less

+.wrap {
+  .title {
+    font-size:16px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:rgba(0,0,0,1);
+    position: relative;
+    text-align: center;
+    &:after {
+      position: absolute;
+      content: '';
+      display: block;
+      width: 34px;
+      height: 4px;
+      background-color: #1890FF;
+      border-radius: 2px;
+      left: 50%;
+      bottom: -10px;
+    }
+  }
+  .titleTip {
+    margin: 30px 0;
+    font-size: 14px;
+    color: #888;
+    &>span {
+      font-size:14px;
+      font-family:PingFang SC;
+      font-weight:400;
+      color:rgba(128,128,128,1);
+      text-align: center;
+    }
+  }
+}
+.stepOne {
+  font-size:14px;
+  font-family:PingFang SC;
+  font-weight:400;
+  color:rgba(0,0,0,1);
+  display: flex;
+  align-items: center;
+  &>span {
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    background-color: #3699FF;
+    display: inline-block;
+    line-height: 19px;
+    text-align: center;
+    color: #fff;
+    margin-right: 13px;
+  }
+}
+.stepWrap {
+  margin-left: 35px;
+  .stepText {
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    color:rgba(0,0,0,1);
+    line-height:26px;
+    margin: 18px 0 20px;
+    &>span {
+      font-size:14px;
+      font-family:PingFang SC;
+      font-weight:400;
+      color:rgba(128,128,128,1);
+    }
+  }
+  .downloadType {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .downloadItem {
+      display: flex;
+      &:first-child {
+        margin-right: 80px;
+      }
+      .macImg {
+        width: 47px;
+        height: 57px;
+      }
+      .windowsImg {
+        width: 52px;
+        height: 50px;
+      }
+      .downloadItemRight {
+        margin-left: 25px;
+        &>span {
+          display: block;
+          margin-bottom: 10px;
+          font-size:14px;
+          font-family:PingFang SC;
+          font-weight:400;
+          color:rgba(0,0,0,1);
+        }
+        .dowloadSize {
+          width: 41px;
+          height: 23px;
+          margin-bottom: 22px;
+          border: 1px solid #BFBFBF;
+          text-align: center;
+          line-height: 23px;
+        }
+      }
+    }
+  }
+}
+.copyWrap {
+  margin-top: 16px;
+  margin-left: 52px;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  .copyRight {
+    width: 42px;
+    margin-right: 20px;
+    height: 17px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #353535;
+    line-height: 17px;
+  }
+  .copyBox {
+    padding: 0 8px;
+    width: 388px;
+    background: #f5f7fa;
+    border-radius:  4px 0 0 4px;
+    border: 1px solid #9EAABA;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 36px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #808080;
+    line-height: 34px;
+  }
+  .copyButton {
+    font-size: 14px;
+    width: 64px;
+    height: 36px;
+    background: #3699FF;
+    border-radius: 0px 4px 4px 0px;
+    color: white;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+.modalWrap {
+  :global {
+    .ant-modal-footer {
+      padding: 0;
+    }
+  }
+}
+.footerTip {
+  background-color: #EFEFEF;
+  font-size:12px;
+  font-family:PingFang SC;
+  font-weight:400;
+  color:rgba(128,128,128,1);
+  line-height:35px;
+  height: 35px;
+  text-align: center;
+}
+.webTip {
+  margin-left: 150px;
+  margin-top: 15px;
+}

src/pages/liveclass/components/Editor.js

+import { connect } from 'dva';
+import React from 'react';
+import { Icon, Divider, Tabs, Select, Form, Upload, Row, Col, Input, Radio, Modal, message } from 'antd';
+import pageStyle from './Editor.less';
+import api from '../../../common/api';
+import { pageIn, hasBtnPower, LocalStorage, imagify, ossVideofy, audioorigin } from '../../../utils/index';
+const upImg = `${__IMGCDN__}subjectUp.png`;
+const { TabPane } = Tabs;
+const { TextArea } = Input;
+class Editor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+  clearHtml = () => {
+    if (this.uEditor) {
+      this.uEditor.execCommand('cleardoc');
+    }
+  }
+  componentWillUnmount() {
+    if (this.uEditor) {
+      this.uEditor.destroy();
+    }
+    clearTimeout(this.timeout2);
+    clearTimeout(this.setTimeout3);
+  }
+  componentDidMount() { // 挂载
+    this.renderEditor();
+  }
+  renderEditor = () => {
+    const { sid, commentParams } = this.props;
+    const that = this;
+    if (UE && document.getElementById('editor_id')) {
+      that.uEditor = UE.getEditor('editor_id', {
+        autoHeightEnabled: false,
+        zIndex: 10,
+        allowDivTransToP: false,
+        // UEDITOR_HOME_URL: '../../js/ueeditor/',
+        materiaImgUrl: api.courseMateria.index,
+        materiaImgParams: {
+          school_id: LocalStorage.getItem('sid') || 0,
+          type: 1,
+          // page: 1
+          // perPage: 12
+          trans_status: 2,
+        },
+        elementPathEnabled: false,
+        requestUser: LocalStorage.getItem('user') || {},
+        serverUrl: api.editorUpload,
+        imageFieldName: 'file',
+        initialFrameHeight: 300,
+        removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
+        toolbars: [
+          [
+            'source', // 源代码
+            'undo', // 撤销
+            'redo', // 重做
+            'fontsize', // 字号
+            'forecolor', // 字体颜色
+            'bold', // 加粗
+            'italic', // 斜体
+            'underline', // 下划线
+            // 'strikethrough', // 删除线
+            // 'subscript', // 下标
+            // 'superscript', // 上标
+            // 'blockquote', // 引用
+            // 'pasteplain', // 纯文本粘贴模式
+            // 'horizontal', // 分隔线
+            // 'removeformat', // 清除格式
+            // 'unlink', // 取消链接
+            'inserttitle', // 插入标题
+            'simpleupload', // 单图上传
+            'insertimage', // 多图上传
+            // 'link', // 超链接
+            'emotion', // 表情
+            'spechars', // 特殊字符
+            'searchreplace', // 查询替换
+            // 'map', // Baidu地图
+            // 'insertvideo', // 视频
+            'justifyleft', // 居左对齐
+            'justifyright', // 居右对齐
+            'justifycenter', // 居中对齐
+            'justifyjustify', // 两端对齐
+            // 'fullscreen', // 全屏
+            'imagecenter', // 居中
+            'edittip ', // 编辑提示
+            // 'customstyle', // 自定义标题
+            // 'background', // 背景
+            // 'scrawl', // 涂鸦
+            // 'music', // 音乐
+            // 'inserttable', // 插入表格
+            // 'drafts', // 从草稿箱加载
+            // 'charts', // 图表
+            // 'fontfamily', // 字体
+            // 'insertcode', // 代码语言
+            'insertorderedlist', // 有序列表
+            // 'insertunorderedlist', // 无序列表
+            'lineheight', // 行间距
+            'rowspacingtop', // 段前距
+            'rowspacingbottom', // 段后距
+            'backcolor', // 背景色
+            // 'preview', // 预览
+          ],
+        ],
+      });
+      that.timeout2 = setTimeout(() => {
+        if (document.getElementById('editor_id')) {
+          const { sid, commentParams } = that.props;
+          if (commentParams.content && commentParams.content.length == 1) {
+            if (commentParams.content[0].type == 'editor' && commentParams.content[0].value != '') {
+              that.uEditor.ready(() => {
+                that.uEditor.setContent(commentParams.content[0].value);
+              });
+            }
+          }
+        }
+        that.uEditor.ready(() => {
+          that.uEditor.setHeight(600);
+          that.uEditor.addListener('contentChange', () => {
+            that.props.uEditorChange(this.uEditor.getContent());
+          });
+        });
+      }, 800);
+    } else {
+      that.setTimeout3 = setTimeout(() => {
+        that.renderEditor();
+      }, 200);
+    }
+  }
+  render() {
+    const {
+      commentParams,
+    } = this.props;
+    return (
+      <div className={pageStyle.container}>
+        <div className="clearfix">
+          <div className={pageStyle.editorwrap} style={{ float: 'left' }}>
+            {/* eslint-disable-next-line array-callback-return,consistent-return */}
+            {commentParams.content.map((item, index) => {
+                // eslint-disable-next-line default-case
+                switch (item.type) {
+                    case 'editor':
+                      return (
+                        <div key={index} className={pageStyle.editorwrap}>
+                          <textarea id="editor_id" name="content" style={{ width: '700px', height: '300px' }}>
+                          </textarea>
+                          <div className={pageStyle.extraoperatebox}>
+                            <div className={pageStyle.extraoperateitem} onClick={this.clearHtml}>
+                              <img alt="" className={pageStyle.del} src={`${__IMGCDN__}coursetemplate/del.png`} />
+                              <span>清空内容</span>
+                            </div>
+                            {/* <div className={pageStyle.extraoperateitem} onClick={this.reviewHtml}> */}
+                            {/*  <img alt="" className={pageStyle.mobile} src={`${__IMGCDN__}coursetemplate/mobile.png`} /> */}
+                            {/*  <span>手机预览</span> */}
+                            {/* </div> */}
+                          </div>
+                        </div>
+                      );
+                }
+              },
+
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+Editor.propTypes = {
+
+
+};
+export default connect()(Editor);
+

src/pages/liveclass/components/Editor.less

+.textWrap {
+  height: auto;
+  position: relative;
+  margin-bottom:10px;
+  :global {
+    .ant-input {
+      padding: 6px 15px 20px;
+    }
+  }
+  .sizeNumber {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+  }
+}
+.templatesbox {
+  line-height: initial;
+  width: 282px;
+  border:1px solid rgba(0,0,0,0.15);
+  .templatesheader {
+    background-color: #D9D9D9;
+    line-height: 37px;
+    color: #616161;
+    font-size: 16px;
+    text-align: center;
+  }
+  .templatesbody {
+    padding: 9px;
+    max-height: 550px;
+    overflow-y: scroll;
+    .templatesitem {
+      margin-bottom: 12px;
+      .imgbox {
+        width: 100%;
+        height: 135px;
+        border-radius: 6px;
+        overflow: hidden;
+        position: relative;
+        img {
+          height: 135px;
+          display: block;
+          width: 100%;
+        }
+        &:hover .templateoperate {
+          display: flex;
+        }
+        .templateoperate {
+          display: none;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0,0,0,0.5);
+          left: 0;
+          top: 0;
+          z-index: 1;
+          // display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          .operateitem {
+            letter-spacing: 1px;
+            line-height: 40px;
+            color: #FFFFFF;
+            font-size: 14px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .operateicon {
+              margin-right: 4px;
+            }
+            &.preview {
+              .operateicon {
+                width: 16px;
+                height: 12px;
+              }
+            }
+            &.use {
+              .operateicon {
+                width: 16px;
+                height: 16px;
+              }
+            }
+            cursor: pointer;
+            &:hover {
+              background-color: rgba(0,0,0,0.5);
+            }
+          }
+        }
+      }
+      .templatename {
+        color: #616161;
+        font-size: 12px;
+        text-align: center;
+        margin-top: 4px;
+      }
+    }
+  }
+}
+.editorwrap {
+  // width: 424px;
+  // margin-top: 15px;
+  position: relative;
+  .extraoperatebox {
+    line-height: initial;
+    position: absolute;
+    top: 0;
+    width: 105px;
+    right: -105px;
+    z-index: 5;
+    .extraoperateitem {
+      background: #404040;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      color: #fff;
+      padding: 6px 19px;
+      margin-bottom: 14px;
+      cursor: pointer;
+      font-size: 12px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      .del {
+        width: 14px;
+        height: 16px;
+        display: block;
+        margin-right: 3px;
+      }
+      .mobile {
+        width: 10px;
+        height: 14px;
+        display: block;
+        margin-left: 2px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .videowrap {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    margin-bottom: 10px;
+    .videoPoster {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .videowrap:hover {
+    cursor: pointer;
+    .videohide {
+      opacity: 1;
+      background-color: rgba(0,0,0,0.5);
+      transition: all .3s;
+      z-index: 1;
+      color: #fff;
+    }
+  }
+  .videohide {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    color: #fff;
+    z-index: -1;
+    a {
+      color: #fff;
+    }
+  }
+  .uploadimgbox {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 18px;
+    flex-wrap: wrap;
+    .imgwrap {
+      width: 100%;
+      // height: 120px;
+      border-radius: 4px;
+      // margin-right: 6px;
+      position: relative;
+      .uploadimgwrap {
+        width: 100%;
+        // height: 120px;
+        overflow: hidden;
+      }
+    }
+    .imgwrap:hover {
+      cursor: pointer;
+      .imghide {
+        opacity: 1;
+        background-color: rgba(0,0,0,0.5);
+        transition: all .3s;
+        z-index: 1;
+        color: #fff;
+      }
+    }
+    .imghide {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      color: #fff;
+      z-index: -1;
+      a {
+        color: #fff;
+      }
+    }
+    .teacheruploadimg {
+      object-fit: contain;
+      border-radius: 4px;
+      width: 100%;
+    }
+    .teacheruploadimg:nth-child(4n){
+      margin-right: 0;
+    }
+  }
+}
+
+.uploadflex {
+  display: flex;
+  align-items: center;
+  .uploadimg {
+    cursor: pointer;
+    width: 106px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    color: rgba(0,0,0,0.65);
+    position: relative;
+    margin-right: 30px;
+    .fileuploadinput {
+      cursor: pointer;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      opacity: 0;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+.toolList {
+  position: absolute;
+  right: -30px;
+  top: 0;
+  width: 30px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  background-color: #D3D3D3;
+  opacity: 0;
+  border-radius: 2px;
+  z-index: -1;
+  div {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  div>img {
+    width: 14px;
+    height: 14px;
+  }
+  .up:hover {
+    background-color: #1890FF;
+  }
+  .down,.nodown {
+    transform: rotate(180deg);
+  }
+  .nodown,.noup {
+    cursor: not-allowed;
+  }
+  .down:hover {
+    background-color: #1890FF;
+  }
+  .delete:hover {
+    background-color: #FF6060;
+  }
+}
+.textWrap:hover,.imgwrap:hover,.videowrap:hover {
+  .toolList {
+    opacity: 1;
+    z-index: 1;
+  }
+}

src/pages/liveclass/index.less

+@import '../../less/variables.less';
+.container {
+  background-color: #fff;
+  border-radius: 2px;
+  padding: 20px;
+}
+.headerbox{
+  background-color: #fff;
+  .headerbtn {
+    color: #2194FF;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  padding-bottom: 18px;
+}
+.searchrow {
+  .formitem {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    .formitemlabel {
+      color: #000000;
+      font-size: 14px;
+      line-height: 1;
+      min-width: 70px;
+      white-space: nowrap;
+    }
+  }
+}
+.selectitem {
+  display: block;
+}
+.searchbtnbox {
+  height: 54px;
+  display: flex;
+  align-items: flex-end;
+}
+.resetbtn {
+  margin-right: 16px;
+}
+.tablebox {
+  background: #fff;
+  :global {
+    .ant-table-fixed {
+      border-bottom: 1px solid #E8E8E8 !important;
+    }
+    .ant-table tbody tr:nth-child(2n) {
+      background-color: #FBFBFB;
+    }
+    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
+      padding: 11px 10px;
+    }
+    .ant-table-bordered .ant-table-tbody tr td {
+      border-bottom: none;
+      border-right: none!important;
+    }
+    .ant-table-bordered .ant-table-thead tr th {
+      border-bottom: none;
+      border-right: none!important;
+    }
+    .ant-table-bordered .ant-table-thead tr th:last-child {
+      border-right: 1px solid #e8e8e8!important;
+    }
+    .ant-table-bordered .ant-table-tbody tr td:last-child {
+      border-right: 1px solid #e8e8e8!important;
+    }
+    .ant-table-bordered .ant-table-tbody tr:last-child {
+      border-bottom: 1px solid #e8e8e8!important;
+    }
+  }
+}
+.divideline {
+  color: #E9E9E9;
+  padding: 0 8px;
+}
+.alink {
+  color: #1890FF;
+}
+.classNamebox {
+  max-width: 250px;
+  word-break: break-all;
+  color: #1890FF;
+  cursor: pointer;
+}
+.tableoperatebox {
+  min-width: 160px;
+  line-height: 30px;
+}
+.endsearchcol {
+  margin-bottom: 18px;
+}
+.endclassfooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.classroomitem {
+  margin-bottom: 5px;
+  .classroom {
+    color:rgba(0,0,0,0.85);
+  }
+  .aLink {
+    color: #1890FF;
+    padding-left: 21px;
+  }
+}
+.rightList {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  .resetIcon {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    margin-right: 15px;
+  }
+  .expend {
+    font-size:13px;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(102,102,102,1);
+    display: inline-block;
+    cursor: pointer;
+  }
+
+}
+.tablefooterbox {
+  color: rgba(0,0,0,0.6);
+  font-size: 16px;
+  line-height: 50px;
+  display: flex;
+  background-color: #fff;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-top: 10px;
+  .tablefooterstatic {
+    color:rgba(0,0,0,0.65);
+    font-size: 14px;
+  }
+}
+.typeColor {
+  .point {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .typeColor1 {
+    color: #3ADD60;
+    display: flex;
+    align-items: center;
+    .point {
+      background-color: #3ADD60;
+    }
+  }
+  .typeColor2 {
+    display: flex;
+    align-items: center;
+    color: #FFB97A;
+    .point {
+      background-color: #FFB97A;
+    }
+  }
+  .typeColor3 {
+    color: #65B8F4;
+    display: flex;
+    align-items: center;
+    .point {
+      background-color: #65B8F4;
+    }
+  }
+  .typeColor4 {
+    color: #FF6B6B;
+    display: flex;
+    align-items: center;
+    .point {
+      background-color: #FF6B6B;
+    }
+  }
+
+}

src/router.js

@@ -281,6 +281,16 @@ const ThemeClass = props => (
     { ThemeClass => (<ThemeClass {...props} />) }
   </Bundle>
 );
+const LiveClass = props => (
+  <Bundle load={() => import(/* webpackChunkName:"LiveClass" */'./pages/liveclass/index')}>
+    { LiveClass => (<LiveClass {...props} />) }
+  </Bundle>
+);
+const AddLive = props => (
+  <Bundle load={() => import(/* webpackChunkName:"AddLive" */'./pages/liveclass/AddLive')}>
+    { AddLive => (<AddLive {...props} />) }
+  </Bundle>
+);
 function RouterConfig({ history }) {
   return (
     <ConfigProvider locale={zhCN}>
@@ -334,6 +344,9 @@ function RouterConfig({ history }) {
                   <Route path="/sjd/addCustomsContent/:id" exact component={UnclockDetail} />
                   <Route path="/sjd/addStoreCount/:id" exact component={AddStoreCount} />
                   <Route path="/sjd/themeClass" exact component={ThemeClass} />
+                  <Route path="/sjd/liveClass" exact component={LiveClass} />
+                  <Route path="/sjd/addLive" exact component={AddLive} />
+                  <Route path="/sjd/editLive/:id" exact component={AddLive} />
                   <Route component={Errorpage} />
                 </Switch>
               </SjdIndex>

src/services/liveclass.js

+import qs from 'qs';
+import request from '../utils/request';
+import api from '../common/api';
+export function liveList(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.lives}?${data}`,
+    method: 'GET',
+  });
+}
+export function addLive(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.lives}`,
+    method: 'POST',
+    data,
+  });
+}
+export function editLive(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.lives}/${params.id}`,
+    method: 'PUT',
+    data,
+  });
+}
+export function liveDetail(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.lives}/${params.id}`,
+    method: 'GET',
+    data,
+  });
+}
+export function deleteLive(parmas) {
+  const data = qs.stringify(parmas);
+  return request({
+    url: `${api.liveClass.lives}/${parmas.id}`,
+    method: 'DELETE',
+    data,
+  });
+}
+export function changeStatus(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.livesStatus}`,
+    method: 'POST',
+    data,
+  });
+}
+export function liveUrl(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.liveClass.livesUrl}?${data}`,
+    method: 'GET',
+  });
+}