💄 优化界面UI, 更新文档

readme.md

@@ -156,7 +156,7 @@ or
 cnpm run start
 ```
 
-## How to run the downloaded code ?
+## 如何运行下载后的代码? | How to run the downloaded code ?
 
  1. 可以将压缩包解压直接放到服务器根目录, 访问根目录地址即可
  2. `vscode`安装Live Server插件, 将下载的压缩包解压成文件夹, 用`vscode`打开, 点击Live Server即可, 注意要删除启动路径的`index.html`, 改成`/`

src/pages/editor/components/Header/index.less

@@ -9,25 +9,30 @@
   background: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   .logoArea {
-    width: 300px;
+    position: relative;
+    width: 258px;
     .backBtn {
       display: inline-block;
-      padding: 12px 10px;
+      padding: 12px 6px;
-      margin-right: 22px;
+      margin-right: 18px;
       cursor: pointer;
     }
     .logo {
-      position: fixed;
       display: inline-block;
       width: 120px;
-      height: 35px;
-      border-radius: 3px;
       overflow: hidden;
-      background: url(../../../../assets/logo.png) no-repeat;
+      border-radius: 3px;
-      background-size: contain;
+      vertical-align: middle;
-      line-height: 50px;
+      margin-top: -10px;
-      margin-top: 7px;
+      img {
-      margin-left: -20px;
+        width: 100%;
+      }
+    }
+    p {
+      position: absolute;
+      color: #888;
+      font-size: 12px;
+      transform: scale(0.9) translate(88px, -15px);
     }
   }
   .controlArea {

src/pages/editor/components/Header/index.tsx

@@ -19,7 +19,6 @@ import QRCode from 'qrcode.react';
 import { saveAs } from 'file-saver';
 import req from '@/utils/req';
 import { uuid } from '@/utils/tool';
-import Code from '@/assets/code.png';
 import styles from './index.less';
 import MyPopover from 'yh-react-popover';
 
@@ -119,10 +118,14 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
 
   const useTemplate = () => {
     Modal.info({
-      title: '该功能正在升级，可以关注下方公众号实时查看动态',
+      title: '该功能属于企业版功能，可以关注下方公众号获取线上版登录码体验',
       content: (
         <div style={{ textAlign: 'center' }}>
-          <img src={Code} alt="趣谈前端" style={{ width: '180px' }} />
+          <img
+            src="http://cdn.dooring.cn/dr/qtqd_code.png"
+            alt="趣谈前端"
+            style={{ width: '180px' }}
+          />
         </div>
       ),
       okText: '客官知道啦',
@@ -217,7 +220,12 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
         <div className={styles.backBtn} onClick={toBack}>
           <ArrowLeftOutlined />
         </div>
-        <div className={styles.logo}></div>
+        <div className={styles.logo} title="Dooring">
+          <a href="/">
+            <img src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png" alt="Dooring-强大的h5编辑器" />
+          </a>
+        </div>
+        <p>再硬的🚪也抵不过傻瓜般的坚持!</p>
       </div>
       <div className={styles.controlArea}>
         <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>

src/pages/home/index.tsx

@@ -70,7 +70,7 @@ const Home = () => {
             可视化编辑器
           </div>
           <p style={{ display: 'inline-block', width: '520px', fontSize: '16px', lineHeight: '2' }}>
-            H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，
+            H5-Dooring是一款功能强大，高扩展性的H5可视化页面配置解决方案，
             致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 技术栈以react为主，
             后台采用nodejs开发。
           </p>

src/pages/login/index.tsx

@@ -1,7 +1,6 @@
 import { Form, Input, Button, Popover } from 'antd';
 import React from 'react';
 import req from '@/utils/req';
-import CodeImg from '@/assets/code.png';
 import { history } from 'umi';
 import styles from './index.less';
 
@@ -22,7 +21,11 @@ const tailLayout = {
 const content = (
   <>
     <div style={{ textAlign: 'center' }}>
-      <img style={{ width: '180px' }} src={CodeImg} alt="趣谈前端-徐小夕" />
+      <img
+        style={{ width: '180px' }}
+        src="http://cdn.dooring.cn/dr/qtqd_code.png"
+        alt="趣谈前端-徐小夕"
+      />
     </div>
     <p style={{ width: '240px' }}>扫描上方二维码，关注【趣谈前端】公众号，回复"登录码" 即可获取</p>
   </>