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-11 14:28:21 +08:00
parent 1bc1b89cf7
commit de09eeacff
3 changed files with 73 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/subject.css
View File

@ -132,6 +132,38 @@
color: #000000;
cursor: pointer;
}
.body .right .h .item.sort {
position: relative;
}
.body .right .h .item.sort .sort-mask {
width: 100vw;
height: 100vh;
background-color: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 101;
}
.body .right .h .item.sort .sort-list {
width: 100%;
background-color: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.078);
position: absolute;
top: 25px;
left: 50%;
z-index: 102;
transform: translateX(-50%);
}
.body .right .h .item.sort .sort-list .sort-item {
height: 50px;
line-height: 50px;
text-align: center;
}
.body .right .h .item.sort .sort-list .sort-item:not(:last-of-type) {
border-bottom: 1px solid #e4e7ed;
}
.body .right .h .item .img-sort {
width: 20px;
height: 20px;

32
css/subject.less
View File

@ -141,6 +141,38 @@
font-size: 14px;
color: #000000;
cursor: pointer;
&.sort {
position: relative;
.sort-mask {
width: 100vw;
height: 100vh;
background-color: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 101;
}
.sort-list {
width: 100%;
background-color: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.078);
position: absolute;
top: 25px;
left: 50%;
z-index: 102;
transform: translateX(-50%);
.sort-item {
height: 50px;
line-height: 50px;
text-align: center;
&:not(:last-of-type) {
border-bottom: 1px solid #e4e7ed;
}
}
}
}
.img-sort {
width: 20px;

10
html/subject.html
View File

@ -47,9 +47,17 @@
<div class="right flex1">
<div class="h flexacenter">
<div class="total">共 {{ count }} 个项目</div>
<div class="item flexacenter">
<div class="item flexacenter sort">
学费由低到高
<img class="img-sort" src="/img/sort-icon.png" />
<template v-if="sortState">
<div class="sort-mask"></div>
<div class="sort-list">
<div class="sort-item pitch">排名由高到低</div>
<div class="sort-item">学费由低到高</div>
<div class="sort-item">学费由高到低</div>
</div>
</template>
</div>
<div class="item flexacenter" v-if="sid">