适配

src/components/card/CardProj.tsx

@@ -478,6 +478,7 @@ export default function CardProj(props: any) {
                             }
                         </div> */}
                         <div className='cpbc-bot' style={{ color: '#FFA415' }}>
+
                             产权所属者:{data.apply.authorName}
                         </div>
                     </div>

src/components/card/card-proj-loading.css

@@ -1,5 +1,5 @@
 .card-proj-loading {
-    width: 317px;
+    width: 95%;
     padding: 20px 25px;
     box-sizing: border-box;
     background-color: #F5FAFE;

src/components/card/card-proj-result.css

@@ -1,5 +1,5 @@
 .card-proj-result {
-    width: 317px;
+    width: 95%;
     min-height: 97px;
     padding: 20px 25px;
     box-sizing: border-box;

src/route/index/Index.tsx

@@ -33,7 +33,7 @@ import {
     CloseOutlined
 } from '@ant-design/icons';
 import { useLocation } from 'react-router-dom';
-import { get, downloadUrl,post } from '../../util/AjaxUtils.ts'
+import { get, downloadUrl, post } from '../../util/AjaxUtils.ts'
 import { setMenuActive } from '../../util/cache.ts'
 import gpsImg from '../../static/right/gps.png'
 import backImg from '../../static/right/back.png'
@@ -523,16 +523,16 @@ export default function Index() {
             messageApi,
             url: `/api/coupon/user/save`,
             body: {
-                couponId:couponId
+                couponId: couponId
             },
             onBefore() {
 
             },
             onSuccess() {
                 messageApi.success('领取成功')
-               setTimeout(()=>{
+                setTimeout(() => {
                     setCoupon(false)
-               },500)
+                }, 500)
             },
             onFinally() {
 
@@ -1053,17 +1053,29 @@ export default function Index() {
                                     {/* {renderStatus()} */}
                                     <div className='gps'>
                                         <img src={gpsImg} alt="" />
-                                        <div>当前位置:{now}</div>
+                                        <div className='gps-now'>当前位置:{now}</div>
                                     </div>
-                                    <div style={{ display: showSearchBox ? 'block' : 'none' }}>
+                                    <div className='mediaLine'>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'center'
-                                        }}>
                                         <div className='line' style={{
                                             display: showSearchBox ? 'block' : 'none',
 
                                         }} ></div>
+                                    </div>
+                                    <div style={{ display: showSearchBox ? 'block' : 'none' }}>
+                                        <div
+                                            className='mediaSearch'
+                                            style={{
+
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                minHeight: 62,
+                                                // flexWrap: 'wrap',
+                                                padding: '10px 0',
+                                                boxSizing: 'border-box',
+                                                // background:'red',
+                                                // width:890
+                                            }}>
+
 
                                             <div
                                                 style={{
@@ -1222,12 +1234,16 @@ export default function Index() {
                                     </div>
 
                                     <div style={{ display: refunSearchBox ? 'block' : 'none' }}>
-                                        <div style={{
+                                        <div
+                                            className='mediaSearch'
+                                            style={{
                                                 display: 'flex',
                                                 alignItems: 'center'
                                             }}>
+                                            <div className='mediaLine'>
                                                 <div className='line' style={{
                                                 }} ></div>
+                                            </div>
                                             <Button type="primary" onClick={() => {
                                                 setRefunModal(true)
                                                 refunInit()
@@ -1283,12 +1299,14 @@ export default function Index() {
 
 
                                     <div style={{ display: correctionSearchBox ? 'block' : 'none' }}>
-                                        <div style={{
+                                        <div className='mediaSearch' style={{
                                             display: 'flex',
                                             alignItems: 'center'
                                         }}>
+                                            <div className='mediaLine'>
                                                 <div className='line' style={{
                                                 }} ></div>
+                                            </div>
                                             <Button type="primary" onClick={() => {
                                                 setCorrectionModal(true)
                                                 correctionInit()

src/route/index/index.css

@@ -1,12 +1,11 @@
-.index {
+@media (min-width: 1671px) {
-    /* position: relative; */
+    .index {
         height: 100vh;
-    /* margin-top: 74px; */
         display: flex;
         position: relative;
-}
+    }
 
-.couponMask-box {
+    .couponMask-box {
         position: fixed;
         width: 100vw;
         height: 100vh;
@@ -15,24 +14,26 @@
         left: 0;
         z-index: 999;
 
-}
+    }
 
-.couponMask {
+    .couponMask {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-}
+    }
-.couponMask-img{
+
+    .couponMask-img {
         width: 613px;
         height: 475px;
         /* background-color: skyblue; */
         /* cursor: pointer; */
         position: relative;
-}
+    }
-.couponMask-btn{
+
+    .couponMask-btn {
         position: absolute;
         bottom: -20px;
         left: 156.5px;
@@ -46,8 +47,9 @@
         font-weight: 700;
         background-color: #4180FF;
         cursor: pointer;
-}
+    }
-.couponMask-close {
+
+    .couponMask-close {
         width: 65px;
         height: 65px;
         border-radius: 50%;
@@ -59,9 +61,9 @@
         font-size: 40px;
         margin-top: 52px;
         cursor: pointer;
-}
+    }
 
-.leftbox {
+    .leftbox {
         width: 250px;
         height: calc(100vh - 65px);
         /* background-color: red; */
@@ -69,34 +71,34 @@
         top: 65px;
         left: 0;
         overflow: auto;
-}
+    }
 
 
-/* .leftbox::-webkit-scrollbar {
+    /* .leftbox::-webkit-scrollbar {
         display: block;
         width: 6px;
         height: 0;
-}
+    }
-.leftbox::-webkit-scrollbar-track {
+    .leftbox::-webkit-scrollbar-track {
         background: #e2e2e2;
     
-}
+    }
     
-.leftbox::-webkit-scrollbar-thumb {
+    .leftbox::-webkit-scrollbar-thumb {
         background: #cecece;
      
      
         border-radius: 5px;
     
-}
+    }
     
     
-.leftbox::-webkit-scrollbar-thumb:hover {
+    .leftbox::-webkit-scrollbar-thumb:hover {
         background: #adadad;
     
-} */
+    } */
 
-.index .left {
+    .index .left {
         /* position: fixed; */
         /* width: 267px; */
         width: 230px;
@@ -106,13 +108,13 @@
         /* left: 0; */
         background-color: var(--color-light);
 
-}
+    }
 
-.belongPeopleMenu {
+    .belongPeopleMenu {
         /* background-color: pink; */
-}
+    }
 
-.belongPeopleMenu-title {
+    .belongPeopleMenu-title {
         background-color: #FFFBEF;
         border-top: 1px solid #fde9ab;
         border-bottom: 1px solid #fde9ab;
@@ -122,17 +124,17 @@
         display: flex;
         align-items: center;
         /* justify-content: center; */
-}
+    }
 
-.belongPeopleMenu-box {
+    .belongPeopleMenu-box {
         min-height: 200px;
         /* background-color: pink; */
         border-bottom: 1px solid #fde9ab;
 
 
-}
+    }
 
-.belongpeopleName {
+    .belongpeopleName {
         color: #313131;
         width: 230px;
         height: 40px;
@@ -144,60 +146,66 @@
         text-wrap: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;
-}
+    }
 
-.pagination-controls {
+    .pagination-controls {
         /* background-color: skyblue; */
         display: flex;
         justify-content: center;
-}
+    }
 
-.index .right {
+    .index .right {
         margin-left: 250px;
         box-sizing: border-box;
         height: 100%;
         position: fixed;
         width: calc(100vw - 270px);
         /* width: 1575px; */
-}
+    }
 
-.index .right .top {
+    .index .right .top {
         /* margin-top: 11px; */
         box-sizing: border-box;
-    height: 62px;
+        min-height: 62px;
         display: flex;
-    /* justify-content: space-between; */
+        /* justify-content: center; */
         align-items: center;
         border-bottom: 1px solid var(--color-border);
         background-color: var(--color-light);
-}
+        /* overflow-x: scroll; */
+    }
 
-.index .right .top .gps {
+    .index .right .top .gps {
         display: flex;
         align-items: center;
         font-size: 14px;
-}
+    }
 
-.index .right .top .gps img {
+    .gps-now {
+        /* background-color: red; */
+        min-width: 122px;
+    }
+
+    .index .right .top .gps img {
         width: 18px;
         height: 21px;
         margin-left: 22px;
         margin-right: 16px;
-}
+    }
 
-.index .right .top .line {
+    .index .right .top .line {
         width: 1px;
         height: 23px;
         border-left: 1px solid #d8d8d8;
         margin-left: 33px;
         margin-right: 31px;
-}
+    }
 
-.nowPosition {
+    .nowPosition {
         display: flex;
         align-items: center;
         /* width: 349px; */
-    height: 100%;
+        height: 62px;
         /* margin-left: 98px; */
         font-weight: 300;
         font-size: 13px;
@@ -205,39 +213,575 @@
         /* background: url(../../static//right/back.png); */
         /* background-color: rgb(228, 191, 191); */
         position: relative;
-}
 
-.nowPosition img {
+
+    }
+
+    .nowPosition img {
         width: 349px;
         height: 62px;
         position: absolute;
         left: 0;
         top: 0;
-}
+    }
 
-.nowPosition div {
+    .nowPosition div {
         margin-left: 133px;
         z-index: 99;
-}
+        /* background-color: red; */
+        min-width: 30px;
+    }
 
-/* 所属人分页 */
+    /* 所属人分页 */
-.belong-pagination {
+    .belong-pagination {
         display: flex;
         justify-content: flex-end;
         margin-top: 5px;
         /* background-color: skyblue; */
-}
+    }
 
-/* 设置分页不显示页码 */
+    /* 设置分页不显示页码 */
-.custom-pagination .ant-pagination-item,
+    .custom-pagination .ant-pagination-item,
-.custom-pagination .ant-pagination-jump-prev,
+    .custom-pagination .ant-pagination-jump-prev,
-.custom-pagination .ant-pagination-jump-next,
+    .custom-pagination .ant-pagination-jump-next,
-.custom-pagination .ant-pagination-options-size-changer,
+    .custom-pagination .ant-pagination-options-size-changer,
-.custom-pagination .ant-pagination-options-quick-jumper {
+    .custom-pagination .ant-pagination-options-quick-jumper {
         display: none !important;
+    }
+
+    .custom-pagination .ant-pagination-prev,
+    .custom-pagination .ant-pagination-next {
+        display: inline-block;
+    }
+
 }
 
-.custom-pagination .ant-pagination-prev,
+@media (max-width: 1670px) {
-.custom-pagination .ant-pagination-next {
+    .index {
+        height: 100vh;
+        display: flex;
+        position: relative;
+    }
+
+    .couponMask-box {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+    }
+
+    .couponMask {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .couponMask-img {
+        width: 613px;
+        height: 475px;
+        /* background-color: skyblue; */
+        /* cursor: pointer; */
+        position: relative;
+    }
+
+    .couponMask-btn {
+        position: absolute;
+        bottom: -20px;
+        left: 156.5px;
+        width: 300px;
+        height: 60px;
+        border-radius: 30px;
+        color: white;
+        font-size: 25px;
+        text-align: center;
+        line-height: 60px;
+        font-weight: 700;
+        background-color: #4180FF;
+        cursor: pointer;
+    }
+
+    .couponMask-close {
+        width: 65px;
+        height: 65px;
+        border-radius: 50%;
+        border: 2px solid #E5E5E5;
+        color: #E5E5E5;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 40px;
+        margin-top: 52px;
+        cursor: pointer;
+    }
+
+    .leftbox {
+        width: 250px;
+        height: calc(100vh - 65px);
+        /* background-color: red; */
+        position: fixed;
+        top: 65px;
+        left: 0;
+        overflow: auto;
+    }
+
+
+    /* .leftbox::-webkit-scrollbar {
+        display: block;
+        width: 6px;
+        height: 0;
+    }
+    .leftbox::-webkit-scrollbar-track {
+        background: #e2e2e2;
+    
+    }
+    
+    .leftbox::-webkit-scrollbar-thumb {
+        background: #cecece;
+     
+     
+        border-radius: 5px;
+    
+    }
+    
+    
+    .leftbox::-webkit-scrollbar-thumb:hover {
+        background: #adadad;
+    
+    } */
+
+    .index .left {
+        /* position: fixed; */
+        /* width: 267px; */
+        width: 230px;
+        min-height: calc(100vh - 65px);
+        /* overflow: auto; */
+        /* top: 65px; */
+        /* left: 0; */
+        background-color: var(--color-light);
+
+    }
+
+    .belongPeopleMenu {
+        /* background-color: pink; */
+    }
+
+    .belongPeopleMenu-title {
+        background-color: #FFFBEF;
+        border-top: 1px solid #fde9ab;
+        border-bottom: 1px solid #fde9ab;
+        height: 56px;
+        color: #FFAF22;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        /* justify-content: center; */
+    }
+
+    .belongPeopleMenu-box {
+        min-height: 200px;
+        /* background-color: pink; */
+        border-bottom: 1px solid #fde9ab;
+
+
+    }
+
+    .belongpeopleName {
+        color: #313131;
+        width: 230px;
+        height: 40px;
+        text-align: left;
+        font-size: 16px;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .pagination-controls {
+        /* background-color: skyblue; */
+        display: flex;
+        justify-content: center;
+    }
+
+    .index .right {
+        margin-left: 250px;
+        box-sizing: border-box;
+        height: 100%;
+        position: fixed;
+        width: calc(100vw - 270px);
+        /* width: 1575px; */
+    }
+
+    .index .right .top {
+        /* margin-top: 11px; */
+        box-sizing: border-box;
+        min-height: 62px;
+        display: flex;
+        /* padding: 10px 10px;
+        box-sizing: border-box; */
+        flex-wrap: wrap;
+        /* justify-content: center; */
+        align-items: center;
+        border-bottom: 1px solid var(--color-border);
+        background-color: var(--color-light);
+        /* overflow-x: scroll; */
+    }
+
+    .index .right .top .gps {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+    }
+
+    .gps-now {
+        /* background-color: red; */
+        min-width: 122px;
+    }
+
+    .index .right .top .gps img {
+        width: 18px;
+        height: 21px;
+        margin-left: 22px;
+        margin-right: 16px;
+    }
+
+    .index .right .top .line {
+        width: 1px;
+        height: 23px;
+        border-left: 1px solid #d8d8d8;
+        margin-left: 33px;
+        margin-right: 31px;
+    }
+
+    .nowPosition {
+        display: flex;
+        align-items: center;
+        /* width: 349px; */
+        height: 62px;
+        /* margin-left: 98px; */
+        font-weight: 300;
+        font-size: 13px;
+        color: #676767;
+        /* background: url(../../static//right/back.png); */
+        /* background-color: rgb(228, 191, 191); */
+        position: relative;
+        display: none;
+
+    }
+
+    .nowPosition img {
+        width: 349px;
+        height: 62px;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .nowPosition div {
+        margin-left: 133px;
+        z-index: 99;
+        /* background-color: red; */
+        min-width: 30px;
+    }
+
+    /* 所属人分页 */
+    .belong-pagination {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 5px;
+        /* background-color: skyblue; */
+    }
+
+    /* 设置分页不显示页码 */
+    .custom-pagination .ant-pagination-item,
+    .custom-pagination .ant-pagination-jump-prev,
+    .custom-pagination .ant-pagination-jump-next,
+    .custom-pagination .ant-pagination-options-size-changer,
+    .custom-pagination .ant-pagination-options-quick-jumper {
+        display: none !important;
+    }
+
+    .custom-pagination .ant-pagination-prev,
+    .custom-pagination .ant-pagination-next {
         display: inline-block;
+    }
+}
+
+@media (max-width: 1400px) {
+    .index {
+        height: 100vh;
+        display: flex;
+        position: relative;
+    }
+
+    .couponMask-box {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+    }
+
+    .couponMask {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .couponMask-img {
+        width: 613px;
+        height: 475px;
+        /* background-color: skyblue; */
+        /* cursor: pointer; */
+        position: relative;
+    }
+
+    .couponMask-btn {
+        position: absolute;
+        bottom: -20px;
+        left: 156.5px;
+        width: 300px;
+        height: 60px;
+        border-radius: 30px;
+        color: white;
+        font-size: 25px;
+        text-align: center;
+        line-height: 60px;
+        font-weight: 700;
+        background-color: #4180FF;
+        cursor: pointer;
+    }
+
+    .couponMask-close {
+        width: 65px;
+        height: 65px;
+        border-radius: 50%;
+        border: 2px solid #E5E5E5;
+        color: #E5E5E5;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 40px;
+        margin-top: 52px;
+        cursor: pointer;
+    }
+
+    .leftbox {
+        width: 250px;
+        height: calc(100vh - 65px);
+        /* background-color: red; */
+        position: fixed;
+        top: 65px;
+        left: 0;
+        overflow: auto;
+    }
+
+
+    /* .leftbox::-webkit-scrollbar {
+        display: block;
+        width: 6px;
+        height: 0;
+    }
+    .leftbox::-webkit-scrollbar-track {
+        background: #e2e2e2;
+    
+    }
+    
+    .leftbox::-webkit-scrollbar-thumb {
+        background: #cecece;
+     
+     
+        border-radius: 5px;
+    
+    }
+    
+    
+    .leftbox::-webkit-scrollbar-thumb:hover {
+        background: #adadad;
+    
+    } */
+
+    .index .left {
+        /* position: fixed; */
+        /* width: 267px; */
+        width: 230px;
+        min-height: calc(100vh - 65px);
+        /* overflow: auto; */
+        /* top: 65px; */
+        /* left: 0; */
+        background-color: var(--color-light);
+
+    }
+
+    .belongPeopleMenu {
+        /* background-color: pink; */
+    }
+
+    .belongPeopleMenu-title {
+        background-color: #FFFBEF;
+        border-top: 1px solid #fde9ab;
+        border-bottom: 1px solid #fde9ab;
+        height: 56px;
+        color: #FFAF22;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        /* justify-content: center; */
+    }
+
+    .belongPeopleMenu-box {
+        min-height: 200px;
+        /* background-color: pink; */
+        border-bottom: 1px solid #fde9ab;
+
+
+    }
+
+    .belongpeopleName {
+        color: #313131;
+        width: 230px;
+        height: 40px;
+        text-align: left;
+        font-size: 16px;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .pagination-controls {
+        /* background-color: skyblue; */
+        display: flex;
+        justify-content: center;
+    }
+
+    .index .right {
+        margin-left: 250px;
+        box-sizing: border-box;
+        height: 100%;
+        position: fixed;
+        width: calc(100vw - 270px);
+        /* width: 1575px; */
+    }
+
+    .index .right .top {
+        /* margin-top: 11px; */
+        box-sizing: border-box;
+        min-height: 62px;
+        display: flex;
+        /* padding: 10px 10px;
+        box-sizing: border-box; */
+        flex-wrap: wrap;
+        /* justify-content: center; */
+        align-items: center;
+        border-bottom: 1px solid var(--color-border);
+        background-color: var(--color-light);
+        /* overflow-x: scroll; */
+    }
+
+    .index .right .top .gps {
+
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        display: none;
+    }
+
+    .gps-now {
+        /* background-color: red; */
+        min-width: 122px;
+    }
+
+    .index .right .top .gps img {
+        width: 18px;
+        height: 21px;
+        margin-left: 22px;
+        margin-right: 16px;
+    }
+
+    .index .right .top .line {
+        width: 1px;
+        height: 23px;
+        border-left: 1px solid #d8d8d8;
+        margin-left: 33px;
+        margin-right: 31px;
+
+    }
+
+    .mediaLine {
+        display: none;
+    }
+
+    .mediaSearch{
+        margin-left: 20px;
+    } 
+    .nowPosition {
+        display: flex;
+        align-items: center;
+        /* width: 349px; */
+        height: 62px;
+        /* margin-left: 98px; */
+        font-weight: 300;
+        font-size: 13px;
+        color: #676767;
+        /* background: url(../../static//right/back.png); */
+        /* background-color: rgb(228, 191, 191); */
+        position: relative;
+        display: none;
+
+    }
+
+    .nowPosition img {
+        width: 349px;
+        height: 62px;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .nowPosition div {
+        margin-left: 133px;
+        z-index: 99;
+        /* background-color: red; */
+        min-width: 30px;
+    }
+
+    /* 所属人分页 */
+    .belong-pagination {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 5px;
+        /* background-color: skyblue; */
+    }
+
+    /* 设置分页不显示页码 */
+    .custom-pagination .ant-pagination-item,
+    .custom-pagination .ant-pagination-jump-prev,
+    .custom-pagination .ant-pagination-jump-next,
+    .custom-pagination .ant-pagination-options-size-changer,
+    .custom-pagination .ant-pagination-options-quick-jumper {
+        display: none !important;
+    }
+
+    .custom-pagination .ant-pagination-prev,
+    .custom-pagination .ant-pagination-next {
+        display: inline-block;
+    }
 }