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-12-20 17:16:57 +08:00
parent 9d1b2f6f32
commit b3db1f8bb2
5 changed files with 508 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
css/indexSide.css Normal file
View File

@ -0,0 +1,160 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: auto;
word-break: break-word;
}
.one-line-display {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
}
.project {
width: 394px;
margin: 50px auto;
}
.project .project-list {
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4px;
}
.project .project-list .item {
width: 460px;
width: 100%;
background-color: #ffffff;
border: 1px solid #f2f2f2;
padding: 20px 16px 10px;
position: relative;
}
.project .project-list .item .school {
font-size: 14px;
color: #333333;
position: absolute;
top: 20px;
right: 16px;
}
.project .project-list .item .school .icon {
height: 18px;
margin-right: 8px;
}
.project .project-list .item .name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-bottom: 6px;
padding-right: 80px;
}
.project .project-list .item .english {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
margin-bottom: 10px;
color: #7f7f7f;
}
.project .project-list .item .introduce {
color: #555555;
font-size: 14px;
margin-bottom: 9px;
flex-wrap: wrap;
}
.project .project-list .item .introduce .quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
margin-left: 8px;
}
.project .project-list .item .introduce .line {
color: #d7d7d7;
margin: 0 7px;
}
.project .project-list .item .word {
background-color: #f9f8f8;
border-radius: 5px;
padding: 9px 10px;
font-size: 14px;
color: #7f7f7f;
margin-bottom: 12px;
}
.project .project-list .item .word .img {
width: 15px;
height: 10px;
}
.project .project-btn {
width: 361px;
height: 40px;
line-height: 40px;
background-color: #333333;
border-radius: 141px;
font-size: 16px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.project .project-btn .img {
width: 18px;
height: 18px;
margin-left: 10px;
}
.project .tag {
flex-wrap: wrap;
}
.project .tag .tag-item {
width: fit-content;
height: 20px;
line-height: 20px;
background-color: #f9f8f8;
border: 1px solid #aaaaaa;
border-radius: 6px;
padding: 0 6px;
font-size: 12px;
color: #7f7f7f;
margin-right: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.project .tag .tag-item.gray {
background-color: #333333;
color: #ffffff;
border: none;
}
.project .tag .tag-item.semester {
color: #ffffff;
background-color: #f95d5d;
border: none;
}
.project .tag .tag-item.admissions {
background-color: #73d1e5;
border: none;
color: #fff;
}

179
css/indexSide.less Normal file
View File

@ -0,0 +1,179 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: auto;
word-break: break-word;
}
.one-line-display {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
}
.project {
width: 394px;
margin: 50px auto;
.project-list {
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4px;
.item {
width: 460px;
width: 100%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(242, 242, 242, 1);
// border-radius: 12px;
padding: 20px 16px 10px;
// margin-bottom: 19px;
position: relative;
.school {
font-size: 14px;
color: #333333;
// margin-bottom: 14px;
position: absolute;
top: 20px;
right: 16px;
.icon {
height: 18px;
margin-right: 8px;
}
}
.name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-bottom: 6px;
padding-right: 80px;
}
.english {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
margin-bottom: 10px;
color: #7f7f7f;
}
.introduce {
color: #555555;
font-size: 14px;
margin-bottom: 9px;
flex-wrap: wrap;
.quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
margin-left: 8px;
}
.line {
color: #d7d7d7;
margin: 0 7px;
}
}
.word {
background-color: rgba(249, 248, 248, 1);
border-radius: 5px;
padding: 9px 10px;
font-size: 14px;
color: #7f7f7f;
margin-bottom: 12px;
.img {
width: 15px;
height: 10px;
}
}
}
}
.project-btn {
width: 361px;
height: 40px;
line-height: 40px;
background-color: rgba(51, 51, 51, 1);
border-radius: 141px;
font-size: 16px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.img {
width: 18px;
height: 18px;
margin-left: 10px;
}
}
.tag {
flex-wrap: wrap;
.tag-item {
width: fit-content;
height: 20px;
line-height: 20px;
background-color: rgba(249, 248, 248, 1);
border: 1px solid rgba(170, 170, 170, 1);
border-radius: 6px;
padding: 0 6px;
font-size: 12px;
color: #7f7f7f;
margin-right: 10px;
margin-bottom: 10px;
// flex-wrap: wrap;
display: flex;
align-items: center;
&.gray {
background-color: rgba(51, 51, 51, 1);
color: #ffffff;
border: none;
}
&.semester {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
border: none;
}
&.admissions {
background-color: rgba(115, 209, 229, 1);
border: none;
color: #fff;
}
}
}
}

163
html/indexSide.html Normal file
View File

