''

9cb36330 · wangxuelai · 2d0f6108 · 9cb36330 · 9cb36330 · 9cb36330
Commit 9cb36330 authored Dec 16, 2019 by wangxuelai
15 changed files
--- a/image/coursetemplate/del.png
+++ b/image/coursetemplate/del.png
--- a/image/coursetemplate/eyeicon.png
+++ b/image/coursetemplate/eyeicon.png
--- a/image/coursetemplate/mobile.png
+++ b/image/coursetemplate/mobile.png
--- a/image/coursetemplate/mobilebg.png
+++ b/image/coursetemplate/mobilebg.png
--- a/image/coursetemplate/template/1.png
+++ b/image/coursetemplate/template/1.png
--- a/image/coursetemplate/template/2.png
+++ b/image/coursetemplate/template/2.png
--- a/image/coursetemplate/template/3.png
+++ b/image/coursetemplate/template/3.png
--- a/image/coursetemplate/template/4.png
+++ b/image/coursetemplate/template/4.png
--- a/image/coursetemplate/use.png
+++ b/image/coursetemplate/use.png
--- a/index.html
+++ b/index.html
@@ -17,6 +17,6 @@
 </head>
 <body>
  <div id="root"></div>
-  <script src="dist/main.js?1576316635860" charset="utf-8"></script>
+  <script src="dist/main.js?1576463174026" charset="utf-8"></script>
 </body>
 </html>
\ No newline at end of file
--- a/src/pages/onlineclasses/ReviewCourseTemplate.js
+++ b/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={629}
+        style={{ backgroundColor: 'transparent' }}
+        bodyStyle={{ padding: 0, backgroundColor: 'transparent' }}
+        wrapClassName="ReviewCourseTemplateModal"
+      >
+        <div
+          style={{
+            width: '629px',
+            height: '762px',
+            backgroundSize: '100% 100%',
+            backgroundImage: `url(${__IMGCDN__}coursetemplate/mobilebg.png)`,
+          }}
+        >
+          <div
+            className={pageStyle.htmlbox}
+            style={{
+              backgroundColor: '#fff',
+              width: '306px',
+              position: 'absolute',
+              left: '135px',
+              top: '90px',
+              height: '580px',
+              overflowY: 'auto',
+              borderBottomLeftRadius: '10px',
+              borderBottomRightRadius: '10px',
+            }}
+            dangerouslySetInnerHTML={{ __html: templatehtml }}
+          />
+        </div>
+      </Modal>
+    );
+  }
+}
+ReviewTemplate.propTypes = {
+
+
+};
+
+export default ReviewTemplate;
+
--- a/src/pages/onlineclasses/ReviewCourseTemplate.less
+++ b/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
--- a/src/pages/onlineclasses/ThemeEditor.js
+++ b/src/pages/onlineclasses/ThemeEditor.js
--- a/src/pages/onlineclasses/ThemeEditor.less
+++ b/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;

--- a/src/pages/onlineclasses/template.js
+++ b/src/pages/onlineclasses/template.js