修复任务详情手机样式

src/pages/crontab/detail.tsx

@@ -50,11 +50,13 @@ const CronDetailModal = ({
   handleCancel,
   visible,
   theme,
+  isPhone,
 }: {
   cron?: any;
   visible: boolean;
   handleCancel: (needUpdate?: boolean) => void;
   theme: string;
+  isPhone: boolean;
 }) => {
   const [activeTabKey, setActiveTabKey] = useState('log');
   const [loading, setLoading] = useState(true);
@@ -213,11 +215,11 @@ const CronDetailModal = ({
       forceRender
       footer={false}
       onCancel={() => handleCancel()}
-      width={'80vw'}
-      bodyStyle={{ background: '#eee', padding: 12 }}
+      wrapClassName="crontab-detail"
+      width={!isPhone ? '80vw' : ''}
     >
       <div style={{ height: '80vh' }}>
-        <Card bodyStyle={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Card>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">状态</div>
             <div className="cron-detail-info-value">

src/pages/crontab/index.less

@@ -8,15 +8,30 @@
   }
 }
 
-.cron-detail-info-item {
-  flex: auto;
+.crontab-detail {
+  background: '#eee';
+  padding: 12px;
 
-  .cron-detail-info-title {
-    color: #888;
+  .ant-card:first-child {
+    overflow-x: auto;
+
+    .ant-body {
+      display: 'flex';
+      justify-content: space-between;
+      min-width: 700px;
+    }
   }
 
-  .cron-detail-info-value {
-    margin-top: 18px;
+  .cron-detail-info-item {
+    flex: auto;
+
+    .cron-detail-info-title {
+      color: #888;
+    }
+
+    .cron-detail-info-value {
+      margin-top: 18px;
+    }
   }
 }
 

src/pages/crontab/index.tsx

@@ -968,6 +968,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         }}
         cron={detailCron}
         theme={theme}
+        isPhone={isPhone}
       />
     </PageContainer>
   );