no message
This commit is contained in:
A1300399510
parent
b3db1f8bb2
commit
7897949b84
@ -1,68 +1,76 @@
|
||||
* {
|
||||
html {
|
||||
background-color: #EEF2F5;
|
||||
}
|
||||
.project {
|
||||
width: 394px;
|
||||
margin: 50px auto;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.project * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
text-decoration: auto;
|
||||
word-break: break-word;
|
||||
}
|
||||
.one-line-display {
|
||||
.project .one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.flexflex {
|
||||
.project .flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
.project .flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
.project .flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
.project .flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
.project .flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
.project .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 {
|
||||
.project .project-list .project-item {
|
||||
width: 460px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f2;
|
||||
padding: 20px 16px 10px;
|
||||
position: relative;
|
||||
}
|
||||
.project .project-list .item .school {
|
||||
.project .project-list .project-item:not(:last-of-type) {
|
||||
border-bottom: 1px dotted rgba(215, 215, 215, 0.69);
|
||||
}
|
||||
.project .project-list .project-item .project-school {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 16px;
|
||||
}
|
||||
.project .project-list .item .school .icon {
|
||||
.project .project-list .project-item .project-school .project-school-icon {
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.project .project-list .item .name {
|
||||
.project .project-list .project-item .project-name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
@ -71,7 +79,7 @@
|
||||
margin-bottom: 6px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
.project .project-list .item .english {
|
||||
.project .project-list .project-item .project-english {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@ -79,23 +87,23 @@
|
||||
margin-bottom: 10px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.project .project-list .item .introduce {
|
||||
.project .project-list .project-item .project-introduce {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 9px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.project .project-list .item .introduce .quantity {
|
||||
.project .project-list .project-item .project-introduce .project-quantity {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.project .project-list .item .introduce .line {
|
||||
.project .project-list .project-item .project-introduce .project-line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 7px;
|
||||
}
|
||||
.project .project-list .item .word {
|
||||
.project .project-list .project-item .project-word {
|
||||
background-color: #f9f8f8;
|
||||
border-radius: 5px;
|
||||
padding: 9px 10px;
|
||||
@ -103,7 +111,7 @@
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.project .project-list .item .word .img {
|
||||
.project .project-list .project-item .project-word .project-img {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
}
|
||||
@ -119,16 +127,17 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.project .project-btn .img {
|
||||
.project .project-btn .project-btn-img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.project .tag {
|
||||
.project .project-tag {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.project .tag .tag-item {
|
||||
.project .project-tag .project-tag-item {
|
||||
width: fit-content;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
@ -143,17 +152,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.project .tag .tag-item.gray {
|
||||
.project .project-tag .project-tag-item.project-gray {
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.project .tag .tag-item.semester {
|
||||
.project .project-tag .project-tag-item.project-semester {
|
||||
color: #ffffff;
|
||||
background-color: #f95d5d;
|
||||
border: none;
|
||||
}
|
||||
.project .tag .tag-item.admissions {
|
||||
.project .project-tag .project-tag-item.project-admissions {
|
||||
background-color: #73d1e5;
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
||||
@ -1,76 +1,91 @@
|
||||
* {
|
||||
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;
|
||||
html {
|
||||
background-color: #EEF2F5;
|
||||
}
|
||||
|
||||
.project {
|
||||
width: 394px;
|
||||
margin: 50px auto;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
padding-bottom: 14px;
|
||||
|
||||
* {
|
||||
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-list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
.item {
|
||||
|
||||
.project-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 {
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted rgba(215, 215, 215, 0.69);
|
||||
}
|
||||
|
||||
.project-school {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
// margin-bottom: 14px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 16px;
|
||||
.icon {
|
||||
|
||||
.project-school-icon {
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
|
||||
.project-name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
@ -80,7 +95,7 @@
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.english {
|
||||
.project-english {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@ -88,23 +103,27 @@
|
||||
margin-bottom: 10px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.introduce {
|
||||
|
||||
.project-introduce {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 9px;
|
||||
flex-wrap: wrap;
|
||||
.quantity {
|
||||
|
||||
.project-quantity {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.line {
|
||||
|
||||
.project-line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 7px;
|
||||
}
|
||||
}
|
||||
.word {
|
||||
|
||||
.project-word {
|
||||
background-color: rgba(249, 248, 248, 1);
|
||||
border-radius: 5px;
|
||||
padding: 9px 10px;
|
||||
@ -112,7 +131,7 @@
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.img {
|
||||
.project-img {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
}
|
||||
@ -132,17 +151,19 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
|
||||
.img {
|
||||
.project-btn-img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
.project-tag {
|
||||
flex-wrap: wrap;
|
||||
.tag-item {
|
||||
|
||||
.project-tag-item {
|
||||
width: fit-content;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
@ -157,23 +178,24 @@
|
||||
// flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.gray {
|
||||
|
||||
&.project-gray {
|
||||
background-color: rgba(51, 51, 51, 1);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.semester {
|
||||
&.project-semester {
|
||||
color: #ffffff;
|
||||
background-color: rgba(249, 93, 93, 1);
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.admissions {
|
||||
&.project-admissions {
|
||||
background-color: rgba(115, 209, 229, 1);
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,40 +10,40 @@
|
||||
<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" />
|
||||
<a class="project-item" v-for="(item,index) in showList" target="_blank" :href="'/details/' + item.uniqid">
|
||||
<div class="project-school flexacenter">
|
||||
<img class="project-school-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">
|
||||
<h2 class="project-name flexflex one-line-display">{{ item.name_zh }}</h2>
|
||||
<h3 class="project-english one-line-display">{{ item.name_en }}</h3>
|
||||
<div class="project-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 class="project-quantity">{{ item.rank }}</div>
|
||||
</div>
|
||||
<div class="flexacenter" v-if="item.tuition_fee_text">
|
||||
<div class="line">|</div>
|
||||
<div class="project-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" />
|
||||
<div class="project-word one-line-display" v-if="item.distinctive">
|
||||
<img class="project-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 class="project-tag flexflex one-line-display">
|
||||
<div class="project-tag-item project-admissions" v-if="item.admissionsproject">招生官项目</div>
|
||||
<div class="project-tag-item project-gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
|
||||
<div class="project-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" />
|
||||
<img class="project-btn-img" src="/img/side/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
tuition_fee: "141000",
|
||||
department: "科技学院",
|
||||
intake: "2024-09",
|
||||
tags: false,
|
||||
tags: ["无需考试"],
|
||||
year: 2024,
|
||||
semester: {
|
||||
year: 2024,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user