diff --git a/css/common.css b/css/common.css index f21eeb2..3c22055 100644 --- a/css/common.css +++ b/css/common.css @@ -2,6 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; + text-decoration: auto; } .flexflex { display: flex; diff --git a/css/common.less b/css/common.less index 322b163..a383663 100644 --- a/css/common.less +++ b/css/common.less @@ -2,6 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; + text-decoration: auto; } .flexflex { diff --git a/css/contrastDetails.css b/css/contrastDetails.css index cddce1a..01fae46 100644 --- a/css/contrastDetails.css +++ b/css/contrastDetails.css @@ -22,10 +22,15 @@ } .body .item .thead { text-align: center; - border-right: 1px solid #ebebeb; padding: 20px; border-bottom: 1px solid #ebebeb; } +.body .item .thead:not(:last-of-type) { + border-right: 1px solid #ebebeb; +} +.body .item .thead .tag .tag-item { + margin: 0; +} .body .item .thead.no-padding { padding: 0; border-bottom: none; @@ -90,6 +95,7 @@ -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); cursor: pointer; + z-index: 1; } .body .item .thead .operate .add .icon { width: 16px; @@ -145,6 +151,7 @@ position: fixed; top: 0; left: 0; + z-index: 1; } .handle-project-mask .handle-project { width: 640px; diff --git a/css/contrastDetails.less b/css/contrastDetails.less index 6dae508..87a0ce7 100644 --- a/css/contrastDetails.less +++ b/css/contrastDetails.less @@ -31,10 +31,20 @@ .thead { text-align: center; - border-right: 1px solid rgb(235, 235, 235); + // border-right: 1px solid rgb(235, 235, 235); padding: 20px; border-bottom: 1px solid rgb(235, 235, 235); + &:not(:last-of-type) { + border-right: 1px solid rgb(235, 235, 235); + } + + .tag { + .tag-item { + margin: 0; + } + } + &.no-padding { padding: 0; border-bottom: none; @@ -104,6 +114,7 @@ -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); cursor: pointer; + z-index: 1; .icon { width: 16px; height: 16px; @@ -172,6 +183,7 @@ position: fixed; top: 0; left: 0; + z-index: 1; .handle-project { .handle-header { diff --git a/css/details.css b/css/details.css index 64ac9fe..88937c0 100644 --- a/css/details.css +++ b/css/details.css @@ -103,7 +103,8 @@ border-radius: 12px 0 0 0; width: 141px; height: 500px; - overflow: hidden; + position: sticky; + top: 0; flex-direction: column; } .content .side .item { @@ -112,9 +113,9 @@ font-size: 15px; color: #555555; cursor: pointer; - border-right: 1px solid #ebebeb; } .content .side .item.pitch { + width: 101%; background-color: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; @@ -145,6 +146,7 @@ padding-right: 30px; background-color: #fbfbfb; border-radius: 0 12px 0 0; + border-left: 1px solid #ebebeb; } .content .details-box .block { background-color: #ffffff; @@ -179,6 +181,7 @@ font-weight: 400; font-size: 14px; color: #000000; + cursor: pointer; } .content .details-box .item-header .list-btn .icon { width: 16px; @@ -213,12 +216,34 @@ width: 90px; height: 30px; line-height: 30px; - background-color: #f7a602; border-radius: 4px; font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-size: 18px; color: #ffffff; + position: relative; +} +.content .details-box .ranking .item .rank .number.qs { + background-color: #f7a602; +} +.content .details-box .ranking .item .rank .number.times { + background: -webkit-linear-gradient(311.63353934deg, #fc392d 0%, #3948ff 135%); + background: -moz-linear-gradient(138.36646066deg, #fc392d 0%, #3948ff 135%); + background: linear-gradient(138.36646066deg, #fc392d 0%, #3948ff 135%); +} +.content .details-box .ranking .item .rank .number.usnews { + background-color: #025ea7; +} +.content .details-box .ranking .item .rank .number.ruanke { + background-color: #e5122d; +} +.content .details-box .ranking .item .rank .number .triangle { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -5px; + width: 5px; + height: 8px; } .content .details-box .ranking .item .rank-box { background-color: #f6f6f6; @@ -275,6 +300,7 @@ color: #000000; line-height: 32px; white-space: pre-line; + width: 100%; } .content .details-box .text-box .text.text-center { width: 100%; @@ -303,6 +329,7 @@ font-size: 13px; margin: 0 12px; line-height: normal; + width: fit-content; } .content .details-box .application-schedule { margin-bottom: 40px; @@ -866,10 +893,14 @@ vertical-align: bottom; } .base { + width: 100vw; background-color: transparent; + transform: none; + left: 0; } .base .type1 { width: 100%; + width: 640px; height: 100%; border-radius: 153px; border: 1px solid #dbe0f2; @@ -901,6 +932,7 @@ font-size: 15px; color: #ffffff; margin-right: 5px; + cursor: pointer; } .base .type1 .add .img { width: 16px; @@ -909,6 +941,7 @@ } .base .type2 { width: 100%; + width: 640px; height: 100%; background-color: #f2f2f2; border: 1px solid #d7d7d7; @@ -948,22 +981,73 @@ border: none; outline: none; } +.base .type2 .state-box { + position: relative; +} +.base .type2 .state-box.undetermined .state-btn { + background-color: #f95d5d; +} +.base .type2 .state-box.undetermined .state .state-list .state-item.pitch { + color: #f95d5d; +} .base .type2 .state-box .state-btn { width: 100px; height: 40px; - background-color: #f95d5d; + background-color: #04b0d5; border-radius: 158px; font-size: 15px; color: #ffffff; cursor: pointer; + transition: all 0.3s; } .base .type2 .state-box .state-btn .img { width: 11px; height: 6px; margin-left: 8px; } +.base .type2 .state-box .state-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; +} +.base .type2 .state-box .state { + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 12px; + position: absolute; + bottom: 40px; + width: 100px; + background-color: #f5fcfd; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); + animation: show 0.3s; +} +@keyframes show { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.base .type2 .state-box .state .state-item { + color: #555555; + font-size: 16px; + height: 55px; + cursor: pointer; +} +.base .type2 .state-box .state .state-item.pitch { + color: #04b0d5; +} +.base .type2 .state-box .state .delete { + cursor: pointer; + height: 55px; + border-top: 1px dotted #d7d7d7; +} .base .type3 { width: 100%; + width: 640px; height: 100%; background-color: #f2f2f2; border: 1px solid #d7d7d7; @@ -990,6 +1074,7 @@ font-size: 15px; color: #ffffff; border-radius: 158px; + cursor: pointer; } .base .type3 .add-btn.already { background-color: #fbfbfb; @@ -1001,3 +1086,8 @@ height: 16px; margin-right: 10px; } +.upglide { + font-size: 10px; + color: #aaaaaa; + padding-bottom: 60px; +} diff --git a/css/details.less b/css/details.less index 4a0a398..6963c0a 100644 --- a/css/details.less +++ b/css/details.less @@ -116,20 +116,23 @@ border-radius: 12px 0 0 0; width: 141px; height: 500px; - overflow: hidden; + // overflow: hidden; + position: sticky; + top: 0; flex-direction: column; + .item { width: 100%; height: 56px; font-size: 15px; color: #555555; cursor: pointer; - border-right: 1px solid rgba(235, 235, 235, 1); &.pitch { &:first-of-type { border-top: none; } + width: 101%; background-color: rgba(251, 251, 251, 1); border-top: 1px solid rgba(235, 235, 235, 1); border-bottom: 1px solid rgba(235, 235, 235, 1); @@ -161,6 +164,7 @@ padding-right: 30px; background-color: #fbfbfb; border-radius: 0 12px 0 0; + border-left: 1px solid rgba(235, 235, 235, 1); .block { background-color: rgba(255, 255, 255, 1); @@ -196,6 +200,7 @@ font-weight: 400; font-size: 14px; color: #000000; + cursor: pointer; .icon { width: 16px; height: 16px; @@ -207,7 +212,7 @@ .mb40 { margin-bottom: 40px; } - + .ranking { margin-bottom: 40px; .item { @@ -231,13 +236,40 @@ width: 90px; height: 30px; line-height: 30px; - background-color: rgba(247, 166, 2, 1); + // background-color: rgba(247, 166, 2, 1); border-radius: 4px; font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-size: 18px; color: #ffffff; + + position: relative; + + &.qs { + background-color: rgba(247, 166, 2, 1); + } + + &.times { + background: -webkit-linear-gradient(311.63353933657deg, rgba(252, 57, 45, 1) 0%, rgba(57, 72, 255, 1) 135%); + background: -moz-linear-gradient(138.36646066343deg, rgba(252, 57, 45, 1) 0%, rgba(57, 72, 255, 1) 135%); + background: linear-gradient(138.36646066343deg, rgba(252, 57, 45, 1) 0%, rgba(57, 72, 255, 1) 135%); + } + + &.usnews { + background-color: rgba(2, 94, 167, 1); + } + + &.ruanke { + background-color: rgba(229, 18, 45, 1); + } + .triangle { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -5px; + width: 5px; + height: 8px; } } } @@ -302,6 +334,7 @@ color: #000000; line-height: 32px; white-space: pre-line; + width: 100%; &.text-center { width: 100%; @@ -334,6 +367,7 @@ margin: 0 12px; // padding: 24px 0 0; line-height: normal; + width: fit-content; } } } @@ -990,10 +1024,13 @@ } .base { + width: 100vw; background-color: transparent; - + transform: none; + left: 0; .type1 { width: 100%; + width: 640px; height: 100%; border-radius: 153px; border: 1px solid rgb(219, 224, 242); @@ -1028,6 +1065,7 @@ font-size: 15px; color: #ffffff; margin-right: 5px; + cursor: pointer; .img { width: 16px; height: 16px; @@ -1038,6 +1076,8 @@ .type2 { width: 100%; + width: 640px; + height: 100%; background-color: rgba(242, 242, 242, 1); border: 1px solid rgba(215, 215, 215, 1); @@ -1080,25 +1120,90 @@ } .state-box { + &.undetermined { + .state-btn { + background-color: rgba(249, 93, 93, 1); + } + + .state { + .state-list { + .state-item { + &.pitch { + color: #f95d5d; + } + } + } + } + } .state-btn { width: 100px; height: 40px; - background-color: rgba(249, 93, 93, 1); + background-color: rgba(4, 176, 213, 1); border-radius: 158px; font-size: 15px; color: #ffffff; cursor: pointer; + transition: all 0.3s; .img { width: 11px; height: 6px; margin-left: 8px; } } + position: relative; + + .state-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + } + + .state { + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 12px; + position: absolute; + bottom: 40px; + width: 100px; + background-color: #f5fcfd; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); + animation: show 0.3s; + + @keyframes show { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + .state-item { + color: #555555; + font-size: 16px; + height: 55px; + cursor: pointer; + + &.pitch { + color: #04b0d5; + } + } + .delete { + cursor: pointer; + height: 55px; + border-top: 1px dotted #d7d7d7; + } + } } } .type3 { width: 100%; + width: 640px; + height: 100%; background-color: rgba(242, 242, 242, 1); border: 1px solid rgba(215, 215, 215, 1); @@ -1127,6 +1232,7 @@ font-size: 15px; color: #ffffff; border-radius: 158px; + cursor: pointer; &.already { background-color: rgba(251, 251, 251, 1); font-size: 16px; @@ -1140,3 +1246,9 @@ } } } + +.upglide { + font-size: 10px; + color: #aaaaaa; + padding-bottom: 60px; +} diff --git a/html/contrastDetails.html b/html/contrastDetails.html index 5217656..87508c1 100644 --- a/html/contrastDetails.html +++ b/html/contrastDetails.html @@ -51,9 +51,14 @@