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

no message

Browse Source
This commit is contained in:
A1300399510 2024-11-04 19:01:08 +08:00
parent f390f35bfb
commit 292412033f
8 changed files with 306 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/school.css
View File

@ -1,6 +1,5 @@
.boxbox {
width: 1200px;
height: 396px;
background-color: #fbfbfb;
border-radius: 12px;
position: relative;
@ -147,8 +146,30 @@
justify-content: space-between;
padding: 6px;
}
.boxbox .details .right .brief .brief-dom {
color: transparent;
pointer-events: none;
position: fixed;
top: -100000%;
width: 898px;
word-break: keep-all;
}
.boxbox .details .right .brief.brief-show {
transition: all 0.3s;
height: auto;
flex-direction: column;
}
.boxbox .details .right .brief.brief-show .text {
white-space: break-spaces;
margin-right: 0;
margin-bottom: 15px;
}
.boxbox .details .right .brief.brief-show .img {
transform: rotate(180deg);
}
.boxbox .details .right .brief .text {
margin-right: 15px;
width: 898px;
}
.boxbox .details .right .brief .img {
width: 16px;
@ -183,15 +204,19 @@
.hot .list {
width: 1152px;
margin-bottom: 10px;
overflow: hidden;
}
.hot .list .list-item {
width: 1152px;
grid-column-gap: 66px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.hot .list .list-item .item {
padding: 22px 0;
width: 510px;
margin-left: 20px;
height: 90px;
margin-left: 33px;
}
.hot .list .list-item .item:not(:nth-last-child(-n + 2)) {
border-bottom: 1px dotted #ebebeb;
@ -258,6 +283,14 @@
width: 18px;
height: 8px;
}
.hot .list .list-item .item .operate .select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.hot .list .list-item .item .operate .select {
position: absolute;
right: 40px;
@ -334,6 +367,9 @@
height: 12px;
cursor: pointer;
}
.hot .indicate .icon.btn-right {
transform: rotate(180deg);
}
.hot .indicate .text {
color: #555555;
font-size: 13px;
@ -400,6 +436,7 @@
}
.content .body .right .screen .list {
flex-wrap: wrap;
justify-content: left;
}
.content .body .right .screen .list .item {
width: fit-content;
@ -513,6 +550,14 @@
width: 18px;
height: 8px;
}
.content .body .right .list .item .operate .select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.content .body .right .list .item .operate .select {
position: absolute;
top: -18px;

56
css/school.less
View File

@ -1,6 +1,6 @@
.boxbox {
width: 1200px;
height: 396px;
// height: 396px;
background-color: rgba(251, 251, 251, 1);
border-radius: 12px;
position: relative;
@ -148,7 +148,6 @@
}
.brief {
// width: 946px;
height: 40px;
background-color: rgba(246, 246, 246, 1);
border-radius: 6px;
@ -161,8 +160,33 @@
justify-content: space-between;
padding: 6px;
.brief-dom {
color: transparent;
pointer-events: none;
position: fixed;
top: -100000%;
width: 898px;
word-break: keep-all;
}
&.brief-show {
transition: all 0.3s;
height: auto;
flex-direction: column;
.text {
white-space: break-spaces;
margin-right: 0;
margin-bottom: 15px;
}
.img {
transform: rotate(180deg);
}
}
.text {
margin-right: 15px;
width: 898px;
}
.img {
@ -204,13 +228,17 @@
.list {
width: 1152px;
margin-bottom: 10px;
overflow: hidden;
.list-item {
width: 1152px;
grid-column-gap: 66px;
display: grid;
grid-template-columns: repeat(2, 1fr);
.item {
padding: 22px 0;
width: 510px;
margin-left: 20px;
height: 90px;
margin-left: 33px;
&:not(:nth-last-child(-n + 2)) {
border-bottom: 1px dotted #ebebeb;
}
@ -286,6 +314,15 @@
height: 8px;
}
}
.select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.select {
position: absolute;
right: 40px;
@ -373,6 +410,10 @@
width: 7px;
height: 12px;
cursor: pointer;
&.btn-right {
transform: rotate(180deg);
}
}
.text {
color: #555555;
@ -448,6 +489,7 @@
.list {
flex-wrap: wrap;
justify-content: left;
.item {
width: fit-content;
height: 36px;
@ -567,6 +609,14 @@
height: 8px;
}
}
.select-mask {
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
}
.select {
position: absolute;
top: -18px;

320
html/school.html
View File

@ -6,18 +6,28 @@
<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 class="main">
<div id="app" class="main">
<img class="index-icon" src="/img/index-icon.png" />
<div style="display: none;" class="box">
<div class="boxbox">
<div class="tab flexacenter">
首页
<img class="img" src="/img/arrows.svg" />
按学校查看
<img class="img" src="/img/arrows.svg" />
<div class="current">香港大学</div>
<div class="current">{{ info.name }}</div>
</div>
<div class="details flexflex">
<div class="logo flexcenter">
@ -25,8 +35,8 @@
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
</div>
<div class="right">
<div class="name">香港大学</div>
<div class="name-en">The University of Hong Kong</div>
<div class="name">{{ info.name }}</div>
<div class="name-en">{{ info.enname }}</div>
<div class="world">
<div class="head flexcenter">
<div class="icon flexcenter">
@ -34,21 +44,22 @@
</div>
</div>
<div class="list flexacenter">
<div class="item flex1 flexacenter">
<div class="item flex1 flexacenter" v-for="item in info.ranks">
<div class="quantity">16</div>
<div class="ranking-name">
QS
<img class="ranking-icon" src="https://app.gter.net/image/miniApp/offer/triangle-QS.svg" />
<!-- <image wx:if="{{ item.mechanism == '泰晤士' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-TIMES.svg"></image>
<image wx:if="{{ item.mechanism == 'USNEWS' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-US-News.svg"></image>
<image wx:if="{{ item.mechanism == '软科' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-Soft.svg"></image> -->
{{ 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">
<div class="text">香港大学简称为“港大”、“HKU”，是一所位处中华人民共和国香港特别行政区的公立研究型大学，其奠基于1910年3月16日，次年3月30日…</div>
<img class="img" src="/img/arrows-gray-icon.png" />
<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>
@ -62,13 +73,13 @@
</div>
热门项目
</div>
<div class="list">
<div class="list-item">
<div class="item flexacenter">
<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">教育学硕士</div>
<div class="name">{{ item.name_zh }}</div>
<div class="text flexacenter">
Master of Education
{{ item.name_en }}
<div class="ranking flexacenter">
<div class="vertical">|</div>
专业排名
@ -78,142 +89,24 @@
</div>
<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>
<div style="display: none;" class="already flexacenter">
<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>
</div>
<div class="item flexacenter">
<div class="left flex1">
<div class="name">教育学硕士</div>
<div class="text flexacenter">
Master of Education
<div class="ranking flexacenter">
<div class="vertical">|</div>
专业排名
<div class="number">52</div>
</div>
</div>
</div>
<div class="operate flexcenter">
<div style="display: none;" class="circle flexcenter">
<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 style="display: flex;" 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>
</div>
<div class="item flexacenter">
<div class="left flex1">
<div class="name">教育学硕士</div>
<div class="text flexacenter">
Master of Education
<div class="ranking flexacenter">
<div class="vertical">|</div>
专业排名
<div class="number">52</div>
</div>
</div>
</div>
<div class="operate flexcenter">
<div style="display: none;" class="circle flexcenter">
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div style="display: flex;" 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>
</div>
<div class="item flexacenter">
<div class="left flex1">
<div class="name">教育学硕士</div>
<div class="text flexacenter">
Master of Education
<div class="ranking flexacenter">
<div class="vertical">|</div>
专业排名
<div class="number">52</div>
</div>
</div>
</div>
<div class="operate flexcenter">
<div style="display: none;" class="circle flexcenter">
<img class="img-add" src="/img/add-thick.svg" />
</div>
<div style="display: flex;" 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>
</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" />
<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>
@ -293,18 +186,139 @@
</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>
<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>

6
img/triangle-QS.svg Normal file
View 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="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -253 -494 )">
<path d="M 261 502 L 253 494 L 253 502 L 261 502 Z " fill-rule="nonzero" fill="#f7a602" stroke="none" />
</g>
</svg>

6
img/triangle-Soft.svg Normal file
View 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="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -523 -494 )">
<path d="M 531 502 L 523 494 L 523 502 L 531 502 Z " fill-rule="nonzero" fill="#e5122d" stroke="none" />
</g>
</svg>

12
img/triangle-TIMES.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="354" y1="494" x2="362" y2="509" id="LinearGradient25">
<stop id="Stop26" stop-color="#fc392d" offset="0" />
<stop id="Stop27" stop-color="#3948ff" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -354 -494 )">
<path d="M 362 502 L 354 494 L 354 502 L 362 502 Z " fill-rule="nonzero" fill="url(#LinearGradient25)" stroke="none" />
</g>
</svg>

6
img/triangle-US-News.svg Normal file
View 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="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -454 -494 )">
<path d="M 462 502 L 454 494 L 454 502 L 462 502 Z " fill-rule="nonzero" fill="#175ea6" stroke="none" />
</g>
</svg>

11
js/base.js
View File

@ -4,12 +4,12 @@ const base = {
<div class="base flexcenter">
<div class="left flexacenter">
<div class="text flex1">搜索项目</div>
<img class="img" src="{~}/img/search-black-icon.svg" />
<img class="img" src="/img/search-black-icon.svg" />
</div>
<div class="rigth flexacenter">
<img class="img" src="{~}/img/contrast-icon.png" />
<img class="img" src="/img/contrast-icon.png" />
<div class="text">项目对比</div>
<div class="number">16</div>
<div class="number">{{ count }}</div>
</div>
</div>`,
data() {
@ -17,6 +17,7 @@ const base = {
hideIcon: false,
top: 0,
left: 0,
count:0,
}
},
methods: {
@ -24,7 +25,9 @@ const base = {
console.log("Custom method called")
},
// 计算按钮位置
calculate(random) {
calculate(random, count) {
this.count = count
const dom = document.querySelector(".add" + random)
const rect = dom.getBoundingClientRect()
const top = rect.top + rect.height / 2 - 5