no message
This commit is contained in:
A1300399510
parent
9d1b2f6f32
commit
b3db1f8bb2
160
css/indexSide.css
Normal file
160
css/indexSide.css
Normal 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
179
css/indexSide.less
Normal 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
163
html/indexSide.html
Normal 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
6
img/side/arrows-circle-white.svg
Normal 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
BIN
img/side/quotation-mark..png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 995 B |
Loading…
Reference in New Issue
Block a user