294 lines
15 KiB
HTML
294 lines
15 KiB
HTML
<!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/index.css" />
|
|
<script src="/js/vue.global.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="main">
|
|
<img class="index-icon" src="/img/index-icon.png" />
|
|
<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>
|
|
<img class="search-icon" src="/img/search-icon.svg" />
|
|
</div>
|
|
<div class="btn flexacenter">
|
|
<div class="item flexcenter">
|
|
<img class="icon" src="/img/contrast-icon.png" />
|
|
项目对比
|
|
</div>
|
|
<div class="item flexcenter">
|
|
<img class="icon" src="/img/contrast-icon.png" />
|
|
项目对比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选 -->
|
|
<div style="display: flex;" class="screen flexflex">
|
|
<div class="block school">
|
|
<div class="title flexacenter">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="/img/school-icon.png" />
|
|
</div>
|
|
按学校查看
|
|
</div>
|
|
<div class="list">
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
</div>
|
|
</div>
|
|
<div class="block subject flex1">
|
|
<div class="title flexacenter">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="/img/school-icon.png" />
|
|
</div>
|
|
按学科查看
|
|
</div>
|
|
<div class="list flexflex">
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
<div class="item flexcenter">港大</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 缘分 -->
|
|
<div style="display: block;" class="fate">
|
|
<div class="title flexacenter">
|
|
<div>今日缘分项目</div>
|
|
<div class="btn flexacenter">
|
|
<img class="icon" src="/img/trade-icon.png" />
|
|
换一批
|
|
</div>
|
|
</div>
|
|
<div class="list flexflex">
|
|
<div class="item flexacenter">
|
|
<div class="left">
|
|
<div class="name">教育学硕士</div>
|
|
<div class="message">Master of Education <span class="virgule">|</span> 香港大学</div>
|
|
</div>
|
|
<div class="btn flexacenter">
|
|
<div class="add flexcenter">
|
|
<img class="icon" src="/img/add-xiao.svg" />
|
|
</div>
|
|
加入对比单
|
|
</div>
|
|
</div>
|
|
<div class="item flexacenter">
|
|
<div class="left">
|
|
<div class="name">教育学硕士</div>
|
|
<div class="message">Master of Education <span class="virgule">|</span> 香港大学</div>
|
|
</div>
|
|
<div class="btn flexacenter">
|
|
<div class="add flexcenter">
|
|
<img class="icon" src="/img/add-xiao.svg" />
|
|
</div>
|
|
加入对比单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 招生官 -->
|
|
<div style="display: block;" class="recruit">
|
|
<div class="title flexacenter">
|
|
<img class="img" src="/img/admission-icon.png" />
|
|
<div class="btn flexacenter">
|
|
招生官频道
|
|
<img class="icon" src="/img/arrows-icon.png" />
|
|
</div>
|
|
</div>
|
|
<div class="list flexflex">
|
|
<div class="list-item">
|
|
<div class="item flexflex">
|
|
<div class="operate flexcenter">
|
|
<div style="display: none;" class="circle flexcenter">
|
|
<img class="img-add" src="/img/add-thick.svg" />
|
|
</div>
|
|
<div style="display: none;" class="circle flexcenter">
|
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
|
</div>
|
|
<div style="display: none;" class="select flexflex show">
|
|
<div class="title flexacenter">
|
|
<div class="dot"></div>
|
|
该项目已加入对比单，未加入项目管理
|
|
</div>
|
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
|
<!-- <div class="bottom"></div> -->
|
|
</div>
|
|
<div style="display: none;" class="already flexacenter">
|
|
<div class="tick-box flexcenter">
|
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
|
</div>
|
|
已加入
|
|
</div>
|
|
</div>
|
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
<div class="info">
|
|
<div class="school">香港大学</div>
|
|
<div class="name">城市设计硕士</div>
|
|
<div class="name-en">Master of Urban Design</div>
|
|
<div class="aq flexacenter">
|
|
<div class="text">招生官答疑时间</div>
|
|
<div class="value flex1">长期答疑</div>
|
|
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item flexflex">
|
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
<div class="info">
|
|
<div class="school">香港大学</div>
|
|
<div class="name">城市设计硕士</div>
|
|
<div class="name-en">Master of Urban Design</div>
|
|
<div class="aq flexacenter">
|
|
<div class="text">招生官答疑时间</div>
|
|
<div class="value flex1">长期答疑</div>
|
|
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flexflex">
|
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
<div class="info">
|
|
<div class="school">香港大学</div>
|
|
<div class="name">城市设计硕士</div>
|
|
<div class="name-en">Master of Urban Design</div>
|
|
<div class="aq flexacenter">
|
|
<div class="text">招生官答疑时间</div>
|
|
<div class="value flex1">长期答疑</div>
|
|
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flexflex">
|
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
<div class="info">
|
|
<div class="school">香港大学</div>
|
|
<div class="name">城市设计硕士</div>
|
|
<div class="name-en">Master of Urban Design</div>
|
|
<div class="aq flexacenter">
|
|
<div class="text">招生官答疑时间</div>
|
|
<div class="value flex1">长期答疑</div>
|
|
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item flexflex">
|
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
<div class="info">
|
|
<div class="school">香港大学</div>
|
|
<div class="name">城市设计硕士</div>
|
|
<div class="name-en">Master of Urban Design</div>
|
|
<div class="aq flexacenter">
|
|
<div class="text">招生官答疑时间</div>
|
|
<div class="value flex1">长期答疑</div>
|
|
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="indicate flexcenter">
|
|
<img class="icon" src="/img/arrows-triangle-gray.svg" />
|
|
<div class="text">1/3</div>
|
|
<img class="icon" src="/img/arrows-triangle-blue.svg" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 列表 -->
|
|
<div class="data">
|
|
<!-- <img class="fall" src="/img/25fall.svg" /> -->
|
|
<div class="item">
|
|
<div class="school flexacenter"><img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />香港中文大学</div>
|
|
<div class="name">金融数学研究型硕士</div>
|
|
<div class="name-en">Mphil in Financial Mathematics</div>
|
|
<div class="introduce flexacenter">
|
|
<div class="flexacenter">
|
|
专业排名
|
|
<div class="quantity">52</div>
|
|
</div>
|
|
<div class="flexacenter">
|
|
<div class="line">|</div>
|
|
学费HK$
|
|
<div class="quantity">281,000</div>
|
|
</div>
|
|
</div>
|
|
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
|
|
<div class="tag flexflex">
|
|
<!-- <div class="tag-item admissions">招生官项目</div> -->
|
|
<div class="tag-item">无需面试</div>
|
|
</div>
|
|
<div class="operate flexcenter">
|
|
<div style="display: none;" class="circle flexcenter">
|
|
<img class="img-add" src="/img/add-thick.svg" />
|
|
</div>
|
|
<div class="circle flexcenter">
|
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
|
</div>
|
|
<div class="select flexflex">
|
|
<div class="top flex1 flexcenter">
|
|
<div class="title flexacenter">
|
|
<div class="dot"></div>
|
|
该项目已加入对比单，未加入项目管理
|
|
</div>
|
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
|
</div>
|
|
<div class="bottom"></div>
|
|
</div>
|
|
<div style="display: none;" class="already flexacenter">
|
|
<div class="tick-box flexcenter">
|
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
|
</div>
|
|
已加入
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="base flexcenter">
|
|
<div class="left flexacenter">
|
|
<div class="text flex1">搜索项目</div>
|
|
<img class="img" src="/img/search-black-icon.svg" />
|
|
</div>
|
|
<div class="rigth flexacenter">
|
|
<img class="img" src="/img/contrast-icon.png" />
|
|
<div class="text">项目对比</div>
|
|
<div class="number">16</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const { createApp, ref, onMounted } = Vue
|
|
|
|
const projectIndex = createApp({
|
|
setup() {
|
|
onMounted(() => {
|
|
console.log(`the component is now mounted.`)
|
|
})
|
|
},
|
|
})
|
|
projectIndex.mount("#app")
|
|
</script>
|
|
</body>
|
|
</html>
|