241 lines
4.3 KiB
Vue
241 lines
4.3 KiB
Vue
<template>
|
|
<view style="position: relative; ">
|
|
|
|
<u-navbar leftText="" title="搜索"
|
|
:placeholder="true"
|
|
leftIcon="arrow-left"
|
|
:leftIconSize="32"
|
|
@leftClick="leftClick"
|
|
:safeAreaInsetTop="true" :bgColor="bgColor">
|
|
</u-navbar>
|
|
<view class="top">
|
|
|
|
|
|
|
|
<view class="bj"></view>
|
|
<view class="sousuoBox1">
|
|
<view class="sousuoBox">
|
|
<view class="souBOx">
|
|
<image src="../../static/images/search/tu2-2.png" class="img3"></image>
|
|
<view class="shuruText">在食堂捡到一张饭卡</view>
|
|
</view>
|
|
<image src="../../static/images/search/tu2-3.png" class="img4"></image>
|
|
|
|
</view>
|
|
<view class="sousuoText" @click="deletehistory">搜索</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 搜索历史 -->
|
|
<view class="history" v-if="!histortOpen">
|
|
<view class="hustortTop">
|
|
<view class="historyTopText">搜索历史</view>
|
|
<image src="../../static//images/search/shanchu.png" class="img5"></image>
|
|
</view>
|
|
<view class="hustoryCenter">
|
|
<view v-for="(item,index) in historyList" :key="index" class="hustoryList">
|
|
<view class="item">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 无内容 -->
|
|
<view v-if="histortOpen">
|
|
<view class="noContent">
|
|
<image src="../../static/images/search/noContent.png" class="img6"></image>
|
|
<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
toRefs,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
|
|
const keyword = ref('')
|
|
|
|
const noSearch = ref(false)
|
|
const bgColor = ref('#ffffff80')
|
|
const leftClick = ()=> {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
const histortOpen = ref(false)
|
|
const historyList = ref(['三毛流浪记','假如给我三天光明','遥望无期',
|
|
'假如给我三天光明(青少年儿童读物)','遥望无期',
|
|
'过年','遥望无期','纵横还第三万里'])
|
|
|
|
const deletehistory = () => {
|
|
histortOpen.value = !histortOpen.value
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
:deep(.u-navbar__content__title.data-v-f631659b ){
|
|
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
color: #303133;
|
|
|
|
}
|
|
|
|
.top {
|
|
position: relative;
|
|
background: #ffffff80;
|
|
.img1BOX{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
margin-top: 88rpx;
|
|
}
|
|
.bj{
|
|
background-color: #FAF9FA;
|
|
z-index: -1;
|
|
width: 750rpx;
|
|
height: 268rpx;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
}
|
|
.sousuoBox1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
align-items: center;
|
|
padding: 16rpx 32rpx 16rpx 32rpx;
|
|
width: auto;
|
|
.sousuoBox{
|
|
display: flex;
|
|
align-content: center;
|
|
width: 538rpx;
|
|
height: 60rpx;
|
|
border: #B3D7FF solid 2rpx;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.souBOx {
|
|
margin-left: 32rpx;
|
|
display: flex;
|
|
align-content: center;
|
|
|
|
.shuruText {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
.img3 {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
|
|
}
|
|
.img4 {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 32rpx;
|
|
}
|
|
}
|
|
.sousuoText {
|
|
width: 62rpx;
|
|
height: 31rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.history {
|
|
margin-top: 30rpx;
|
|
.hustortTop{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
.historyTopText{
|
|
width: 139rpx;
|
|
height: 35rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 400;
|
|
}
|
|
.img5{
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
.hustoryCenter{
|
|
margin: 32rpx;
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.hustoryList{
|
|
margin-right: 24rpx;
|
|
height: 58rpx;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
background: #f6f6f6;
|
|
margin-bottom: 22rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.item{
|
|
font-weight: 400;
|
|
height: 29rpx;
|
|
font-size: 28rpx;
|
|
// margin: 14rpx 20rpx;
|
|
padding-bottom: 20px;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.noContent{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.noContentText{
|
|
font-weight: 400;
|
|
width: 490rpx;
|
|
height: 30rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.img6{
|
|
|
|
width: 326rpx;
|
|
height: 280rpx;
|
|
margin-bottom: 56rpx;
|
|
margin-top: 150rpx;
|
|
}
|
|
}
|
|
</style> |