StepDiy 组件样式修改

one_stop_public/tableCompon/Split_Index/StepDiy.js

 import React, { useState, useEffect, useMemo, useCallback, memo, useRef } from 'react';
 import { Steps } from 'antd';
 import ZdyTable from '@/webPublic/one_stop_public/Table';
-
+import styles from '../style.less';
 const { Step } = Steps;
 
 const Child = memo((props) => {
@@ -62,8 +62,10 @@ const Child = memo((props) => {
 		[diyProps?.StepsProps?.current],
 	);
 
+	console.log(diyProps.StepsProps);
+
 	return (
-		<div style={diyProps.outSideDivStyle}>
+		<div style={diyProps.outSideDivStyle} className={styles.stepsInfo}>
 			<Steps {...diyProps.StepsProps} current={current}>
 				{Array.isArray(diyProps.Step) &&
 					diyProps.Step.map((g) => {

one_stop_public/tableCompon/index.jsx

@@ -84,7 +84,6 @@ import giveVarcharRules from '@/webPublic/one_stop_public/tableCompon/Split_Inde
 import getPopupContainer from '@/webPublic/one_stop_public/tableCompon/Split_Index/getPopupContainer';
 import StepDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/StepDiy';
 
-const { MonthPicker, WeekPicker } = DatePicker;
 /**
  * 日期组件antd3.x有bug 详情见禅道 27152 毕业跟踪调查管理 毕业时间改为年级筛选
  */

one_stop_public/tableCompon/style.less

@@ -236,6 +236,11 @@
     }
   }
 
+  div[data-cell-component-name] .ant-form-item-label{
+    line-height: 40px;
+  }
+
+
   #mobile_table .am-list-extra {
     flex-basis: 60%;
     overflow: auto;
@@ -315,3 +320,93 @@
   margin-bottom: 20px;
   font-weight: 600;
 }
+.stepsInfo{
+  @media (max-width: 480px) {
+    :global{
+      .ant-steps-horizontal.ant-steps-label-horizontal {
+        display: flex;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item {
+        //display: block;
+        //overflow: visible;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-icon {
+        //float: left;
+        //margin-right: 16px;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-content {
+        //display: block;
+        //min-height: 48px;
+        //overflow: hidden;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-title {
+        //line-height: 32px;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-description {
+        //padding-bottom: 12px;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
+        //position: absolute;
+        //top: 0;
+        //left: 16px;
+        //width: 1px;
+        //height: 100%;
+        //padding: 38px 0 6px;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after {
+        //width: 1px;
+        //height: 100%;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item:not(:last-child) > .ant-steps-item-container > .ant-steps-item-tail {
+        //display: block;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
+        //display: none;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-container .ant-steps-item-tail {
+        //position: absolute;
+        //top: 0;
+        //left: 12px;
+        //padding: 30px 0 6px;
+      }
+      .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-container .ant-steps-item-title {
+        //line-height: 24px;
+      }
+
+      .ant-steps-navigation > .ant-steps-item {
+        //margin-right: 0 !important;
+      }
+      .ant-steps-navigation > .ant-steps-item::before {
+        //display: none;
+      }
+      .ant-steps-navigation > .ant-steps-item.ant-steps-item-active::before {
+        top: 57px;
+        //right: 0;
+        //left: unset;
+        display: block;
+        width: 100%;
+        height: 3px;
+      }
+      .ant-steps-navigation > .ant-steps-item::after {
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-top: -14px;
+        margin-left: -2px;
+        border: 1px solid rgba(0, 0, 0, 0.25);
+        border-bottom: none;
+        border-left: none;
+        transform: rotate(45deg);
+        content: '';
+      }
+      .ant-steps-navigation > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
+        //visibility: hidden;
+      }
+
+    }
+
+  }
+}