no message
This commit is contained in:
A1300399510
parent
d424a7e1dc
commit
0f332fd82e
217
css/search.css
217
css/search.css
@ -40,19 +40,236 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
.boxbox .body .left {
|
||||||
|
padding: 30px 24px 58px;
|
||||||
|
border-right: 1px dotted #ebebeb;
|
||||||
|
}
|
||||||
.boxbox .body .left .input-box {
|
.boxbox .body .left .input-box {
|
||||||
width: 750px;
|
width: 750px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
border-radius: 183px;
|
border-radius: 183px;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
.boxbox .body .left .input-box input {
|
.boxbox .body .left .input-box input {
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.boxbox .body .left .input-box .search-icon {
|
.boxbox .body .left .input-box .search-icon {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .total {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .total .sum {
|
||||||
|
font-weight: 650;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .empty-box {
|
||||||
|
width: 750px;
|
||||||
|
height: 540px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .empty-box .icon {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item {
|
||||||
|
width: 750px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .english {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .introduce {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .introduce .quantity {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .introduce .line {
|
||||||
|
color: #d7d7d7;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .word {
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select-mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
right: -24px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 68px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select.show {
|
||||||
|
width: 285px;
|
||||||
|
height: 171px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .select .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.boxbox .body .left .list .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.boxbox .body .right {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.boxbox .body .right .title {
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.boxbox .body .right .title .dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.boxbox .body .right .list {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-left: 45px;
|
||||||
|
}
|
||||||
|
.boxbox .body .right .list .item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
234
css/search.less
234
css/search.less
@ -44,21 +44,255 @@
|
|||||||
|
|
||||||
.body {
|
.body {
|
||||||
.left {
|
.left {
|
||||||
|
padding: 30px 24px 58px;
|
||||||
|
border-right: 1px dotted rgb(235, 235, 235);
|
||||||
.input-box {
|
.input-box {
|
||||||
width: 750px;
|
width: 750px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: rgba(242, 242, 242, 1);
|
background-color: rgba(242, 242, 242, 1);
|
||||||
border-radius: 183px;
|
border-radius: 183px;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
input {
|
input {
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.sum {
|
||||||
|
font-weight: 650;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-box {
|
||||||
|
width: 750px;
|
||||||
|
height: 540px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 1px solid rgba(242, 242, 242, 1);
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
.item {
|
||||||
|
width: 750px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 1px solid rgba(242, 242, 242, 1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.english {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.introduce {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
.quantity {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
color: #d7d7d7;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.word {
|
||||||
|
background-color: rgba(249, 248, 248, 1);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 24px;
|
||||||
|
.circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: rgba(219, 227, 253, 1);
|
||||||
|
border: 1px solid rgba(175, 181, 202, 1);
|
||||||
|
border-radius: 20px;
|
||||||
|
.img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
right: -24px;
|
||||||
|
background-color: rgba(251, 251, 251, 1);
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745);
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 68px;
|
||||||
|
z-index: 2;
|
||||||
|
&.show {
|
||||||
|
width: 285px;
|
||||||
|
height: 171px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
// .top {
|
||||||
|
// flex-direction: column;
|
||||||
|
.title {
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgb(202, 177, 87);
|
||||||
|
background-color: rgb(253, 223, 109);
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
|
||||||
|
background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
|
||||||
|
background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
.tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: rgba(246, 246, 246, 1);
|
||||||
|
border: 1px solid rgba(215, 215, 215, 1);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
|
||||||
|
.img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 400px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
.dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: rgba(253, 223, 109, 1);
|
||||||
|
border: 1px solid rgba(202, 177, 87, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-left: 45px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 1px solid rgba(235, 235, 235, 1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
216
html/search.html
216
html/search.html
@ -10,7 +10,6 @@
|
|||||||
<script src="/js/vue.global.js"></script>
|
<script src="/js/vue.global.js"></script>
|
||||||
<script src="/js/common.js"></script>
|
<script src="/js/common.js"></script>
|
||||||
<script src="/js/base.js"></script>
|
<script src="/js/base.js"></script>
|
||||||
<script src="/js/masonry.pkgd.min.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
@ -23,18 +22,92 @@
|
|||||||
<img class="index-icon" src="/img/index-icon.png" />
|
<img class="index-icon" src="/img/index-icon.png" />
|
||||||
<div class="boxbox">
|
<div class="boxbox">
|
||||||
<div class="tab flexacenter">
|
<div class="tab flexacenter">
|
||||||
首页
|
<a href="/" target="_blank">首页</a>
|
||||||
<img class="img" src="/img/arrows.svg" />
|
<img class="img" src="/img/arrows.svg" />
|
||||||
<div class="current">项目搜索</div>
|
<div class="current">项目搜索</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body flexflex">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="input-box flexacenter">
|
<div class="input-box flexacenter">
|
||||||
<input class="flex1" placeholder="请输入" />
|
<input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
|
||||||
<img class="search-icon" src="/img/search-black-icon.svg" />
|
<img class="search-icon" src="/img/search-black-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="total flexacenter">
|
||||||
|
共
|
||||||
|
<div class="sum">{{ count }}</div>
|
||||||
|
个搜索结果
|
||||||
|
</div>
|
||||||
|
<div v-if="count == 0 && showList.length == 0" class="empty-box flexcenter">
|
||||||
|
<img class="icon" src="/img/empty-icon.png" />
|
||||||
|
<span class="text">暂无搜索结果，换个关键词试试吧！</span>
|
||||||
|
</div>
|
||||||
|
<div class="list" v-if="showList.length != 0">
|
||||||
|
<div class="item" v-for="(item ,index) in showList">
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" @click="openMoreSelect(index)" class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick('list',item,index)">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll()"></div>
|
||||||
|
<div class="select flexflex" :class="{'show': item.moreState}">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
{{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter" @click="handleClick('list',item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name flexflex">{{ item.name_zh }}</div>
|
||||||
|
<div class="english">{{ item.name_en }}</div>
|
||||||
|
<div class="introduce flexacenter">
|
||||||
|
{{ item.department }}
|
||||||
|
<div class="flexacenter" v-if="item.rank">
|
||||||
|
<div class="line">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="quantity">{{ item.rank }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexacenter" v-if="item.tuition_fee_text">
|
||||||
|
<div class="line">|</div>
|
||||||
|
学费HK$
|
||||||
|
<div class="quantity">{{ item.tuition_fee_text }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
|
||||||
|
<div class="tag flexflex">
|
||||||
|
<div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
|
||||||
|
<div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
|
||||||
|
<div class="tag-item" v-for="item in item.tags">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<template v-if="historyList.length != 0">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
历史搜索
|
||||||
|
</div>
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item flexcenter" v-for="item in historyList" @click="selectKW(item)">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
标签搜索
|
||||||
|
</div>
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item flexcenter" v-for="item in 9">搜索</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
@ -45,11 +118,138 @@
|
|||||||
const projectIndex = createApp({
|
const projectIndex = createApp({
|
||||||
setup() {
|
setup() {
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// window.addEventListener("scroll", handleScroll)
|
// kw.value = "术"
|
||||||
// init()
|
// getList()
|
||||||
|
let history = localStorage.getItem("historyProject")
|
||||||
|
if (history) {
|
||||||
|
history = JSON.parse(history)
|
||||||
|
historyList.value = history
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return {}
|
let historyList = ref([])
|
||||||
|
|
||||||
|
let kw = ref("")
|
||||||
|
let count = ref(0)
|
||||||
|
let listAll = []
|
||||||
|
const getList = () => {
|
||||||
|
console.log("kw", kw.value)
|
||||||
|
$ajaxget("/api/project.lists", {
|
||||||
|
limit: 2000,
|
||||||
|
page: 1,
|
||||||
|
keyword: kw.value,
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code != 200) return
|
||||||
|
const data = res.data
|
||||||
|
|
||||||
|
let list = data.data || []
|
||||||
|
const date = new Date()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const year = date.getFullYear()
|
||||||
|
|
||||||
|
list.forEach(element => {
|
||||||
|
const semester = element.semester || {}
|
||||||
|
|
||||||
|
if (month > semester.month && year + 1 <= semester.year) element["semesterState"] = true
|
||||||
|
|
||||||
|
element["tuition_fee_text"] = formatNumberWithSpaces(element.tuition_fee)
|
||||||
|
element["random"] = randomString(6)
|
||||||
|
})
|
||||||
|
|
||||||
|
listAll = list
|
||||||
|
count.value = data.count
|
||||||
|
calculateShowList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let showList = ref([])
|
||||||
|
let page = ref(1)
|
||||||
|
|
||||||
|
// 在 listAll 数据截取要显示的数据
|
||||||
|
const calculateShowList = () => {
|
||||||
|
const limit = 20
|
||||||
|
if (page.value == 0) return
|
||||||
|
const startIndex = (page.value - 1) * limit
|
||||||
|
const endIndex = startIndex + limit
|
||||||
|
let list = listAll.slice(startIndex, endIndex)
|
||||||
|
showList.value = showList.value.concat(list)
|
||||||
|
|
||||||
|
console.log("showList", showList)
|
||||||
|
|
||||||
|
page.value = endIndex >= listAll.length ? 0 : page.value + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
let pl = ref("")
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
kw.value = kw.value.trim()
|
||||||
|
|
||||||
|
if (kw.value == "") kw.value = pl.value
|
||||||
|
if (kw.value == "") return
|
||||||
|
if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
|
||||||
|
|
||||||
|
localStorage.setItem("historyProject", JSON.stringify(historyList.value))
|
||||||
|
|
||||||
|
showList.value = []
|
||||||
|
page.value = 1
|
||||||
|
count.value = 0
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectKW = name => {
|
||||||
|
kw.value = name
|
||||||
|
if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
|
||||||
|
|
||||||
|
localStorage.setItem("historyProject", JSON.stringify(historyList.value))
|
||||||
|
|
||||||
|
showList.value = []
|
||||||
|
page.value = 1
|
||||||
|
count.value = 0
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击事件
|
||||||
|
const handleClick = (item, index, i) => {
|
||||||
|
const random = item.random
|
||||||
|
|
||||||
|
if (item.status == 1) return
|
||||||
|
$ajax("/api/project.contrast/add", {
|
||||||
|
projectid: item.id,
|
||||||
|
}).then(res => {
|
||||||
|
// console.log(baseRef.value)
|
||||||
|
// baseRef.value.calculate(random, res.data.count)
|
||||||
|
const uniqid = item["uniqid"]
|
||||||
|
listAll.forEach(element => {
|
||||||
|
if (element.uniqid == uniqid) {
|
||||||
|
element["contraststatus"] = {
|
||||||
|
status: 1,
|
||||||
|
ismanage: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
showList.value[index]["contraststatus"] = {
|
||||||
|
status: 1,
|
||||||
|
ismanage: 1,
|
||||||
|
}
|
||||||
|
|
||||||
|
showList.value[index]["moreState"] = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openMoreSelect = index => {
|
||||||
|
closeMoreSelectAll()
|
||||||
|
showList.value[index]["moreState"] = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭所有 状态 选择 弹出框
|
||||||
|
const closeMoreSelectAll = type => {
|
||||||
|
showList.value.forEach(element => {
|
||||||
|
element["moreState"] = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return { showList, count, kw, submit, pl, historyList, selectKW, handleClick, openMoreSelect, closeMoreSelectAll }
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user