🆕 按钮底部固定浮层

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/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;

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%;