@ -0,0 +1,163 @@
<!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/indexSide.css" />
<script src="/js/vue.global.js"></script>
</head>
<body>
<div id="app" class="project">
<div class="project-list flexflex">
<a class="item" v-for="(item,index) in showList" target="_blank" :href="'/details/' + item.uniqid">
<div class="school flexacenter">
<img class="icon" :src="item.schoollogo" />
{{ item.schoolalias }}
</div>
<h2 class="name flexflex one-line-display">{{ item.name_zh }}</h2>
<h3 class="english one-line-display">{{ item.name_en }}</h3>
<div class="introduce flexacenter one-line-display">
{{ item.department }}
<div class="flexacenter" v-if="item.rank">
<div class="line">|</div>
专业排名
<div class="quantity">{{ item.rank }}</div>
</div>
<div class="flexacenter" v-if="item.tuition_fee_text">
<div class="line">|</div>
学费HK$ <div class="quantity">{{ item.tuition_fee_text }}</div>
</div>
</div>
<div class="word one-line-display" v-if="item.distinctive">
<img class="img" src="/img/quotation-mark.png" />
{{ item.distinctive }}
</div>
<div class="tag flexflex one-line-display">
<div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
<div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
<div class="tag-item" v-for="item in item.tags">{{ item }}</div>
</div>
</a>
</div>
<div class="project-btn">
more
<img class="img" src="/img/side/arrows-circle-white.svg" />
</div>
</div>
<script>
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, getCurrentInstance } = Vue
const projectIndex = createApp({
setup() {
let showList = ref([
{
tuition_fee_text: "281,000",
id: 662,
uniqid: "iOTOj88OnnDK",
departmentid: 0,
disciplineid: 1,
admissionsproject: 0,
distinctive: "一句话描述独特之处，一句话描述独特之处。",
name_en: "Master of Architecture (Design)",
name_zh: "建筑学硕士（设计）",
rank: null,
name_alias: null,
name_abbr: null,
schoolid: 2971,
schoolname: "香港珠海学院",
schoolalias: "港大",
schoollogo: "https://oss.x-php.com/school/J6BSwE6VfCFlAbsjc6IXB9eUbGqEtMQINq5bEogy25QhNzUxNg~~",
contraststatus: null,
tuition_fee: "135000",
department: "建筑学院",
intake: "2024-09",
tags: false,
year: 2024,
semester: {
year: 2025,
month: 9,
text: "25Fall",
},
rank: 52,
random: "d1gt1n",
semesterState: false,
},
{
tuition_fee_text: "141,000",
id: 607,
uniqid: "KLv9qPKvL9SL",
departmentid: 0,
disciplineid: 1,
admissionsproject: 0,
distinctive: "提供与技术和数字建筑相关的知识和管理技能",
name_en: "Master of Applied Science in Intelligent Construction and Building Information Modelling",
name_zh: "理学硕士（智能建筑及建筑信息建模）",
rank: null,
name_alias: null,
name_abbr: "MASCICBIMF",
schoolid: 315,
schoolname: "香港都会大学",
schoolalias: "都大",
schoollogo: "https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2",
contraststatus: {
projectid: 607,
status: 0,
ismanage: 1,
},
tuition_fee: "141000",
department: "科技学院",
intake: "2024-09",
tags: false,
year: 2024,
semester: {
year: 2024,
month: 9,
text: "24Fall",
},
rankk: 0,
random: "rqehuc",
semesterState: false,
},
{
tuition_fee_text: "141,000",
id: 626,
uniqid: "5SDqXCSjyDOb",
departmentid: 0,
disciplineid: 1,
admissionsproject: 0,
distinctive: "提供工程项目管理中智能建筑的全面理论背景知识",
name_en: "Master of Science in Intelligent Construction and Building Information Modelling",
name_zh: "理学硕士（智能建筑及建筑信息建模）",
rank: null,
name_alias: null,
name_abbr: "MSCICBIMF",
schoolid: 315,
schoolname: "香港都会大学",
schoolalias: "都大",
schoollogo: "https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2",
contraststatus: null,
tuition_fee: "141000",
department: "科技学院",
intake: "2024-09",
tags: false,
year: 2024,
semester: {
year: 2024,
month: 9,
text: "24Fall",
},
rankk: 0,
random: "gvjiwv",
semesterState: false,
},
])
return { showList }
},
})
projectIndex.mount("#app")
</script>
</body>
</html>

6
img/side/arrows-circle-white.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="18px" height="18px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1378 -1496 )">
<path d="M 7.875 15.0703125 C 8.078125 15.0703125 8.25390625 14.99609375 8.40234375 14.84765625 L 13.72265625 9.52734375 C 13.87109375 9.37890625 13.9453125 9.203125 13.9453125 9 C 13.9453125 8.796875 13.87109375 8.62109375 13.72265625 8.47265625 L 8.40234375 3.15234375 C 8.25390625 3.00390625 8.078125 2.9296875 7.875 2.9296875 C 7.671875 2.9296875 7.49609375 3.00390625 7.34765625 3.15234375 L 6.15234375 4.34765625 C 6.00390625 4.49609375 5.9296875 4.671875 5.9296875 4.875 C 5.9296875 5.078125 6.00390625 5.25390625 6.15234375 5.40234375 L 9.75 9 L 6.15234375 12.59765625 C 6.00390625 12.74609375 5.9296875 12.921875 5.9296875 13.125 C 5.9296875 13.328125 6.00390625 13.50390625 6.15234375 13.65234375 L 7.34765625 14.84765625 C 7.49609375 14.99609375 7.671875 15.0703125 7.875 15.0703125 Z M 16.79296875 4.482421875 C 17.59765625 5.861328125 18 7.3671875 18 9 C 18 10.6328125 17.59765625 12.138671875 16.79296875 13.517578125 C 15.98828125 14.896484375 14.896484375 15.98828125 13.517578125 16.79296875 C 12.138671875 17.59765625 10.6328125 18 9 18 C 7.3671875 18 5.861328125 17.59765625 4.482421875 16.79296875 C 3.103515625 15.98828125 2.01171875 14.896484375 1.20703125 13.517578125 C 0.40234375 12.138671875 0 10.6328125 0 9 C 0 7.3671875 0.40234375 5.861328125 1.20703125 4.482421875 C 2.01171875 3.103515625 3.103515625 2.01171875 4.482421875 1.20703125 C 5.861328125 0.402343749999998 7.3671875 0 9 0 C 10.6328125 0 12.138671875 0.402343749999998 13.517578125 1.20703125 C 14.896484375 2.01171875 15.98828125 3.103515625 16.79296875 4.482421875 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1378 1496 )" />
</g>
</svg>

BIN
img/side/quotation-mark..png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 995 B