no message

This commit is contained in:
A1300399510 2024-11-04 16:24:44 +08:00
parent 43c90db9aa
commit 3f4d2c3fc4
15 changed files with 1179 additions and 14 deletions

View File

@ -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;

View File

@ -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;

317
css/contrastDetails.css Normal file
View File

@ -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;
}

367
css/contrastDetails.less Normal file
View File

@ -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;
}
}
}

342
html/contrastDetails.html Normal file
View File

@ -0,0 +1,342 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/contrastDetails.css" />
<script src="/js/axios.min.js"></script>
<script src="/js/vue.global.js"></script>
<script src="/js/common.js"></script>
<script src="/js/base.js"></script>
<script src="/js/crypto-js.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" class="main" v-cloak>
<img class="index-icon" src="/img/index-icon.png" />
<div class="body" v-if="list.length != 0">
<div class="item flexflex">
<div class="head flexacenter">项目</div>
<div class="thead no-padding flex1 flexflex" v-for="(it,index) in list">
<div class="top flex1">
<img v-if="index < list.length - 1" class="vs" src="/img/vs.png" />
<div class="name">{{ it.name_zh }}</div>
<div class="name-en">{{ it.name_en }}</div>
<div class="school flexcenter">
<img class="icon" :src="it.schoollogo" />
{{ it.schoolname }}
</div>
</div>
<div class="operate flexacenter">
<div class="i flex1 flexcenter" @click="handleProject(index, 'replace')">
<img class="icon" src="/img/replace-icon.png" />
</div>
<div class="i flex1 flexcenter" @click="deleteProject(index)" v-if="list.length == 3">
<img class="icon" src="/img/delete-icon.svg" />
</div>
<div v-if="index == 0 && list.length == 2" @click="handleProject(index, 'add')" class="add flexcenter">
<img class="icon" src="/img/add-green.svg" />
</div>
</div>
</div>
</div>
<div class="item flexflex" v-for="(item,key) in listObj">
<div class="head flexacenter">{{ item }}</div>
<div class="thead flex1" v-for="(it,index) in list">
<div v-if="key == 'rank'" class="mode1 flexcenter">{{ it.rank || '-' }}</div>
<div v-if="key == 'rankings'" class="mode2 flexcenter">{{ it.rankings && it.rankings[0].rank || '-' }}</div>
<div v-if="key == 'disciplinename'" class="mode2 flexcenter">{{ it.disciplinename || '-' }}</div>
<div v-if="key == 'tuition_fee_text' && it.tuition_fee_text" class="mode3 flexcenter">
{{ it.tuition_fee_text }}
<div class="unit">HK$</div>
</div>
<div v-else-if="key == 'tuition_fee_text'" class="mode5 flexcenter">-</div>
<div v-if="key == 'admission_deposit_text' && it.admission_deposit_text" class="mode3 flexcenter">
{{ it.admission_deposit_text }}
<div class="unit">HK$</div>
</div>
<div v-else-if="key == 'admission_deposit_text'" class="mode5 flexcenter">-</div>
<div v-if="key == 'scholarshipText'" class="mode2 flexcenter">{{ it.scholarshipText || '-' }}</div>
<div v-if="key == 'ft_normal_period'" class="mode2 flexcenter">{{ it.ft_normal_period || '-' }}</div>
<div v-if="key == 'language_of_instruction_text'" class="mode2 flexcenter">{{ it.language_of_instruction_text || '-' }}</div>
<div v-if="key == 'concentration'" class="mode4 flexcenter">{{ it.concentration || '-' }}</div>
<div v-if="key == 'entrance_requirements'" class="mode4 flexcenter">{{ it.entrance_requirements || '-' }}</div>
<div v-if="key == 'english_proficiency_text'" class="mode4 flexcenter">{{ it.english_proficiency_text || '-' }}</div>
<div v-if="key == 'documents_required'" class="mode4 flexcenter">{{ it.documents_required || '-' }}</div>
<div v-if="key == 'accreditation'" class="mode4 flexcenter">{{ it.accreditation || '-' }}</div>
<div v-if="key == 'has_dissertation_course'" class="mode2 flexcenter">{{ it.has_dissertation_course ? '是' : '否' }}</div>
<div v-if="key == 'has_project_course'" class="mode2 flexcenter">{{ it.has_project_course ? '是' : '否' }}</div>
<div v-if="key == 'has_placement_course'" class="mode2 flexcenter">{{ it.has_placement_course ? '是' : '否' }}</div>
<div v-if="key == 'result_date'" class="mode4 flexcenter">{{ it.result_date || '-' }}</div>
<!-- <template wx:if="{{ item.disciplinename }}" is="mode2" data="{{ text: item.disciplinename }}"></template> -->
<!-- <div class="semester-box flexcenter">
<div class="semester">24Fall</div>
</div> -->
<!-- <div class="mode1 flexcenter">52</div> -->
<!-- <div class="mode2 flexcenter">16</div> -->
<!-- <div class="mode3 flexcenter">
281,000
<div class="unit">HK$</div>
</div> -->
<!-- <div class="mode4 flexcenter">・毕业于公认的大学并获得计算机科学、计算机工程或相关领域的学士学位通常要求二等荣誉或更高或本科课程平均成绩为“B”或更好
・在高等教育机构完成学习课程,并获得等同于荣誉学位的专业或类似资格;或
・第一学历毕业于其他领域,但具有广泛的计算机相关内容;或
・通过远程教育或完成短期课程获得海外大学学位的申请者可能需要提供香港学术及职业资历评审局HKCAAVQ的评估报告以证明所获得资格的水平。</div>
</div> -->
<!-- <div class="mode5 flexcenter">-</div> -->
</div>
</div>
</div>
<div class="handle-project-mask flexcenter" v-if="projectState">
<div class="handle-project">
<div class="handle-header">
{{ projectState == 'replace' ? '请选择替换的项目' : '还可以增加1个项目' }}
<div class="cross flexcenter" @click="cross">
<img class="icon" src="/img/cross-icon.png" />
</div>
</div>
<div class="list">
<template v-for="(item,index) in projectList">
<div class="item flexacenter" v-if="item.status == 1">
<div class="left flex1">
<div class="name">{{ item.name_zh }}</div>
<div class="english">{{ item.name_en }}</div>
<div class="bottom flexacenter">
<img class="icon" :src="item.schoollogo" />
{{ item.schoolalias }}
<template v-if="item.ismanage == 1">
<div class="line">|</div>
<div class="state flexcenter">{{ stateObj[item.typeid] }}</div>
</template>
</div>
</div>
<div class="btn flexcenter" @click="selectProject(index)">
<img v-if="projectState == 'replace'" class="icon" src="/img/replace.png" />
<img v-else class="icon" src="/img/arrows-straight-dark-cyan.png" />
</div>
</div>
</template>
</div>
</div>
</div>
<div class="base-footer flexcenter" :class="{'isnosave': isquick }">
<div class="flexacenter">
<div class="item flexacenter">
<img class="icon" src="/img/contrast-icon.png" />
项目对比
</div>
<div class="line">|</div>
<div class="item flexacenter">
<img class="icon" src="/img/manage-icon.png" />
项目管理
</div>
</div>
<div class="save flexacenter">
保存该组对比,方便下次快速查看
<img class="icon" src="/img/u2311.png" />
<div class="btn flexcenter" @click="save">保存</div>
</div>
</div>
</div>
<script>
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
const projectIndex = createApp({
setup() {
onMounted(() => {
// window.addEventListener("scroll", handleScroll)
})
const listObj = ref({
rank: "专业排名",
rankings: "学校合排名",
disciplinename: "学科领域",
tuition_fee_text: "学费",
admission_deposit_text: "入学保证金",
scholarshipText: "奖学金",
ft_normal_period: "一般学习时长",
language_of_instruction_text: "授课语言",
concentration: "专业方向",
entrance_requirements: "学术要求",
english_proficiency_text: "英语能力要求",
documents_required: "必要文件",
accreditation: "专业认证",
has_dissertation_course: "是否含论文课程",
has_project_course: "是否含项目课程",
has_placement_course: "是否含实习课程",
result_date: "录取通知时间",
})
let disciplineObj = { 1: "建筑学类", 2: "设计与艺术学类", 3: "商学与管理学类", 4: "计算机类", 5: "教育学类", 6: "工学类", 7: "文学类", 8: "语言学类", 9: "法学类", 10: "新闻传播学类", 11: "医学类", 12: "理学类", 13: "服务类", 14: "社会科学类" }
let list = ref([])
let isquick = ref(false)
let ids = []
onMounted(() => {
ids = "484,41".split(",") || []
initData()
})
const initData = () => {
$ajax("/api/project.contrast", {
projectid: ids,
}).then(res => {
if (res.code != 200) return
const data = res.data
const dataList = data.data || []
let allArr = []
dataList.forEach(element => allArr.push(decodeKey(element)))
const obj = disciplineObj
Promise.allSettled(allArr).then(res => {
let targetList = []
res.forEach(element => targetList.push(element.status === "fulfilled" ? element.value : {}))
targetList.forEach(element => {
element["tuition_fee_text"] = formatNumberWithSpaces(element["tuition_fee"] || "")
element["admission_deposit_text"] = formatNumberWithSpaces(element["admission_deposit"] || "")
if (element.language_of_instruction) {
let strOutput = element.language_of_instruction.join(",")
element["language_of_instruction_text"] = strOutput
}
if (Array.isArray(element.english_proficiency)) {
const english = element.english_proficiency
let text = ""
english.forEach(element => {
text += `・${element.name_zh}(${element.name_en}) ${element.total}分以上 \n`
})
element["english_proficiency_text"] = text
}
if (element.scholarship) element["scholarshipText"] = JudgmentScholarshipText(element.scholarship)
element["disciplinename"] = obj[element.disciplineid] || ""
})
list.value = targetList
isquick.value = data.isquick
})
})
}
// 判断奖学金文案
const JudgmentScholarshipText = obj => {
let text = ""
if (obj.local && obj.nonlocal) text = "均有"
else if (!obj.local && !obj.nonlocal) text = "均无"
else if (obj.local && !obj.nonlocal) text = "非本地学生无"
else if (!obj.local && obj.nonlocal) text = "非本地学生有"
return text
}
const stateObj = ref({
0: "待定",
1: "主申",
2: "冲刺",
3: "保底",
})
let projectList = ref([])
const getListData = () => {
$ajax("/api/project.user", {
limit: 2000,
}).then(res => {
if (res.code != 200) return
const data = res.data
let list = data.data || []
list = list.filter(obj => obj.status === 1 && !ids.includes(`${obj.projectid}`))
projectList.value = list
})
}
let selectIndex = null // 选中要替换或增加的 下标
let projectState = ref("") // 项目弹窗的状态 '' replace add
// 点击 顶部的 增加 或者 替换 项目
const handleProject = (index, type) => {
selectIndex = index
projectList.value = []
projectState.value = type
getListData()
}
const cross = () => {
projectState.value = ""
}
const selectProject = index => {
const target = projectList.value[index]
// 替换
if (projectState.value == "replace") ids[selectIndex] = `${target.projectid}`
else ids.push(`${target.projectid}`) // 增加
initData()
projectState.value = ""
}
const deleteProject = index => {
ids.splice(index, 1) // 从指定下标删除一个元素
list.value.splice(index, 1) // 从指定下标删除一个元素
}
// 点击保存
const save = () => {
$ajax("/api/project.contrast/addQuick", {
projectid: ids,
}).then(res => {
isquick.value = true
})
}
return {
listObj,
list,
isquick,
stateObj,
projectList,
projectState,
handleProject,
cross,
selectProject,
deleteProject,
save,
}
},
})
projectIndex.mount("#app")
</script>
</body>
</html>

