优化

index.html

@@ -11,7 +11,7 @@
     <script src="js/console-polyfill.js"></script>
   <![endif]-->
   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script>
-  
+
   <script src="js/console-polyfill.js?20191012222" charset="utf-8"></script><script src="js/es6-shim.min.js?20191012222" charset="utf-8"></script><script src="js/es5-shim.js?20191012222" charset="utf-8"></script><script src="js/es5-sham.min.js?20191012222" charset="utf-8"></script><script src="js/json3.min.js?20191012222" charset="utf-8"></script><script src="js/html5shiv.min.js?20191012222" charset="utf-8"></script><script src="js/polyfill.js?20191012222" charset="utf-8"></script><script src="js/ueeditor/ueditor.config.js?20191012222" charset="utf-8"></script><script src="js/ueeditor/ueditor.all.js?20191012222" charset="utf-8"></script><script src="lib/vendor.dll.js?20191012222" charset="utf-8"></script>
 </head>
 </head>
@@ -19,4 +19,4 @@
   <div id="root"></div>
   <script src="dist/main.js?1576460757587" charset="utf-8"></script>
 </body>
-</html>
\ No newline at end of file
+</html>

src/pages/onlineclasses/ReviewCourseTemplate.js

+import React from 'react';
+import {
+  Form,
+  Modal,
+} from 'antd';
+import pageStyle from './ReviewCourseTemplate.less';
+class ReviewTemplate extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+  componentDidMount() { // 挂载
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  close = () => {
+    const { close } = this.props;
+    close();
+  }
+  render() {
+    const {
+      visible,
+      templatehtml,
+    } = this.props;
+    return (
+      <Modal
+        visible={visible}
+        maskClosable
+        footer={null}
+        header={null}
+        closable={false}
+        onCancel={this.close}
+        width={700}
+        style={{ backgroundColor: 'transparent' }}
+        bodyStyle={{ padding: 0, backgroundColor: 'transparent' }}
+        wrapClassName="ReviewCourseTemplateModal"
+      >
+        <div
+          style={{
+            width: '700px',
+            height: '846px',
+            backgroundSize: '100% 100%',
+            backgroundImage: `url(${__IMGCDN__}coursetemplate/mobilebg.png)`,
+          }}
+        >
+          <div
+            className={pageStyle.htmlbox}
+            style={{
+              backgroundColor: '#fff',
+              width: '342px',
+              position: 'absolute',
+              left: '149px',
+              top: '100px',
+              height: '650px',
+              overflowY: 'auto',
+              borderBottomLeftRadius: '30px',
+              borderBottomRightRadius: '30px',
+            }}
+            dangerouslySetInnerHTML={{ __html: templatehtml }}
+          />
+        </div>
+      </Modal>
+    );
+  }
+}
+ReviewTemplate.propTypes = {
+
+
+};
+
+export default ReviewTemplate;
+

src/pages/onlineclasses/ReviewCourseTemplate.less

+:global {
+  .ReviewCourseTemplateModal {
+    .ant-modal-content {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+}
+.htmlbox {
+  &::-webkit-scrollbar {
+    display:none
+  }
+}
\ No newline at end of file

src/pages/onlineclasses/ThemeEditor.less

@@ -13,10 +13,129 @@
     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;
+  // 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;