@media (min-width: 1571px) { .option{ display: flex; /* background-color: red; */ align-items: flex-start; } .downloadBox{ display: flex; flex-direction: column; align-items: center; margin-left: 10px; margin-top: 2px; } .zpibtn{margin-left: 10px;} .down-pdf{ margin-left: 5px; } .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; } .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; 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; /* 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; 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; } .rightBit { margin-right: 0; } .cline { width: 1px; height: 110px; /* border-lift: 0px solid #737373; */ border-left: 1px dotted #c2c2c2; } .cpb-center { width: 532px; height: 110px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .cpbc-bot { text-align: center; /* color: #2088F3; */ 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; } /* .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; } */ } @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; } .downloadBox{ display: flex; align-items: center; /* justify-content: flex-start; */ margin-left: 8px; } /* .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; } */ }