fix: 调整手机布局抽屉结构

src/components/Modal/src/BasicDrawer.jsx

@@ -1,6 +1,6 @@
 import { Drawer } from 'antd'
 import { connect } from 'dva'
-import React, { useState, Fragment, useEffect } from 'react'
+import React, { Fragment, useEffect } from 'react'
 
 const BasicDrawer = props => {
   const {
@@ -8,20 +8,25 @@ const BasicDrawer = props => {
     config: { children, ...resetProps }
   } = props
   // 浏览器实际宽度
-  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  // const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
 
   useEffect(() => {
-    window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.7)
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
-    }
+    // window.addEventListener('resize', () => {
+    //   setClientWidth(document.body.clientWidth * 0.7)
+    // })
+    // return () => {
+    //   window.removeEventListener('resize', () => {})
+    // }
   }, [])
 
   return (
     <Fragment>
-      <Drawer visible={visible} {...resetProps} width={clientWidth} getContainer={false}>
+      <Drawer
+        className="my-drawer"
+        visible={visible}
+        {...resetProps}
+        // width={clientWidth}
+        getContainer={false}>
         {children}
       </Drawer>
     </Fragment>

src/global.less

@@ -179,6 +179,21 @@ input:-webkit-autofill:active {
 .ant-typography {
   color: inherit;
 }
+
+.my-drawer.ant-drawer-open {
+  // width: 100% !important; // mask: false
+  > .ant-drawer-content-wrapper {
+    width: 70% !important;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .my-drawer.ant-drawer-open {
+    > .ant-drawer-content-wrapper {
+      width: 100% !important;
+    }
+  }
+}
 // .react-resizable {
 //   background-clip: padding-box !important;
 // }