View File

@ -210,7 +210,7 @@
<!-- 底部 -->
<base-bottom ref="baseRef"></base-bottom>
<div class="my-project flexacenter">
<div class="my-project flexacenter" v-if="false">
<div class="my-box">
<div class="head flexacenter">
<div class="item flexcenter" :class="{'pitch': classify == 'vs'}" @click="cutClassify('vs')">
@ -253,7 +253,7 @@
</template>
</div>
</div>
<div class="btn flexcenter" @click="cutSelect(index)">
<div class="btn flexcenter" :class="{'btn-forbid': isPitchExceedThree, 'btn-normal': item.pitch }" @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>
@ -289,7 +289,7 @@
<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">
<div v-if="manageEmpty" class="empty-box flexcenter">
<img class="icon" src="/img/empty-icon.png" />
<span class="text">暂无项目</span>
</div>
@ -312,14 +312,11 @@
</div>
</div>
<div class="state-box">
<div class="btn flexcenter">{{ stateObj[item.typeid] }}<img class="icon" src="/img/arrows-triangle-white.svg" /></div>
<div class="btn flexcenter" :class="{'undetermined': item.typeid == 0}" @click.stop="cutManageStateShow(index)">{{ stateObj[item.typeid] }}<img class="icon" src="/img/arrows-triangle-white.svg" /></div>
<div v-if="false" class="state-list-box flexacenter">
<div v-if="item.state" 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 class="state-item" :class="{'pitch': item.typeid == key}" v-for="(it,key) in stateObj" @click.stop="cutManageState(key, index)">{{ it }}</div>
</div>
<div class="delete flexcenter">
@ -589,6 +586,10 @@
getList().then(res => {
const data = res.data || {}
data.nums = {
contrast: 0,
manage: 10,
}
const nums = data.nums || {}
classify.value = "vs"
if (nums["contrast"] == 0 && nums["manage"] != 0) {
@ -635,7 +636,6 @@
}
let manageList = ref([])
let manageCount = ref(0)
const handleUserProjectData = res => {
const data = res.data
let list = data.data || []
@ -644,7 +644,6 @@
})
typeList.value = data.typeList
manageList.value = list
manageCount.value = data.count
nextTick(() => {
manageList.value.forEach((element, index) => {
@ -657,6 +656,11 @@
})
}
const manageEmpty = computed(() => {
return typeList.value[typeIndex.value]['count'] == 0
})
const isPitchExceedOne = computed(() => {
return contrastList.value.filter(item => item.pitch).length >= 1
})
@ -665,6 +669,11 @@
return contrastList.value.filter(item => item.pitch).length >= 2
})
const isPitchExceedThree = computed(index => {
console.log("index", index)
return contrastList.value.filter(item => item.pitch).length >= 3
})
// 点击选择项目
const cutSelect = index => {
const item = contrastList.value[index]
@ -773,6 +782,38 @@
getUserProject()
}
const cutManageStateShow = index => {
manageList.value.forEach(element => (element["state"] = false))
manageList.value[index]["state"] = !manageList.value[index]["state"]
}
const cutManageState = (typeid, index) => {
const target = manageList.value[index] || {}
$ajax("/api/project.user/changeType", {
token: target.token,
typeid,
}).then(res => {
if (res.code != 200) return
const stateNameFront = stateObj.value[target.typeid] // 修改前的状态
const stateNameAfter = stateObj.value[typeid] // 修改后的状态
typeList.value.forEach(element => {
if (element.name == stateNameFront) element.count--
if (element.name == stateNameAfter) element.count++
})
manageList.value[index]["typeid"] = typeid
manageList.value[index]["state"] = false
if (typeIndex.value != 0) {
manageList.value[index]["ismanage"] = 0
manageList.value[index]["height"] = 0
}
})
}
return {
user,
university,
@ -800,6 +841,7 @@
cutSelect,
isPitchExceedOne,
isPitchExceedTwo,
isPitchExceedThree,
quickList,
quickShowHideDelete,
quickDelete,
@ -807,7 +849,7 @@
classify,
manageList,
manageCount,
manageEmpty,
cutClassify,
typeList,
typeid,
@ -818,6 +860,8 @@
manageHintState,
manageClose,
cutTypeid,
cutManageStateShow,
cutManageState,
}
},
})

44
img/add-green.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1024 -3237 )">
<path d="M 15.6818181818182 6.13636363636364 C 15.8939393939394 6.34848484848485 16 6.60606060606061 16 6.90909090909091 L 16 9.09090909090909 C 16 9.39393939393939 15.8939393939394 9.65151515151515 15.6818181818182 9.86363636363636 C 15.469696969697 10.0757575757576 15.2121212121212 10.1818181818182 14.9090909090909 10.1818181818182 L 10.1818181818182 10.1818181818182 L 10.1818181818182 14.9090909090909 C 10.1818181818182 15.2121212121212 10.0757575757576 15.469696969697 9.86363636363636 15.6818181818182 C 9.65151515151515 15.8939393939394 9.39393939393939 16 9.09090909090909 16 L 6.90909090909091 16 C 6.60606060606061 16 6.34848484848485 15.8939393939394 6.13636363636364 15.6818181818182 C 5.92424242424242 15.469696969697 5.81818181818182 15.2121212121212 5.81818181818182 14.9090909090909 L 5.81818181818182 10.1818181818182 L 1.09090909090909 10.1818181818182 C 0.787878787878788 10.1818181818182 0.53030303030303 10.0757575757576 0.318181818181818 9.86363636363636 C 0.106060606060606 9.65151515151515 0 9.39393939393939 0 9.09090909090909 L 0 6.90909090909091 C 0 6.60606060606061 0.106060606060606 6.34848484848485 0.318181818181818 6.13636363636364 C 0.53030303030303 5.92424242424242 0.787878787878788 5.81818181818182 1.09090909090909 5.81818181818182 L 5.81818181818182 5.81818181818182 L 5.81818181818182 1.09090909090909 C 5.81818181818182 0.787878787878787 5.92424242424242 0.530303030303029 6.13636363636364 0.318181818181818 C 6.34848484848485 0.106060606060606 6.60606060606061 0 6.90909090909091 0 L 9.09090909090909 0 C 9.39393939393939 0 9.65151515151515 0.106060606060606 9.86363636363636 0.318181818181818 C 10.0757575757576 0.530303030303029 10.1818181818182 0.787878787878787 10.1818181818182 1.09090909090909 L 10.1818181818182 5.81818181818182 L 14.9090909090909 5.81818181818182 C 15.2121212121212 5.81818181818182 15.469696969697 5.92424242424242 15.6818181818182 6.13636363636364 Z " fill-rule="nonzero" fill="#6fc16d" stroke="none" transform="matrix(1 0 0 1 1024 3237 )" />
</g>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</svg>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/cross-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 B

BIN
img/replace-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
img/replace.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
img/u2311.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
img/vs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -78,3 +78,26 @@ function objectToQueryString(obj = {}) {
.join("&")
return queryString ? "?" + queryString : ""
}
function decodeKey(encrypted, key) {
return new Promise((resolve, reject) => {
try {
var decodekey = "894e129983f3a898"
const encryptedData = CryptoJS.enc.Base64.parse(encrypted)
const decrypted = CryptoJS.AES.decrypt({
ciphertext: encryptedData
}, CryptoJS.enc.Utf8.parse(decodekey), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
})
const text = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8))
resolve(text)
} catch (error) {
reject()
}
})
}

1
js/crypto-js.js Normal file

File diff suppressed because one or more lines are too long