gter.net/xg-project-library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2024-10-31 19:03:26 +08:00
parent abc56afdb2
commit 0567785928
17 changed files with 703 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/common.css
View File

@ -96,3 +96,58 @@ body {
color: #f95d5d;
padding: 0 8px;
}
.one-line-display {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag {
flex-wrap: wrap;
}
.tag .tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
border: none;
}
.tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
border: none;
}
.red-dot {
position: fixed;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
top: -5%;
left: -5%;
z-index: 99;
transition: left 0.3s linear, top 0.3s cubic-bezier(0.5, -0.5, 1, 1);
}
.my-project {
width: 100vw;
height: 100vh;
background-color: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
justify-content: center;
}

61
css/common.less
View File

@ -111,3 +111,64 @@ body {
}
}
}
.one-line-display {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag {
flex-wrap: wrap;
.tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
border: none;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
border: none;
}
}
}
.red-dot {
position: fixed;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
top: -5%;
left: -5%;
z-index: 99;
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);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
justify-content: center;
}

20
css/details.css
View File

@ -90,26 +90,6 @@
margin-right: 6px;
margin-bottom: 8px;
}
.box .details .right .tag .tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
}
.box .details .right .tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
}
.box .details .right .tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
}
.body {
align-items: flex-start;
}

25
css/details.less
View File

@ -98,31 +98,6 @@
font-size: 14px;
color: #7f7f7f;
}
.tag {
.tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
}
}
}
}
}

66
css/index.css
View File

