diff --git a/css/common.css b/css/common.css index dc518bf..a53de30 100644 --- a/css/common.css +++ b/css/common.css @@ -341,6 +341,12 @@ body { width: 20px; height: 20px; } +.my-project .my-box .contrast-box .left .list .item .btn.btn-forbid { + cursor: not-allowed !important; +} +.my-project .my-box .contrast-box .left .list .item .btn.btn-normal { + cursor: pointer !important; +} .my-project .my-box .contrast-box .right { width: 420px; height: 640px; @@ -571,7 +577,7 @@ body { cursor: pointer; width: 64px; height: 26px; - background-color: #f95d5d; + background-color: #04b0d5; border-radius: 32px; font-size: 14px; color: #ffffff; @@ -581,6 +587,9 @@ body { height: 5px; margin-left: 9px; } +.my-project .my-box .manage-box .list .item .top .state-box .btn.undetermined { + background-color: #f95d5d; +} .my-project .my-box .manage-box .list .item .top .state-box .state-list-box { background-color: #ffffff; border-radius: 12px; @@ -605,9 +614,12 @@ body { .my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item { width: 60px; height: 26px; + text-align: center; + line-height: 26px; background-color: #f2f2f2; font-size: 14px; color: #7f7f7f; + cursor: pointer; } .my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:not(:last-of-type) { border-right: 1px solid #d7d7d7; diff --git a/css/common.less b/css/common.less index 4c27df4..68b9e87 100644 --- a/css/common.less +++ b/css/common.less @@ -383,6 +383,14 @@ body { width: 20px; height: 20px; } + + &.btn-forbid { + cursor: not-allowed !important; + } + + &.btn-normal { + cursor: pointer !important; + } } } } @@ -643,7 +651,7 @@ body { cursor: pointer; width: 64px; height: 26px; - background-color: rgba(249, 93, 93, 1); + background-color: rgba(4, 176, 213, 1); border-radius: 32px; font-size: 14px; color: #ffffff; @@ -652,6 +660,10 @@ body { height: 5px; margin-left: 9px; } + + &.undetermined { + background-color: rgba(249, 93, 93, 1); + } } position: relative; .state-list-box { @@ -692,9 +704,12 @@ body { } width: 60px; height: 26px; + text-align: center; + line-height: 26px; background-color: rgba(242, 242, 242, 1); font-size: 14px; color: #7f7f7f; + cursor: pointer; &.pitch { background-color: rgba(123, 140, 211, 1); color: #ffffff; diff --git a/css/contrastDetails.css b/css/contrastDetails.css new file mode 100644 index 0000000..cddce1a --- /dev/null +++ b/css/contrastDetails.css @@ -0,0 +1,317 @@ +.body { + border-radius: 12px; + background: #ffffff; + width: 1200px; + margin-bottom: 98px; +} +.body .item:not(:last-of-type) .head { + border-bottom: 1px solid #6c79ba; +} +.body .item:first-of-type .head { + border-radius: 12px 0 0 0; +} +.body .item:last-of-type .head { + border-radius: 0 0 0 12px; +} +.body .item .head { + width: 143px; + background-color: #7b8cd3; + font-size: 14px; + color: #ffffff; + padding-left: 20px; +} +.body .item .thead { + text-align: center; + border-right: 1px solid #ebebeb; + padding: 20px; + border-bottom: 1px solid #ebebeb; +} +.body .item .thead.no-padding { + padding: 0; + border-bottom: none; + flex-direction: column; +} +.body .item .thead .top { + position: relative; + padding: 20px 0; + border-bottom: 1px solid #ebebeb; +} +.body .item .thead .top .vs { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -19px; + width: 38px; + height: 38px; +} +.body .item .thead .top .name { + font-size: 15px; + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin-bottom: 5px; +} +.body .item .thead .top .name-en { + font-size: 13px; + line-height: 16px; + color: #7f7f7f; + margin-bottom: 10px; +} +.body .item .thead .top .school { + font-size: 14px; + color: #333333; +} +.body .item .thead .top .school .icon { + height: 18px; + margin-right: 7px; +} +.body .item .thead .operate { + padding: 20px 0; + position: relative; + border-bottom: 1px solid #ebebeb; +} +.body .item .thead .operate .i:not(:last-of-type) { + border-right: 1px solid #ebebeb; +} +.body .item .thead .operate .i .icon { + height: 16px; + cursor: pointer; +} +.body .item .thead .operate .add { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -16px; + width: 32px; + height: 32px; + background-color: #f6f6f6; + border-radius: 4px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + -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; +} +.body .item .thead .operate .add .icon { + width: 16px; + height: 16px; +} +.body .item .thead .semester-box .semester { + width: 48px; + height: 20px; + background-color: #f95d5d; + border-radius: 6px; + font-size: 14px; + color: #ffffff; +} +.body .item .thead .mode1 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + color: #000000; +} +.body .item .thead .mode2 { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 14px; +} +.body .item .thead .mode3 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; +} +.body .item .thead .mode3 .unit { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + font-size: 13px; +} +.body .item .thead .mode4 { + font-size: 14px; + line-height: 24px; + color: #333333; + text-align: left; + white-space: pre-line; +} +.body .item .thead .mode5 { + height: 100%; + width: 100%; + font-size: 13px; + color: #333333; +} +.handle-project-mask { + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; +} +.handle-project-mask .handle-project { + width: 640px; +} +.handle-project-mask .handle-project .handle-header { + height: 66px; + background: inherit; + background-color: #7b8cd3; + border-radius: 12px 12px 0 0; + font-size: 14px; + color: #ffffff; + padding: 24px 0 22px 20px; + position: relative; +} +.handle-project-mask .handle-project .handle-header .cross { + position: absolute; + top: 0; + right: 0; + padding: 15px; + cursor: pointer; +} +.handle-project-mask .handle-project .handle-header .cross .icon { + width: 12px; + height: 12px; +} +.handle-project-mask .handle-project .list { + height: 574px; + border-radius: 0 0 12px 12px; + padding-left: 50px; + overflow: auto; + padding-right: 5px; + background-color: #ffffff; +} +.handle-project-mask .handle-project .list::-webkit-scrollbar-track-piece { + background-color: transparent; +} +.handle-project-mask .handle-project .list::-webkit-scrollbar { + width: 7px; + height: 7px; + background-color: transparent; +} +.handle-project-mask .handle-project .list::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: #ebebeb; +} +.handle-project-mask .handle-project .list .item { + padding: 15px 0; + margin-right: 10px; +} +.handle-project-mask .handle-project .list .item:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; +} +.handle-project-mask .handle-project .list .item .left .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + margin-bottom: 5px; + position: relative; +} +.handle-project-mask .handle-project .list .item .left .name::after { + content: ""; + position: absolute; + top: 50%; + left: -30px; + transform: translateY(-50%); + width: 7px; + height: 7px; + background-color: #fddf6d; + border: 1px solid #cab157; + border-radius: 50%; + box-sizing: border-box; +} +.handle-project-mask .handle-project .list .item .left .english { + color: #7f7f7f; + font-size: 13px; + margin-bottom: 11px; +} +.handle-project-mask .handle-project .list .item .left .bottom { + color: #333333; + font-size: 14px; +} +.handle-project-mask .handle-project .list .item .left .bottom .icon { + height: 18px; + margin-right: 7px; +} +.handle-project-mask .handle-project .list .item .left .bottom .line { + margin: 0 8px; + color: #d7d7d7; +} +.handle-project-mask .handle-project .list .item .left .bottom .state { + color: #555555; + font-size: 13px; + height: 20px; + line-height: 20px; + padding: 0 6px; + background-color: #f2f2f2; + border: 1px solid #d7d7d7; + border-radius: 6px; +} +.handle-project-mask .handle-project .list .item .btn { + cursor: pointer; +} +.handle-project-mask .handle-project .list .item .btn .icon { + width: 28px; + height: 28px; +} +.base-footer { + position: fixed; + bottom: 35px; + left: 50%; + transform: translateX(-50%); + width: 700px; + padding-left: 32px; + padding-right: 5px; + justify-content: space-between; + transition: all 0.3s; + height: 60px; + background: -webkit-linear-gradient(189.46232221deg, #dbe3fd 0%, #eef7f5 100%); + background: -moz-linear-gradient(260.53767779deg, #dbe3fd 0%, #eef7f5 100%); + background: linear-gradient(260.53767779deg, #dbe3fd 0%, #eef7f5 100%); + box-sizing: border-box; + border: 1px solid #dbe0f2; + border-radius: 153px; +} +.base-footer.isnosave { + width: 360px; + padding: 0; + justify-content: center; +} +.base-footer.isnosave .save { + display: none; +} +.base-footer .item { + font-size: 15px; + color: #000000; + cursor: pointer; +} +.base-footer .item .icon { + height: 20px; + margin-right: 5px; +} +.base-footer .line { + margin: 0 20px; + color: #d7d7d7; +} +.base-footer .save { + width: 406px; + height: 50px; + background-color: #f6f6f6; + border-radius: 158px; + font-size: 14px; + color: #333333; + padding-left: 20px; +} +.base-footer .save .icon { + width: 16px; + height: 16px; + margin: 0 10px; +} +.base-footer .save .btn { + width: 140px; + height: 50px; + background-color: #7b8cd3; + border-radius: 158px; + font-size: 16px; + color: #ffffff; + cursor: pointer; +} diff --git a/css/contrastDetails.less b/css/contrastDetails.less new file mode 100644 index 0000000..6dae508 --- /dev/null +++ b/css/contrastDetails.less @@ -0,0 +1,367 @@ +.body { + border-radius: 12px; + background: rgb(255, 255, 255); + width: 1200px; + margin-bottom: 98px; + + .item { + &:not(:last-of-type) { + .head { + border-bottom: 1px solid rgb(108, 121, 186); + } + } + + &:first-of-type { + .head { + border-radius: 12px 0 0 0; + } + } + &:last-of-type { + .head { + border-radius: 0 0 0 12px; + } + } + .head { + width: 143px; + background-color: rgba(123, 140, 211, 1); + font-size: 14px; + color: #ffffff; + padding-left: 20px; + } + + .thead { + text-align: center; + border-right: 1px solid rgb(235, 235, 235); + padding: 20px; + border-bottom: 1px solid rgb(235, 235, 235); + + &.no-padding { + padding: 0; + border-bottom: none; + flex-direction: column; + } + + .top { + position: relative; + padding: 20px 0; + border-bottom: 1px solid rgb(235, 235, 235); + .vs { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -19px; + width: 38px; + height: 38px; + } + .name { + font-size: 15px; + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: rgb(0, 0, 0); + margin-bottom: 5px; + } + .name-en { + font-size: 13px; + line-height: 16px; + color: rgb(127, 127, 127); + margin-bottom: 10px; + } + + .school { + .icon { + height: 18px; + margin-right: 7px; + } + font-size: 14px; + color: rgb(51, 51, 51); + } + } + + .operate { + padding: 20px 0; + position: relative; + .i { + &:not(:last-of-type) { + border-right: 1px solid #ebebeb; + } + .icon { + height: 16px; + cursor: pointer; + } + } + border-bottom: 1px solid rgb(235, 235, 235); + + .add { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -16px; + width: 32px; + height: 32px; + background-color: rgba(246, 246, 246, 1); + border-radius: 4px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + -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; + .icon { + width: 16px; + height: 16px; + } + } + } + + .semester-box { + .semester { + width: 48px; + height: 20px; + background-color: rgba(249, 93, 93, 1); + border-radius: 6px; + font-size: 14px; + color: #ffffff; + } + } + + .mode1 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + color: #000000; + } + + .mode2 { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 14px; + } + + .mode3 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + .unit { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + font-size: 13px; + } + } + + .mode4 { + font-size: 14px; + line-height: 24px; + color: #333333; + text-align: left; + white-space: pre-line; + } + + .mode5 { + height: 100%; + width: 100%; + font-size: 13px; + color: #333333; + } + } + } +} + +.handle-project-mask { + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + + .handle-project { + .handle-header { + height: 66px; + background: inherit; + background-color: rgba(123, 140, 211, 1); + border-radius: 12px 12px 0 0; + font-size: 14px; + color: #ffffff; + padding: 24px 0 22px 20px; + position: relative; + .cross { + position: absolute; + top: 0; + right: 0; + padding: 15px; + cursor: pointer; + .icon { + width: 12px; + height: 12px; + } + } + } + width: 640px; + + .list { + height: 574px; + border-radius: 0 0 12px 12px; + padding-left: 50px; + overflow: auto; + padding-right: 5px; + background-color: #ffffff; + + &::-webkit-scrollbar-track-piece { + background-color: transparent; + } + + &::-webkit-scrollbar { + width: 7px; + height: 7px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: rgba(235, 235, 235, 1); + } + + .item { + padding: 15px 0; + margin-right: 10px; + + &:not(:last-of-type) { + border-bottom: 1px dotted #d7d7d7; + } + + .left { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + margin-bottom: 5px; + position: relative; + &::after { + content: ""; + position: absolute; + top: 50%; + left: -30px; + transform: translateY(-50%); + width: 7px; + height: 7px; + background-color: rgb(253, 223, 109); + border: 1px solid rgb(202, 177, 87); + border-radius: 50%; + box-sizing: border-box; + } + } + + .english { + color: #7f7f7f; + font-size: 13px; + margin-bottom: 11px; + } + + .bottom { + color: #333333; + font-size: 14px; + + .icon { + height: 18px; + margin-right: 7px; + } + + .line { + margin: 0 8px; + color: rgb(215, 215, 215); + } + + .state { + color: #555555; + font-size: 13px; + height: 20px; + line-height: 20px; + padding: 0 6px; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 6px; + } + } + } + + .btn { + cursor: pointer; + .icon { + width: 28px; + height: 28px; + } + } + } + } + } +} + +.base-footer { + position: fixed; + bottom: 35px; + left: 50%; + transform: translateX(-50%); + width: 700px; + padding-left: 32px; + padding-right: 5px; + justify-content: space-between; + + &.isnosave { + width: 360px; + padding: 0; + justify-content: center; + .save { + display: none; + } + } + + transition: all 0.3s; + height: 60px; + background: -webkit-linear-gradient(189.462322208026deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(260.537677791974deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(260.537677791974deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + box-sizing: border-box; + border: 1px solid rgba(219, 224, 242, 1); + border-radius: 153px; + + .item { + font-size: 15px; + color: #000000; + cursor: pointer; + .icon { + height: 20px; + margin-right: 5px; + } + } + + .line { + margin: 0 20px; + color: rgb(215, 215, 215); + } + + .save { + width: 406px; + height: 50px; + background-color: rgba(246, 246, 246, 1); + border-radius: 158px; + font-size: 14px; + color: #333333; + padding-left: 20px; + .icon { + width: 16px; + height: 16px; + margin: 0 10px; + } + + .btn { + width: 140px; + height: 50px; + background-color: rgba(123, 140, 211, 1); + border-radius: 158px; + font-size: 16px; + color: #ffffff; + cursor: pointer; + } + } +} diff --git a/html/contrastDetails.html b/html/contrastDetails.html new file mode 100644 index 0000000..5217656 --- /dev/null +++ b/html/contrastDetails.html @@ -0,0 +1,342 @@ + + +
+ + +>>0?1:0),m=a.low=m+O,a.high=k+W+(m>>>0