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 2025-01-06 17:19:45 +08:00
parent aee62515bb
commit 73d2ff595d
5 changed files with 351 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
css/index.css
View File

@ -190,7 +190,7 @@
background-color: #ffffff;
border-radius: 12px;
margin-bottom: 20px;
padding: 31px 37px 10px;
padding: 31px 30px 30px;
}
.fate .title {
justify-content: space-between;
@ -198,7 +198,7 @@
font-weight: 650;
font-size: 18px;
color: #000000;
margin-bottom: 6px;
margin-bottom: 18px;
}
.fate .title .btn {
font-weight: 400;
@ -306,6 +306,120 @@
width: 10px;
height: 8px;
}
.fate .content {
background-color: #fbfbfb;
border: 1px solid #f2f2f2;
height: 258px;
overflow: hidden;
border-radius: 12px;
position: relative;
}
.fate .content .item {
font-size: 14px;
}
.fate .content .item.top {
height: auto;
background-color: #f2f2f2;
border-radius: 12px 12px 0 0;
}
.fate .content .item.top .thead {
flex-direction: column;
justify-content: center;
line-height: normal;
position: relative;
}
.fate .content .item.top .thead .school {
color: #333333;
margin-bottom: 7px;
padding: 0 10px;
}
.fate .content .item.top .thead .school .img {
width: 16px;
height: 18px;
margin-right: 6px;
}
.fate .content .item.top .thead .name {
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #000000;
padding: 0 10px;
}
.fate .content .item.top .thead .vs {
width: 38px;
height: 38px;
position: absolute;
top: 50%;
right: -19px;
z-index: 1;
transform: translateY(-50%);
}
.fate .content .item:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.fate .content .item .head {
width: 98px;
color: #7f7f7f;
padding-left: 20px;
}
.fate .content .item .thead {
border-left: 1px solid #ebebeb;
text-align: center;
padding: 12px 0;
}
.fate .content .item .thead .mode1 {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 16px;
color: #000000;
}
.fate .content .item .thead .mode2 {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
color: #333333;
}
.fate .content .item .thead .mode3 {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 16px;
}
.fate .content .item .thead .mode3 .unit {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #555555;
margin-left: 5px;
font-size: 13px;
}
.fate .content .btn {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 53px;
background-color: #7b8cd3;
border-radius: 0 0 12px 12px;
font-size: 14px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #ffffff;
text-align: center;
cursor: pointer;
}
.fate .content .btn::after {
content: "";
position: absolute;
top: -32px;
left: 0;
width: 100%;
height: 32px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.094), #fbfbfb);
}
.fate .content .btn .icon {
width: 16px;
height: 16px;
margin-left: 8px;
}
.recruit {
width: 100%;
border: 1px solid #ebebeb;

134
css/index.less
View File

@ -223,7 +223,7 @@
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
margin-bottom: 20px;
padding: 31px 37px 10px;
padding: 31px 30px 30px;
.title {
justify-content: space-between;
@ -231,7 +231,7 @@
font-weight: 650;
font-size: 18px;
color: #000000;
margin-bottom: 6px;
margin-bottom: 18px;
.btn {
font-weight: 400;
@ -344,6 +344,136 @@
}
}
}
.content {
background-color: rgba(251, 251, 251, 1);
border: 1px solid rgba(242, 242, 242, 1);
height: 258px;
overflow: hidden;
border-radius: 12px;
.item {
font-size: 14px;
&.top {
height: auto;
background-color: rgba(242, 242, 242, 1);
border-radius: 12px 12px 0 0;
.thead {
flex-direction: column;
justify-content: center;
line-height: normal;
position: relative;
.school {
.img {
width: 16px;
height: 18px;
margin-right: 6px;
}
color: #333333;
margin-bottom: 7px;
padding: 0 10px;
}
.name {
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #000000;
padding: 0 10px;
}
.vs {
width: 38px;
height: 38px;
position: absolute;
top: 50%;
right: -19px;
z-index: 1;
transform: translateY(-50%);
}
}
}
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.head {
width: 98px;
color: #7f7f7f;
padding-left: 20px;
}
.thead {
border-left: 1px solid #ebebeb;
text-align: center;
padding: 12px 0;
.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;
color: #333333;
}
.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;
}
}
}
}
position: relative;
.btn {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 53px;
background-color: rgba(123, 140, 211, 1);
border-radius: 0 0 12px 12px;
font-size: 14px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #ffffff;
text-align: center;
cursor: pointer;
&::after {
content: "";
position: absolute;
top: -32px;
left: 0;
width: 100%;
height: 32px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.094), rgba(251, 251, 251, 1)); // 从左到右的渐变
}
.icon {
width: 16px;
height: 16px;
margin-left: 8px;
}
}
}
}
.recruit {

101
html/index.html
View File

@ -21,7 +21,7 @@
<body>
<div id="app" class="main" v-cloak>
<img class="index-icon" src="/img/index-icon.png" />
<div style="display: flex;" class="header-box flexacenter">
<div style="display: flex" class="header-box flexacenter">
<img class="bj" src="/img/header-bj.svg" />
<div class="search flexacenter">
<div class="input flex1">搜索项目</div>
@ -40,7 +40,7 @@
</div>
<!-- 筛选 -->
<div style="display: flex;" class="screen flexflex">
<div v-if="false" style="display: flex" class="screen flexflex">
<div class="block school">
<div class="title flexacenter">
<div class="icon flexcenter">
@ -74,7 +74,100 @@
换一批
</div>
</div>
<div class="list flexflex">
<div class="content">
<div class="item top flexflex">
<div class="head flexacenter">项目</div>
<div class="thead flex1 flexacenter">
<div class="school flexcenter">
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2" />
香港大学
</div>
<div class="name">理学硕士（电脑科学）</div>
<img class="vs" src="/img/vs.png" />
</div>
<div class="thead flex1 flexacenter">
<div class="school flexcenter">
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2" />
香港大学
</div>
<div class="name">理学硕士（电脑科学）</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">专业排名</div>
<div class="thead flex1">
<div class="mode1 flexcenter">151-200</div>
</div>
<div class="thead flex1">
<div class="mode1 flexcenter">151-200</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">学费</div>
<div class="thead flex1">
<div class="mode3 flexcenter">
141,00
<div class="unit">HK$</div>
</div>
</div>
<div class="thead flex1">
<div class="mode3 flexcenter">
141,00
<div class="unit">HK$</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">入学保证金</div>
<div class="thead flex1">
<div class="mode3 flexcenter">
141,00
<div class="unit">HK$</div>
</div>
</div>
<div class="thead flex1">
<div class="mode3 flexcenter">
141,00
<div class="unit">HK$</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">奖学金</div>
<div class="thead flex1">
<div class="mode2 flexcenter">均有</div>
</div>
<div class="thead flex1">
<div class="mode2 flexcenter">均有</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">一般学习时长</div>
<div class="thead flex1">
<div class="mode2 flexcenter">1.5年</div>
</div>
<div class="thead flex1">
<div class="mode2 flexcenter">-</div>
</div>
</div>
<div class="item flexflex">
<div class="head flexacenter">授课语言</div>
<div class="thead flex1">
<div class="mode2 flexcenter">英语</div>
</div>
<div class="thead flex1">
<div class="mode2 flexcenter">英语</div>
</div>
</div>
<a class="btn flexcenter" target="_blank" href="contrastDetails/kfvDjXw75ANEsHHMyNRBpiPy5cX1K9Z1uZH3tumpOrtQ5j038PGj5ToCP2M4ZmQ~">
项目对比
<img class="icon" src="/img/arrows-circle.svg" />
</a>
</div>
<div v-if="false" class="list flexflex">
<div class="item flexacenter" v-for="(item,index) in fateProject">
<div class="left">
<div class="name one-line-display">{{ item.name_zh }}</div>
@ -216,7 +309,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')">

6
img/arrows-circle.svg Normal file
View 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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -988 -885 )">
<path d="M 13.1979166666667 8.46875 C 13.3229166666667 8.34375 13.3854166666667 8.1875 13.3854166666667 8 C 13.3854166666667 7.8125 13.3229166666667 7.65625 13.1979166666667 7.53125 L 12.25 6.58333333333333 L 8.47916666666667 2.8125 C 8.35416666666667 2.6875 8.19791666666667 2.625 8.01041666666667 2.625 C 7.82291666666667 2.625 7.66666666666667 2.6875 7.54166666666667 2.8125 L 6.59375 3.76041666666667 C 6.46875 3.88541666666667 6.40625 4.04166666666667 6.40625 4.22916666666667 C 6.40625 4.41666666666667 6.46875 4.57291666666667 6.59375 4.69791666666667 L 8.5625 6.66666666666667 L 3.33333333333333 6.66666666666667 C 3.15277777777778 6.66666666666667 2.99652777777778 6.73263888888889 2.86458333333333 6.86458333333333 C 2.73263888888889 6.99652777777778 2.66666666666667 7.15277777777778 2.66666666666667 7.33333333333333 L 2.66666666666667 8.66666666666667 C 2.66666666666667 8.84722222222222 2.73263888888889 9.00347222222222 2.86458333333333 9.13541666666667 C 2.99652777777778 9.26736111111111 3.15277777777778 9.33333333333333 3.33333333333333 9.33333333333333 L 8.5625 9.33333333333333 L 6.59375 11.3020833333333 C 6.46180555555556 11.4340277777778 6.39583333333333 11.5902777777778 6.39583333333333 11.7708333333333 C 6.39583333333333 11.9513888888889 6.46180555555556 12.1076388888889 6.59375 12.2395833333333 L 7.54166666666667 13.1875 C 7.66666666666667 13.3125 7.82291666666667 13.375 8.01041666666667 13.375 C 8.19791666666667 13.375 8.35416666666667 13.3125 8.47916666666667 13.1875 L 12.25 9.41666666666667 L 13.1979166666667 8.46875 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 988 885 )" />
</g>
</svg>

BIN
img/header-bj.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 64 KiB