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:
DESKTOP-RQ919RC\Pc 2025-03-13 14:49:20 +08:00
parent 6d78de133b
commit 6e8d3bcad5
8 changed files with 468 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/details.css
View File

@ -344,7 +344,7 @@
position: relative;
}
.content .side .item.pitch {
width: calc(100% + 1px);
width: calc(100% + 2px);
background-color: #fbfbfb;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;

2
css/details.less
View File

@ -398,7 +398,7 @@
border-radius: 12px 0 0 0;
overflow: hidden;
}
width: calc(100% + 1px);
width: calc(100% + 2px);
background-color: rgba(251, 251, 251, 1);
border-top: 1px solid rgba(235, 235, 235, 1);
border-bottom: 1px solid rgba(235, 235, 235, 1);

169
css/projectList.css Normal file
View File

@ -0,0 +1,169 @@
.boxbox {
width: 1200px;
background-color: #fbfbfb;
border-radius: 12px;
position: relative;
margin-bottom: 20px;
}
.boxbox::after {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 66px;
background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
border-radius: 18px;
z-index: -1;
}
.boxbox .tab {
height: 60px;
font-size: 14px;
color: #7f7f7f;
border-bottom: 1px dotted #ebebeb;
padding-left: 24px;
}
.boxbox .tab a {
color: #7f7f7f;
}
.boxbox .tab a:hover {
text-decoration: underline;
color: #000000;
}
.boxbox .tab .img {
width: 6px;
height: 10px;
margin: 0 10px;
}
.boxbox .tab .current {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
}
.boxbox .details {
padding: 0 0 0 60px;
}
.boxbox .details .logo {
width: 120px;
height: 120px;
position: relative;
z-index: 1;
margin-top: 36px;
margin-right: 39px;
margin-bottom: 36px;
display: inline-flex;
}
.boxbox .details .right {
padding-top: 31px;
padding-bottom: 47px;
padding-right: 5px;
}
.boxbox .details .right .name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 28px;
color: #000000;
margin-bottom: 21px;
position: relative;
z-index: 1;
}
.boxbox .details .right .title {
font-size: 14px;
color: #333333;
margin-bottom: 20px;
}
.boxbox .details .right .list .item {
line-height: 22px;
}
.boxbox .details .right .list .item:not(:last-of-type) {
margin-bottom: 12px;
}
.boxbox .details .right .list .item .organ {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
background-color: #f7a602;
border-radius: 6px;
padding: 0 9.5px;
margin-right: 18px;
}
.boxbox .details .right .list .item .text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
}
.screen-box {
width: 1200px;
height: 90px;
background: inherit;
background-color: #fbfbfb;
border: none;
border-radius: 11px;
padding-left: 34px;
}
.screen-box .title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-right: 20px;
}
.screen-box .title .icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
.screen-box .item {
margin-top: 15px;
padding: 10px;
border-radius: 15px;
}
.screen-box .item.show {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.17254902);
background-color: #f2f2f2;
height: 526px;
}
.screen-box .item .input {
height: 40px;
background-color: #ffffff;
border: 1px solid #d7d7d7;
border-radius: 72px;
cursor: pointer;
font-size: 14px;
color: #AAAAAA;
padding: 0 17px;
}
.screen-box .item .input .icon {
width: 10px;
height: 6px;
}
.screen-box .item.organ .input {
width: 240px;
}
.screen-box .item.major .input {
width: 355px;
}
.screen-box .item.year .input {
width: 240px;
}
.screen-box .btn {
width: 100px;
height: 40px;
background-color: #6fc16d;
border-radius: 20px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
margin-top: 25px;
margin-left: 20px;
cursor: pointer;
}

209
css/projectList.less Normal file
View File

