重写搜索界面样式
26947
parent
7fce32b33e
commit
6a0d93b85b
|
|
@ -1,8 +1,8 @@
|
|||
// 应用全局配置
|
||||
export default {
|
||||
// baseUrl: 'https://vue.ruoyi.vip/prod-api',
|
||||
// baseUrl: 'http://47.93.242.168:8080',
|
||||
baseUrl: 'http://localhost:8080',
|
||||
baseUrl: 'http://47.93.242.168:8080',
|
||||
// baseUrl: 'http://localhost:8080',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
|
|
|
|||
|
|
@ -90,7 +90,9 @@
|
|||
}, {
|
||||
"path": "pages/search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索"
|
||||
|
||||
"navigationStyle": "custom" ,
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}],
|
||||
"tabBar": {
|
||||
|
|
|
|||
1614
pages/index.vue
1614
pages/index.vue
File diff suppressed because it is too large
Load Diff
|
|
@ -1,182 +1,241 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<view class="top">
|
||||
<view class="search">
|
||||
<view style="width: 550rpx; height: 61.94rpx;">
|
||||
<!-- <up-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" placeholder-color="#FF0000"></up-search> -->
|
||||
<view style="position: relative;">
|
||||
<u-search :clearabled="false" color="#414141"
|
||||
v-model="keyword" :show-action="false" borderColor="#B3D7FF" bgColor="#ffffff20"></u-search>
|
||||
<view class="scan">
|
||||
<u-icon name="scan" size="22" @click="toScan()"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<up-text @click.stop="onSearch" bold="true" size="28rpx" text="搜索"></up-text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无内容 -->
|
||||
<view class="noSearch" v-if="noSearch">
|
||||
<view class="row">
|
||||
<img style="width: 400rpx;" src="../../static/images/icon/noSearchData.png" alt="" />
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>没有找到相关内容噢，换个词试试吧！</text>
|
||||
</view>
|
||||
</view>
|
||||
<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 class="history" v-else>
|
||||
<view class="history-title">
|
||||
<text>搜索历史</text>
|
||||
<uni-icons @click.stop="clearHistory()" type="trash" size="20" color="#C0C0C0" ></uni-icons>
|
||||
</view>
|
||||
<view class="history-content" v-if="historyList.length!=0">
|
||||
<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
|
||||
{{historyItem}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-none" v-else>
|
||||
<text style="color: #757575;">无搜索历史</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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';
|
||||
|
||||
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 ){
|
||||
|
||||
const keyword = ref('')
|
||||
const historyList = ref(['丢东西了'])
|
||||
const noSearch = ref(false)
|
||||
|
||||
function onSearch() {
|
||||
console.log('搜索 ' + keyword.value)
|
||||
//把搜索的关键字保存到historyList中
|
||||
saveHistory()
|
||||
if(keyword.value == 'null') {
|
||||
noSearch.value = true
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存历史记录
|
||||
function saveHistory() {
|
||||
// if (historyList.value.indexOf(keyword.value) == -1) {
|
||||
historyList.value.unshift(keyword.value);
|
||||
// 将非空的数组转换为字符串后再保存
|
||||
uni.setStorageSync('kw', JSON.stringify(historyList.value));
|
||||
// }
|
||||
}
|
||||
|
||||
// 清空历史记录
|
||||
function clearHistory(){
|
||||
historyList.value=[]
|
||||
uni.setStorageSync('kw','[]')
|
||||
// if(his.length==0){
|
||||
// this.his=!this.his
|
||||
}
|
||||
|
||||
|
||||
function onLoad() {
|
||||
// 从缓存中读取历史记录
|
||||
historyList.value=JSON.parse(uni.getStorageSync('kw'))
|
||||
}
|
||||
.hustoryCenter{
|
||||
margin: 32rpx;
|
||||
display: flex;
|
||||
|
||||
onLoad()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
background-color: #FAF9FA;
|
||||
height: 80rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 30rpx;
|
||||
z-index: 100;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noSearch {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直方向排列 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: 600rpx; /* 设置合适的高度，可以是页面的高度 */
|
||||
|
||||
}
|
||||
.noContent{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
margin-bottom: 20rpx; /* 可以根据需要调整行之间的间距 */
|
||||
.noContentText{
|
||||
font-weight: 400;
|
||||
width: 490rpx;
|
||||
height: 30rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.img6{
|
||||
|
||||
width: 326rpx;
|
||||
height: 280rpx;
|
||||
margin-bottom: 56rpx;
|
||||
margin-top: 150rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.noSearch .row img {
|
||||
/* 图片样式 */
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.noSearch .row text {
|
||||
/* 文字样式 */
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.history{
|
||||
margin-top: 30rpx;
|
||||
.history-title{
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.history-content{
|
||||
width: 90%;
|
||||
margin: 10rpx auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.history-item{
|
||||
font-size: 27rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
color: #797979;
|
||||
background-color: #F8F8F8;
|
||||
margin-top: 25rpx;
|
||||
margin-right: 10rpx;
|
||||
padding:0 20rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
.history-none{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Loading…
Reference in New Issue