@ -169,6 +169,7 @@
color: #000000;
margin-bottom: 6px;
position: relative;
max-width: 405px;
}
.fate .list .item .left .name::after {
content: "";
@ -186,8 +187,12 @@
color: #7f7f7f;
font-size: 14px;
}
.fate .list .item .left .message .project {
max-width: 280px;
}
.fate .list .item .left .message .virgule {
color: #d7d7d7;
margin: 0 5px;
}
.fate .list .item .btn {
width: 110px;
@ -212,6 +217,22 @@
width: 10px;
height: 10px;
}
.fate .list .item .already {
font-size: 14px;
color: #7f7f7f;
}
.fate .list .item .already .tick-box {
width: 20px;
height: 20px;
background-color: #f6f6f6;
border: 1px solid #d7d7d7;
border-radius: 20px;
margin-right: 5px;
}
.fate .list .item .already .tick-box .img-tick {
width: 10px;
height: 8px;
}
.recruit {
width: 100%;
height: 502px;
@ -275,11 +296,13 @@
font-size: 16px;
color: #000000;
margin-bottom: 10px;
width: 490px;
}
.recruit .list .item .info .name-en {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 15px;
width: 490px;
}
.recruit .list .item .info .aq {
width: 477px;
@ -340,6 +363,7 @@
opacity: 0;
height: 0;
width: 300px;
z-index: 2;
flex-direction: column;
align-items: center;
}
@ -377,6 +401,14 @@
height: 16px;
margin-right: 8px;
}
.recruit .list .item .operate .select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.recruit .list .item .operate .already {
font-size: 14px;
color: #7f7f7f;
@ -401,6 +433,9 @@
height: 12px;
cursor: pointer;
}
.recruit .indicate .icon.btn-right {
transform: rotate(180deg);
}
.recruit .indicate .text {
color: #555555;
font-size: 13px;
@ -409,6 +444,7 @@
.data .fall {
width: 285px;
display: block;
margin-bottom: 20px;
}
.data .item {
width: 285px;
@ -416,6 +452,7 @@
border: 1px solid #ebebeb;
border-radius: 12px;
padding: 21px 15px 0;
margin-bottom: 20px;
}
.data .item .school {
font-size: 14px;
@ -446,6 +483,7 @@
color: #555555;
font-size: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.data .item .introduce .quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
@ -465,26 +503,6 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.data .item .tag .tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
}
.data .item .tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
}
.data .item .tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
}
.data .item .operate {
height: 80px;
position: relative;
@ -562,6 +580,14 @@
border-top: 1px dotted #ebebeb;
height: 80px;
}
.data .item .operate .select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.data .item .operate .already {
font-size: 14px;
color: #7f7f7f;

80
css/index.less
View File

@ -194,8 +194,8 @@
font-size: 16px;
color: #000000;
margin-bottom: 6px;
position: relative;
max-width: 405px;
&::after {
content: "";
@ -213,8 +213,12 @@
.message {
color: #7f7f7f;
font-size: 14px;
.project {
max-width: 280px;
}
.virgule {
color: #d7d7d7;
margin: 0 5px;
}
}
}
@ -241,6 +245,24 @@
}
}
}
.already {
font-size: 14px;
color: #7f7f7f;
.tick-box {
width: 20px;
height: 20px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 20px;
margin-right: 5px;
.img-tick {
width: 10px;
height: 8px;
}
}
}
}
}
}
@ -308,11 +330,13 @@
font-size: 16px;
color: #000000;
margin-bottom: 10px;
width: 490px;
}
.name-en {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 15px;
width: 490px;
}
.aq {
@ -377,6 +401,7 @@
opacity: 0;
height: 0;
width: 300px;
z-index: 2;
&.show {
height: 180px;
opacity: 1;
@ -384,8 +409,6 @@
flex-direction: column;
align-items: center;
// .top {
// flex-direction: column;
.title {
.dot {
width: 8px;
@ -410,7 +433,6 @@
background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
border-radius: 158px;
font-size: 14px;
color: #333333;
@ -420,7 +442,15 @@
margin-right: 8px;
}
}
// }
}
.select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.already {
font-size: 14px;
@ -450,6 +480,10 @@
width: 7px;
height: 12px;
cursor: pointer;
&.btn-right {
transform: rotate(180deg);
}
}
.text {
color: #555555;
@ -463,6 +497,7 @@
.fall {
width: 285px;
display: block;
margin-bottom: 20px;
}
.item {
@ -471,6 +506,7 @@
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 12px;
padding: 21px 15px 0;
margin-bottom: 20px;
.school {
.img {
@ -503,6 +539,7 @@
color: #555555;
font-size: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
.quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
@ -522,30 +559,7 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.tag {
.tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
}
}
.operate {
height: 80px;
position: relative;
@ -626,6 +640,16 @@
height: 80px;
}
}
.select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.already {
font-size: 14px;
color: #7f7f7f;

20
css/school.css
View File

@ -490,26 +490,6 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.content .body .right .list .item .tag .tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
}
.content .body .right .list .item .tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
}
.content .body .right .list .item .tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
}
.content .body .right .list .item .operate {
position: absolute;
top: 18px;

23
css/school.less
View File

@ -544,30 +544,7 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.tag {
.tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
}
}
.operate {
position: absolute;
top: 18px;

20
css/subject.css
View File

@ -193,26 +193,6 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.body .right .list .item .tag .tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
}
.body .right .list .item .tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
}
.body .right .list .item .tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
}
.body .right .list .item .operate {
position: absolute;
top: 18px;

24
css/subject.less
View File

@ -206,30 +206,6 @@
color: #7f7f7f;
margin-bottom: 12px;
}
.tag {
.tag-item {
width: fit-content;
height: 24px;
line-height: 24px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 9px;
font-size: 14px;
color: #7f7f7f;
margin-right: 10px;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
}
}
.operate {
position: absolute;
top: 18px;

2
html/details.html
View File

@ -437,7 +437,7 @@
<div class="type3 flexacenter">
<div class="btn flexacenter">我的项目 <img class="img" src="/img/arrows-circle-green.svg" /></div>
<div class="add-btn flexcenter already" style="margin-right: 10px;">
<img class="img" src="/img/arrows-circle-gray.svg" />
<img class="img" src="/img/tick-circle-gray.svg" />
已加入对比单
</div>
<div class="add-btn flexcenter">

488
html/index.html
View File

@ -6,10 +6,20 @@
<title>Document</title>
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/index.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/masonry.pkgd.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" class="main">
<div id="app" class="main" v-cloak>
<img class="index-icon" src="/img/index-icon.png" />
<div style="display: flex;" class="header-box flexacenter">
<img class="bj" src="/img/header-bj.svg" />
@ -39,13 +49,7 @@
按学校查看
</div>
<div class="list">
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter" v-for="(item,index) in university" :key="index">{{ item.label }}</div>
</div>
</div>
<div class="block subject flex1">
@ -56,56 +60,47 @@
按学科查看
</div>
<div class="list flexflex">
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter">港大</div>
<div class="item flexcenter" v-for="(item,index) in discipline">{{ item.label }}</div>
</div>
</div>
</div>
<!-- 缘分 -->
<div style="display: block;" class="fate">
<div class="fate">
<div class="title flexacenter">
<div>今日缘分项目</div>
<div class="btn flexacenter">
<div class="btn flexacenter" @click="getFate">
<img class="icon" src="/img/trade-icon.png" />
换一批
</div>
</div>
<div class="list flexflex">
<div class="item flexacenter">
<div class="item flexacenter" v-for="(item,index) in fateProject">
<div class="left">
<div class="name">教育学硕士</div>
<div class="message">Master of Education <span class="virgule">|</span> 香港大学</div>
<div class="name one-line-display">{{ item.name_zh }}</div>
<div class="message flexacenter">
<div class="project one-line-display">{{ item.name_en }}</div>
<span class="virgule">|</span>{{ item.schoolname }}
</div>
</div>
<div class="btn flexacenter">
<div v-if="!item?.state" class="btn flexacenter" :class="'add' + item.random" @click="handleClick('fate',item,index)">
<div class="add flexcenter">
<img class="icon" src="/img/add-xiao.svg" />
</div>
加入对比单
</div>
</div>
<div class="item flexacenter">
<div class="left">
<div class="name">教育学硕士</div>
<div class="message">Master of Education <span class="virgule">|</span> 香港大学</div>
</div>
<div class="btn flexacenter">
<div class="add flexcenter">
<img class="icon" src="/img/add-xiao.svg" />
<div v-else class="already flexacenter">
<div class="tick-box flexcenter">
<img class="img-tick" src="/img/tick-icon.svg" />
</div>
加入对比单
已加入
</div>
</div>
</div>
</div>
<!-- 招生官 -->
<div style="display: block;" class="recruit">
<div class="recruit">
<div class="title flexacenter">
<img class="img" src="/img/admission-icon.png" />
<div class="btn flexacenter">
@ -113,90 +108,36 @@
<img class="icon" src="/img/arrows-icon.png" />
</div>
</div>
<div class="list flexflex">
<div class="list-item">
<div class="item flexflex">
<div class="list flexflex" ref="recruitListRef">
<div class="list-item" v-for="(item,index) in admissionList">
<div class="item flexflex" v-for="(item,i) in item">
<div class="operate flexcenter">
<div style="display: none;" class="circle flexcenter">
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div style="display: none;" class="circle flexcenter">
<img class="img-dot" src="/img/dot-dot-dot.png" />
</div>
<div style="display: none;" class="select flexflex show">
<div class="title flexacenter">
<div class="dot"></div>
该项目已加入对比单，未加入项目管理
</div>
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
<!-- <div class="bottom"></div> -->
</div>
<div style="display: none;" class="already flexacenter">
<div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
<div class="tick-box flexcenter">
<img class="img-tick" src="/img/tick-icon.svg" />
</div>
已加入
</div>
</div>
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
<div class="info">
<div class="school">香港大学</div>
<div class="name">城市设计硕士</div>
<div class="name-en">Master of Urban Design</div>
<div class="aq flexacenter">
<div class="text">招生官答疑时间</div>
<div class="value flex1">长期答疑</div>
<img class="icon" src="/img/arrows-long-icon.png" />
<div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" class="circle flexcenter" @click="openMoreSelect('admission',index,i)">
<img class="img-dot" src="/img/dot-dot-dot.png" />
</div>
<div v-else class="circle flexcenter" @click="handleClick('admission',item,index,i)" :class="'add' + item.random" >
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll('admission')"></div>
<div class="select flexflex" :class="{'show': item.moreState}">
<div class="title flexacenter">
<div class="dot"></div>
{{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
</div>
<div class="btn flexcenter" @click="handleClick('admission',item,index,i)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="item flexflex">
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
<img class="avatar" :src="item.schoollogo" />
<div class="info">
<div class="school">香港大学</div>
<div class="name">城市设计硕士</div>
<div class="name-en">Master of Urban Design</div>
<div class="aq flexacenter">
<div class="text">招生官答疑时间</div>
<div class="value flex1">长期答疑</div>
<img class="icon" src="/img/arrows-long-icon.png" />
</div>
</div>
</div>
<div class="item flexflex">
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
<div class="info">
<div class="school">香港大学</div>
<div class="name">城市设计硕士</div>
<div class="name-en">Master of Urban Design</div>
<div class="aq flexacenter">
<div class="text">招生官答疑时间</div>
<div class="value flex1">长期答疑</div>
<img class="icon" src="/img/arrows-long-icon.png" />
</div>
</div>
</div>
<div class="item flexflex">
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
<div class="info">
<div class="school">香港大学</div>
<div class="name">城市设计硕士</div>
<div class="name-en">Master of Urban Design</div>
<div class="aq flexacenter">
<div class="text">招生官答疑时间</div>
<div class="value flex1">长期答疑</div>
<img class="icon" src="/img/arrows-long-icon.png" />
</div>
</div>
</div>
<div class="item flexflex">
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
<div class="info">
<div class="school">香港大学</div>
<div class="name">城市设计硕士</div>
<div class="name-en">Master of Urban Design</div>
<div class="school">{{ item.schoolname }}</div>
<div class="name one-line-display">{{ item.name_zh }}</div>
<div class="name-en one-line-display">{{ item.name_en }}</div>
<div class="aq flexacenter">
<div class="text">招生官答疑时间</div>
<div class="value flex1">长期答疑</div>
@ -208,85 +149,326 @@
</div>
<div class="indicate flexcenter">
<img class="icon" src="/img/arrows-triangle-gray.svg" />
<div class="text">1/3</div>
<img class="icon" src="/img/arrows-triangle-blue.svg" />
<img class="icon" @click="cutAdmissionPage('left')" :src="reversedMessage('left')" />
<div class="text">{{ admissionPage }}/{{ admissionTotalPage }}</div>
<img class="icon btn-right" @click="cutAdmissionPage('right')" :src="reversedMessage('right')" />
</div>
</div>
<!-- 列表 -->
<div class="data">
<!-- <img class="fall" src="/img/25fall.svg" /> -->
<div class="item">
<div class="school flexacenter"><img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />香港中文大学</div>
<div class="name">金融数学研究型硕士</div>
<div class="name-en">Mphil in Financial Mathematics</div>
<div class="data" ref="dataListRef">
<img class="data-item fall" @load="imageFallLoaded" src="/img/25fall.svg" />
<div class="data-item item" v-for="(item,index) in projectList">
<div class="school flexacenter"><img class="img" :src="item.schoollogo" />{{ item.schoolname }}</div>
<div class="name">{{ item.name_zh }}</div>
<div class="name-en">{{ item.name_en }}</div>
<div class="introduce flexacenter">
<div class="flexacenter">
<div class="flexacenter" v-if="item.rank">
专业排名
<div class="quantity">52</div>
<div class="quantity">{{ item.rank }}</div>
</div>
<div class="flexacenter">
<div class="line">|</div>
<div class="flexacenter" v-if="item.tuition_fee_text">
<div class="line" v-if="item.rank">|</div>
学费HK$
<div class="quantity">281,000</div>
<div class="quantity">{{ item.tuition_fee_text }}</div>
</div>
</div>
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
<div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
<div class="tag flexflex">
<!-- <div class="tag-item admissions">招生官项目</div> -->
<div class="tag-item">无需面试</div>
<div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
<div class="tag-item" v-for="(item,index) in item.tags">{{ item }}</div>
</div>
<div class="operate flexcenter">
<div style="display: none;" class="circle flexcenter">
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div class="circle flexcenter">
<img class="img-dot" src="/img/dot-dot-dot.png" />
</div>
<div class="select flexflex">
<div class="top flex1 flexcenter">
<div class="title flexacenter">
<div class="dot"></div>
该项目已加入对比单，未加入项目管理
</div>
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
</div>
<div class="bottom"></div>
</div>
<div style="display: none;" class="already flexacenter">
<div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
<div class="tick-box flexcenter">
<img class="img-tick" src="/img/tick-icon.svg" />
</div>
已加入
</div>
<div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" class="circle flexcenter" @click="openMoreSelect('list',index)">
<img class="img-dot" src="/img/dot-dot-dot.png" />
</div>
<div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick('list',item,index)">
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll('list')"></div>
<div class="select flexflex" :class="{'show': item.moreState}">
<div class="top flex1 flexcenter">
<div class="title flexacenter">
<div class="dot"></div>
{{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
</div>
<div class="btn flexcenter" @click="handleClick('list',item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
</div>
<div class="bottom"></div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="base flexcenter">
<div class="left flexacenter">
<div class="text flex1">搜索项目</div>
<img class="img" src="/img/search-black-icon.svg" />
</div>
<div class="rigth flexacenter">
<img class="img" src="/img/contrast-icon.png" />
<div class="text">项目对比</div>
<div class="number">16</div>
</div>
<base-bottom ref="baseRef"></base-bottom>
<div class="my-project">
dfgfdgdfgdfgfd
</div>
</div>
<script>
const { createApp, ref, onMounted } = Vue
const { createApp, ref, onMounted, nextTick, onUnmounted } = Vue
const projectIndex = createApp({
setup() {
let dataListRef = ref(null)
onMounted(() => {
console.log(`the component is now mounted.`)
window.addEventListener("scroll", handleScroll)
listMasonryInstance = new Masonry(dataListRef.value, {
itemSelector: ".data-item",
gutter: 20,
})
init()
})
let user = ref({})
let university = ref([])
let discipline = ref([])
let contrastcount = ref({})
let encodekey = ref("")
// 初始化
const init = () => {
$ajaxget("/api/project.home/basicData").then(result => {
const data = result.data || {}
user.value = data.user
university.value = data.university
discipline.value = data.discipline
contrastcount.value = data.contrastcount
encodekey.value = data.encodekey
getFate()
getAdmission()
getProjectData()
})
}
// 今日缘分项目
let fateProject = ref([])
const getFate = () => {
$ajaxget("/api/project.home/todayFateProject").then(res => {
if (res.code != 200) return
const data = res.data || []
data.forEach(element => {
element["random"] = randomString(6)
})
fateProject.value = data
})
}
let admissionList = ref([])
let admissionTotalPage = ref(0) // 总页数
// 获取 招生官项目
const getAdmission = () => {
$ajaxget("/api/project.lists", {
limit: 20,
page: 1,
admissionsproject: 1,
}).then(res => {
if (res.code != 200) return
const data = res.data
const list = data.data || []
const targetList = (list || []).map(element => ({
...element,
random: randomString(6),
}))
const chunkArray = (array, size) => {
const result = []
for (let i = 0; i < array.length; i += size) {
result.push(array.slice(i, i + size))
}
return result
}
const groupedAdmissionList = chunkArray(targetList, 4)
admissionList.value = groupedAdmissionList
admissionTotalPage.value = groupedAdmissionList.length
})
}
let admissionPage = ref(1)
let recruitListRef = ref(null)
// 点击切换 招生官 轮播图 滚动
const cutAdmissionPage = type => {
if (type == "left") {
if (admissionPage.value > 1) admissionPage.value--
} else {
if (admissionPage.value < admissionTotalPage.value) admissionPage.value++
}
recruitListRef.value.scrollTo({
left: 1140 * (admissionPage.value - 1),
behavior: "smooth",
})
}
// 计算
const reversedMessage = type => {
if (type == "left") {
if (admissionPage.value == 1) return "/img/arrows-triangle-gray.svg"
else return "/img/arrows-triangle-blue.png"
} else {
if (admissionPage.value == admissionTotalPage.value) return "/img/arrows-triangle-gray.svg"
else return "/img/arrows-triangle-blue.png"
}
}
let projectList = ref([])
let projectPage = 1
// 获取项目数据
const getProjectData = () => {
if (projectPage == 0) return
$ajaxget("/api/project.lists", {
limit: 20,
page: projectPage,
}).then(res => {
if (res.code != 200) return
const data = res.data
const date = new Date()
const month = date.getMonth() + 1
const year = date.getFullYear()
let list = data.data || []
list = list.map(element => ({
...element,
random: randomString(6),
semesterState: month > element.semester.month && year + 1 <= element.semester.year,
tuition_fee_text: formatNumberWithSpaces(element.tuition_fee),
}))
projectList.value = projectList.value.concat(list)
projectPage = data.count > data.limit * data.page ? projectPage + 1 : 0
nextTick(() => {
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
})
})
}
//瀑布实例
let listMasonryInstance = null
const imageFallLoaded = () => {
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
}
const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
const scrollTop = window.pageYOffset
if (scrollTop + clientHeight >= scrollHeight) {
getProjectData()
}
}
const baseRef = ref(null)
// 点击事件
const handleClick = (type, item, index, i) => {
const random = item.random
if (item.status == 1) return
$ajax("/api/project.contrast/add", {
projectid: item.id,
}).then(res => {
baseRef.value.calculate(random)
if (type == "fate") fateProject.value[index]["state"] = 1
if (type == "admission") {
admissionList.value[index][i]["contraststatus"] = {
status: 1,
ismanage: 1,
}
admissionList.value[index][i]["moreState"] = false
}
if (type == "list") {
projectList.value[index]["contraststatus"] = {
status: 1,
ismanage: 1,
}
projectList.value[index]["moreState"] = false
}
})
}
const openMoreSelect = (type, index, i) => {
if (type == "admission") {
admissionList.value[index][i]["moreState"] = true
}
if (type == "list") {
console.log(222)
projectList.value[index]["moreState"] = true
}
}
// 关闭所有 状态 选择 弹出框
const closeMoreSelectAll = type => {
if (type == "admission") {
admissionList.value.forEach(element => {
element.forEach(ele => {
ele["moreState"] = false
})
})
}
if (type == "list") {
projectList.value.forEach(element => {
element["moreState"] = false
})
}
}
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll)
})
return {
user,
university,
discipline,
contrastcount,
encodekey,
fateProject,
getFate,
admissionList,
admissionPage,
admissionTotalPage,
cutAdmissionPage,
recruitListRef,
reversedMessage,
projectList,
dataListRef,
imageFallLoaded,
handleClick,
openMoreSelect,
closeMoreSelectAll,
baseRef,
}
},
})
projectIndex.component("base-bottom", base)
projectIndex.mount("#app")
</script>
</body>

BIN
img/arrows-triangle-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
img/group-QRCode.svg Normal file
View File

File diff suppressed because one or more lines are too long

0
img/arrows-circle-gray.svg → img/tick-circle-gray.svg
View File

60
js/base.js Normal file
View File

@ -0,0 +1,60 @@
const base = {
template: `
<div class="red-dot" v-if="hideIcon" :style="{top: top + 'px',left: left + 'px'}"></div>
<div class="base flexcenter">
<div class="left flexacenter">
<div class="text flex1">搜索项目</div>
<img class="img" src="/img/search-black-icon.svg" />
</div>
<div class="rigth flexacenter">
<img class="img" src="/img/contrast-icon.png" />
<div class="text">项目对比</div>
<div class="number">16</div>
</div>
</div>`,
data() {
return {
hideIcon: false,
top: 0,
left: 0,
}
},
methods: {
customMethod() {
console.log("Custom method called")
},
// 计算按钮位置
calculate(random) {
const dom = document.querySelector(".add" + random)
const rect = dom.getBoundingClientRect()
const top = rect.top + rect.height / 2 - 5
const left = rect.left + rect.width / 2 - 5
this.top = top
this.left = left
this.hideIcon = true
setTimeout(() => {
const dom = document.querySelector(".base .number")
const rect = dom.getBoundingClientRect()
const top = rect.top + rect.height / 2 - 5
const left = rect.left + rect.width / 2 - 5
this.top = top
this.left = left
}, 10)
setTimeout(() => {
this.top = null
this.left = null
this.hideIcon = false
}, 330)
return
const button = document.querySelector(".button")
const container = document.querySelector(".container")
const containerWidth = container.offsetWidth
const buttonWidth = button.offsetWidth
const buttonLeft = (containerWidth - buttonWidth) / 2
button.style.left = buttonLeft + "px"
},
},
}

81
js/common.js Normal file
View File

@ -0,0 +1,81 @@
const baseURL = "https://offer.gter.net"
if (["localhost", "127.0.0.1"].includes(location.hostname)) {
axios.defaults.headers = {
"Authorization": "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4",
}
}
function $ajax(url) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}
url = url.indexOf("https://") > -1 ? url : baseURL + url
data["authorization"] = "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4"
return new Promise(function (resolve, reject) {
console.log(axios)
axios
.post(url, data, {
emulateJSON: true,
withCredentials: true,
})
.then(function (res) {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data
if (data.code == 401) reject()
resolve(data)
})
.catch(err => {
if (err.response.status == 401)
showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, {
cover: true,
})
})
})
}
function $ajaxget(url, data) {
url = url.indexOf("https://") > -1 ? url : baseURL + url
url += objectToQueryString(data)
return new Promise(function (resolve, reject) {
axios
.get(
url,
{},
{
emulateJSON: true,
withCredentials: true,
}
)
.then(function (res) {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data
if (data.code == 401) reject()
resolve(data)
})
.catch(error => {
reject(error)
})
})
}
function randomString(n) {
let str = "abcdefghijklmnopqrstuvwxyz9876543210"
let tmp = "",
i = 0,
l = str.length
for (i = 0; i < n; i++) {
tmp += str.charAt(Math.floor(Math.random() * l))
}
return tmp
}
function formatNumberWithSpaces(number) {
if (typeof number != "string") number = ""
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
// 将一个JavaScript对象转换为路由参数的形式将键值对转换为key=value的形式
function objectToQueryString(obj = {}) {
const queryString = Object.keys(obj)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]))
.join("&")
return queryString ? "?" + queryString : ""
}