@ -0,0 +1,209 @@
.boxbox {
width: 1200px;
background-color: rgba(251, 251, 251, 1);
border-radius: 12px;
position: relative;
margin-bottom: 20px;
&::after {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 66px;
background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%);
border-radius: 18px;
z-index: -1;
}
.tab {
height: 60px;
font-size: 14px;
color: #7f7f7f;
border-bottom: 1px dotted rgb(235, 235, 235);
padding-left: 24px;
a {
color: #7f7f7f;
&:hover {
text-decoration: underline;
color: #000000;
}
}
.img {
width: 6px;
height: 10px;
margin: 0 10px;
}
.current {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
}
}
.details {
padding: 0 0 0 60px;
.logo {
width: 120px;
height: 120px;
position: relative;
z-index: 1;
// padding-right: 10px;
// padding-bottom: 7px;
margin-top: 36px;
margin-right: 39px;
margin-bottom: 36px;
display: inline-flex;
}
.right {
padding-top: 31px;
padding-bottom: 47px;
padding-right: 5px;
.name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 28px;
color: #000000;
margin-bottom: 21px;
position: relative;
z-index: 1;
}
.title {
font-size: 14px;
color: #333333;
margin-bottom: 20px;
}
.list {
.item {
line-height: 22px;
&:not(:last-of-type) {
margin-bottom: 12px;
}
.organ {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
background-color: rgba(247, 166, 2, 1);
border-radius: 6px;
padding: 0 9.5px;
margin-right: 18px;
}
.text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
}
}
}
}
}
}
.screen-box {
width: 1200px;
height: 90px;
background: inherit;
background-color: rgba(251, 251, 251, 1);
border: none;
border-radius: 11px;
padding-left: 34px;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-right: 20px;
.icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
.item {
margin-top: 15px;
padding: 10px;
border-radius: 15px;
&.show {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.172549019607843);
background-color: rgba(242, 242, 242, 1);
height: 526px;
}
.input {
height: 40px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 72px;
cursor: pointer;
font-size: 14px;
color: #AAAAAA;
padding: 0 17px;
.icon {
width: 10px;
height: 6px;
}
}
&.organ {
.input {
width: 240px;
}
}
&.major {
.input {
width: 355px;
}
}
&.year {
.input {
width: 240px;
}
}
}
.btn {
width: 100px;
height: 40px;
background-color: rgba(111, 193, 109, 1);
border-radius: 20px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
margin-top: 25px;
margin-left: 20px;
cursor: pointer;
}
}

82
html/projectList.html Normal file
View File

@ -0,0 +1,82 @@
<!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/projectList.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>
</head>
<body>
<div class="main" id="app">
<img class="index-icon" src="/img/index-icon.png" />
<div class="boxbox">
<div class="tab flexacenter">
首页
<img class="img" src="/img/arrows.svg" />
全部榜单
<img class="img" src="/img/arrows.svg" />
<div class="current">QS世界综合排名（2025）</div>
</div>
<div class="details flexflex">
<img class="logo" src="/img/world-icon.png" />
<div class="right flex1">
<div class="name">世界排行榜</div>
<div class="title">了解评榜机构：</div>
<div class="list">
<div class="item flexacenter">
<div class="organ">QS</div>
<div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
</div>
<div class="item flexacenter">
<div class="organ">QS</div>
<div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
</div>
<div class="item flexacenter">
<div class="organ">QS</div>
<div class="text">由英国的Quacquarelli Symonds公司编制，侧重于学术声誉、雇主声誉、师生比例等指标</div>
</div>
</div>
</div>
</div>
</div>
<div class="screen-box flexflex">
<div class="title flexacenter">
<img class="icon" src="/img/screen-icon.png">
筛选榜单
</div>
<div class="item organ">
<div class="input flexacenter">
<div class="text flex1">请选择机构</div>
<img class="icon" src="/img/arrows-black.svg">
</div>
</div>
<div class="item major">
<div class="input flexacenter">
<div class="text flex1">请选择专业</div>
<img class="icon" src="/img/arrows-black.svg">
</div>
</div>
<div class="item year">
<div class="input flexacenter">
<div class="text flex1">请选择年份</div>
<img class="icon" src="/img/arrows-black.svg">
</div>
</div>
<div class="btn flexcenter">查看 </div>
</div>
</body>
</html>

6
img/arrows-black.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="10px" height="6px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -729 -622 )">
<path d="M 9.8997995991984 0.618556701030928 C 9.96659986639947 0.687285223367696 10 0.766323024054982 10 0.855670103092784 C 10 0.945017182130583 9.96659986639947 1.02405498281787 9.8997995991984 1.09278350515464 L 5.23046092184369 5.89690721649484 C 5.16366065464262 5.96563573883161 5.08684034736139 6 5 6 C 4.91315965263861 6 4.83633934535738 5.96563573883161 4.76953907815631 5.89690721649484 L 0.100200400801603 1.09278350515464 C 0.0334001336005345 1.02405498281787 0 0.945017182130583 0 0.855670103092784 C 0 0.766323024054982 0.0334001336005345 0.687285223367696 0.100200400801603 0.618556701030928 L 0.601202404809619 0.103092783505155 C 0.668002672010688 0.0343642611683841 0.744822979291917 0 0.831663326653307 0 C 0.918503674014696 0 0.995323981295925 0.0343642611683841 1.06212424849699 0.103092783505155 L 5 4.15463917525773 L 8.93787575150301 0.103092783505155 C 9.00467601870407 0.0343642611683841 9.0814963259853 0 9.16833667334669 0 C 9.25517702070808 0 9.33199732798931 0.0343642611683841 9.39879759519038 0.103092783505155 L 9.8997995991984 0.618556701030928 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 729 622 )" />
</g>
</svg>

BIN
img/screen-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 852 B

BIN
img/world-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB