no message
This commit is contained in:
A1300399510
parent
0567785928
commit
43c90db9aa
525
css/common.css
525
css/common.css
@ -143,7 +143,7 @@ body {
|
||||
.my-project {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -151,3 +151,526 @@ body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.my-project .my-box .head {
|
||||
height: 54px;
|
||||
background-color: #7b8cd3;
|
||||
border-radius: 10px 10px 0 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.my-project .my-box .head .item {
|
||||
width: 400px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-project .my-box .head .item.pitch {
|
||||
color: #000000;
|
||||
}
|
||||
.my-project .my-box .head .item.pitch .bj,
|
||||
.my-project .my-box .head .item.pitch .icon {
|
||||
display: block;
|
||||
}
|
||||
.my-project .my-box .head .item .bj {
|
||||
display: none;
|
||||
width: 474px;
|
||||
height: 61px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
z-index: -1;
|
||||
}
|
||||
.my-project .my-box .head .item .bj.bj-left {
|
||||
left: 0;
|
||||
}
|
||||
.my-project .my-box .head .item .bj.bj-right {
|
||||
right: 0;
|
||||
transform: rotate(180deg) scaleY(-1);
|
||||
}
|
||||
.my-project .my-box .head .item .icon {
|
||||
display: none;
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.my-project .my-box .contrast-box {
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left {
|
||||
width: 580px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left.left1 {
|
||||
width: 820px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint {
|
||||
height: 65px;
|
||||
color: #333333;
|
||||
padding: 25px 30px 20px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .delete {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: rgba(123, 140, 211, 0);
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 32px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #d7d7d7;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .delete.have {
|
||||
border-color: #d7d7d7;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .delete.have:hover {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background-color: #f95d5d;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .begin {
|
||||
width: 130px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 32px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .begin.have {
|
||||
background-color: #6fc16d;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .hint .btn .begin.have:hover {
|
||||
background-color: #4fa44d;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .empty-box {
|
||||
height: 575px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .empty-box .icon {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list {
|
||||
height: 575px;
|
||||
overflow: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item {
|
||||
padding: 15px 0;
|
||||
justify-content: space-between;
|
||||
margin-left: 30px;
|
||||
margin-right: 27px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .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;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .name::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -30px;
|
||||
transform: translateY(-50%);
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fddf6d;
|
||||
border: 1px solid #cab157;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .english {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .message {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .message .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .message .line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .left .message .state-text {
|
||||
padding: 0 6px;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 6px;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .btn {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-project .my-box .contrast-box .left .list .item .btn .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right {
|
||||
width: 420px;
|
||||
height: 640px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 0 0 12px 0;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .hint {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
padding: 25px 20px 20px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list {
|
||||
height: 575px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item {
|
||||
width: 370px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .project-list .project-item {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .project-list .project-item .icon {
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .project-list .project-item:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .project-list .project-item .arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .project-list .project-item .text {
|
||||
width: 182px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: #6fc16d;
|
||||
border-radius: 32px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .btn .icon {
|
||||
width: 14px;
|
||||
height: 6px;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item:hover .dot {
|
||||
display: block;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .dot {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .delete-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
z-index: 10;
|
||||
}
|
||||
.my-project .my-box .contrast-box .right .list .item .delete {
|
||||
width: 71px;
|
||||
background-color: #f95d5d;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
z-index: 11;
|
||||
}
|
||||
.my-project .my-box .manage-box {
|
||||
width: 920px;
|
||||
height: 640px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
.my-project .my-box .manage-box .tab-list {
|
||||
font-size: 14px;
|
||||
height: 65px;
|
||||
color: #555555;
|
||||
padding: 25px 30px 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.my-project .my-box .manage-box .tab-list .item {
|
||||
cursor: pointer;
|
||||
margin-right: 36px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
.my-project .my-box .manage-box .tab-list .item.pitch {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
}
|
||||
.my-project .my-box .manage-box .tab-list .item.pitch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #6fc16d;
|
||||
border-radius: 39px;
|
||||
}
|
||||
.my-project .my-box .manage-box .empty-box {
|
||||
height: 575px;
|
||||
}
|
||||
.my-project .my-box .manage-box .empty-box .icon {
|
||||
margin-top: -135px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list {
|
||||
height: 570px;
|
||||
padding-left: 30px;
|
||||
overflow: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .hint {
|
||||
width: 860px;
|
||||
height: 40px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .hint .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .manage-box .list::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.my-project .my-box .manage-box .list::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .list-box {
|
||||
flex-wrap: wrap;
|
||||
width: 860px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item {
|
||||
width: 420px;
|
||||
background-color: #fbfbfb;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top {
|
||||
padding: 16px 10px 14px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .info .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;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .info .english {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .info .school {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .info .school .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box {
|
||||
position: relative;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .btn {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
background-color: #f95d5d;
|
||||
border-radius: 32px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .btn .icon {
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
width: 300px;
|
||||
height: 47px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 41px;
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.12941176));
|
||||
padding: 0 10px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
right: 20px;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item {
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
background-color: #f2f2f2;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:first-of-type {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:last-of-type {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item.pitch {
|
||||
background-color: #7b8cd3;
|
||||
color: #ffffff;
|
||||
border-right: none;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .delete {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: #f2f2f2;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .delete .delete-icon {
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .bottom {
|
||||
padding: 14px 10px 5px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .bottom .edit {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #f2f2f2;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .bottom .edit .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .bottom .input {
|
||||
padding-top: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
resize: none;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.my-project .my-box .manage-box .list .item .bottom .drag-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.empty-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.empty-box .icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
.empty-box .text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
598
css/common.less
598
css/common.less
@ -160,15 +160,609 @@ body {
|
||||
transition: left 0.3s linear, top 0.3s cubic-bezier(0.5, -0.5, 1, 1);
|
||||
}
|
||||
|
||||
|
||||
.my-project {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.my-box {
|
||||
.head {
|
||||
height: 54px;
|
||||
background-color: rgba(123, 140, 211, 1);
|
||||
border-radius: 10px 10px 0 0;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
width: 400px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
&.pitch {
|
||||
color: #000000;
|
||||
.bj,
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.bj {
|
||||
display: none;
|
||||
width: 474px;
|
||||
height: 61px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
z-index: -1;
|
||||
&.bj-left {
|
||||
left: 0;
|
||||
}
|
||||
&.bj-right {
|
||||
right: 0;
|
||||
transform: rotate(180deg) scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contrast-box {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0 0 12px 12px;
|
||||
.left {
|
||||
width: 580px;
|
||||
|
||||
&.left1 {
|
||||
width: 820px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
height: 65px;
|
||||
color: #333333;
|
||||
padding: 25px 30px 20px;
|
||||
border-bottom: 1px solid rgb(235, 235, 235);
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
.delete {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: rgba(123, 140, 211, 0);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 32px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #d7d7d7;
|
||||
|
||||
&.have {
|
||||
border-color: rgba(215, 215, 215, 1);
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.begin {
|
||||
width: 130px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 32px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&.have {
|
||||
background-color: rgba(111, 193, 109, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(79, 164, 77, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
height: 575px;
|
||||
|
||||
.icon {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 575px;
|
||||
overflow: auto;
|
||||
margin-right: 5px;
|
||||
|
||||
&::-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;
|
||||
justify-content: space-between;
|
||||
margin-left: 30px;
|
||||
margin-right: 27px;
|
||||
|
||||
// &:hover {
|
||||
// background-color: rgba(246, 246, 246, 1);
|
||||
// }
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted rgb(215, 215, 215);
|
||||
}
|
||||
|
||||
.left {
|
||||
padding-left: 40px;
|
||||
.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;
|
||||
box-sizing: border-box;
|
||||
background-color: rgb(253, 223, 109);
|
||||
border: 1px solid rgb(202, 177, 87);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.english {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.line {
|
||||
color: rgb(215, 215, 215);
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
padding: 0 6px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 6px;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 420px;
|
||||
height: 640px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 0 0 12px 0;
|
||||
|
||||
.hint {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
padding: 25px 20px 20px;
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 575px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
margin-right: 5px;
|
||||
&::-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 {
|
||||
width: 370px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
|
||||
.project-list {
|
||||
.project-item {
|
||||
.icon {
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.text {
|
||||
width: 182px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: rgba(111, 193, 109, 1);
|
||||
border-radius: 32px;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.delete {
|
||||
width: 71px;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.manage-box {
|
||||
width: 920px;
|
||||
height: 640px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 12px 12px;
|
||||
.tab-list {
|
||||
font-size: 14px;
|
||||
height: 65px;
|
||||
color: #555555;
|
||||
padding: 25px 30px 20px;
|
||||
margin-bottom: 5px;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
margin-right: 36px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
position: relative;
|
||||
&.pitch {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: rgba(111, 193, 109, 1);
|
||||
border-radius: 39px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
height: 575px;
|
||||
.icon {
|
||||
margin-top: -135px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 570px;
|
||||
padding-left: 30px;
|
||||
overflow: auto;
|
||||
.hint {
|
||||
width: 860px;
|
||||
height: 40px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 20px;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
margin-right: 5px;
|
||||
&::-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);
|
||||
}
|
||||
|
||||
.list-box {
|
||||
flex-wrap: wrap;
|
||||
width: 860px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
width: 420px;
|
||||
// height: 158px;
|
||||
background-color: rgba(251, 251, 251, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.top {
|
||||
padding: 16px 10px 14px;
|
||||
border-bottom: 1px solid rgba(242, 242, 242, 1);
|
||||
|
||||
.info {
|
||||
.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;
|
||||
}
|
||||
|
||||
.english {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.school {
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.state-box {
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
border-radius: 32px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
.icon {
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
.state-list-box {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
width: 300px;
|
||||
height: 47px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 41px;
|
||||
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.129411764705882);
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.129411764705882));
|
||||
padding: 0 10px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid transparent;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
right: 20px;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
|
||||
.state-list {
|
||||
}
|
||||
.state-item {
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid rgb(215, 215, 215);
|
||||
}
|
||||
&:first-of-type {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
&.pitch {
|
||||
background-color: rgba(123, 140, 211, 1);
|
||||
color: #ffffff;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(242, 242, 242);
|
||||
margin-left: 15px;
|
||||
.delete-icon {
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 14px 10px 5px;
|
||||
.edit {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(242, 242, 242);
|
||||
margin-right: 10px;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
padding-top: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
resize: none;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.drag-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
flex-direction: column;
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
365
html/index.html
365
html/index.html
@ -207,18 +207,144 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 底部 -->
|
||||
<base-bottom ref="baseRef"></base-bottom>
|
||||
|
||||
<div class="my-project">
|
||||
dfgfdgdfgdfgfd
|
||||
<div class="my-project flexacenter">
|
||||
<div class="my-box">
|
||||
<div class="head flexacenter">
|
||||
<div class="item flexcenter" :class="{'pitch': classify == 'vs'}" @click="cutClassify('vs')">
|
||||
<img class="icon" src="/img/contrast-icon.png" />
|
||||
<img class="bj bj-left" src="/img/left-icon.svg" />
|
||||
项目对比
|
||||
</div>
|
||||
<div class="item flexcenter" :class="{'pitch': classify == 'manage'}" @click="cutClassify('manage')">
|
||||
<img class="icon" src="/img/manage-icon.png" />
|
||||
<img class="bj bj-right" src="/img/left-icon.svg" />
|
||||
项目管理
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="classify == 'vs'" class="contrast-box flexflex">
|
||||
<div class="left" :class="{'left1': quickList.length == 0 }">
|
||||
<div class="hint flexacenter">
|
||||
<div class="text">选择2~3个项目开始对比</div>
|
||||
<div class="btn flexacenter">
|
||||
<div class="delete flexcenter" @click="contrastDelete" :class="{'have': isPitchExceedOne}">删除</div>
|
||||
<div class="begin flexcenter" :class="{'have': isPitchExceedTwo}">开始对比</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="false" class="empty-box flexcenter">
|
||||
<img class="icon" src="/img/empty-icon.png" />
|
||||
<span class="text">把你感兴趣的项目加进来，</span>
|
||||
<span class="text">可以做项目对比哦！</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<template v-for="(item, index) in contrastList" :key="item.projectid">
|
||||
<div v-if="item.status == 1" class="item flexacenter">
|
||||
<div class="left">
|
||||
<div class="name">{{ item.name_zh }}</div>
|
||||
<div class="english">{{ item.name_en }}</div>
|
||||
<div class="message flexacenter">
|
||||
<img class="icon" :src="item.schoollogo" />
|
||||
{{ item.schoolalias }}
|
||||
<template v-if="item.ismanage == 1">
|
||||
<div class="line">|</div>
|
||||
<div class="state-text">{{ stateObj[item.typeid] }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flexcenter" @click="cutSelect(index)">
|
||||
<img v-if="item.pitch" class="icon" src="/img/tick-circle-green.svg" />
|
||||
<img v-else class="icon" src="/img/tick-circle-gray-hollow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="quickList.length != 0" class="right">
|
||||
<div class="hint">快速对比（{{ quickList.length }}）</div>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in quickList">
|
||||
<div class="project-list">
|
||||
<div class="project-item flexacenter" v-for="item in item.data">
|
||||
<img class="icon" mode="widthFix" :src="item.schoollogo" />
|
||||
{{ item.schoolalias }}
|
||||
<img class="arrows" src="/img/arrows-circle-yellow-green.svg" mode="widthFix" />
|
||||
<view class="text one-line-display">{{ item.name_zh }}</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
<img class="icon" src="/img/arrows-long-white.svg" />
|
||||
</div>
|
||||
<img @click="quickShowHideDelete(index)" class="dot" src="/img/dot-dot-dot-gray.png" />
|
||||
<div v-if="item.deleteState" @click="quickDelete(index)" class="delete flexcenter">删除</div>
|
||||
<div v-if="item.deleteState" @click="quickShowHideDelete(index)" class="delete-mask flexcenter"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="manage-box">
|
||||
<div class="tab-list flexflex">
|
||||
<div class="item" :class="{'pitch': index == typeIndex }" v-for="(item,index) in typeList" @click="cutTypeid(index)">{{ item.name }} {{ item.count }}</div>
|
||||
</div>
|
||||
<div v-if="manageCount == 0" class="empty-box flexcenter">
|
||||
<img class="icon" src="/img/empty-icon.png" />
|
||||
<span class="text">暂无项目</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="list">
|
||||
<div class="hint flexacenter" v-if="!manageHintState">
|
||||
<div class="text">加入对比单的项目会同步进入项目管理当中；两者独立管理，删除操作互不影响。</div>
|
||||
<img @click="manageClose()" class="icon" src="/img/close-icon.png" />
|
||||
</div>
|
||||
<div class="list-box flexflex" ref="manageListRef">
|
||||
<template v-for="(item,index) in manageList">
|
||||
<div class="item" v-if="item.ismanage == 1" :class="'item' + index">
|
||||
<div class="top flexacenter">
|
||||
<div class="info flex1">
|
||||
<div class="name">{{ item.name_zh }}</div>
|
||||
<div class="english">{{ item.name_en }}</div>
|
||||
<div class="school flexacenter">
|
||||
<img class="icon" :src="item.schoollogo" />
|
||||
{{ item.schoolalias }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-box">
|
||||
<div class="btn flexcenter">{{ stateObj[item.typeid] }}<img class="icon" src="/img/arrows-triangle-white.svg" /></div>
|
||||
|
||||
<div v-if="false" class="state-list-box flexacenter">
|
||||
<div class="state-list flexacenter">
|
||||
<div class="state-item pitch"></div>
|
||||
<div class="state-item"></div>
|
||||
<div class="state-item"></div>
|
||||
<div class="state-item"></div>
|
||||
</div>
|
||||
|
||||
<div class="delete flexcenter">
|
||||
<img class="delete-icon" src="/img/delete-icon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexflex">
|
||||
<div class="edit flexcenter">
|
||||
<img class="icon" src="/img/u1434.png" />
|
||||
</div>
|
||||
<textarea class="input flex1" v-model="item.remarks" placeholder="添加备注…" maxlength="100" @blur="inputblur(index)" @input="inputInput(index)"></textarea>
|
||||
<img class="drag-icon" src="/img/drag-icon.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted } = Vue
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
|
||||
const projectIndex = createApp({
|
||||
setup() {
|
||||
let dataListRef = ref(null)
|
||||
@ -251,6 +377,8 @@
|
||||
getFate()
|
||||
getAdmission()
|
||||
getProjectData()
|
||||
|
||||
getMyInit()
|
||||
})
|
||||
}
|
||||
|
||||
@ -442,6 +570,209 @@
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
})
|
||||
|
||||
let contrastList = ref([])
|
||||
|
||||
const stateObj = ref({
|
||||
0: "待定",
|
||||
1: "主申",
|
||||
2: "冲刺",
|
||||
3: "保底",
|
||||
})
|
||||
|
||||
let manageHintState = ref(false)
|
||||
let classify = ref("vs")
|
||||
|
||||
// 我的项目的初始化
|
||||
const getMyInit = () => {
|
||||
console.log(localStorage.getItem("PMState"))
|
||||
manageHintState.value = localStorage.getItem("PMState") || false
|
||||
|
||||
getList().then(res => {
|
||||
const data = res.data || {}
|
||||
const nums = data.nums || {}
|
||||
classify.value = "vs"
|
||||
if (nums["contrast"] == 0 && nums["manage"] != 0) {
|
||||
classify.value = "manage"
|
||||
handleUserProjectData(res)
|
||||
} else {
|
||||
getQuickList()
|
||||
handleProjectListData(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let projectCount = ref(0)
|
||||
handleProjectListData = res => {
|
||||
const data = res.data
|
||||
let list = data.data || []
|
||||
let count = 0
|
||||
list.forEach(element => {
|
||||
if (element.status == 1) count++
|
||||
})
|
||||
projectCount.value = count
|
||||
contrastList.value = list
|
||||
}
|
||||
|
||||
let typeid = ref("")
|
||||
let typeIndex = ref(0)
|
||||
let typeList = ref([])
|
||||
// 获取项目管理
|
||||
const getUserProject = () => {
|
||||
getList({
|
||||
page: 1,
|
||||
typeid: typeid.value,
|
||||
}).then(res => {
|
||||
handleUserProjectData(res)
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectList = () => {
|
||||
getList({
|
||||
page: 1,
|
||||
}).then(res => {
|
||||
handleProjectListData(res)
|
||||
})
|
||||
}
|
||||
|
||||
let manageList = ref([])
|
||||
let manageCount = ref(0)
|
||||
const handleUserProjectData = res => {
|
||||
const data = res.data
|
||||
let list = data.data || []
|
||||
list.forEach((element, index) => {
|
||||
element["sortKey"] = index
|
||||
})
|
||||
typeList.value = data.typeList
|
||||
manageList.value = list
|
||||
manageCount.value = data.count
|
||||
|
||||
nextTick(() => {
|
||||
manageList.value.forEach((element, index) => {
|
||||
if (element.ismanage == 1) {
|
||||
const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = textarea.scrollHeight + "px"
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const isPitchExceedOne = computed(() => {
|
||||
return contrastList.value.filter(item => item.pitch).length >= 1
|
||||
})
|
||||
|
||||
const isPitchExceedTwo = computed(() => {
|
||||
return contrastList.value.filter(item => item.pitch).length >= 2
|
||||
})
|
||||
|
||||
// 点击选择项目
|
||||
const cutSelect = index => {
|
||||
const item = contrastList.value[index]
|
||||
const state = item["pitch"] || false
|
||||
if (!state && contrastList.value.filter(item => item["pitch"]).length >= 3) return
|
||||
item["pitch"] = !item["pitch"]
|
||||
}
|
||||
|
||||
let quickList = ref([])
|
||||
// 获取快速列表
|
||||
const getQuickList = () => {
|
||||
$ajaxget("/api/project.contrast/getQuickList", {}).then(res => {
|
||||
if (res.code != 200) return
|
||||
const data = res.data
|
||||
quickList.value = data || []
|
||||
})
|
||||
}
|
||||
|
||||
// 快速列表点击 显示删除 按钮
|
||||
const quickShowHideDelete = index => {
|
||||
quickList.value[index]["deleteState"] = !quickList.value[index]["deleteState"]
|
||||
}
|
||||
|
||||
// 点击删除快速对比
|
||||
const quickDelete = index => {
|
||||
const data = quickList.value[index]
|
||||
$ajax("/api/project.contrast/deleteQuick", {
|
||||
id: data.id,
|
||||
}).then(res => {
|
||||
quickList.value.splice(index, 1)
|
||||
})
|
||||
}
|
||||
|
||||
// 点击 删除 我的对比
|
||||
const contrastDelete = () => {
|
||||
contrastList.value.forEach((element, index) => {
|
||||
if (element["pitch"]) {
|
||||
$ajax("/api/project.contrast/delete", {
|
||||
projectid: element.projectid,
|
||||
}).then(res => {
|
||||
contrastList.value[index]["status"] = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 公共的获取列表 方法
|
||||
const getList = (obj = {}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
$ajax("/api/project.user", {
|
||||
limit: 2000,
|
||||
page: obj.page || 1,
|
||||
typeid: obj.typeid || "",
|
||||
}).then(res => resolve(res))
|
||||
})
|
||||
}
|
||||
|
||||
// 切换查看类型
|
||||
const cutClassify = type => {
|
||||
// const classify = e.currentTarget.dataset.type
|
||||
if (type == classify.value) return
|
||||
classify.value = type
|
||||
if (classify.value == "manage") {
|
||||
typeid.value = ""
|
||||
manageList.value = []
|
||||
getUserProject()
|
||||
}
|
||||
if (classify.value == "vs") {
|
||||
quickList.value = []
|
||||
contrastList.value = []
|
||||
getProjectList()
|
||||
getQuickList()
|
||||
}
|
||||
}
|
||||
|
||||
const manageListRef = ref(null)
|
||||
|
||||
const inputInput = index => {
|
||||
const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = textarea.scrollHeight + "px"
|
||||
}
|
||||
|
||||
const inputblur = index => {
|
||||
const target = manageList.value[index]
|
||||
|
||||
$ajax("/api/project.user/remarks", {
|
||||
token: target.token,
|
||||
remarks: target.remarks,
|
||||
}).then(res => {
|
||||
console.log("message", res.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭 底部提示框
|
||||
const manageClose = () => {
|
||||
manageHintState.value = true
|
||||
localStorage.setItem("PMState", 1)
|
||||
}
|
||||
|
||||
// 点击头部 tab
|
||||
const cutTypeid = index => {
|
||||
typeIndex.value = index
|
||||
typeid.value = typeList.value[index].value
|
||||
manageList.value = []
|
||||
getUserProject()
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
university,
|
||||
@ -463,6 +794,30 @@
|
||||
openMoreSelect,
|
||||
closeMoreSelectAll,
|
||||
baseRef,
|
||||
stateObj,
|
||||
contrastList,
|
||||
projectCount,
|
||||
cutSelect,
|
||||
isPitchExceedOne,
|
||||
isPitchExceedTwo,
|
||||
quickList,
|
||||
quickShowHideDelete,
|
||||
quickDelete,
|
||||
contrastDelete,
|
||||
classify,
|
||||
|
||||
manageList,
|
||||
manageCount,
|
||||
cutClassify,
|
||||
typeList,
|
||||
typeid,
|
||||
typeIndex,
|
||||
inputblur,
|
||||
inputInput,
|
||||
manageListRef,
|
||||
manageHintState,
|
||||
manageClose,
|
||||
cutTypeid,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
6
img/arrows-circle-yellow-green.svg
Normal file
6
img/arrows-circle-yellow-green.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path d="M 5.25 10.046875 C 5.38541666666667 10.046875 5.50260416666667 9.99739583333333 5.6015625 9.8984375 L 9.1484375 6.3515625 C 9.24739583333333 6.25260416666667 9.296875 6.13541666666667 9.296875 6 C 9.296875 5.86458333333333 9.24739583333333 5.74739583333333 9.1484375 5.6484375 L 5.6015625 2.1015625 C 5.50260416666667 2.00260416666667 5.38541666666667 1.953125 5.25 1.953125 C 5.11458333333333 1.953125 4.99739583333333 2.00260416666667 4.8984375 2.1015625 L 4.1015625 2.8984375 C 4.00260416666667 2.99739583333333 3.953125 3.11458333333333 3.953125 3.25 C 3.953125 3.38541666666667 4.00260416666667 3.50260416666667 4.1015625 3.6015625 L 6.5 6 L 4.1015625 8.3984375 C 4.00260416666667 8.49739583333333 3.953125 8.61458333333333 3.953125 8.75 C 3.953125 8.88541666666667 4.00260416666667 9.00260416666667 4.1015625 9.1015625 L 4.8984375 9.8984375 C 4.99739583333333 9.99739583333333 5.11458333333333 10.046875 5.25 10.046875 Z M 11.1953125 2.98828125 C 11.7317708333333 3.90755208333333 12 4.91145833333333 12 6 C 12 7.08854166666667 11.7317708333333 8.09244791666666 11.1953125 9.01171875 C 10.6588541666667 9.93098958333333 9.93098958333333 10.6588541666667 9.01171875 11.1953125 C 8.09244791666667 11.7317708333333 7.08854166666667 12 6 12 C 4.91145833333333 12 3.90755208333333 11.7317708333333 2.98828125 11.1953125 C 2.06901041666667 10.6588541666667 1.34114583333333 9.93098958333333 0.8046875 9.01171875 C 0.268229166666667 8.09244791666666 0 7.08854166666667 0 6 C 0 4.91145833333333 0.268229166666667 3.90755208333333 0.8046875 2.98828125 C 1.34114583333333 2.06901041666667 2.06901041666667 1.34114583333333 2.98828125 0.8046875 C 3.90755208333333 0.268229166666666 4.91145833333333 0 6 0 C 7.08854166666667 0 8.09244791666667 0.268229166666666 9.01171875 0.8046875 C 9.93098958333333 1.34114583333333 10.6588541666667 2.06901041666667 11.1953125 2.98828125 Z " fill-rule="nonzero" fill="#9a9d02" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
6
img/arrows-long-white.svg
Normal file
6
img/arrows-long-white.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="6px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -6 -10 )">
|
||||
<path d="M 13.9189814814815 2.80104031209363 C 13.9729938271605 2.85305591677503 14 2.91287386215865 14 2.98049414824447 C 14 3.05331599479844 13.9729938271605 3.11573472041612 13.9189814814815 3.16775032509753 L 10.8078703703704 5.9297789336801 C 10.721450617284 6.00260078023407 10.6269290123457 6.01820546163849 10.5243055555556 5.97659297789337 C 10.4216820987654 5.9297789336801 10.3703703703704 5.85435630689207 10.3703703703704 5.75032509752926 L 10.3703703703704 4 L 0.259259259259259 4 C 0.183641975308642 4.00260078023407 0.121527777777778 3.97919375812744 0.0729166666666667 3.93237971391417 C 0.0243055555555556 3.88556566970091 0 3.82574772431729 0 3.75292587776333 L 0 2.25487646293888 C 0 2.18205461638492 0.0243055555555556 2.1222366710013 0.0729166666666667 2.07542262678804 C 0.121527777777778 2.02860858257477 0.183641975308642 2.00520156046814 0.259259259259259 2 L 10.3703703703704 2 L 10.3703703703704 0.257477243172952 C 10.3703703703704 0.148244473342003 10.4216820987654 0.0728218465539658 10.5243055555556 0.0312093628088428 C 10.6269290123457 -0.0104031209362816 10.721450617284 0.00260078023406973 10.8078703703704 0.0702210663198961 L 13.9189814814815 2.80104031209363 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 6 10 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/close-icon.png
Normal file
BIN
img/close-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
6
img/delete-icon.svg
Normal file
6
img/delete-icon.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
img/dot-dot-dot-gray.png
Normal file
BIN
img/dot-dot-dot-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 632 B |
BIN
img/drag-icon.png
Normal file
BIN
img/drag-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
BIN
img/empty-icon.png
Normal file
BIN
img/empty-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
6
img/left-icon.svg
Normal file
6
img/left-icon.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="474px" height="61px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path d="M 0 60 L 473 60 L 399.418956833633 6.42982302564229 C 392.060852516996 1.07280532820652 385.151335679672 0 363.189169599591 0 L 12.0765957446809 0 C 6.76289361702129 0 0 3.36 0 6 L 0 60 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
6
img/tick-circle-gray-hollow.svg
Normal file
6
img/tick-circle-gray-hollow.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path d="M 15.4947916666667 8.33333333333333 C 15.4947916666667 8.55902777777778 15.4123263888889 8.75434027777778 15.2473958333333 8.91927083333333 L 9.75260416666667 14.4140625 C 9.58767361111111 14.5789930555556 9.39236111111111 14.6614583333333 9.16666666666667 14.6614583333333 C 8.94097222222222 14.6614583333333 8.74565972222222 14.5789930555556 8.58072916666667 14.4140625 L 4.75260416666667 10.5859375 C 4.58767361111111 10.4210069444444 4.50520833333333 10.2256944444444 4.50520833333333 10 C 4.50520833333333 9.77430555555556 4.58767361111111 9.57899305555556 4.75260416666667 9.4140625 L 6.08072916666667 8.0859375 C 6.24565972222222 7.92100694444444 6.44097222222222 7.83854166666667 6.66666666666667 7.83854166666667 C 6.89236111111111 7.83854166666667 7.08767361111111 7.92100694444444 7.25260416666667 8.0859375 L 9.16666666666667 10 L 12.7473958333333 6.41927083333333 C 12.9123263888889 6.25434027777778 13.1076388888889 6.171875 13.3333333333333 6.171875 C 13.5590277777778 6.171875 13.7543402777778 6.25434027777778 13.9192708333333 6.41927083333333 L 15.2473958333333 7.74739583333333 C 15.4123263888889 7.91232638888889 15.4947916666667 8.10763888888889 15.4947916666667 8.33333333333333 Z M 16.1328125 13.5546875 C 16.7664930555556 12.4696180555556 17.0833333333333 11.2847222222222 17.0833333333333 10 C 17.0833333333333 8.71527777777778 16.7664930555556 7.53038194444444 16.1328125 6.4453125 C 15.4991319444444 5.36024305555555 14.6397569444444 4.50086805555555 13.5546875 3.8671875 C 12.4696180555556 3.23350694444444 11.2847222222222 2.91666666666667 10 2.91666666666667 C 8.71527777777778 2.91666666666667 7.53038194444445 3.23350694444444 6.4453125 3.8671875 C 5.36024305555556 4.50086805555555 4.50086805555556 5.36024305555555 3.8671875 6.4453125 C 3.23350694444444 7.53038194444444 2.91666666666667 8.71527777777778 2.91666666666667 10 C 2.91666666666667 11.2847222222222 3.23350694444444 12.4696180555556 3.8671875 13.5546875 C 4.50086805555556 14.6397569444444 5.36024305555556 15.4991319444444 6.4453125 16.1328125 C 7.53038194444445 16.7664930555556 8.71527777777778 17.0833333333333 10 17.0833333333333 C 11.2847222222222 17.0833333333333 12.4696180555556 16.7664930555556 13.5546875 16.1328125 C 14.6397569444444 15.4991319444444 15.4991319444444 14.6397569444444 16.1328125 13.5546875 Z M 18.6588541666667 4.98046875 C 19.5529513888889 6.51258680555555 20 8.18576388888889 20 10 C 20 11.8142361111111 19.5529513888889 13.4874131944444 18.6588541666667 15.01953125 C 17.7647569444444 16.5516493055556 16.5516493055556 17.7647569444444 15.01953125 18.6588541666667 C 13.4874131944444 19.5529513888889 11.8142361111111 20 10 20 C 8.18576388888889 20 6.51258680555556 19.5529513888889 4.98046875 18.6588541666667 C 3.44835069444444 17.7647569444444 2.23524305555556 16.5516493055556 1.34114583333333 15.01953125 C 0.447048611111111 13.4874131944444 0 11.8142361111111 0 10 C 0 8.18576388888889 0.447048611111111 6.51258680555555 1.34114583333333 4.98046875 C 2.23524305555556 3.44835069444444 3.44835069444444 2.23524305555555 4.98046875 1.34114583333333 C 6.51258680555556 0.447048611111109 8.18576388888889 0 10 0 C 11.8142361111111 0 13.4874131944444 0.447048611111109 15.01953125 1.34114583333333 C 16.5516493055556 2.23524305555555 17.7647569444444 3.44835069444444 18.6588541666667 4.98046875 Z " fill-rule="nonzero" fill="#bdbaba" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
6
img/tick-circle-green.svg
Normal file
6
img/tick-circle-green.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1314 -2317 )">
|
||||
<path d="M 16.484375 8.4765625 C 16.640625 8.3203125 16.71875 8.125 16.71875 7.890625 C 16.71875 7.64756944444444 16.640625 7.44791666666667 16.484375 7.29166666666667 L 15.2994791666667 6.11979166666667 C 15.1345486111111 5.95486111111111 14.9392361111111 5.87239583333333 14.7135416666667 5.87239583333333 C 14.4878472222222 5.87239583333333 14.2925347222222 5.95486111111111 14.1276041666667 6.11979166666667 L 8.81510416666667 11.4192708333333 L 5.87239583333333 8.4765625 C 5.70746527777778 8.31163194444444 5.51215277777778 8.22916666666667 5.28645833333333 8.22916666666667 C 5.06076388888889 8.22916666666667 4.86545138888889 8.31163194444444 4.70052083333333 8.4765625 L 3.515625 9.6484375 C 3.359375 9.8046875 3.28125 10.0043402777778 3.28125 10.2473958333333 C 3.28125 10.4817708333333 3.359375 10.6770833333333 3.515625 10.8333333333333 L 8.22916666666667 15.546875 C 8.39409722222222 15.7118055555556 8.58940972222222 15.7942708333333 8.81510416666667 15.7942708333333 C 9.04947916666667 15.7942708333333 9.24913194444444 15.7118055555556 9.4140625 15.546875 L 16.484375 8.4765625 Z M 18.6588541666667 4.98046875 C 19.5529513888889 6.51258680555555 20 8.18576388888889 20 10 C 20 11.8142361111111 19.5529513888889 13.4874131944444 18.6588541666667 15.01953125 C 17.7647569444444 16.5516493055556 16.5516493055556 17.7647569444444 15.01953125 18.6588541666667 C 13.4874131944444 19.5529513888889 11.8142361111111 20 10 20 C 8.18576388888889 20 6.51258680555556 19.5529513888889 4.98046875 18.6588541666667 C 3.44835069444444 17.7647569444444 2.23524305555556 16.5516493055556 1.34114583333333 15.01953125 C 0.447048611111111 13.4874131944444 0 11.8142361111111 0 10 C 0 8.18576388888889 0.447048611111111 6.51258680555555 1.34114583333333 4.98046875 C 2.23524305555556 3.44835069444444 3.44835069444444 2.23524305555555 4.98046875 1.34114583333333 C 6.51258680555556 0.447048611111109 8.18576388888889 0 10 0 C 11.8142361111111 0 13.4874131944444 0.447048611111109 15.01953125 1.34114583333333 C 16.5516493055556 2.23524305555555 17.7647569444444 3.44835069444444 18.6588541666667 4.98046875 Z " fill-rule="nonzero" fill="#6fc16d" stroke="none" transform="matrix(1 0 0 1 1314 2317 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/u1434.png
Normal file
BIN
img/u1434.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -12,7 +12,6 @@ function $ajax(url) {
|
||||
data["authorization"] = "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4"
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
console.log(axios)
|
||||
axios
|
||||
.post(url, data, {
|
||||
emulateJSON: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user