no message
This commit is contained in:
A1300399510
parent
f390f35bfb
commit
292412033f
@ -1,6 +1,5 @@
|
|||||||
.boxbox {
|
.boxbox {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 396px;
|
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -147,8 +146,30 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 6px;
|
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 {
|
.boxbox .details .right .brief .text {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
width: 898px;
|
||||||
}
|
}
|
||||||
.boxbox .details .right .brief .img {
|
.boxbox .details .right .brief .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
@ -183,15 +204,19 @@
|
|||||||
.hot .list {
|
.hot .list {
|
||||||
width: 1152px;
|
width: 1152px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.hot .list .list-item {
|
.hot .list .list-item {
|
||||||
|
width: 1152px;
|
||||||
|
grid-column-gap: 66px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
.hot .list .list-item .item {
|
.hot .list .list-item .item {
|
||||||
padding: 22px 0;
|
padding: 22px 0;
|
||||||
width: 510px;
|
width: 510px;
|
||||||
margin-left: 20px;
|
height: 90px;
|
||||||
|
margin-left: 33px;
|
||||||
}
|
}
|
||||||
.hot .list .list-item .item:not(:nth-last-child(-n + 2)) {
|
.hot .list .list-item .item:not(:nth-last-child(-n + 2)) {
|
||||||
border-bottom: 1px dotted #ebebeb;
|
border-bottom: 1px dotted #ebebeb;
|
||||||
@ -258,6 +283,14 @@
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
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 {
|
.hot .list .list-item .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
@ -334,6 +367,9 @@
|
|||||||
height: 12px;
|
height: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.hot .indicate .icon.btn-right {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
.hot .indicate .text {
|
.hot .indicate .text {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -400,6 +436,7 @@
|
|||||||
}
|
}
|
||||||
.content .body .right .screen .list {
|
.content .body .right .screen .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
justify-content: left;
|
||||||
}
|
}
|
||||||
.content .body .right .screen .list .item {
|
.content .body .right .screen .list .item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@ -513,6 +550,14 @@
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
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 {
|
.content .body .right .list .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.boxbox {
|
.boxbox {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 396px;
|
// height: 396px;
|
||||||
background-color: rgba(251, 251, 251, 1);
|
background-color: rgba(251, 251, 251, 1);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -148,7 +148,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brief {
|
.brief {
|
||||||
// width: 946px;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: rgba(246, 246, 246, 1);
|
background-color: rgba(246, 246, 246, 1);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@ -161,8 +160,33 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 6px;
|
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 {
|
.text {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
width: 898px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
@ -204,13 +228,17 @@
|
|||||||
.list {
|
.list {
|
||||||
width: 1152px;
|
width: 1152px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
overflow: hidden;
|
||||||
.list-item {
|
.list-item {
|
||||||
|
width: 1152px;
|
||||||
|
grid-column-gap: 66px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
.item {
|
.item {
|
||||||
padding: 22px 0;
|
padding: 22px 0;
|
||||||
width: 510px;
|
width: 510px;
|
||||||
margin-left: 20px;
|
height: 90px;
|
||||||
|
margin-left: 33px;
|
||||||
&:not(:nth-last-child(-n + 2)) {
|
&:not(:nth-last-child(-n + 2)) {
|
||||||
border-bottom: 1px dotted #ebebeb;
|
border-bottom: 1px dotted #ebebeb;
|
||||||
}
|
}
|
||||||
@ -286,6 +314,15 @@
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.select-mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
@ -373,6 +410,10 @@
|
|||||||
width: 7px;
|
width: 7px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.btn-right {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
@ -448,6 +489,7 @@
|
|||||||
|
|
||||||
.list {
|
.list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
justify-content: left;
|
||||||
.item {
|
.item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -567,6 +609,14 @@
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.select-mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
.select {
|
.select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
|
|||||||
320
html/school.html
320
html/school.html
@ -6,18 +6,28 @@
|
|||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="/css/common.css" />
|
<link rel="stylesheet" href="/css/common.css" />
|
||||||
<link rel="stylesheet" href="/css/school.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div id="app" class="main">
|
||||||
<img class="index-icon" src="/img/index-icon.png" />
|
<img class="index-icon" src="/img/index-icon.png" />
|
||||||
|
|
||||||
<div style="display: none;" class="box">
|
<div class="boxbox">
|
||||||
<div class="tab flexacenter">
|
<div class="tab flexacenter">
|
||||||
首页
|
首页
|
||||||
<img class="img" src="/img/arrows.svg" />
|
<img class="img" src="/img/arrows.svg" />
|
||||||
按学校查看
|
按学校查看
|
||||||
<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>
|
||||||
<div class="details flexflex">
|
<div class="details flexflex">
|
||||||
<div class="logo flexcenter">
|
<div class="logo flexcenter">
|
||||||
@ -25,8 +35,8 @@
|
|||||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
|
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="name">香港大学</div>
|
<div class="name">{{ info.name }}</div>
|
||||||
<div class="name-en">The University of Hong Kong</div>
|
<div class="name-en">{{ info.enname }}</div>
|
||||||
<div class="world">
|
<div class="world">
|
||||||
<div class="head flexcenter">
|
<div class="head flexcenter">
|
||||||
<div class="icon flexcenter">
|
<div class="icon flexcenter">
|
||||||
@ -34,21 +44,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list flexacenter">
|
<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="quantity">16</div>
|
||||||
<div class="ranking-name">
|
<div class="ranking-name">
|
||||||
QS
|
{{ item.mechanism }}
|
||||||
<img class="ranking-icon" src="https://app.gter.net/image/miniApp/offer/triangle-QS.svg" />
|
<img v-if="item.mechanism == 'QS'" class="ranking-icon" src="/img/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>
|
<img v-if="item.mechanism == '泰晤士'" class="ranking-icon" src="/img/triangle-TIMES.svg" />
|
||||||
<image wx:if="{{ item.mechanism == 'USNEWS' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-US-News.svg"></image>
|
<img v-if="item.mechanism == 'USNEWS'" class="ranking-icon" src="/img/triangle-US-News.svg" />
|
||||||
<image wx:if="{{ item.mechanism == '软科' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-Soft.svg"></image> -->
|
<img v-if="item.mechanism == '软科'" class="ranking-icon" src="/img/triangle-Soft.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="brief">
|
<div class="brief" :style="{'height': (briefShow?briefHeight : 40) + 'px'}" :class="{'brief-show': briefShow}">
|
||||||
<div class="text">香港大学简称为“港大”、“HKU”，是一所位处中华人民共和国香港特别行政区的公立研究型大学，其奠基于1910年3月16日，次年3月30日…</div>
|
<div ref="briefRef" class="brief-dom">{{ info.message }}</div>
|
||||||
<img class="img" src="/img/arrows-gray-icon.png" />
|
<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>
|
</div>
|
||||||
@ -62,13 +73,13 @@
|
|||||||
</div>
|
</div>
|
||||||
热门项目
|
热门项目
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list flexflex" ref="hotListRef">
|
||||||
<div class="list-item">
|
<div class="list-item" v-for="(item,index) in hotList">
|
||||||
<div class="item flexacenter">
|
<div class="item flexacenter" v-for="(item,i) in item">
|
||||||
<div class="left flex1">
|
<div class="left flex1">
|
||||||
<div class="name">教育学硕士</div>
|
<div class="name">{{ item.name_zh }}</div>
|
||||||
<div class="text flexacenter">
|
<div class="text flexacenter">
|
||||||
Master of Education
|
{{ item.name_en }}
|
||||||
<div class="ranking flexacenter">
|
<div class="ranking flexacenter">
|
||||||
<div class="vertical">|</div>
|
<div class="vertical">|</div>
|
||||||
专业排名
|
专业排名
|
||||||
@ -78,142 +89,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="operate flexcenter">
|
<div class="operate flexcenter">
|
||||||
<div style="display: none;" class="circle flexcenter">
|
<div v-if="item.contraststatus == 1" class="already flexacenter">
|
||||||
<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 class="tick-box flexcenter">
|
<div class="tick-box flexcenter">
|
||||||
<img class="img-tick" src="/img/tick-icon.svg" />
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
已加入
|
已加入
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="circle flexcenter" :class="'add' + item.random" @click.stop="handleClick('hot',item,index,i)">
|
||||||
</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" />
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="indicate flexcenter">
|
<div class="indicate flexcenter">
|
||||||
<img class="icon" src="/img/arrows-triangle-gray.svg" />
|
<img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
|
||||||
<div class="text">1/3</div>
|
<div class="text">{{ hotListPage }}/{{ hotListTotalPage }}</div>
|
||||||
<img class="icon" src="/img/arrows-triangle-blue.svg" />
|
<img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -293,18 +186,139 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="base flexcenter">
|
<base-bottom ref="baseRef"></base-bottom>
|
||||||
<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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
6
img/triangle-QS.svg
Normal file
6
img/triangle-QS.svg
Normal 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
6
img/triangle-Soft.svg
Normal 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
12
img/triangle-TIMES.svg
Normal 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
6
img/triangle-US-News.svg
Normal 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
11
js/base.js
@ -4,12 +4,12 @@ const base = {
|
|||||||
<div class="base flexcenter">
|
<div class="base flexcenter">
|
||||||
<div class="left flexacenter">
|
<div class="left flexacenter">
|
||||||
<div class="text flex1">搜索项目</div>
|
<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>
|
||||||
<div class="rigth flexacenter">
|
<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="text">项目对比</div>
|
||||||
<div class="number">16</div>
|
<div class="number">{{ count }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`,
|
</div>`,
|
||||||
data() {
|
data() {
|
||||||
@ -17,6 +17,7 @@ const base = {
|
|||||||
hideIcon: false,
|
hideIcon: false,
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
|
count:0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -24,7 +25,9 @@ const base = {
|
|||||||
console.log("Custom method called")
|
console.log("Custom method called")
|
||||||
},
|
},
|
||||||
// 计算按钮位置
|
// 计算按钮位置
|
||||||
calculate(random) {
|
calculate(random, count) {
|
||||||
|
this.count = count
|
||||||
|
|
||||||
const dom = document.querySelector(".add" + random)
|
const dom = document.querySelector(".add" + random)
|
||||||
const rect = dom.getBoundingClientRect()
|
const rect = dom.getBoundingClientRect()
|
||||||
const top = rect.top + rect.height / 2 - 5
|
const top = rect.top + rect.height / 2 - 5
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user