diff --git a/src/renderer/App.module.scss b/src/renderer/App.module.scss
new file mode 100644
index 0000000..5403fdb
--- /dev/null
+++ b/src/renderer/App.module.scss
@@ -0,0 +1,87 @@
+html,
+body {
+  // user-select: auto;
+}
+p {
+  padding-top: 0 !important;
+  padding-bottom:0 !important ;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+
+}
+.index {
+  display: flex;
+  flex-direction: column;
+  // background-color: yellow;
+  .up {
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .upLeft{
+      width: 50%;
+      min-height: 20px;
+      // background-color: yellow;
+    }
+    .upRight{
+      flex: 1;
+      display: flex;
+      // background-color: green;
+      flex-direction: row-reverse;
+    }
+  }
+  .down {
+    // font-size: 28px;
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .left {
+      width: 50%;
+      // min-height: 200px;
+      // background-color: yellow;
+      // border: 1px solid red;
+      // padding: 20px;
+      min-height: 800px;
+  
+      .TextArea {
+        // background-color: yellow;
+        // height: 100vh;
+        height: 800px;
+      }
+    }
+  
+    .right {
+      flex: 1;
+      // border: 1px solid red;
+      // padding-top: 20px;
+      // padding-bottom: 20px;
+      // background-color: yellow;
+      .rightHtml {
+        user-select: auto;
+        border: 1px solid red;
+        // padding-top: 10px;
+        padding-left: 10px;
+        // background-color: greenyellow;
+        height: 800px;
+        overflow-y: auto;
+      }
+    }
+  
+    .origin {
+      flex: 1;
+      border: 1px solid red
+      // padding: 20px;
+    }
+  }
+
+
+}
diff --git a/src/renderer/App.scss b/src/renderer/App.scss
new file mode 100644
index 0000000..9317382
--- /dev/null
+++ b/src/renderer/App.scss
@@ -0,0 +1,82 @@
+html,
+body {
+  user-select: auto;
+}
+p {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.index {
+  display: flex;
+  flex-direction: column;
+  .up {
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .upLeft{
+      width: 50%;
+      min-height: 20px;
+      // background-color: yellow;
+    }
+    .upRight{
+      flex: 1;
+      display: flex;
+      // background-color: green;
+      flex-direction: row-reverse;
+    }
+  }
+  .down {
+    // font-size: 28px;
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .left {
+      width: 50%;
+      // min-height: 200px;
+      // background-color: yellow;
+      // border: 1px solid red;
+      // padding: 20px;
+      min-height: 800px;
+  
+      .TextArea {
+        // background-color: yellow;
+        // height: 100vh;
+        height: 800px;
+      }
+    }
+  
+    .right {
+      flex: 1;
+      // border: 1px solid red;
+      // padding-top: 20px;
+      // padding-bottom: 20px;
+      // background-color: yellow;
+      .rightHtml {
+        border: 1px solid red;
+        // padding-top: 10px;
+        padding-left: 10px;
+        // background-color: greenyellow;
+        height: 800px;
+        overflow-y: auto;
+      }
+    }
+  
+    .origin {
+      flex: 1;
+      border: 1px solid red
+      // padding: 20px;
+    }
+  }
+
+
+}
diff --git a/src/renderer/conpoments/OriginMark/index.config.js b/src/renderer/conpoments/OriginMark/index.config.js
new file mode 100644
index 0000000..e17eab8
--- /dev/null
+++ b/src/renderer/conpoments/OriginMark/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '异度星球'
+}
diff --git a/src/renderer/conpoments/OriginMark/index.jsx b/src/renderer/conpoments/OriginMark/index.jsx
new file mode 100644
index 0000000..9813bee
--- /dev/null
+++ b/src/renderer/conpoments/OriginMark/index.jsx
@@ -0,0 +1,67 @@
+import { Component } from "react";
+// import Taro from "@tarojs/taro";
+// import {
+//   View,
+//   Text,
+//   Image,
+//   Button,
+//   Input,
+//   Editor,
+//   Textarea,
+// } from "@tarojs/components";
+import "./index.scss";
+// import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+// import { AtGrid } from "taro-ui";
+// import { Swiper, SwiperItem } from "@tarojs/components";
+// import { AtCard } from "taro-ui";
+// import { AtImagePicker } from "taro-ui";
+// import { AtButton } from "taro-ui";
+// import { AtSearchBar } from "taro-ui";
+// import { Picker } from "@tarojs/components";
+// import { AtList, AtListItem } from "taro-ui";
+// import { AtNavBar } from "taro-ui";
+// import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+// import { AtToast } from "taro-ui";
+// import { AtIcon } from "taro-ui";
+
+// 局部改造 (不是全局)
+import { Marked } from "marked";
+const marked = new Marked([
+  {
+    breaks: true, // 是否回车换行
+    highlight(code, lang) {
+      //  语法高亮
+      let val = code;
+      if (lang) {
+        val = hljs.highlight(lang, code).value;
+      } else {
+        val = hljs.highlightAuto(code).value;
+      }
+      return val;
+    },
+  },
+]);
+
+const OriginMark = (props) => {
+  const [markText, setmarkText] = useState(null);
+
+  useEffect(() => {
+    if (props.markText) {
+      setmarkText(props.markText);
+    }
+  }, [props.markText]);
+
+  return (
+    <div className="OriginMark">
+      {!!markText && (
+        <div
+          className="OriginMark-mark"
+          dangerouslySetInnerHTML={{ __html: marked.parse(markText) }}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default OriginMark;
diff --git a/src/renderer/conpoments/OriginMark/index.scss b/src/renderer/conpoments/OriginMark/index.scss
new file mode 100644
index 0000000..6c04e91
--- /dev/null
+++ b/src/renderer/conpoments/OriginMark/index.scss
@@ -0,0 +1,3 @@
+.OriginMark-mark{
+    padding: 20px;
+}
\ No newline at end of file