gter.net/xg-project-library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
292412033f
xg-project-library/html/school.html

325 lines
15 KiB
HTML
Raw Normal View History

no message
2024-10-29 11:14:25 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
no message
2024-10-31 04:27:27 +00:00
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/school.css" />
no message
2024-11-04 11:01:08 +00:00
<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>
no message
2024-10-29 11:14:25 +00:00
</head>
<body>
no message
2024-11-04 11:01:08 +00:00
<div id="app" class="main">
no message
2024-10-29 11:14:25 +00:00
<img class="index-icon" src="/img/index-icon.png" />
no message
2024-11-04 11:01:08 +00:00
<div class="boxbox">
no message
2024-10-29 11:14:25 +00:00
<div class="tab flexacenter">
首页
<img class="img" src="/img/arrows.svg" />
按学校查看
<img class="img" src="/img/arrows.svg" />
no message
2024-11-04 11:01:08 +00:00
<div class="current">{{ info.name }}</div>
no message
2024-10-29 11:14:25 +00:00
</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">
no message
2024-11-04 11:01:08 +00:00
<div class="name">{{ info.name }}</div>
<div class="name-en">{{ info.enname }}</div>
no message
2024-10-29 11:14:25 +00:00
<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">
no message
2024-11-04 11:01:08 +00:00
<div class="item flex1 flexacenter" v-for="item in info.ranks">
no message
2024-10-29 11:14:25 +00:00
<div class="quantity">16</div>
<div class="ranking-name">
no message
2024-11-04 11:01:08 +00:00
{{ 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" />
no message
2024-10-29 11:14:25 +00:00
</div>
</div>
</div>
</div>
no message
2024-11-04 11:01:08 +00:00
<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" />
no message
2024-10-29 11:14:25 +00:00
</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>
no message
2024-11-04 11:01:08 +00:00
<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">
no message
2024-10-29 11:14:25 +00:00
<div class="left flex1">
no message
2024-11-04 11:01:08 +00:00
<div class="name">{{ item.name_zh }}</div>
no message
2024-10-29 11:14:25 +00:00
<div class="text flexacenter">
no message
2024-11-04 11:01:08 +00:00
{{ item.name_en }}
no message
2024-10-29 11:14:25 +00:00
<div class="ranking flexacenter">
<div class="vertical">|</div>
专业排名
<div class="number">52</div>
</div>
</div>
</div>
<div class="operate flexcenter">
no message
2024-11-04 11:01:08 +00:00
<div v-if="item.contraststatus == 1" class="already flexacenter">
no message
2024-10-29 11:14:25 +00:00
<div class="tick-box flexcenter">
<img class="img-tick" src="/img/tick-icon.svg" />
</div>
已加入
</div>
no message
2024-11-04 11:01:08 +00:00
<div v-else class="circle flexcenter" :class="'add' + item.random" @click.stop="handleClick('hot',item,index,i)">
no message
2024-10-29 11:14:25 +00:00
<img class="img-add" src="/img/add-thick.svg" />
</div>
</div>
</div>
</div>
</div>
<div class="indicate flexcenter">
no message
2024-11-04 11:01:08 +00:00
<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')" />
no message
2024-10-29 11:14:25 +00:00
</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>
<!-- 底部 -->
no message
2024-11-04 11:01:08 +00:00
<base-bottom ref="baseRef"></base-bottom>
no message
2024-10-29 11:14:25 +00:00
</div>
no message
2024-11-04 11:01:08 +00:00
<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>
no message
2024-10-29 11:14:25 +00:00
</body>
</html>
Reference in New Issue Copy Permalink