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-12-18 11:48:27 +08:00
parent 2f5b666761
commit 523a973d56
3 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/search.css
View File

@ -55,6 +55,7 @@
border-radius: 183px;
padding: 0 20px;
margin-bottom: 30px;
position: relative;
}
.boxbox .body .left .input-box input {
border: none;
@ -68,6 +69,43 @@
height: 18px;
cursor: pointer;
}
.boxbox .body .left .input-box .hint-mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.boxbox .body .left .input-box .hint-list {
position: absolute;
width: 100%;
height: 0;
top: 48px;
left: 0;
background-color: #ffffff;
border-radius: 10px;
z-index: 2;
overflow: auto;
animation: show 0.3s forwards;
border: 0px solid #ebebeb;
}
@keyframes show {
0% {
height: 0;
}
100% {
border-width: 1px;
height: 300px;
}
}
.boxbox .body .left .input-box .hint-list .item {
color: #333333;
font-size: 14px;
padding: 10px;
cursor: pointer;
border-bottom: 1px #e6e4e4 dotted;
}
.boxbox .body .left .total {
font-size: 14px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;

45
css/search.less
View File

@ -57,6 +57,7 @@
border-radius: 183px;
padding: 0 20px;
margin-bottom: 30px;
position: relative;
input {
border: none;
outline: none;
@ -70,6 +71,48 @@
height: 18px;
cursor: pointer;
}
.hint-mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.hint-list {
position: absolute;
width: 100%;
height: 0;
top: 48px;
left: 0;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
z-index: 2;
overflow: auto;
animation: show 0.3s forwards;
border: 0px solid rgba(235, 235, 235, 1);
@keyframes show {
0% {
height: 0;
}
100% {
border-width: 1px;
height: 300px;
}
}
.item {
color: #333333;
font-size: 14px;
padding: 10px;
cursor: pointer;
border-bottom: 1px #e6e4e4 dotted;
}
}
}
.total {
@ -324,7 +367,7 @@
color: #000000;
left: 50%;
transform: translateX(-50%);
.btn {
line-height: 50px;
margin: 0 24px;

6
html/search.html
View File

@ -31,6 +31,10 @@
<div class="input-box flexacenter">
<input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
<img class="search-icon" src="/img/search-black-icon.svg" />
<div class="hint-mask"></div>
<div class="hint-list scrollbar">
<div class="item" v-for="item in 30">222222</div>
</div>
</div>
<div class="total flexacenter">
共
@ -199,7 +203,7 @@
count.value = 0
getList()
}
const selectKW = name => {
kw.value = name
if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)