Merge pull request #56 from MrXujiang/feature/zjl

Feature/zjl

src/components/PanelComponents/DataList/index.less

@@ -1,6 +1,9 @@
 .dataList {
   padding: 6px 10px;
   border: 1px solid #f0f0f0;
+  text-align: justify;
+  padding-left: 10px;
+  padding-top: 10px;
 }
 .listItem {
   position: relative;
@@ -18,6 +21,7 @@
   }
   .tit {
     font-weight: bold;
+    padding-bottom: 5px;
   }
   .desc {
     font-size: 12px;

src/components/PanelComponents/DataList/index.tsx

@@ -226,7 +226,7 @@ const List = function(props: DataListType) {
           />
         ))}
       <div style={{ marginTop: '10px' }}>
-        <Button type="primary" onClick={handleAdd} block>
+        <Button onClick={handleAdd} block>
           添加
         </Button>
       </div>

src/components/PanelComponents/FormEditor/index.tsx

@@ -163,11 +163,11 @@ const FormEditor = (props: FormEditorProps) => {
           </React.Fragment>
         );
       })}
-      <Form.Item>
+      {/* <div style={{position: 'fixed', bottom: '0px'}}>
         <Button danger style={{ width: '251px' }} block onClick={handleDel}>
           删除
         </Button>
-      </Form.Item>
+      </div> */}
     </Form>
   );
 };

src/components/PanelComponents/MutiText/index.less

@@ -6,6 +6,7 @@
       // font-size: 14px;
       margin-left: 12px;
       cursor: pointer;
+      align-self: center;
     }
   }
 }

src/components/PanelComponents/MutiText/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect } from 'react';
 import { Input, Button, Popconfirm } from 'antd';
-import { MinusCircleOutlined } from '@ant-design/icons';
+import { MinusCircleFilled } from '@ant-design/icons';
 import styles from './index.less';
 import { TMutiTextDefaultType } from '../FormEditor/types';
 
@@ -46,7 +46,7 @@ export default memo(function MutiText(props: MultiTextProps) {
                 cancelText="取消"
               >
                 <span className={styles.delBtn}>
-                  <MinusCircleOutlined />
+                  <MinusCircleFilled />
                 </span>
               </Popconfirm>
             </div>
@@ -59,7 +59,7 @@ export default memo(function MutiText(props: MultiTextProps) {
       )}
       {value && value.length < 3 && (
         <div className={styles.iptWrap}>
-          <Button type="primary" onClick={handleAdd}>
+          <Button block onClick={handleAdd}>
             添加项目
           </Button>
         </div>

src/components/PanelComponents/Pos/index.less

@@ -1,5 +1,7 @@
 .posIpt {
   display: flex;
+  justify-content: flex-end;
+  margin-right: -10px;
   .posItem {
     margin-right: 10px;
     span {

src/components/PanelComponents/Upload/index.less

@@ -10,11 +10,12 @@
 
 .avatarUploader {
   display: inline-block;
+  text-align: left;
 }
 
 .wallBtn {
   position: absolute;
-  left: 120px;
+  left: 140px;
   bottom: 56px;
   display: inline-block;
   color: #2f54eb;

src/components/PanelComponents/Upload/index.tsx

@@ -214,7 +214,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
           </Upload>
         )}
         <div className={styles.wallBtn} onClick={this.handleWallShow}>
-          从图片库中选择
+          图片库
         </div>
         <Modal
           visible={previewVisible}

src/global.css

@@ -72,6 +72,9 @@ body {
   padding-right: 10px!important;
   padding-bottom: 40px;
 }
+#form_editor {
+  margin-bottom: 100px;
+}
 #form_editor .ant-form-item-label > label {
   position: fixed;
   color: #4A4A4A;
@@ -88,10 +91,17 @@ body {
 #form_editor .ant-input-number-handler-wrap {
   width: 12px;
 }
-#form_editor .ant-input, #form_editor .ant-input-number {
+#form_editor .ant-input, #form_editor .ant-input-number,#form_editor .ant-select-selector {
   background-color: #f6f6f6;
   width: 160px;
 }
+#form_editor .ant-form-item .ant-select {
+  width: 87%;
+  text-align: center;
+}
+#form_editor .ant-radio-wrapper {
+  margin-right: 0;
+}
 #form_editor .ant-input-number {
   width: 42px;
   height: 24px;
@@ -124,4 +134,8 @@ body {
 }
 #form_editor .za-select--arrow .za-select__input:after {
   display: none;
+}
+#form_editor .ant-upload-list-picture-card-container {
+  display: flex;
+  margin-left: 30px;
 }

src/pages/editor/Container.tsx

@@ -33,6 +33,7 @@ import styles from './index.less';
 // import { useGetBall } from 'react-draggable-ball';
 import { dooringContext } from '@/layouts';
 import { throttle } from '@/utils/tool';
+import { Button } from 'antd';
 
 const { TabPane } = Tabs;
 
@@ -243,6 +244,9 @@ const Container = (props: {
                 onSave={handleFormSave}
                 onDel={handleDel}
               />
+              {/* <div className={styles.del}>
+                <Button block>删顶顶顶顶除</Button>
+              </div> */}
             </>
           ) : (
             <div style={{ paddingTop: '100px' }}>
@@ -550,6 +554,28 @@ const Container = (props: {
         >
           {!rightColla ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
         </div>
+        <div
+          style={
+            !rightColla
+              ? {
+                  position: 'absolute',
+                  transform: 'translate(0,-10%)',
+                  transition: 'all ease-in-out 2s',
+                  textAlign: 'center',
+                  bottom: -5,
+                  right: 16,
+                  background: 'gray',
+                  padding: '10px',
+                  width: '279px',
+                  display: 'block',
+                }
+              : { display: 'none' }
+          }
+        >
+          <Button block danger onClick={() => handleDel(curPoint.id)}>
+            删除
+          </Button>
+        </div>
         <div
           style={{
             width: rightColla ? 0 : '304px',

src/pages/editor/index.less

@@ -21,7 +21,6 @@
     // height: 100vh;
     height: calc(100% - 56px);
     display: flex;
-
     .list {
       width: 350px;
       height: 100%;