From de09eeacffd8df2828b6ac1aa74aba7a1df54ce2 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Mon, 11 Nov 2024 14:28:21 +0800
Subject: [PATCH] no message

---
 css/subject.css   | 32 ++++++++++++++++++++++++++++++++
 css/subject.less  | 32 ++++++++++++++++++++++++++++++++
 html/subject.html | 10 +++++++++-
 3 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/css/subject.css b/css/subject.css
index 2586d23..1cd52e0 100644
--- a/css/subject.css
+++ b/css/subject.css
@@ -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;
diff --git a/css/subject.less b/css/subject.less
index e8237f6..3abe624 100644
--- a/css/subject.less
+++ b/css/subject.less
@@ -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;
diff --git a/html/subject.html b/html/subject.html
index f411702..15c975d 100644
--- a/html/subject.html
+++ b/html/subject.html
@@ -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">