325 lines
15 KiB
HTML
325 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/school.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>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="main">
|
|
<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">{{ info.name }}</div>
|
|
</div>
|
|
<div class="details flexflex">
|
|
<div class="logo flexcenter">
|
|
<img class="bj" src="/img/logo-bj.png" />
|
|
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="name">{{ info.name }}</div>
|
|
<div class="name-en">{{ info.enname }}</div>
|
|
<div class="world">
|
|
<div class="head flexcenter">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="https://app.gter.net/image/miniApp/offer/world-ranking-icon.png" mode="widthFix" />
|
|
</div>
|
|
</div>
|
|
<div class="list flexacenter">
|
|
<div class="item flex1 flexacenter" v-for="item in info.ranks">
|
|
<div class="quantity">16</div>
|
|
<div class="ranking-name">
|
|
{{ item.mechanism }}
|
|
<img v-if="item.mechanism == 'QS'" class="ranking-icon" src="/img/triangle-QS.svg" />
|
|
<img v-if="item.mechanism == '泰晤士'" class="ranking-icon" src="/img/triangle-TIMES.svg" />
|
|
<img v-if="item.mechanism == 'USNEWS'" class="ranking-icon" src="/img/triangle-US-News.svg" />
|
|
<img v-if="item.mechanism == '软科'" class="ranking-icon" src="/img/triangle-Soft.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="brief" :style="{'height': (briefShow?briefHeight : 40) + 'px'}" :class="{'brief-show': briefShow}">
|
|
<div ref="briefRef" class="brief-dom">{{ info.message }}</div>
|
|
<div class="text one-line-display">{{ info.message }}</div>
|
|
<img class="img" @click="cutBriefShow" src="/img/arrows-gray-icon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 热门项目 -->
|
|
<div class="hot">
|
|
<div class="header flexacenter">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="/img/hot-icon.png" />
|
|
</div>
|
|
热门项目
|
|
</div>
|
|
<div class="list flexflex" ref="hotListRef">
|
|
<div class="list-item" v-for="(item,index) in hotList">
|
|
<div class="item flexacenter" v-for="(item,i) in item">
|
|
<div class="left flex1">
|
|
<div class="name">{{ item.name_zh }}</div>
|
|
<div class="text flexacenter">
|
|
{{ item.name_en }}
|
|
<div class="ranking flexacenter">
|
|
<div class="vertical">|</div>
|
|
专业排名
|
|
<div class="number">52</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="operate flexcenter">
|
|
<div v-if="item.contraststatus == 1" class="already flexacenter">
|
|
<div class="tick-box flexcenter">
|
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
|
</div>
|
|
已加入
|
|
</div>
|
|
<div v-else class="circle flexcenter" :class="'add' + item.random" @click.stop="handleClick('hot',item,index,i)">
|
|
<img class="img-add" src="/img/add-thick.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="indicate flexcenter">
|
|
<img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
|
|
<div class="text">{{ hotListPage }}/{{ hotListTotalPage }}</div>
|
|
<img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -->
|
|
<div class="content">
|
|
<div class="header flexcenter">项目筛选</div>
|
|
<div class="body flexflex">
|
|
<div class="left">
|
|
<div class="item flexacenter"><img class="img" src="/img/side-all.png" />全部项目</div>
|
|
<div class="item flexacenter pitch"><img class="img" src="/img/side-subject.png" />按学科</div>
|
|
<div class="item flexacenter"><img class="img" src="/img/side-school.png" />按学院</div>
|
|
</div>
|
|
<div class="right flex1">
|
|
<div class="screen">
|
|
<div class="title">按学科查看：</div>
|
|
<div class="list flexflex">
|
|
<div class="item pitch">建筑及城市规划</div>
|
|
<div class="item">建筑及城市规划</div>
|
|
<div class="item">建筑及城市规划</div>
|
|
<div class="item">建筑及城市规划</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h flexacenter">
|
|
<div class="total">共 113 个项目</div>
|
|
<div class="sort flexacenter">
|
|
学费由低到高
|
|
<img class="img" src="/img/sort-icon.png" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list flexflex">
|
|
<div class="item">
|
|
<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 show">
|
|
<div class="title flexacenter">
|
|
<div class="dot"></div>
|
|
该项目已加入对比单，未加入项目管理
|
|
</div>
|
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</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 class="name flexflex">建筑硕士</div>
|
|
<div class="english">Master of Architecture</div>
|
|
<div class="introduce flexacenter">
|
|
建筑学院
|
|
<div class="flexacenter">
|
|
<div class="line">|</div>
|
|
专业排名
|
|
<div class="quantity">52</div>
|
|
</div>
|
|
<div class="flexacenter">
|
|
<div class="line">|</div>
|
|
学费HK$ <vie class="quantity">281,000</vie>
|
|
</div>
|
|
</div>
|
|
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
|
|
<div class="tag flexflex">
|
|
<div class="tag-item admissions">招生官项目</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<base-bottom ref="baseRef"></base-bottom>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
|
|
const projectSchool = createApp({
|
|
setup() {
|
|
onMounted(() => {
|
|
console.log("onMounted")
|
|
|
|
getinit()
|
|
})
|
|
|
|
let id = 309
|
|
|
|
let info = ref({})
|
|
let hotList = ref([])
|
|
let discipline = ref([])
|
|
let universitydepartment = ref([])
|
|
|
|
const getinit = () => {
|
|
$ajaxget("/api/project.university/getInfo", {
|
|
id,
|
|
}).then(res => {
|
|
if (res.code != 200) return
|
|
const data = res.data
|
|
let list = data.hot_projects || []
|
|
list.forEach(element => {
|
|
element["random"] = randomString(6)
|
|
})
|
|
|
|
// 将一维数组转换成二维数组，每两个元素为一组
|
|
let twoDimensionalArray = []
|
|
for (let i = 0; i < list.length; i += 4) {
|
|
twoDimensionalArray.push(list.slice(i, i + 4))
|
|
}
|
|
|
|
console.log("twoDimensionalArray", twoDimensionalArray)
|
|
info.value = data.info
|
|
hotList.value = twoDimensionalArray
|
|
hotListTotalPage.value = twoDimensionalArray.length
|
|
discipline.value = data.discipline
|
|
universitydepartment.value = data.universitydepartment || []
|
|
|
|
// wx.nextTick(() => this.getBriefHeight())
|
|
|
|
nextTick(() => {
|
|
getBriefHeight()
|
|
})
|
|
})
|
|
}
|
|
|
|
const briefRef = ref(null)
|
|
let briefHeight = ref(40)
|
|
let briefShow = ref(false)
|
|
|
|
const getBriefHeight = () => {
|
|
briefHeight.value = briefRef.value.clientHeight + 16 + 12 + 15
|
|
}
|
|
|
|
const cutBriefShow = () => {
|
|
briefShow.value = !briefShow.value
|
|
}
|
|
|
|
let hotListPage = ref(1)
|
|
let hotListTotalPage = ref(0) // 总页数
|
|
|
|
let hotListRef = ref(null)
|
|
const cutHotListPage = type => {
|
|
if (type == "left") {
|
|
if (hotListPage.value > 1) hotListPage.value--
|
|
} else {
|
|
if (hotListPage.value < hotListTotalPage.value) hotListPage.value++
|
|
}
|
|
hotListRef.value.scrollTo({
|
|
left: 1152 * (hotListPage.value - 1),
|
|
behavior: "smooth",
|
|
})
|
|
}
|
|
|
|
// 计算
|
|
const reversedMessage = type => {
|
|
if (type == "left") {
|
|
if (hotListPage.value == 1) return "/img/arrows-triangle-gray.svg"
|
|
else return "/img/arrows-triangle-blue.png"
|
|
} else {
|
|
if (hotListPage.value == hotListTotalPage.value) return "/img/arrows-triangle-gray.svg"
|
|
else return "/img/arrows-triangle-blue.png"
|
|
}
|
|
}
|
|
|
|
const baseRef = ref(null)
|
|
|
|
// 点击事件
|
|
const handleClick = (type, item, index, i) => {
|
|
const random = item.random
|
|
|
|
if (item.status == 1) return
|
|
$ajax("/api/project.contrast/add", {
|
|
projectid: item.id,
|
|
}).then(res => {
|
|
baseRef.value.calculate(random, res.data.count)
|
|
|
|
if (type == "hot") hotList.value[index][i]["contraststatus"] = 1
|
|
|
|
|
|
})
|
|
}
|
|
|
|
return {
|
|
info,
|
|
hotList,
|
|
discipline,
|
|
universitydepartment,
|
|
briefShow,
|
|
cutBriefShow,
|
|
briefRef,
|
|
briefHeight,
|
|
|
|
hotListPage,
|
|
hotListTotalPage,
|
|
cutHotListPage,
|
|
reversedMessage,
|
|
hotListRef,
|
|
handleClick,
|
|
|
|
baseRef,
|
|
}
|
|
},
|
|
})
|
|
projectSchool.component("base-bottom", base)
|
|
|
|
projectSchool.mount("#app")
|
|
</script>
|
|
</body>
|
|
</html>
|