合并话题/搜索页面
parent
59bacf7900
commit
572d90c867
|
|
@ -92,9 +92,8 @@
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/search/index",
|
"path": "pages/search/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
"navigationBarTitleText": "搜索",
|
||||||
"navigationStyle": "custom" ,
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|
|
||||||
816
pages/index.vue
816
pages/index.vue
|
|
@ -4,33 +4,44 @@
|
||||||
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||||||
<template class="img1BOX" #left>
|
<template class="img1BOX" #left>
|
||||||
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
|
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
|
||||||
<image src="../static/images/icon/tu2-5.png" class="img2"></image>
|
<!-- <image src="../static/images/icon/tu2-5.png" class="img2 image-container" @click="togglePostType"></image> -->
|
||||||
|
<view class="image-container">
|
||||||
|
<image src="../static/images/icon/tu2-5.png" class="img2" @click="togglePostType"></image>
|
||||||
|
<!-- 加号小弹窗 -->
|
||||||
|
<view class="postTypeContainer" v-if="postTypeOpen">
|
||||||
|
<view class="postTypeWindow" v-for="(item, index) in postTypeList" :key="index">
|
||||||
|
<text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<template class="img2Box" #center>
|
<template class="img2Box" #center>
|
||||||
<view class="qiehuanBox">
|
<view class="qiehuanBox">
|
||||||
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
|
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
|
||||||
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
|
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
|
||||||
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
|
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
|
||||||
:list="list1" @click="click"></u-tabs>
|
:list="list1" @click="click"></u-tabs>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
|
|
||||||
<view class="bgc"></view>
|
<view class="bgc"></view>
|
||||||
<!-- 搜索栏 -->
|
<!-- 搜索栏 -->
|
||||||
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
||||||
<view class="sousuoBox flex alignCenter justifyBetween">
|
<view class="sousuoBox flex alignCenter justifyBetween" @click="toEarch">
|
||||||
<view class="souBOx flex alignCenter" @click="toEarch">
|
<view class="souBOx flex alignCenter">
|
||||||
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
||||||
<view class="shuruText">在食堂捡到一张饭卡</view>
|
<view class="shuruText">在食堂捡到一张饭卡</view>
|
||||||
</view>
|
</view>
|
||||||
<image src="../static/images/icon/tu2-3.png" class="img4"></image>
|
<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="category-dropdown flex alignCenter">
|
<view class="category-dropdown flex alignCenter" @click="searchOpen = !searchOpen">
|
||||||
<text class="text1 flex alignCenter">热门</text>
|
<text class="text1 flex alignCenter">{{searchPrerequisite}}</text>
|
||||||
<image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
|
<image v-if="!searchOpen" src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
|
||||||
|
<!-- <image v-else src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
|
||||||
|
<u-icon v-else name="arrow-up-fill" size="26rpx" class="flex alignCenter"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="center-content">
|
<view class="center-content">
|
||||||
|
|
@ -68,21 +79,43 @@
|
||||||
<view class="center-content-post-head">
|
<view class="center-content-post-head">
|
||||||
<!-- 左对齐 -->
|
<!-- 左对齐 -->
|
||||||
<view class="flex alignCenter">
|
<view class="flex alignCenter">
|
||||||
<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
|
<!-- 头像 -->
|
||||||
|
<div class="avatar-container">
|
||||||
|
<u-avatar class="avatar-1" size="84rpx" :src="item.avatar"></u-avatar>
|
||||||
|
<image v-if="item.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
|
||||||
|
</div>
|
||||||
|
<!-- 用户名 -->
|
||||||
<view class="center-content-post-head-title">
|
<view class="center-content-post-head-title">
|
||||||
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
|
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
|
||||||
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
|
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 右对齐 -->
|
<!-- 右对齐 -->
|
||||||
<view class="flex alignCenter">
|
<view class="flex alignCenter" v-if="viewIndex != 0">
|
||||||
<text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
|
<text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
|
||||||
<text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
|
<text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
|
<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
|
||||||
<text class="center-content-post-content">{{item.content}}</text>
|
<text class="center-content-post-content">{{item.content}}</text>
|
||||||
<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
|
<!-- 图片 -->
|
||||||
|
<!--一张图片-->
|
||||||
|
<block v-if="item.media.length == 1">
|
||||||
|
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="item.media[0]"
|
||||||
|
@tap="previewImage(item.media[0], item.media)"></image>
|
||||||
|
</block>
|
||||||
|
<!--二张图片-->
|
||||||
|
<block v-if="item.media.length == 2">
|
||||||
|
<view class="img-style-2">
|
||||||
|
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
|
||||||
|
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
|
||||||
|
:src="mediaItem"></image>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<!--三张图片-->
|
||||||
|
<block v-if="item.media.length >= 3">
|
||||||
|
<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
|
||||||
|
</block>
|
||||||
<!-- tab -->
|
<!-- tab -->
|
||||||
<view class="center-content-post-tab" style="display: flex;">
|
<view class="center-content-post-tab" style="display: flex;">
|
||||||
<text
|
<text
|
||||||
|
|
@ -135,11 +168,65 @@
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<u-line></u-line>
|
<u-line></u-line>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 热门弹出层 -->
|
||||||
|
<u-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
|
||||||
|
|
||||||
|
<view style="height: 77vh; position: relative;margin-left: 32rpx;">
|
||||||
|
<view style="display: flex; height: 48rpx; margin-top: 32rpx;">
|
||||||
|
<image src="../static/images/icon/tu3-5.png" style="width: 48rpx; height: 48rpx;" @click="handerShowHand"></image>
|
||||||
|
|
||||||
|
<view style="
|
||||||
|
margin: auto ;
|
||||||
|
margin-right: 308rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 136rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
font-size: 34rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 35rpx;
|
||||||
|
">
|
||||||
|
全部类目
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<text style="
|
||||||
|
font-weight: Regular;
|
||||||
|
width: 338rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-top: 42rpx;
|
||||||
|
">点击选择类目，仅可选择一个</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="box-a">
|
||||||
|
<view class="box-b" v-for="(item, index) in searchPrerequisiteList" :key="index">
|
||||||
|
<ul
|
||||||
|
class="box-c"
|
||||||
|
:class="{ 'box-d': lefther === index }"
|
||||||
|
@click="handerShowHand"
|
||||||
|
>
|
||||||
|
<li class="offtext" :class="{ boxtext: lefther === index }" @click.stop="handerLi(index)">
|
||||||
|
<text>{{ item }}</text>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -148,7 +235,15 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
viewIndex: 0,
|
viewIndex: 0,
|
||||||
|
searchOpen: false,
|
||||||
|
lefther: 0,
|
||||||
|
searchPrerequisite: '热门',
|
||||||
|
postTypeOpen: false,
|
||||||
|
postTypeList: ['发布话题', '发布活动'],
|
||||||
bgColor: 'rgba(170, 0, 0, 0)',
|
bgColor: 'rgba(170, 0, 0, 0)',
|
||||||
|
searchPrerequisiteList: [
|
||||||
|
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
|
||||||
|
],
|
||||||
list1: [{
|
list1: [{
|
||||||
name: '关注',
|
name: '关注',
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -173,12 +268,14 @@
|
||||||
createTime: '11分钟前',
|
createTime: '11分钟前',
|
||||||
address: '南开大学',
|
address: '南开大学',
|
||||||
isFocus: false,
|
isFocus: false,
|
||||||
|
isOfficial: true,
|
||||||
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||||
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
|
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
|
||||||
type: '1',
|
type: '1',
|
||||||
media: [
|
media: [
|
||||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||||
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
||||||
|
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
|
||||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||||
],
|
],
|
||||||
tab: [
|
tab: [
|
||||||
|
|
@ -197,6 +294,7 @@
|
||||||
createTime: '2024-5-5',
|
createTime: '2024-5-5',
|
||||||
address: '南开大学',
|
address: '南开大学',
|
||||||
isFocus: false,
|
isFocus: false,
|
||||||
|
isOfficial: false,
|
||||||
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||||
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
||||||
type: '1',
|
type: '1',
|
||||||
|
|
@ -212,6 +310,29 @@
|
||||||
commentCount: 13,
|
commentCount: 13,
|
||||||
ifFavorite: true,
|
ifFavorite: true,
|
||||||
favoriteCount: 13
|
favoriteCount: 13
|
||||||
|
},{
|
||||||
|
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||||||
|
uname: '恋爱60秒',
|
||||||
|
createTime: '2024-5-4',
|
||||||
|
address: '理工大学',
|
||||||
|
isFocus: false,
|
||||||
|
isOfficial: false,
|
||||||
|
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||||
|
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
||||||
|
type: '1',
|
||||||
|
media: [
|
||||||
|
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||||
|
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
|
||||||
|
],
|
||||||
|
tab: [
|
||||||
|
'校园风景'
|
||||||
|
],
|
||||||
|
transmitCount: 13,
|
||||||
|
isLike: false,
|
||||||
|
likeCount: 99,
|
||||||
|
commentCount: 13,
|
||||||
|
ifFavorite: false,
|
||||||
|
favoriteCount: 13
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -219,6 +340,24 @@
|
||||||
console.log(this.$store.state.user.QNDomain);
|
console.log(this.$store.state.user.QNDomain);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
previewImage(url, urls) {
|
||||||
|
uni.previewImage({
|
||||||
|
current: url, // 当前显示图片的http链接
|
||||||
|
urls: urls // 需要预览的图片http链接列表
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toScanCode() {
|
||||||
|
// 允许从相机和相册扫码
|
||||||
|
uni.scanCode({
|
||||||
|
success: function (res) {
|
||||||
|
console.log('条码类型：' + res.scanType);
|
||||||
|
console.log('条码内容：' + res.result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
togglePostType() {
|
||||||
|
this.postTypeOpen = !this.postTypeOpen;
|
||||||
|
},
|
||||||
toEarch() {
|
toEarch() {
|
||||||
console.log()
|
console.log()
|
||||||
this.$tab.navigateTo('/pages/search/index')
|
this.$tab.navigateTo('/pages/search/index')
|
||||||
|
|
@ -261,12 +400,24 @@
|
||||||
addFocus(index) {
|
addFocus(index) {
|
||||||
console.log(111,index)
|
console.log(111,index)
|
||||||
this.postList[index].isFocus = !this.postList[index].isFocus;
|
this.postList[index].isFocus = !this.postList[index].isFocus;
|
||||||
|
},
|
||||||
|
handerLi(res) {
|
||||||
|
this.lefther = res;
|
||||||
|
console.log(res)
|
||||||
|
this.searchPrerequisite = this.searchPrerequisiteList[res]
|
||||||
|
setTimeout(() => {
|
||||||
|
this.searchOpen = !this.searchOpen
|
||||||
|
}, 350);
|
||||||
|
|
||||||
|
},
|
||||||
|
handerShowHand() {
|
||||||
|
this.searchOpen = !this.searchOpen
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
// 微信小程序配置
|
// 微信小程序配置
|
||||||
:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
|
:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
|
||||||
padding-left: 32rpx !important;
|
padding-left: 32rpx !important;
|
||||||
|
|
@ -293,25 +444,18 @@
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.img2Box{
|
||||||
|
|
||||||
|
.qiehuanBox{
|
||||||
.img2Box{
|
padding-left: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
.qiehuanBox{
|
justify-content: center;
|
||||||
padding-left: 32rpx;
|
}
|
||||||
display: flex;
|
}
|
||||||
align-content: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-scroll-list.data-v-fea2b4f4 {
|
.u-scroll-list.data-v-fea2b4f4 {
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -331,255 +475,387 @@
|
||||||
|
|
||||||
|
|
||||||
.bgc{
|
.bgc{
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
height: 356rpx;
|
height: 356rpx;
|
||||||
background: linear-gradient(90deg, rgb(201, 246, 245), rgb(248, 248, 226));
|
background: linear-gradient(90deg, rgb(201, 246, 245), rgb(248, 248, 226));
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0rpx;
|
top: 0rpx;
|
||||||
left: 0rpx;
|
left: 0rpx;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.sousuoBox1{
|
.sousuoBox1{
|
||||||
margin: 16rpx 32rpx;
|
margin: 16rpx 32rpx;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.sousuoBox{
|
.sousuoBox{
|
||||||
width: 538rpx;
|
width: 538rpx;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
border: #B3D7FF solid 2rpx;
|
border: #B3D7FF solid 2rpx;
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
background: #ffffff80;
|
background: #ffffff80;
|
||||||
}
|
}
|
||||||
.souBOx{
|
.souBOx{
|
||||||
margin-left: 32rpx;
|
margin-left: 32rpx;
|
||||||
}
|
}
|
||||||
.img3{
|
.img3{
|
||||||
width: 35rpx;
|
width: 36rpx;
|
||||||
height: 35rpx;
|
height: 36rpx;
|
||||||
}
|
}
|
||||||
.img4{
|
.img4{
|
||||||
width: 32rpx;
|
width: 36rpx;
|
||||||
height: 32rpx;
|
height: 36rpx;
|
||||||
margin-right: 32rpx;
|
margin-right: 16rpx;
|
||||||
}
|
}
|
||||||
.category-dropdown {
|
.category-dropdown {
|
||||||
margin-left: 42rpx;
|
// margin-left: 42rpx;
|
||||||
}
|
}
|
||||||
.text1{
|
.text1{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
width: 60rpx;
|
// width: 60rpx;
|
||||||
height: 31rpx;
|
// height: 31rpx;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #1B1B1B 100%;
|
color: #1B1B1B;
|
||||||
margin-right: 8rpx;
|
margin-right: 8rpx;
|
||||||
}
|
}
|
||||||
.img5{
|
.img5{
|
||||||
width: 26rpx;
|
width: 26rpx;
|
||||||
height: 16rpx;
|
height: 26rpx;
|
||||||
}
|
}
|
||||||
.shuruText{
|
.shuruText{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-left: 18rpx;
|
margin-left: 18rpx;
|
||||||
}
|
}
|
||||||
.center-content{
|
.center-content{
|
||||||
/* width: 750rpx; */
|
/* width: 750rpx; */
|
||||||
/* height: 2592rpx; */
|
/* height: 2592rpx; */
|
||||||
border-radius: 64rpx 64rpx 0 0;
|
border-radius: 64rpx 64rpx 0 0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
}
|
}
|
||||||
.center-content-focus{
|
.center-content-focus{
|
||||||
padding: 50rpx 0;
|
padding: 50rpx 0;
|
||||||
}
|
}
|
||||||
.center-content-focus-text{
|
.center-content-focus-text{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
width: 174rpx;
|
width: 174rpx;
|
||||||
height: 35rpx;
|
// height: 35rpx;
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
display: block;
|
display: block;
|
||||||
/* padding-top: 52rpx; */
|
/* padding-top: 52rpx; */
|
||||||
margin-left: 32rpx;
|
margin-left: 32rpx;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
.center-content-focus-list {
|
.center-content-focus-list {
|
||||||
margin-left: 32rpx;
|
margin-left: 32rpx;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
.u-scroll-list.data-v-e2a26316 {
|
.u-scroll-list.data-v-e2a26316 {
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
.center-content-focus-item{
|
.center-content-focus-item{
|
||||||
/* flex-direction: column; */
|
/* flex-direction: column; */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center; /* 水平居中对齐 */
|
||||||
|
text-align: center; /* 文字水平居中对齐 */
|
||||||
|
width: 160rpx;
|
||||||
|
/* height: 160rpx; */
|
||||||
|
margin-right: 44rpx;
|
||||||
|
}
|
||||||
|
.center-content-focus-item-avatat{
|
||||||
|
width: 120rpx !important;
|
||||||
|
height: 120rpx !important;
|
||||||
|
background: #999999 !important;
|
||||||
|
margin-bottom: 16rpx !important;
|
||||||
|
}
|
||||||
|
.center-content-focus-item-text{
|
||||||
|
font-weight: 400;
|
||||||
|
width: 162rpx;
|
||||||
|
// height: 28rpx;
|
||||||
|
// line-height: 28rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
.center-content-focus-line{
|
||||||
|
height: 16rpx;
|
||||||
|
background: #e5e5e5;
|
||||||
|
}
|
||||||
|
.center-content-post {
|
||||||
|
}
|
||||||
|
.center-content-post-padding {
|
||||||
|
padding: 46rpx 32rpx;
|
||||||
|
}
|
||||||
|
.center-content-post-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-content-post-head-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center; /* 水平居中对齐 */
|
margin-left: 20rpx;
|
||||||
text-align: center; /* 文字水平居中对齐 */
|
}
|
||||||
width: 160rpx;
|
|
||||||
/* height: 160rpx; */
|
.center-content-post-head-title-uname {
|
||||||
margin-right: 44rpx;
|
font-weight: 400;
|
||||||
}
|
font-size: 30rpx;
|
||||||
.center-content-focus-item-avatat{
|
text-align: left;
|
||||||
width: 120rpx !important;
|
color: #000000;
|
||||||
height: 120rpx !important;
|
align-self: flex-start; /* 垂直起始对齐 */
|
||||||
background: #999999 !important;
|
margin-bottom: 20rpx;
|
||||||
margin-bottom: 16rpx !important;
|
height: 32rpx;
|
||||||
}
|
line-height: 32rpx;
|
||||||
.center-content-focus-item-text{
|
}
|
||||||
font-weight: 400;
|
|
||||||
width: 162rpx;
|
.center-content-post-head-title-timeAddress {
|
||||||
height: 28rpx;
|
font-weight: 400;
|
||||||
font-size: 26rpx;
|
font-size: 30rpx;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-top: 16rpx;
|
align-self: flex-end; /* 垂直结束对齐 */
|
||||||
}
|
height: 30rpx;
|
||||||
.center-content-focus-line{
|
line-height: 30rpx;
|
||||||
height: 16rpx;
|
}
|
||||||
background: #e5e5e5;
|
.no-focus-text {
|
||||||
}
|
font-weight: 400;
|
||||||
.center-content-post {
|
width: 58rpx;
|
||||||
}
|
// height: 30rpx;
|
||||||
.center-content-post-padding {
|
font-size: 28rpx;
|
||||||
padding: 46rpx 32rpx;
|
text-align: left;
|
||||||
}
|
color: #3477FC;
|
||||||
.center-content-post-head {
|
}
|
||||||
|
.focus-text {
|
||||||
|
font-weight: 400;
|
||||||
|
/* width: 58rpx; */
|
||||||
|
// height: 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #2553b4;
|
||||||
|
}
|
||||||
|
.center-content-post-title{
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
/* width: 670rpx; */
|
||||||
|
// height: 80rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #000000;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||||||
|
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||||||
|
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
||||||
|
overflow: hidden; /* 隐藏超出部分 */
|
||||||
|
}
|
||||||
|
.center-content-post-content{
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
/* width: 670rpx; */
|
||||||
|
// height: 80rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-bottom: 34rpx;
|
||||||
|
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||||||
|
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||||||
|
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
||||||
|
overflow: hidden; /* 隐藏超出部分 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-album__row[data-v-723ad357] {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
.u-album__row.data-v-723ad357 {
|
||||||
|
justify-content: center !important;
|
||||||
|
/* height: 200rpx !important; */
|
||||||
|
}
|
||||||
|
.u-album__row__wrapper {}
|
||||||
|
.data-v-6fcabaad {
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
/* width: 200rpx !important;
|
||||||
|
height: 200rpx !important; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-content-post-tab{
|
||||||
|
margin-top: 38rpx;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.post-list-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
|
||||||
|
}
|
||||||
|
.center-content-post-tab-text{
|
||||||
|
font-weight: 400;
|
||||||
|
/* width: 139rpx; */
|
||||||
|
// height: 26rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #3477FC;
|
||||||
|
/* width: 130rpx; */
|
||||||
|
// height: 44rpx;
|
||||||
|
// line-height: 44rpx;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
background: #f7f8fa;
|
||||||
|
padding: 8rpx;
|
||||||
|
/* margin-left: 50rpx; */
|
||||||
|
}
|
||||||
|
.center-content-post-tab-text:nth-child(2) {
|
||||||
|
/* 您的样式 */
|
||||||
|
margin-left: 24rpx; /* 添加额外的左边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin50 {
|
||||||
|
margin-left: 50rpx; /* 添加额外的左边距 */
|
||||||
|
}
|
||||||
|
.count{
|
||||||
|
font-weight: 400;
|
||||||
|
width: 48rpx;
|
||||||
|
/* height: 23rpx; */
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #787878;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-a {
|
||||||
|
margin-top: 42rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-content-post-head-title {
|
.box-b {
|
||||||
display: flex;
|
width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
|
||||||
flex-direction: column;
|
margin-bottom: 24rpx;
|
||||||
margin-left: 20rpx;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.center-content-post-head-title-uname {
|
.box-c {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 82rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: #f7f8fc;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offtext {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
text-align: left;
|
text-align: center;
|
||||||
color: #000000;
|
font-family: "Microsoft YaHei";
|
||||||
align-self: flex-start; /* 垂直起始对齐 */
|
// line-height: 82rpx;
|
||||||
margin-bottom: 20rpx;
|
display: block;
|
||||||
}
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 12rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
.center-content-post-head-title-timeAddress {
|
.boxtext {
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 30rpx;
|
color: #91b4ff;
|
||||||
text-align: left;
|
}
|
||||||
color: #999999;
|
|
||||||
align-self: flex-end; /* 垂直结束对齐 */
|
|
||||||
}
|
|
||||||
.no-focus-text {
|
|
||||||
font-weight: 400;
|
|
||||||
width: 58rpx;
|
|
||||||
height: 29rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: #3477FC;
|
|
||||||
}
|
|
||||||
.focus-text {
|
|
||||||
font-weight: 400;
|
|
||||||
/* width: 58rpx; */
|
|
||||||
height: 29rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: #2553b4;
|
|
||||||
}
|
|
||||||
.center-content-post-title{
|
|
||||||
display: block;
|
|
||||||
font-weight: 600;
|
|
||||||
/* width: 670rpx; */
|
|
||||||
height: 80rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: #000000 100%;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
|
||||||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
|
||||||
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
|
||||||
overflow: hidden; /* 隐藏超出部分 */
|
|
||||||
}
|
|
||||||
.center-content-post-content{
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
/* width: 670rpx; */
|
|
||||||
height: 80rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: #000000;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
margin-bottom: 34rpx;
|
|
||||||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
|
||||||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
|
||||||
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
|
||||||
overflow: hidden; /* 隐藏超出部分 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.u-album__row[data-v-723ad357] {
|
.box-d {
|
||||||
justify-content: center !important;
|
border-color: #91b4ff;
|
||||||
}
|
}
|
||||||
.u-album__row.data-v-723ad357 {
|
|
||||||
justify-content: center !important;
|
.avatar-container {
|
||||||
/* height: 200rpx !important; */
|
position: relative;
|
||||||
}
|
}
|
||||||
.data-v-723ad357 {
|
|
||||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
.avatar-1 {
|
||||||
/* width: 200rpx !important;
|
position: relative;
|
||||||
height: 200rpx !important; */
|
}
|
||||||
}
|
|
||||||
|
.official-1 {
|
||||||
|
position: absolute;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.img-style-1 {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 600rpx;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
width: 686rpx;
|
||||||
|
height: 370rpx;
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
background: #b3d7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-style-2 {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
image {
|
||||||
|
margin: 6rpx;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 306rpx;
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-container {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative; /* 设置父元素为相对定位 */
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.center-content-post-tab{
|
/* 其他样式... */
|
||||||
margin-top: 38rpx;
|
|
||||||
margin-bottom: 54rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.postTypeContainer {
|
||||||
.post-list-bottom {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
justify-content: center; /* 水平居中 */
|
align-items: center; /* 垂直居中 */
|
||||||
}
|
justify-content: space-around; /* 平均分布子元素 */
|
||||||
|
width: 202rpx;
|
||||||
|
height: 122rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 2rpx #B4D6FF;
|
||||||
|
position: absolute; /* 设置子元素为绝对定位 */
|
||||||
|
top: 100%; /* 将子元素定位到父元素底部 */
|
||||||
|
left: 50%; /* 将子元素水平居中 */
|
||||||
|
transform: translateX(-50%); /* 通过平移来水平居中 */
|
||||||
|
top: calc(100% + 20rpx); /* 将子元素定位到父元素底部，并增加 20rpx 的距离 */
|
||||||
|
}
|
||||||
|
|
||||||
.p-item {
|
|
||||||
display: flex;
|
.postTypeWindow {
|
||||||
align-items: center; /* 垂直居中 */
|
/* 这里不需要设置 display: flex; */
|
||||||
justify-content: center; /* 水平居中 */
|
/* 这里也不需要设置 flex-direction: column; */
|
||||||
|
/* 这里也不需要设置 align-items: center; */
|
||||||
}
|
font-weight: 400;
|
||||||
.center-content-post-tab-text{
|
width: 100rpx;
|
||||||
font-weight: 400;
|
height: 26rpx;
|
||||||
/* width: 139rpx; */
|
font-size: 24rpx;
|
||||||
height: 25rpx;
|
line-height: 26rpx;
|
||||||
font-size: 24rpx;
|
text-align: left;
|
||||||
text-align: left;
|
color: #CAF6F5;
|
||||||
color: #3477FC;
|
}
|
||||||
/* width: 130rpx; */
|
|
||||||
height: 44rpx;
|
|
||||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
||||||
background: #f7f8fa;
|
|
||||||
/* margin-left: 50rpx; */
|
|
||||||
}
|
|
||||||
.center-content-post-tab-text:nth-child(2) {
|
|
||||||
/* 您的样式 */
|
|
||||||
margin-left: 50rpx; /* 添加额外的左边距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin50 {
|
|
||||||
margin-left: 50rpx; /* 添加额外的左边距 */
|
|
||||||
}
|
|
||||||
.count{
|
|
||||||
font-weight: 400;
|
|
||||||
width: 47rpx;
|
|
||||||
/* height: 23rpx; */
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: #787878;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,241 +1,239 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="position: relative; ">
|
<view class="">
|
||||||
|
<!-- <u-navbar leftText=" " title="搜索" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||||||
<u-navbar leftText="" title="搜索"
|
</u-navbar> -->
|
||||||
:placeholder="true"
|
<view class="bgc"></view>
|
||||||
leftIcon="arrow-left"
|
<!-- 搜索栏 -->
|
||||||
:leftIconSize="32"
|
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
||||||
@leftClick="leftClick"
|
<view class="sousuoBox flex alignCenter justifyBetween">
|
||||||
:safeAreaInsetTop="true" :bgColor="bgColor">
|
<view class="souBOx flex alignCenter justifyBetween" >
|
||||||
</u-navbar>
|
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
||||||
<view class="top">
|
<!-- <view class="shuruText">在食堂捡到一张饭卡</view> -->
|
||||||
|
<input v-model="keyword" @input="toContent" @confirm="onSearch" class="shuruText" :placeholder="placeholderText" type="text">
|
||||||
|
|
||||||
|
|
||||||
<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>
|
||||||
<view class="sousuoText" @click="deletehistory">搜索</view>
|
<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||||||
|
</view>
|
||||||
|
<view class="category-dropdown flex alignCenter">
|
||||||
|
<text class="text1 flex alignCenter" @click="onSearch">搜索</text>
|
||||||
|
<!-- <image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 搜索历史 -->
|
||||||
|
<view class="history" v-if="!noHistortOpen">
|
||||||
<!-- 搜索历史 -->
|
<view class="history-top">
|
||||||
<view class="history" v-if="!histortOpen">
|
<view class="history-title">搜索历史</view>
|
||||||
<view class="hustortTop">
|
<image src="../static/images/icon/tu3-4.png" class="history-icon" @click="clearHistory"></image>
|
||||||
<view class="historyTopText">搜索历史</view>
|
</view>
|
||||||
<image src="../../static//images/search/shanchu.png" class="img5"></image>
|
<view class="history-center">
|
||||||
</view>
|
<view v-for="(item, index) in historyList" :key="index" class="history-item">
|
||||||
<view class="hustoryCenter">
|
<text @click="clickHistory(index)" class="history-item-text">{{ item }}</text>
|
||||||
<view v-for="(item,index) in historyList" :key="index" class="hustoryList">
|
</view>
|
||||||
<view class="item">
|
</view>
|
||||||
{{ item }}
|
</view>
|
||||||
</view>
|
<!-- 无内容 -->
|
||||||
</view>
|
<view v-else>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 无内容 -->
|
|
||||||
<view v-if="histortOpen">
|
|
||||||
<view class="noContent">
|
<view class="noContent">
|
||||||
<image src="../../static/images/search/noContent.png" class="img6"></image>
|
<image src="../static/images/icon/tu4-9.png" class="img6"></image>
|
||||||
<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
|
<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
|
export default {
|
||||||
import {
|
data() {
|
||||||
ref,
|
return {
|
||||||
reactive,
|
keyword: '',
|
||||||
toRefs,
|
placeholderText: '在食堂捡到一张饭卡',
|
||||||
getCurrentInstance
|
bgColor: 'rgba(170, 0, 0, 0)',
|
||||||
} from 'vue';
|
noHistortOpen: false,
|
||||||
|
historyList: ['钥匙丢了 111', '外卖丢了', 'U盘丢了', '我丢了', '丢']
|
||||||
const keyword = ref('')
|
}
|
||||||
|
},
|
||||||
const noSearch = ref(false)
|
onLoad() {
|
||||||
const bgColor = ref('#ffffff80')
|
// 从缓存中读取历史记录
|
||||||
const leftClick = ()=> {
|
var hisList = JSON.parse(uni.getStorageSync('kw'));
|
||||||
uni.navigateBack({
|
if (hisList.length != 0) {
|
||||||
delta: 1
|
this.historyList=JSON.parse(uni.getStorageSync('kw'))
|
||||||
})
|
}
|
||||||
}
|
},
|
||||||
const histortOpen = ref(false)
|
methods: {
|
||||||
const historyList = ref(['三毛流浪记','假如给我三天光明','遥望无期',
|
clickHistory(index) {
|
||||||
'假如给我三天光明(青少年儿童读物)','遥望无期',
|
console.log('触发')
|
||||||
'过年','遥望无期','纵横还第三万里'])
|
this.keyword = this.historyList[index]
|
||||||
|
},
|
||||||
const deletehistory = () => {
|
toContent() {
|
||||||
histortOpen.value = !histortOpen.value
|
this.noHistortOpen = false
|
||||||
}
|
},
|
||||||
|
toScanCode() {
|
||||||
|
// 允许从相机和相册扫码
|
||||||
</script>
|
uni.scanCode({
|
||||||
|
success: function (res) {
|
||||||
<style lang="scss" scoped>
|
console.log('条码类型：' + res.scanType);
|
||||||
|
console.log('条码内容：' + res.result);
|
||||||
: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;
|
onSearch() {
|
||||||
height: 35rpx;
|
console.log('搜索 ' + this.keyword)
|
||||||
}
|
//把搜索的关键字保存到historyList中
|
||||||
|
if (this.keyword == '') {
|
||||||
|
console.log('空的')
|
||||||
|
this.keyword = this.placeholderText;
|
||||||
}
|
}
|
||||||
.img4 {
|
this.saveHistory()
|
||||||
width: 32rpx;
|
if(this.keyword == '在食堂捡到一张饭卡') {
|
||||||
height: 32rpx;
|
this.noHistortOpen = true
|
||||||
margin-right: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sousuoText {
|
|
||||||
width: 62rpx;
|
|
||||||
height: 31rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 保存历史记录
|
||||||
|
saveHistory(){
|
||||||
}
|
console.log('保存历史')
|
||||||
}
|
// if(this.historyList.indexOf(this.keyword)==-1){
|
||||||
|
this.historyList.unshift(this.keyword)
|
||||||
|
// 把用户输入的内容保存到历史记录当中
|
||||||
|
uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
|
||||||
|
// }
|
||||||
|
},
|
||||||
.history {
|
// 清空历史记录
|
||||||
margin-top: 30rpx;
|
clearHistory(){
|
||||||
.hustortTop{
|
this.historyList=[]
|
||||||
display: flex;
|
uni.setStorageSync('kw','[]')
|
||||||
justify-content: space-between;
|
// if(his.length==0){
|
||||||
margin-left: 32rpx;
|
// this.his=!this.his
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bgc{
|
||||||
|
width: 750rpx;
|
||||||
|
height: 108rpx;
|
||||||
|
background: #FAF9FA;
|
||||||
|
position: fixed;
|
||||||
|
top: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.sousuoBox1{
|
||||||
|
margin: 16rpx 32rpx;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.sousuoBox{
|
||||||
|
width: 580rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border: #B3D7FF solid 2rpx;
|
||||||
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
|
background: #ffffff80;
|
||||||
|
}
|
||||||
|
.souBOx{
|
||||||
|
margin-left: 32rpx;
|
||||||
|
}
|
||||||
|
.img3{
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
}
|
||||||
|
.img4{
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
.category-dropdown {
|
||||||
|
margin-left: 42rpx;
|
||||||
|
}
|
||||||
|
.text1{
|
||||||
|
font-weight: 400;
|
||||||
|
width: 62rpx;
|
||||||
|
/* height: 32rpx; */
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #1B1B1B;
|
||||||
|
}
|
||||||
|
.img5{
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
.shuruText{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
margin-left: 18rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex-grow: 1; /* 让输入框占据剩余空间 */
|
||||||
|
width: 380rpx;
|
||||||
|
}
|
||||||
|
.history {
|
||||||
|
margin-top: 44rpx;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-title {
|
||||||
|
font-weight: 400;
|
||||||
|
width: 140rpx;
|
||||||
|
/* height: 36rpx; */
|
||||||
|
/* line-height: 36rpx; */
|
||||||
|
font-size: 34rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #1B1B1B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-icon {
|
||||||
|
width: 42rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-center {
|
||||||
|
|
||||||
}
|
}
|
||||||
.noContent{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.noContentText{
|
.history-item {
|
||||||
font-weight: 400;
|
display: inline-block; /* 将 history-item 设置为行内块元素 */
|
||||||
width: 490rpx;
|
margin: 10rpx 12rpx;
|
||||||
height: 30rpx;
|
}
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img6{
|
.history-item-text {
|
||||||
|
font-weight: 400;
|
||||||
|
/* width: 140rpx; */
|
||||||
|
/* height: 58rpx; */
|
||||||
|
/* line-height: 58rpx; */
|
||||||
|
/* width: 180rpx; */
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #666666;
|
||||||
|
border-radius: 30rpx; /* 调整圆角 */
|
||||||
|
background: #f6f6f6;
|
||||||
|
display: flex; /* 使用 Flex 布局 */
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
padding: 14rpx 20rpx; /* 添加内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.img6{
|
||||||
width: 326rpx;
|
width: 326rpx;
|
||||||
height: 280rpx;
|
height: 280rpx;
|
||||||
margin-bottom: 56rpx;
|
|
||||||
margin-top: 150rpx;
|
|
||||||
}
|
}
|
||||||
|
.noContent {
|
||||||
|
margin-top: 150rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.noContentText{
|
||||||
|
font-weight: 400;
|
||||||
|
width: 490rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue