From 0eac126f4077658b7af9e88eabf8b743bc8b3042 Mon Sep 17 00:00:00 2001
From: xixi <123@qq.com>
Date: Tue, 10 Sep 2024 11:52:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/CardProj.tsx          |    1 +
 src/components/card/card-proj-loading.css |    2 +-
 src/components/card/card-proj-result.css  |    2 +-
 src/components/card/card-proj.css         | 1461 ++++++++++++++-------
 src/route/index/Index.tsx                 |   68 +-
 src/route/index/index.css                 |  968 +++++++++++---
 6 files changed, 1814 insertions(+), 688 deletions(-)

diff --git a/src/components/card/CardProj.tsx b/src/components/card/CardProj.tsx
index 5612f1d..23b76d9 100644
--- a/src/components/card/CardProj.tsx
+++ b/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>
diff --git a/src/components/card/card-proj-loading.css b/src/components/card/card-proj-loading.css
index 9640df2..f5258e2 100644
--- a/src/components/card/card-proj-loading.css
+++ b/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;
diff --git a/src/components/card/card-proj-result.css b/src/components/card/card-proj-result.css
index 2d027bc..b8dace8 100644
--- a/src/components/card/card-proj-result.css
+++ b/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;
diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css
index 1ba3339..b4063ce 100644
--- a/src/components/card/card-proj.css
+++ b/src/components/card/card-proj.css
@@ -1,359 +1,353 @@
-.card-proj {
-    border-radius: 6px;
-    background-color: var(--color-light);
-    /* padding: 5px 15px; */
-    height: 230px;
-    /* width: calc(100vw - 330px); */
-    /* margin-bottom: 20px; */
-    border-radius: 13px;
-    
-    
-}
+@media (min-width: 1571px) {
+    .card-proj {
+        border-radius: 6px;
+        background-color: var(--color-light);
+        /* padding: 5px 15px; */
+        height: 230px;
+        /* width: calc(100vw - 330px); */
+        /* margin-bottom: 20px; */
+        border-radius: 13px;
 
-.card-proj .cp-top {
-    height: 56px;
-    /* background-color: pink; */
-    border-bottom: 1px solid #C4C4C4;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 21px;
-    padding-right: 29px;
-}
 
-.cpt-left {
-    display: flex;
-    /* align-items: center; */
-}
+    }
 
-.dottedLine {
-    width: 2px;
-    height: 18px;
-    border: 2px dotted #707070;
-    margin-top: 2px;
+    .card-proj .cp-top {
+        height: 56px;
+        /* background-color: pink; */
+        border-bottom: 1px solid #C4C4C4;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 21px;
+        padding-right: 29px;
+    }
 
-}
+    .cpt-left {
+        display: flex;
+        /* align-items: center; */
+    }
 
-.cpt-title {
-    /* font-family: Microsoft YaHei UI; */
-    font-weight: 700;
-    font-size: 19px;
-    color: #292929;
-    margin-left: 18px;
-    cursor: pointer;
-}
+    .dottedLine {
+        width: 2px;
+        height: 18px;
+        border: 2px dotted #707070;
+        margin-top: 2px;
 
-.cp-tag {
-    /* width: 75px; */
-    height: 29px;
-    background: #e4e4e4;
-    border-radius: 5px;
-    /* font-family: Microsoft YaHei UI; */
-    font-weight: 400;
-    font-size: 14px;
-    color: #696969;
-    text-align: center;
-    line-height: 29px;
-    padding-left: 9px;
-    padding-right: 9px;
-    margin-left: 19px;
-}
+    }
 
-.cp-num {
-    /* background-color: pink; */
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 14px;
-    color: #888888;
-    margin-left: 23px;
+    .cpt-title {
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 700;
+        font-size: 19px;
+        color: #292929;
+        margin-left: 18px;
+        cursor: pointer;
+    }
 
-}
+    .cp-tag {
+        /* width: 75px; */
+        height: 29px;
+        background: #e4e4e4;
+        border-radius: 5px;
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 400;
+        font-size: 14px;
+        color: #696969;
+        text-align: center;
+        line-height: 29px;
+        padding-left: 9px;
+        padding-right: 9px;
+        margin-left: 19px;
+    }
 
-.cp-smallLine {
-    width: 1px;
-    height: 16px;
-    border-left: 1px solid #888888;
-    margin-top: 6px;
-    margin-left: 11px;
-    margin-right: 11px;
+    .cp-num {
+        /* background-color: pink; */
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #888888;
+        margin-left: 23px;
 
-}
+    }
 
-.cp-time {
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 14px;
-    color: #888888;
-}
-.proj-progress{
-    height: 20px;
-    /* background: #ff7b00; */
-    /* background: #01a13f; */
-    border-radius: 5px;
-    /* font-family: Microsoft YaHei UI; */
-    font-weight: 400;
-    font-size: 12px;
-    /* color: #5a5a5a; */
-    /* border: 1px solid #ff7b00; */
-    text-align: center;
-    line-height: 20px;
-    padding-left: 9px;
-    padding-right: 9px;
-    margin-left: 10px;
-    cursor: pointer;
-    margin-top: 4px;
-}
-.cpt-right {
-    font-size: 14px;
-    color: #FFA415;
+    .cp-smallLine {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid #888888;
+        margin-top: 6px;
+        margin-left: 11px;
+        margin-right: 11px;
 
-}
+    }
 
-.orignLine {
-    margin-left: 27px;
-    margin-right: 27px;
-}
+    .cp-time {
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #888888;
+    }
 
-.cpt-text-btn {
-    cursor: pointer;
+    .proj-progress {
+        height: 20px;
+        /* background: #ff7b00; */
+        /* background: #01a13f; */
+        border-radius: 5px;
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 400;
+        font-size: 12px;
+        /* color: #5a5a5a; */
+        /* border: 1px solid #ff7b00; */
+        text-align: center;
+        line-height: 20px;
+        padding-left: 9px;
+        padding-right: 9px;
+        margin-left: 10px;
+        cursor: pointer;
+        margin-top: 4px;
+    }
 
-}
+    .cpt-right {
+        font-size: 14px;
+        color: #FFA415;
 
-.text-btn {
-    margin-left: 11px;
-}
+    }
 
-.cp-bot {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 175px;
-    padding-left: 18px;
-}
+    .orignLine {
+        margin-left: 27px;
+        margin-right: 27px;
+    }
 
-.cpb-left {
-    display: flex;
-    width: 768px;
-}
+    .cpt-text-btn {
+        cursor: pointer;
 
-.cpb-left-img {
-    /* width: 249px; */
-    width: 290px;
-    height: 143px;
-    background: #F5F5F5;
-    border-radius: 6px;
-   position: relative;
+    }
 
-}
-.payStatus{
-    position: absolute;
-    background-color: red;
-    left: 0;
-    top: 113px;
-    height: 30px;
-    padding: 0px 10px;
-    line-height: 30px;
-    color: #FFFFFF;
-    font-size: 14px;
-}
-.cpb-left-imgX {
-    /* width: 249px; */
-    width: 290px;
-    height: 143px;
-    background: #F5F5F5;
-    border-radius: 6px;
-   
+    .text-btn {
+        margin-left: 11px;
+    }
 
-}
-.cpb-left-img img {
-    width: 100%; /* 使图片宽度等于父元素宽度 */
-    height: 100%; /* 使图片高度等于父元素高度 */
-    object-fit: cover; /* 使图片等比例缩放并裁剪超出部分 */
-    object-position: center ; /* 确保图片在容器内居中显示 */
-    
-     /* 去掉图片底部的空隙 */
-    display: block;
-  
-}
+    .cp-bot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 175px;
+        padding-left: 18px;
+    }
 
-.cpbl-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-}
+    .cpb-left {
+        display: flex;
+        width: 768px;
+    }
 
-.cpbl-money {
-    min-width: 210px;
-    padding: 0 20px;
-    box-sizing: border-box;
-    height: 47px;
-    /* padding-left: 27px;
+    .cpb-left-img {
+        /* width: 249px; */
+        width: 290px;
+        height: 143px;
+        background: #F5F5F5;
+        border-radius: 6px;
+        position: relative;
+
+    }
+
+    .payStatus {
+        position: absolute;
+        background-color: red;
+        left: 0;
+        top: 113px;
+        height: 30px;
+        padding: 0px 10px;
+        line-height: 30px;
+        color: #FFFFFF;
+        font-size: 14px;
+    }
+
+    .cpb-left-imgX {
+        /* width: 249px; */
+        width: 290px;
+        height: 143px;
+        background: #F5F5F5;
+        border-radius: 6px;
+
+
+    }
+
+    .cpb-left-img img {
+        width: 100%;
+        /* 使图片宽度等于父元素宽度 */
+        height: 100%;
+        /* 使图片高度等于父元素高度 */
+        object-fit: cover;
+        /* 使图片等比例缩放并裁剪超出部分 */
+        object-position: center;
+        /* 确保图片在容器内居中显示 */
+
+        /* 去掉图片底部的空隙 */
+        display: block;
+
+    }
+
+    .cpbl-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    .cpbl-money {
+        min-width: 270px;
+        padding: 0 20px;
+        box-sizing: border-box;
+
+        /* padding-left: 27px;
     padding-right: 37px; */
-    background: #f7edce;
-    border-radius: 19px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 26px;
-}
+        background: #f7edce;
+        border-radius: 19px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 26px;
+    }
 
-.cpbl-money .money {
-    font-weight: 500;
-    font-size: 17px;
-    color: #FF5D15;
-}
+    .cpbl-money .money {
+        font-weight: 500;
+        font-size: 17px;
+        color: #FF5D15;
+    }
 
-.cpbl-money .num {
-    font-weight: bold;
-    font-size: 24px;
-    color: #FF5D15;
-    margin-left: 10px;
+    .cpbl-money .num {
+        font-weight: bold;
+        font-size: 24px;
+        color: #FF5D15;
+        margin-left: 10px;
 
-}
-.coupon-num{
-    font-size: 12px;
-    color: #FF5D15;
-    margin-left: 5px;
-    font-weight: 700;
-    /* background-color: red; */
-    margin-top: 8px;
-   
-}
-.otherMoney{
-    display: flex;
-    margin-left: 10px;
-    height: 47px;
-    /* background-color: #F3F3F3; */
-    padding: 0 10px;
-    align-items: center;
-    /* color: #797979; */
-}
-.moneyBox{
-}
-.cpbl-btn {
-    display: flex;
+    }
 
-    margin-left: 18px;
-}
+    .coupon-num {
+        font-size: 12px;
+        color: #FF5D15;
+        /* margin-left: 5px; */
+        font-weight: 700;
+        /* background-color: red; */
+        margin-top: 8px;
 
-.threeBtn {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    margin-right: 24px;
-    color: #707070;
-}
+    }
 
-/* .threeBtn:hover {
+    .otherMoney {
+        display: flex;
+        margin-left: 10px;
+        height: 47px;
+        /* background-color: #F3F3F3; */
+        padding: 0 10px;
+        align-items: center;
+        /* color: #797979; */
+    }
+
+    .moneyBox {}
+
+    .cpbl-btn {
+        display: flex;
+
+        margin-left: 18px;
+    }
+
+    .threeBtn {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        margin-right: 24px;
+        color: #707070;
+    }
+
+    /* .threeBtn:hover {
     background-color: #a81414;
     border-radius: 10px;
 } */
 
-.threeBtn img {
-    width: 30px;
-    height: 30px;
-    margin-right: 15px;
-}
+    .threeBtn img {
+        width: 30px;
+        height: 30px;
+        margin-right: 15px;
+    }
 
-.rightBit {
-    margin-right: 0;
-}
+    .rightBit {
+        margin-right: 0;
+    }
 
-.cline {
-    width: 1px;
-    height: 110px;
-    /* border-lift: 0px solid #737373; */
-    border-left: 1px dotted #c2c2c2;
-}
+    .cline {
+        width: 1px;
+        height: 110px;
+        /* border-lift: 0px solid #737373; */
+        border-left: 1px dotted #c2c2c2;
+    }
 
-.cpb-center {
-    width: 532px;
-    height: 110px;
-    /* background-color: ; */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-}
+    .cpb-center {
+        width: 532px;
+        height: 110px;
 
-.cpbc-bot {
-    display: flex;
-    color: #2088F3;
-}
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+    }
 
-.cpb-right {
-    /* background-color: pink; */
-    width: 190px;
-    height: 110px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    border-left: 1px dotted #c2c2c2;
-}
+    .cpbc-bot {
+        text-align: center;
+        /* color: #2088F3; */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
-.cpbr-top {
-    font-size: 12px;
-    color: #707070;
-}
-.cpbr-bot{
-    margin-left: 10px;
-}
+    .cpb-right {
+        /* background-color: pink; */
+        width: 190px;
+        height: 110px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        border-left: 1px dotted #c2c2c2;
+    }
+
+    .cpbr-top {
+        font-size: 12px;
+        color: #707070;
+    }
+
+    .cpbr-bot {
+        margin-left: 10px;
+    }
 
 
+    .card-proj .left {
+        /* position: unset; */
+    }
 
+    .card-proj .title {
+        display: flex;
+        justify-content: space-between;
+    }
 
+    .card-proj .titleLift {
+        /* display: flex; */
+    }
 
+    .card-proj .right {
+        margin: 0;
+    }
 
+    .card-proj .title {
+        display: flex;
+        /* justify-content: space-between; */
+        align-items: center;
+        height: 60px;
+        /* background-color: pink; */
+        border-bottom: 1px solid var(--color-border);
+    }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.card-proj .left {
-    /* position: unset; */
-}
-
-.card-proj .title {
-    display: flex;
-    justify-content: space-between;
-}
-
-.card-proj .titleLift {
-    /* display: flex; */
-}
-
-.card-proj .right {
-    margin: 0;
-}
-
-.card-proj .title {
-    display: flex;
-    /* justify-content: space-between; */
-    align-items: center;
-    height: 60px;
-    /* background-color: pink; */
-    border-bottom: 1px solid var(--color-border);
-}
-
-/* .card-proj hr {
+    /* .card-proj hr {
     border-color: var(--color-border);
     border-style: dashed;
     border-left: 0;
@@ -363,170 +357,170 @@
     margin-block-end: 5px;
 } */
 
-.card-proj .title .left {
-    /* padding: 5px; */
-    font-weight: bold;
-    /* background-color: red;  */
-    display: flex;
-    align-items: center;
-    margin-left: 21px;
-    font-weight: 700;
-    font-size: 19px;
-    color: #292929;
+    .card-proj .title .left {
+        /* padding: 5px; */
+        font-weight: bold;
+        /* background-color: red;  */
+        display: flex;
+        align-items: center;
+        margin-left: 21px;
+        font-weight: 700;
+        font-size: 19px;
+        color: #292929;
 
-}
+    }
 
-.card-proj .title .left .boxline {
-    width: 2px;
-    height: 18px;
-    border: 2px dotted #adadad;
-    margin-right: 18px;
-}
+    .card-proj .title .left .boxline {
+        width: 2px;
+        height: 18px;
+        border: 2px dotted #adadad;
+        margin-right: 18px;
+    }
 
-.card-proj .title .right {
-    padding: 5px;
-    width: 380px;
-    display: flex;
-    /* justify-content: space-between; */
-    align-items: center;
-}
+    .card-proj .title .right {
+        padding: 5px;
+        width: 380px;
+        display: flex;
+        /* justify-content: space-between; */
+        align-items: center;
+    }
 
-.card-proj .title .right span {
-    margin-inline-end: 0;
-    font-size: 14px;
-    color: #888888;
-}
+    .card-proj .title .right span {
+        margin-inline-end: 0;
+        font-size: 14px;
+        color: #888888;
+    }
 
-.card-proj .title .right .line {
-    width: 1px;
-    height: 16px;
-    border-left: 1px solid #adadad;
-    margin-left: 12px;
-    margin-right: 12px;
-}
+    .card-proj .title .right .line {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid #adadad;
+        margin-left: 12px;
+        margin-right: 12px;
+    }
 
-/* .card-proj .title .right .date{
+    /* .card-proj .title .right .date{
     margin-left: 24px;
 } */
-.card-proj .titleRight {
-    margin-right: 29px;
-    font-size: 14px;
-    color: #FFA415;
-}
+    .card-proj .titleRight {
+        margin-right: 29px;
+        font-size: 14px;
+        color: #FFA415;
+    }
 
-.card-proj .titleRight .orignLine {
-    margin-left: 27px;
-    margin-right: 27px;
-}
+    .card-proj .titleRight .orignLine {
+        margin-left: 27px;
+        margin-right: 27px;
+    }
 
-.card-proj .titleRight .text-btn {
-    margin-left: 11px;
-}
+    .card-proj .titleRight .text-btn {
+        margin-left: 11px;
+    }
 
-.card-proj .title .right span:first-child {}
+    .card-proj .title .right span:first-child {}
 
-.card-proj .body {
-    width: unset;
-    border: unset !important;
-    padding: 0 !important;
-}
+    .card-proj .body {
+        width: unset;
+        border: unset !important;
+        padding: 0 !important;
+    }
 
-.card-proj .body .line {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24px 0;
-}
+    .card-proj .body .line {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 24px 0;
+    }
 
-.card-proj .body .line .left {
-    /* width: unset;
+    .card-proj .body .line .left {
+        /* width: unset;
     display: flex; */
-    width: 209px;
-    height: 128px;
-    background: #C4C4C4;
-    border-radius: 6px;
-    margin-left: 46px;
-}
+        width: 209px;
+        height: 128px;
+        background: #C4C4C4;
+        border-radius: 6px;
+        margin-left: 46px;
+    }
 
-.card-proj .body .line .centerl {
-    margin-left: 27px;
-}
+    .card-proj .body .line .centerl {
+        margin-left: 27px;
+    }
 
-.card-proj .body .line .centerl .c-top {
-    width: 175px;
-    height: 39px;
-    background: #FFF9E6;
-    border-radius: 19px;
-    color: #FF5D15;
-    line-height: 39px;
-    text-align: center;
-}
+    .card-proj .body .line .centerl .c-top {
+        width: 175px;
+        height: 39px;
+        background: #FFF9E6;
+        border-radius: 19px;
+        color: #FF5D15;
+        line-height: 39px;
+        text-align: center;
+    }
 
-.card-proj .body .line .centerl .c-top .money {
-    font-weight: 300;
-    font-size: 14px;
-}
+    .card-proj .body .line .centerl .c-top .money {
+        font-weight: 300;
+        font-size: 14px;
+    }
 
-.card-proj .body .line .centerl .c-top .num {
-    font-weight: bold;
-    font-size: 20px;
-}
+    .card-proj .body .line .centerl .c-top .num {
+        font-weight: bold;
+        font-size: 20px;
+    }
 
-.card-proj .body .line .centerl .c-bot {
-    display: flex;
-}
+    .card-proj .body .line .centerl .c-bot {
+        display: flex;
+    }
 
-.card-proj .body .line .centerl .c-bot .set {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-    font-weight: 300;
-    font-size: 15px;
-    color: #707070;
-    cursor: pointer;
-    margin-left: 31px;
-}
+    .card-proj .body .line .centerl .c-bot .set {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+        font-weight: 300;
+        font-size: 15px;
+        color: #707070;
+        cursor: pointer;
+        margin-left: 31px;
+    }
 
-.card-proj .body .line .centerl .c-bot img {
-    width: 30px;
-    height: 30px;
-}
+    .card-proj .body .line .centerl .c-bot img {
+        width: 30px;
+        height: 30px;
+    }
 
-.card-proj .body .line .centerr {
-    width: 428px;
-    height: 110px;
-    /* border-left: 1px dotted #737373; */
-    /* border-right: 1px dotted #737373; */
-    margin-left: 174px;
-}
+    .card-proj .body .line .centerr {
+        width: 428px;
+        height: 110px;
+        /* border-left: 1px dotted #737373; */
+        /* border-right: 1px dotted #737373; */
+        margin-left: 174px;
+    }
 
-.card-proj .body .line .right {
-    height: 110px;
-    width: 197px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    /* background-color: red; */
-    /* margin-left: 600px; */
-    border-left: 1px dotted #737373;
-}
+    .card-proj .body .line .right {
+        height: 110px;
+        width: 197px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        /* background-color: red; */
+        /* margin-left: 600px; */
+        border-left: 1px dotted #737373;
+    }
 
-.card-proj .body .line .right .rigth-t {
-    font-weight: 300;
-    font-size: 12px;
-    color: #707070;
-    text-align: center;
-    /* background-color: pink; */
-}
+    .card-proj .body .line .right .rigth-t {
+        font-weight: 300;
+        font-size: 12px;
+        color: #707070;
+        text-align: center;
+        /* background-color: pink; */
+    }
 
-.card-proj .body .line .right .status {
-    /* background-color: red; */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 10px;
-}
+    .card-proj .body .line .right .status {
+        /* background-color: red; */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+    }
 
 
 
@@ -534,7 +528,7 @@
 
 
 
-/* .card-proj .body .line .left span {
+    /* .card-proj .body .line .left span {
     margin-right: 10px;
 }
 
@@ -552,4 +546,573 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-} */
\ No newline at end of file
+} */
+}
+
+@media (max-width: 1570px) {
+    .card-proj {
+        border-radius: 6px;
+        background-color: var(--color-light);
+        /* padding: 5px 15px; */
+        min-height: 230px;
+        /* width: calc(100vw - 330px); */
+        /* margin-bottom: 20px; */
+        border-radius: 13px;
+
+
+    }
+
+    .card-proj .cp-top {
+        height: 56px;
+        /* background-color: pink; */
+        border-bottom: 1px solid #C4C4C4;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 21px;
+        padding-right: 29px;
+    }
+
+    .cpt-left {
+        display: flex;
+        /* align-items: center; */
+    }
+
+    .dottedLine {
+        width: 2px;
+        height: 18px;
+        border: 2px dotted #707070;
+        margin-top: 2px;
+
+    }
+
+    .cpt-title {
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 700;
+        font-size: 19px;
+        color: #292929;
+        margin-left: 18px;
+        cursor: pointer;
+    }
+
+    .cp-tag {
+        /* width: 75px; */
+        height: 29px;
+        background: #e4e4e4;
+        border-radius: 5px;
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 400;
+        font-size: 14px;
+        color: #696969;
+        text-align: center;
+        line-height: 29px;
+        padding-left: 9px;
+        padding-right: 9px;
+        margin-left: 19px;
+    }
+
+    .cp-num {
+        /* background-color: pink; */
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #888888;
+        margin-left: 23px;
+
+    }
+
+    .cp-smallLine {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid #888888;
+        margin-top: 6px;
+        margin-left: 11px;
+        margin-right: 11px;
+
+    }
+
+    .cp-time {
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #888888;
+    }
+
+    .proj-progress {
+        height: 20px;
+        /* background: #ff7b00; */
+        /* background: #01a13f; */
+        border-radius: 5px;
+        /* font-family: Microsoft YaHei UI; */
+        font-weight: 400;
+        font-size: 12px;
+        /* color: #5a5a5a; */
+        /* border: 1px solid #ff7b00; */
+        text-align: center;
+        line-height: 20px;
+        padding-left: 9px;
+        padding-right: 9px;
+        margin-left: 10px;
+        cursor: pointer;
+        margin-top: 4px;
+    }
+
+    .cpt-right {
+        font-size: 14px;
+        color: #FFA415;
+
+    }
+
+    .orignLine {
+        margin-left: 27px;
+        margin-right: 27px;
+    }
+
+    .cpt-text-btn {
+        cursor: pointer;
+
+    }
+
+    .text-btn {
+        margin-left: 11px;
+    }
+
+    .cp-bot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 175px;
+        padding-left: 18px;
+    }
+
+    .cpb-left {
+        display: flex;
+        width: 768px;
+    }
+
+    .cpb-left-img {
+        /* width: 249px; */
+        width: 290px;
+        height: 143px;
+        background: #F5F5F5;
+        border-radius: 6px;
+        position: relative;
+
+    }
+
+    .payStatus {
+        position: absolute;
+        background-color: red;
+        left: 0;
+        top: 113px;
+        height: 30px;
+        padding: 0px 10px;
+        line-height: 30px;
+        color: #FFFFFF;
+        font-size: 14px;
+    }
+
+    .cpb-left-imgX {
+        /* width: 249px; */
+        width: 290px;
+        height: 143px;
+        background: #F5F5F5;
+        border-radius: 6px;
+
+
+    }
+
+    .cpb-left-img img {
+        width: 100%;
+        /* 使图片宽度等于父元素宽度 */
+        height: 100%;
+        /* 使图片高度等于父元素高度 */
+        object-fit: cover;
+        /* 使图片等比例缩放并裁剪超出部分 */
+        object-position: center;
+        /* 确保图片在容器内居中显示 */
+
+        /* 去掉图片底部的空隙 */
+        display: block;
+
+    }
+
+    .cpbl-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    .cpbl-money {
+        min-width: 270px;
+
+        padding: 0 20px;
+        box-sizing: border-box;
+        height: 47px;
+        /* padding-left: 27px;
+    padding-right: 37px; */
+        background: #f7edce;
+        border-radius: 19px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 26px;
+    }
+
+    .cpbl-money .money {
+        font-weight: 500;
+        font-size: 17px;
+        color: #FF5D15;
+    }
+
+    .cpbl-money .num {
+        font-weight: bold;
+        font-size: 24px;
+        color: #FF5D15;
+        margin-left: 10px;
+
+    }
+
+    .coupon-num {
+        font-size: 12px;
+        color: #FF5D15;
+        /* margin-left: 5px; */
+        font-weight: 700;
+        /* background-color: red; */
+        margin-top: 8px;
+
+    }
+
+    .otherMoney {
+        display: flex;
+        margin-left: 10px;
+        height: 47px;
+        /* background-color: #F3F3F3; */
+        padding: 0 10px;
+        align-items: center;
+        /* color: #797979; */
+    }
+
+    .moneyBox {}
+
+    .cpbl-btn {
+        display: flex;
+        /* background-color: red; */
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 60px;
+        margin-top: 5px;
+    }
+
+    .threeBtn {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        margin-right: 24px;
+        color: #707070;
+        margin-bottom: 5px;
+    }
+
+    /* .threeBtn:hover {
+    background-color: #a81414;
+    border-radius: 10px;
+} */
+
+    .threeBtn img {
+        width: 30px;
+        height: 30px;
+        margin-right: 15px;
+    }
+
+    .rightBit {
+        margin-right: 0;
+    }
+
+    .cline {
+        width: 1px;
+        height: 110px;
+        /* border-lift: 0px solid #737373; */
+        border-left: 1px dotted #c2c2c2;
+    }
+
+    .cpb-center {
+        width: 532px;
+        height: 150px;
+        /* background-color: red; */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .cpbc-bot {
+        /* display: flex;
+        color: #2088F3; */
+        text-align: center;
+        /* color: #2088F3; */
+        /* width: 100px; */
+        /* max-width: 100%; */
+        /* white-space: nowrap; */
+        /* overflow: hidden; */
+        text-overflow: ellipsis;
+
+    }
+
+    .cpb-right {
+        /* background-color: pink; */
+        width: 190px;
+        height: 110px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        border-left: 1px dotted #c2c2c2;
+    }
+
+    .cpbr-top {
+        font-size: 12px;
+        color: #707070;
+    }
+
+    .cpbr-bot {
+        margin-left: 10px;
+    }
+
+
+    .card-proj .left {
+        /* position: unset; */
+    }
+
+    .card-proj .title {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .card-proj .titleLift {
+        /* display: flex; */
+    }
+
+    .card-proj .right {
+        margin: 0;
+    }
+
+    .card-proj .title {
+        display: flex;
+        /* justify-content: space-between; */
+        align-items: center;
+        height: 60px;
+        /* background-color: pink; */
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    /* .card-proj hr {
+    border-color: var(--color-border);
+    border-style: dashed;
+    border-left: 0;
+    border-bottom: 0;
+    border-right: 0;
+    margin-block-start: 5px;
+    margin-block-end: 5px;
+} */
+
+    .card-proj .title .left {
+        /* padding: 5px; */
+        font-weight: bold;
+        /* background-color: red;  */
+        display: flex;
+        align-items: center;
+        margin-left: 21px;
+        font-weight: 700;
+        font-size: 19px;
+        color: #292929;
+
+    }
+
+    .card-proj .title .left .boxline {
+        width: 2px;
+        height: 18px;
+        border: 2px dotted #adadad;
+        margin-right: 18px;
+    }
+
+    .card-proj .title .right {
+        padding: 5px;
+        width: 380px;
+        display: flex;
+        /* justify-content: space-between; */
+        align-items: center;
+    }
+
+    .card-proj .title .right span {
+        margin-inline-end: 0;
+        font-size: 14px;
+        color: #888888;
+    }
+
+    .card-proj .title .right .line {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid #adadad;
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+
+    /* .card-proj .title .right .date{
+    margin-left: 24px;
+} */
+    .card-proj .titleRight {
+        margin-right: 29px;
+        font-size: 14px;
+        color: #FFA415;
+    }
+
+    .card-proj .titleRight .orignLine {
+        margin-left: 27px;
+        margin-right: 27px;
+    }
+
+    .card-proj .titleRight .text-btn {
+        margin-left: 11px;
+    }
+
+    .card-proj .title .right span:first-child {}
+
+    .card-proj .body {
+        width: unset;
+        border: unset !important;
+        padding: 0 !important;
+    }
+
+    .card-proj .body .line {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 24px 0;
+    }
+
+    .card-proj .body .line .left {
+        /* width: unset;
+    display: flex; */
+        width: 209px;
+        height: 128px;
+        background: #C4C4C4;
+        border-radius: 6px;
+        margin-left: 46px;
+    }
+
+    .card-proj .body .line .centerl {
+        margin-left: 27px;
+    }
+
+    .card-proj .body .line .centerl .c-top {
+        width: 175px;
+        height: 39px;
+        background: #FFF9E6;
+        border-radius: 19px;
+        color: #FF5D15;
+        line-height: 39px;
+        text-align: center;
+    }
+
+    .card-proj .body .line .centerl .c-top .money {
+        font-weight: 300;
+        font-size: 14px;
+    }
+
+    .card-proj .body .line .centerl .c-top .num {
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    .card-proj .body .line .centerl .c-bot {
+        display: flex;
+    }
+
+    .card-proj .body .line .centerl .c-bot .set {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+        font-weight: 300;
+        font-size: 15px;
+        color: #707070;
+        cursor: pointer;
+        margin-left: 31px;
+    }
+
+    .card-proj .body .line .centerl .c-bot img {
+        width: 30px;
+        height: 30px;
+    }
+
+    .card-proj .body .line .centerr {
+        width: 428px;
+        height: 110px;
+        /* border-left: 1px dotted #737373; */
+        /* border-right: 1px dotted #737373; */
+        margin-left: 174px;
+    }
+
+    .card-proj .body .line .right {
+        height: 110px;
+        width: 197px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        /* background-color: red; */
+        /* margin-left: 600px; */
+        border-left: 1px dotted #737373;
+    }
+
+    .card-proj .body .line .right .rigth-t {
+        font-weight: 300;
+        font-size: 12px;
+        color: #707070;
+        text-align: center;
+        /* background-color: pink; */
+    }
+
+    .card-proj .body .line .right .status {
+        /* background-color: red; */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+    }
+
+    .option {
+        /* background-color: red; */
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+
+
+
+
+
+    /* .card-proj .body .line .left span {
+    margin-right: 10px;
+}
+
+.card-proj .body .line .right span {
+    margin-left: 5px;
+}
+
+.card-proj .body .line .right span a {
+    margin-left: 5px;
+}
+
+.card-proj .foot {
+    position: unset;
+    background-color: transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+} */
+}
\ No newline at end of file
diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx
index 5c5f27e..5a7b9fb 100644
--- a/src/route/index/Index.tsx
+++ b/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,22 +523,22 @@ export default function Index() {
             messageApi,
             url: `/api/coupon/user/save`,
             body: {
-                couponId:couponId
+                couponId: couponId
             },
             onBefore() {
-                
+
             },
             onSuccess() {
-               messageApi.success('领取成功')
-               setTimeout(()=>{
+                messageApi.success('领取成功')
+                setTimeout(() => {
                     setCoupon(false)
-               },500)
+                }, 500)
             },
             onFinally() {
-               
+
             }
         })
-     }
+    }
     useEffect(() => {
         // const nowname = sessionStorage.getItem('now')
         if (location.pathname == '/') {
@@ -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 className='mediaLine'>
+                                        <div className='line' style={{
+                                            display: showSearchBox ? 'block' : 'none',
+
+                                        }} ></div>
                                     </div>
                                     <div style={{ display: showSearchBox ? 'block' : 'none' }}>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'center'
-                                        }}>
-                                            <div className='line' 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>
 
                                             <div
                                                 style={{
@@ -1222,12 +1234,16 @@ export default function Index() {
                                     </div>
 
                                     <div style={{ display: refunSearchBox ? 'block' : 'none' }}>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'center'
-                                        }}>
-                                            <div className='line' style={{
-                                            }} ></div>
+                                        <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='line' style={{
-                                            }} ></div>
+                                            <div className='mediaLine'>
+                                                <div className='line' style={{
+                                                }} ></div>
+                                            </div>
                                             <Button type="primary" onClick={() => {
                                                 setCorrectionModal(true)
                                                 correctionInit()
diff --git a/src/route/index/index.css b/src/route/index/index.css
index 94bde3f..686f289 100644
--- a/src/route/index/index.css
+++ b/src/route/index/index.css
@@ -1,243 +1,787 @@
-.index {
-    /* position: relative; */
-    height: 100vh;
-    /* margin-top: 74px; */
-    display: flex;
-    position: relative;
-}
+@media (min-width: 1671px) {
+    .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-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;
+        /* 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;
+
+
+    }
+
+    .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;
+    }
 
 }
 
-.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;
+@media (max-width: 1670px) {
+    .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;
+    }
 }
 
-.leftbox {
-    width: 250px;
-    height: calc(100vh - 65px);
-    /* background-color: red; */
-    position: fixed;
-    top: 65px;
-    left: 0;
-    overflow: auto;
-}
+@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 {
+        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);
 
-.leftbox::-webkit-scrollbar-thumb {
-    background: #cecece;
- 
- 
-    border-radius: 5px;
+    }
 
-}
+    .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;
 
 
-.leftbox::-webkit-scrollbar-thumb:hover {
-    background: #adadad;
+    }
 
-} */
+    .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;
+    }
 
-.index .left {
-    /* position: fixed; */
-    /* width: 267px; */
-    width: 230px;
-    min-height: calc(100vh - 65px);
-    /* overflow: auto; */
-    /* top: 65px; */
-    /* left: 0; */
-    background-color: var(--color-light);
+    .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; */
+    }
 
-.belongPeopleMenu {
-    /* background-color: pink; */
-}
+    .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; */
+    }
 
-.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; */
-}
+    .index .right .top .gps {
 
-.belongPeopleMenu-box {
-    min-height: 200px;
-    /* background-color: pink; */
-    border-bottom: 1px solid #fde9ab;
+        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;
+    }
 
-.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;
-}
+    .index .right .top .line {
+        width: 1px;
+        height: 23px;
+        border-left: 1px solid #d8d8d8;
+        margin-left: 33px;
+        margin-right: 31px;
 
-.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; */
-}
+    .mediaLine {
+        display: none;
+    }
 
-.index .right .top {
-    /* margin-top: 11px; */
-    box-sizing: border-box;
-    height: 62px;
-    display: flex;
-    /* justify-content: space-between; */
-    align-items: center;
-    border-bottom: 1px solid var(--color-border);
-    background-color: var(--color-light);
-}
+    .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;
 
-.index .right .top .gps {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-}
+    }
 
-.index .right .top .gps img {
-    width: 18px;
-    height: 21px;
-    margin-left: 22px;
-    margin-right: 16px;
-}
+    .nowPosition img {
+        width: 349px;
+        height: 62px;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
 
-.index .right .top .line {
-    width: 1px;
-    height: 23px;
-    border-left: 1px solid #d8d8d8;
-    margin-left: 33px;
-    margin-right: 31px;
-}
+    .nowPosition div {
+        margin-left: 133px;
+        z-index: 99;
+        /* background-color: red; */
+        min-width: 30px;
+    }
 
-.nowPosition {
-    display: flex;
-    align-items: center;
-    /* width: 349px; */
-    height: 100%;
-    /* 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;
-}
+    /* 所属人分页 */
+    .belong-pagination {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 5px;
+        /* background-color: skyblue; */
+    }
 
-.nowPosition img {
-    width: 349px;
-    height: 62px;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
+    /* 设置分页不显示页码 */
+    .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;
+    }
 
-.nowPosition div {
-    margin-left: 133px;
-    z-index: 99;
-}
-
-/* 所属人分页 */
-.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;
-}
+    .custom-pagination .ant-pagination-prev,
+    .custom-pagination .ant-pagination-next {
+        display: inline-block;
+    }
+}
\ No newline at end of file