样式更改超小屏幕适配

src/components/ai/mod/AiHelperMod.tsx

@@ -152,7 +152,9 @@ export default function AiHelperMod(props: PropsType) {
                         }}><RedoOutlined /></Button>
                     }
                     return (
-                        <div>
+                        <div
+                        //  style={{ whiteSpace: 'nowrap' }}
+                         >
                             <span
                                 style={{
                                     cursor: 'pointer'

src/components/card/CardProj.tsx

@@ -335,28 +335,29 @@ export default function CardProj(props: any) {
                             {data.gmtCreate}
                         </div>
                         {/* 标签 */}
-                        {props.tagArray.map((item: any) => {
+                        <div className='selectTagmax'>
-                            return (
+                            {props.tagArray.map((item: any) => {
+                                return (
 
-                                <div className='proj-progress' key={item.value} style={{
+                                    <div className='proj-progress' key={item.value} style={{
-                                    background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
+                                        background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
-                                    color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
+                                        color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
-                                    border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
+                                        border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
-                                    // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
+                                        // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
-                                }}
-                                    onClick={() => {
-
-                                        upTag(item.value, data.projId)
-                                        // upData(item.value)
-                                        // props.updata()
                                     }}
-                                >
+                                        onClick={() => {
-                                    {item.label}
-                                </div>
 
-                            )
+                                            upTag(item.value, data.projId)
-                        })}
+                                            // upData(item.value)
+                                            // props.updata()
+                                        }}
+                                    >
+                                        {item.label}
+                                    </div>
 
+                                )
+                            })}
+                        </div>
 
                     </div>
 
@@ -432,6 +433,7 @@ export default function CardProj(props: any) {
 
                                     >
                                         {data.pay.payment / 100}
+                                        {/* 2000.00 */}
                                     </div>
                                     <div className='coupon-num' style={{ display: data.pay.couponAmount ? 'unset' : 'none', color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}>(已优惠{data.pay.couponAmount / 100}元)</div>
                                 </div>
@@ -443,46 +445,73 @@ export default function CardProj(props: any) {
                                 </div>
                             </div>
                             <div style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none' }}>
-                                <div className='cpbl-btn'>
+                                <div className='cpbl-btn-box'>
-                                    <div className='threeBtn' onClick={() => {
+                                    <div className='cpbl-btn'>
-                                        if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
+                                        <div className='threeBtn' onClick={() => {
-                                            // nav(`/proj-edit/config-loginpage-show/${data.projId}`)
+                                            if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
-                                            setLoginPageShowOpne(true);
+                                                // nav(`/proj-edit/config-loginpage-show/${data.projId}`)
+                                                setLoginPageShowOpne(true);
 
-                                        } else {
+                                            } else {
-                                            // nav(`/proj-edit/config-loginpage/${data.projId}`)
+                                                // nav(`/proj-edit/config-loginpage/${data.projId}`)
-                                            setLoginPageOpne(true)
+                                                setLoginPageOpne(true)
-                                        }
+                                            }
-                                    }}>
+                                        }}>
-                                        <img src={setImg} alt="" />
+                                            <img src={setImg} alt="" />
-                                        <div>登录界面设置</div>
+                                            <div>登录界面设置</div>
+                                        </div>
+                                        <div className='threeBtn' onClick={() => {
+                                            if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
+                                                // nav(`/proj-edit/config-mod-list-show/${data.projId}`)
+                                                setSoftwareManagementShowOpen(true)
+                                            } else {
+                                                setSoftwareManagementOpen(true)
+                                                // nav(`/proj-edit/config-mod-list/${data.projId}`)
+
+                                            }
+                                        }}>
+                                            <img src={menuImg} alt="" />
+                                            <div>系统菜单管理({data.projModCount})</div>
+                                        </div>
+                                        <div className='threeBtn rightBit' onClick={() => {
+                                            if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
+                                                // nav(`/proj-edit/config-menu-list-show/${data.projId}`)
+                                                setDisplayOrderShowOpen(true);
+                                            } else {
+                                                // nav(`/proj-edit/config-menu-list/${data.projId}`)
+                                                setDisplayOrderOpen(true);
+
+
+                                            }
+                                        }}>
+                                            <img src={orderImg} alt="" />
+                                            <div>菜单排序({data.projModCount})</div>
+                                        </div>
                                     </div>
-                                    <div className='threeBtn' onClick={() => {
+                                    <div className='selectTagmin'>
-                                        if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
+                                        {props.tagArray.map((item: any) => {
-                                            // nav(`/proj-edit/config-mod-list-show/${data.projId}`)
+                                            return (
-                                            setSoftwareManagementShowOpen(true)
-                                        } else {
-                                            setSoftwareManagementOpen(true)
-                                            // nav(`/proj-edit/config-mod-list/${data.projId}`)
 
-                                        }
+                                                <div className='proj-progress' key={item.value} style={{
-                                    }}>
+                                                    background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
-                                        <img src={menuImg} alt="" />
+                                                    color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
-                                        <div>系统菜单管理({data.projModCount})</div>
+                                                    border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
-                                    </div>
+                                                    // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
-                                    <div className='threeBtn rightBit' onClick={() => {
+                                                    marginBottom: 10
-                                        if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
+                                                }}
-                                            // nav(`/proj-edit/config-menu-list-show/${data.projId}`)
+                                                    onClick={() => {
-                                            setDisplayOrderShowOpen(true);
-                                        } else {
-                                            // nav(`/proj-edit/config-menu-list/${data.projId}`)
-                                            setDisplayOrderOpen(true);
 
+                                                        upTag(item.value, data.projId)
+                                                        // upData(item.value)
+                                                        // props.updata()
+                                                    }}
+                                                >
+                                                    {item.label}
+                                                    {/* 提交版权中心 */}
+                                                </div>
 
-                                        }
+                                            )
-                                    }}>
+                                        })}
-                                        <img src={orderImg} alt="" />
-                                        <div>菜单排序({data.projModCount})</div>
                                     </div>
                                 </div>
                             </div>
@@ -613,8 +642,8 @@ export default function CardProj(props: any) {
                     </div>
                 </div>
                 <div style={{
-                        display: props.remindTagArray.length > 0 ? 'unset' : 'none',
+                    display: props.remindTagArray.length > 0 ? 'unset' : 'none',
-                    }}>
+                }}>
                     <div className='promptTags' >
 
                         {/* {props.tagArray.map((item: any) => {

src/components/card/card-proj.css

@@ -1,20 +1,37 @@
 @media (min-width: 1571px) {
-    .option{
+    .selectTagmin {
+     
+        display: none;
+    }
+
+    .selectTagmax {
+        display: flex;
+       
+       
+        
+    }
+    .option {
         display: flex;
         /* background-color: red; */
         align-items: flex-start;
     }
-    .downloadBox{
+
-       display: flex;
+    .downloadBox {
-       flex-direction: column;
+        display: flex;
-       align-items: center;
+        flex-direction: column;
-       margin-left: 10px;
+        align-items: center;
-       margin-top: 2px;
+        margin-left: 10px;
+        margin-top: 2px;
     }
-    .zpibtn{margin-left: 10px;}
+
-    .down-pdf{
+    .zpibtn {
+        margin-left: 10px;
+    }
+
+    .down-pdf {
         margin-left: 5px;
     }
+
     .card-proj {
         border-radius: 6px;
         background-color: var(--color-light);
@@ -38,7 +55,8 @@
         padding-left: 21px;
         padding-right: 29px;
     }
-    .promptTags{
+
+    .promptTags {
         padding-left: 21px;
         display: flex;
         /* background-color: red; */
@@ -46,6 +64,7 @@
         /* justify-content: center; */
         margin-top: 10px;
     }
+
     .cpt-left {
         display: flex;
         /* align-items: center; */
@@ -598,13 +617,15 @@
         padding-left: 21px;
         padding-right: 29px;
     }
-    .promptTags{
+
+    .promptTags {
         padding-left: 21px;
         display: flex;
         /* background-color: red; */
         align-items: center;
         /* justify-content: center; */
     }
+
     .cpt-left {
         display: flex;
         /* align-items: center; */
@@ -625,6 +646,13 @@
         color: #292929;
         margin-left: 18px;
         cursor: pointer;
+        /* width: 300px; */
+        /* 超出部分勇...代替 */
+        /* overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap; */
+
+        /* background-color: pink; */
     }
 
     .cp-tag {
@@ -783,7 +811,7 @@
     }
 
     .cpbl-money {
-        min-width: 270px;
+        width: 230px;
 
         padding: 0 20px;
         box-sizing: border-box;
@@ -834,15 +862,30 @@
 
     .moneyBox {}
 
+    .cpbl-btn-box {
+        display: flex;
+    }
+
     .cpbl-btn {
         display: flex;
         /* background-color: red; */
         flex-direction: column;
         align-items: flex-start;
-        margin-left: 60px;
+        margin-left: 20px;
         margin-top: 5px;
     }
 
+    .selectTagmin {
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+        margin-left: 20px;
+    }
+
+    .selectTagmax {
+        display: none;
+    }
+
     .threeBtn {
         display: flex;
         cursor: pointer;
@@ -1128,13 +1171,13 @@
         margin-bottom: 10px;
     }
 
-    .downloadBox{
+    .downloadBox {
         display: flex;
 
         align-items: center;
         /* justify-content: flex-start; */
         margin-left: 8px;
-     }
+    }
 
 
 

src/components/menu/MenuWithTopButton.tsx

@@ -46,33 +46,33 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
                         chargeAdditionals: props.chargeAdditionals,
                         tagDataId: props.tagDataId,
                         authorId: props.authorId,
-                        payStatus:props.payStatus
+                        payStatus: props.payStatus
                     }
                 })
             }
-            if (item.id  == 'REFUN') {
+            if (item.id == 'REFUN') {
                 // props.disableBelongpeople()
                 navugate('/refun', {
                     state: {
                         keywords: props.refunKeywords,
                         applyStatus: props.applyStatus,
-                        authorId:props.authorId
+                        authorId: props.authorId
                     }
                 })
             }
-            if (item.id  == 'CORRECTION') {
+            if (item.id == 'CORRECTION') {
                 // props.disableBelongpeople()
                 navugate('/correction', {
                     state: {
                         keywords: props.correctionKeywords,
-                        correctionNumType:props.correctionNumType,
+                        correctionNumType: props.correctionNumType,
-                        correctionType:props.correctionType,
+                        correctionType: props.correctionType,
                         applyStatus: props.correctionApplyStatus,
                         authorId: props.authorId
                     }
                 })
             }
-            if (item.id  == 'CONTRACT') {
+            if (item.id == 'CONTRACT') {
                 // props.disableBelongpeople()
                 navugate('/contract', {
                     state: {
@@ -89,7 +89,7 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
 
             {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
             <span className="menu-name">{item.name}</span>
-            <span className='topIcon'><RightOutlined /></span>
+            <span className='topIcon' ><RightOutlined /></span>
         </li>
     ));
 
@@ -98,11 +98,13 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
             {/* button 是三个黄色按钮 */}
             <div className='top'>
                 <div className='top-lift'>
-                    <img src={objImg} alt="" style={{ display: props.button.name == '项目' ? 'block' : 'none' }} />
+                    <div className='objimg'>
+                        <img src={objImg} alt="" style={{ display: props.button.name == '项目' ? 'block' : 'none' }} />
+                    </div>
                     {/* <img src={refunimg} alt="" style={{ display: props.button.name == '退款' ? 'block' : 'none', width: 16 }} /> */}
                     {/* <img src={correctionImg} alt="" style={{ display: props.button.name == '补正' ? 'block' : 'none', width: 16 }} /> */}
 
-                    <div> {props.button.name}</div>
+                    <div className='objimgName'> {props.button.name}</div>
                 </div>
                 <div className='top-right' onClick={(e) => {
                     props.button.handle(e);
@@ -133,7 +135,9 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
                     // }
                 }}>
                     {/* refunimg */}
-                    <img src={newImg} alt="" />
+                    {/* <div className='objimg'> */}
+                        <img src={newImg} alt="" />
+                    {/* </div> */}
                     <div style={{ display: props.button.name == '项目' ? 'block' : 'none' }}>创建</div>
                     {/* <div style={{ display: props.button.name == '退款' ? 'block' : 'none' }}>申请</div> */}
                     {/* <div style={{ display: props.button.name == '补正' ? 'block' : 'none' }}>申请</div> */}

src/components/menu/menu-with-top-button.css

@@ -1,82 +1,190 @@
-.menu-with-top-button {
+@media (max-width: 1550px) {
-    /* padding: 15px; */
+    .menu-with-top-button {
-}
+        /* padding: 15px; */
+    }
     
-.menu-with-top-button .top {
+    .menu-with-top-button .top {
-    width: 231px;
+        width: 231px;
-    height: 56px;
+        /* 修改 */
-    font-size: 18px;
+        width: 191px;
-    /* color: #FFAF22; */
-    background: #FFFBEF;
     
-    color: #FFAF22;
+        height: 56px;
-    display: flex;
+        font-size: 18px;
-    align-items: center;
+        /* color: #FFAF22; */
-    border-top: 1px solid #fde9ab;
+        background: #FFFBEF;
-    border-bottom: 1px solid #fde9ab;
-}
     
-.menu-with-top-button .top .top-lift {
+        color: #FFAF22;
-    display: flex;
+        display: flex;
-    align-items: center;
+        align-items: center;
-    font-size: 18px;
+        border-top: 1px solid #fde9ab;
-}
+        border-bottom: 1px solid #fde9ab;
+    }
     
-.menu-with-top-button .top .top-lift img {
+    .menu-with-top-button .top .top-lift {
-    width: 19px;
+        display: flex;
-    height: 19px;
+        align-items: center;
-    margin-left: 14px;
+        font-size: 18px;
-    margin-right: 13px;
+    }
-}
   
-.menu-with-top-button .top .top-right {
+
-    display: flex;
+    
-    align-items: center;
+    .menu-with-top-button .top .top-lift img {
-    font-size: 14px;
+        width: 19px;
-    cursor: pointer;
+        height: 19px;
-    width: 53px;
+        margin-left: 14px;
-    /* background-color: red; */
+        margin-right: 13px;
-    margin-left: 82px;
+    }
+    
+    .menu-with-top-button .top .top-right {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        cursor: pointer;
+        width: 53px;
+        /* background-color: red; */
+        margin-left: 82px;
+        /* 修改 */
+        margin-left: 32px;
+    
+    }
+  
+   /* 修改添加 */
+   .objimg{
+    /* display: none; */
+   }
+    .menu-with-top-button .top .top-right img {
+        /* margin-left: 96px; */
+        margin-right: 10px;
+        width: 14px;
+        height: 13px;
+    }
+    
+    .menu-with-top-button ul {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        width: 230px;
+        /* 修改 */
+        width: 190px;
+        /* background-color:pink; */
+    }
+    
+    .menu-with-top-button ul li {
+        height: 50px;
+        margin-left: 35px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #313131;
+        line-height: 50px;
+        cursor: pointer;
+        /* background-color: red; */
+        text-indent: 32px;
+        /* 修改 */
+        text-indent: 22px;
+    }
+    
+    .menu-with-top-button ul li.active {
+        
+        width: 213px;
+          /* 修改 */
+          width: 171px;
+        height: 50px;
+        background: #FF9F08;
+        border-radius: 25px;
+        color: white;
+        text-indent: 50px;
+     
+    }
+    .topIcon{
+        display: none;
+        color: white;
+        margin-left: 150px;
+       
+    }
     
 }
+@media (min-width: 1551px){
+    .menu-with-top-button {
+        /* padding: 15px; */
+    }
     
-.menu-with-top-button .top .top-right img {
+    .menu-with-top-button .top {
-    /* margin-left: 96px; */
+        width: 231px;
-    margin-right: 10px;
-    width: 14px;
-    height: 13px;
-}
       
-.menu-with-top-button ul {
-    padding-top: 12px;
-    padding-bottom: 12px;
-    width: 230px;
-    /* background-color:pink; */
-}
     
-.menu-with-top-button ul li {
+        height: 56px;
-    height: 50px;
+        font-size: 18px;
-    margin-left: 35px;
+        /* color: #FFAF22; */
-    font-weight: 400;
+        background: #FFFBEF;
-    font-size: 16px;
-    color: #313131;
-    line-height: 50px;
-    cursor: pointer;
-    /* background-color: red; */
-    text-indent: 32px;
-}
     
-.menu-with-top-button ul li.active {
+        color: #FFAF22;
-    width: 213px;
+        display: flex;
-    height: 50px;
+        align-items: center;
-    background: #FF9F08;
+        border-top: 1px solid #fde9ab;
-    border-radius: 25px;
+        border-bottom: 1px solid #fde9ab;
-    color: white;
+    }
-    text-indent: 59px;
+    
-}
+    .menu-with-top-button .top .top-lift {
-.topIcon{
+        display: flex;
-    color: white;
+        align-items: center;
-    margin-left: 68px;
+        font-size: 18px;
+    }
+    
+    .menu-with-top-button .top .top-lift img {
+        width: 19px;
+        height: 19px;
+        margin-left: 14px;
+        margin-right: 13px;
+    }
+    
+    .menu-with-top-button .top .top-right {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        cursor: pointer;
+        width: 53px;
+        /* background-color: red; */
+        margin-left: 82px;
+    
+    }
+    
+    .menu-with-top-button .top .top-right img {
+        /* margin-left: 96px; */
+        margin-right: 10px;
+        width: 14px;
+        height: 13px;
+    }
+    
+    .menu-with-top-button ul {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        width: 230px;
+        /* background-color:pink; */
+    }
+    
+    .menu-with-top-button ul li {
+        height: 50px;
+        margin-left: 35px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #313131;
+        line-height: 50px;
+        cursor: pointer;
+        /* background-color: red; */
+        text-indent: 32px;
+    }
+    
+    .menu-with-top-button ul li.active {
+        width: 213px;
+        height: 50px;
+        background: #FF9F08;
+        border-radius: 25px;
+        color: white;
+        text-indent: 59px;
+    }
+    .topIcon{
+        color: white;
+        margin-left: 68px;
+    }
 }
 
 
@@ -89,29 +197,3 @@
 
 
 
-
-
-
-
-/* .menu-with-top-button .top-button {
-    width: 268px;
-    height: 56px;
-    background: #FFFBEF;
-    font-size: 18px;
-    color: #FFAF22;
-}
-
-
-
-.menu-with-top-button ul li:last-child {
-    margin-bottom: 0;
-}
-
-.menu-with-top-button ul li .menu-icon {
-    width: 30px;
-    height: 30px;
-}
-
-.menu-with-top-button ul li .menu-name {
-    padding-left: 5px;
-} */

src/route/index/Index.tsx

@@ -990,7 +990,9 @@ export default function Index() {
                             {/* <div style={{display:'flex'}}> */}
                             {/* <div style={{height:1000,width:6,background:'red',marginRight:-6,zIndex:99}}></div> */}
                             <div className="left" >
-                                <div style={{ height: '15px', width: '230px', background: 'white' }}></div>
+                                <div className='mediaBox' style={{ 
+                                    // height: '15px', width: '230px', 
+                                    background: 'white' }}></div>
                                 <MenuWithTopButton
                                     button={projMenu.button}
                                     list={projMenu.list}
@@ -1219,8 +1221,10 @@ export default function Index() {
                                                 value={nowKeyword}
                                                 onSearch={handleSearch}
                                                 onChange={handleChange}
+                                                className='searchInputmedia'
                                                 style={{
-                                                    width: '200px',
+                                                    // maxWidth: '200px',
+                                                    width: '170px',
                                                     height: '31px',
                                                     display: showSearchBox ? 'block' : 'none'
                                                 }}
@@ -1229,7 +1233,7 @@ export default function Index() {
                                             <Select
                                                 value={type}
                                                 allowClear
-                                                style={{ height: '31px', width: '130px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
+                                                style={{ height: '31px', width: '110px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
                                                 onChange={(value: string) => {
                                                     setType(value)
 

src/route/index/index.css

@@ -1,4 +1,9 @@
 @media (min-width: 1671px) {
+    .mediaBox{
+        height: 15px;
+        width: 230px;
+    }
+   
     .index {
         height: 100vh;
         display: flex;
@@ -258,6 +263,10 @@
 }
 
 @media (max-width: 1670px) {
+    .mediaBox{
+        height: 15px;
+        width: 230px;
+    }
     .index {
         height: 100vh;
         display: flex;
@@ -518,6 +527,10 @@
 }
 
 @media (max-width: 1550px) {
+    .mediaBox{
+        height: 15px;
+        width: 150px;
+    }
     .index {
         height: 100vh;
         display: flex;
@@ -621,6 +634,8 @@
         /* position: fixed; */
         /* width: 267px; */
         width: 230px;
+        /* 修改 */
+        width: 190px;
         min-height: calc(100vh - 65px);
         /* overflow: auto; */
         /* top: 65px; */
@@ -647,6 +662,9 @@
 
     .belongPeopleMenu-box {
         min-height: 200px;
+        /* 修改 */
+        min-height: 160px;
+
         /* background-color: pink; */
         border-bottom: 1px solid #fde9ab;
 
@@ -656,6 +674,8 @@
     .belongpeopleName {
         color: #313131;
         width: 230px;
+         /* 修改 */
+         width: 190px;
         height: 40px;
         text-align: left;
         font-size: 16px;
@@ -675,10 +695,14 @@
 
     .index .right {
         margin-left: 250px;
+        /* 修改 */
+        margin-left: 210px;
         box-sizing: border-box;
         height: 100%;
         position: fixed;
         width: calc(100vw - 270px);
+        /* 修改 */
+        width: calc(100vw - 230px);
         /* width: 1575px; */
     }