重写搜索界面样式
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": {
|
||||
|
|
|
|||
474
pages/index.vue
474
pages/index.vue
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<view style="background: linear-gradient(-90deg, #f8f8e2, #c9f6f5);">
|
||||
<view class="" >
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view class="top-plus">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- <u-navbar
|
||||
leftText="返回"
|
||||
<!-- <u-navbar
|
||||
leftText=""
|
||||
:fixed="false"
|
||||
title="个人中心"
|
||||
title=""
|
||||
:safeAreaInsetTop="false"
|
||||
>
|
||||
<view
|
||||
|
|
@ -35,26 +35,34 @@
|
|||
<view class="top">
|
||||
<view class="top-left">
|
||||
<view class="" style="margin-right: 27rpx;">
|
||||
<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png" mode=""></image>
|
||||
<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="">
|
||||
<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_motion2.png" mode=""></image>
|
||||
<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;"
|
||||
src="../static/images/icon/icon_motion2.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="top-center">
|
||||
<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="25" @click="click" :activeStyle="{
|
||||
<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="50" lineHeight="8"
|
||||
@click="click" :activeStyle="{
|
||||
color: '#303133',
|
||||
fontWeight: 'bold',
|
||||
transform: 'none',
|
||||
fontSize: '40rpx',
|
||||
marginBottom: '12rpx',
|
||||
paddingTop: '10rpx'
|
||||
width: '81rpx',
|
||||
height: '41rpx',
|
||||
margin: ' 0 35rpx 24rpx 35rpx',
|
||||
}" :inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'none',
|
||||
fontSize: '40rpx'
|
||||
}" itemStyle="font-size: 40rpx;"></up-tabs>
|
||||
fontSize: '36rpx',
|
||||
width: '72rpx;',
|
||||
height: '36rpx',
|
||||
margin: ' 0 35rpx 24rpx 35rpx',
|
||||
|
||||
}" itemStyle="font-size: 40rpx; "></up-tabs>
|
||||
</view>
|
||||
<view class="top-right">
|
||||
|
||||
|
|
@ -64,21 +72,24 @@
|
|||
<!-- 搜索栏 -->
|
||||
<view>
|
||||
<view class="search">
|
||||
<view style="width: 537.94rpx; height: 61.94rpx;">
|
||||
<!-- <up-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" placeholder-color="#FF0000"></up-search> -->
|
||||
<view style="position: relative;">
|
||||
<u-search @click.stop="toSearch()" disabled="true" v-model="keyword" :show-action="false" borderColor="#B3D7FF"
|
||||
bgColor="#ffffff20"></u-search>
|
||||
<view style="width: 538rpx; position: relative;">
|
||||
<u-search @click.stop="toSearch()" disabled="true" height="62rpx" v-model="keyword"
|
||||
:show-action="false" borderColor="#B3D7FF" bgColor="#ffffff20" searchIconSize="35"
|
||||
:inputStyle="{
|
||||
fontSize: '28rpx',
|
||||
fontHeight: '28rpx',
|
||||
marginLeft: '18rpx',
|
||||
|
||||
}"></u-search>
|
||||
<view class="scan">
|
||||
<u-icon color="#C0C3C0" name="scan" size="22" @click="toScan()"></u-icon>
|
||||
<u-icon color="#C0C3C0" name="scan" size="32" @click="toScan()"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;" @click="searchOpen = !searchOpen">
|
||||
<text style="font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
||||
<u-icon :name="searchOpen ? 'arrow-up-fill' : 'arrow-down-fill'"></u-icon>
|
||||
<view style="display: flex; padding-right: 3rpx;" @click="searchOpen = !searchOpen">
|
||||
<text style="
|
||||
font-weight: 400;font-size: 30rpx; width: 60rpx;
|
||||
color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
||||
<u-icon :name="searchOpen ? 'arrow-up-fill' : 'arrow-down-fill'" size="26"></u-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -140,7 +151,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view style="position: relative;">
|
||||
<up-avatar :src="src" size="84rpx"></up-avatar>
|
||||
<view v-if="userType == 1" class="red-v">
|
||||
<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
|
||||
<img style="width: 30rpx; height: 30rpx;"
|
||||
src="../static/images/icon/appRedV.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -151,16 +163,18 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<text class="username">{{ username.substring(0, 10) }}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text v-if="postTop>0" class="officials">置顶</text>
|
||||
<text v-if="poststatus==1" class="officials">审核中</text>
|
||||
<text v-if="poststatus==2" class="officials">已下架</text>
|
||||
<text v-if="postTop > 0" class="officials">置顶</text>
|
||||
<text v-if="poststatus == 1" class="officials">审核中</text>
|
||||
<text v-if="poststatus == 2" class="officials">已下架</text>
|
||||
</view>
|
||||
<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
|
||||
<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
|
||||
<up-text class="officials" bold="true" size="15" color="#3478FC"
|
||||
text="关注"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
|
||||
<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
|
||||
<view
|
||||
style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
|
||||
<text class="time">{{ createTime }}</text>·<text class="time">{{ postaddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -181,7 +195,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 2">
|
||||
<view class="img-style-2">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -189,7 +204,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 3">
|
||||
<view class="img-style-3">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -197,7 +213,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 4">
|
||||
<view class="img-style-4">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -210,8 +227,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view style="display: flex;">
|
||||
<text
|
||||
style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
|
||||
v-for="(tabItem, index2) in posttab" :key="index2"
|
||||
:text="'#' + tabItem">{{'#' + tabItem}}</text>
|
||||
v-for="(tabItem, index2) in posttab" :key="index2" :text="'#' + tabItem">{{ '#' +
|
||||
tabItem }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
|
|
@ -219,33 +236,39 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view class="p-item" style="width: 36%;">
|
||||
<!-- <text class="iconfont icon-quanzi"></text> -->
|
||||
<!-- <u-icon name="share" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ readCount }}</text>
|
||||
</view>
|
||||
<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
|
||||
<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ likeCount }}</text>
|
||||
</view>
|
||||
<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
|
||||
<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ likeCount }}</text>
|
||||
</view>
|
||||
<view class="p-item margin50">
|
||||
<!-- <text class="iconfont icon-pinglun"></text> -->
|
||||
<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ commentCount }}</text>
|
||||
</view>
|
||||
<view class="p-item margin50">
|
||||
<!-- <text class="iconfont icon-pinglun"></text> -->
|
||||
<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
|
||||
<!-- <u-icon name="star" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;"
|
||||
src="../static/images/icon/icon_onFavorite.png" mode=""></image>
|
||||
</view>
|
||||
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;"
|
||||
src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||||
</view>
|
||||
<text class="count">{{ favoriteCount }}</text>
|
||||
</view>
|
||||
|
|
@ -266,7 +289,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view style="position: relative;">
|
||||
<up-avatar :src="src" size="84rpx"></up-avatar>
|
||||
<view v-if="userType == 1" class="red-v">
|
||||
<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
|
||||
<img style="width: 30rpx; height: 30rpx;"
|
||||
src="../static/images/icon/appRedV.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -277,16 +301,18 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<text class="username">{{ username.substring(0, 10) }}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text v-if="postTop>0" class="officials">置顶</text>
|
||||
<text v-if="poststatus==1" class="officials">审核中</text>
|
||||
<text v-if="poststatus==2" class="officials">已下架</text>
|
||||
<text v-if="postTop > 0" class="officials">置顶</text>
|
||||
<text v-if="poststatus == 1" class="officials">审核中</text>
|
||||
<text v-if="poststatus == 2" class="officials">已下架</text>
|
||||
</view>
|
||||
<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
|
||||
<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
|
||||
<up-text class="officials" bold="true" size="15" color="#3478FC"
|
||||
text="关注"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
|
||||
<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
|
||||
<view
|
||||
style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
|
||||
<text class="time">{{ createTime }}</text>·<text class="time">{{ postaddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -307,7 +333,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 2">
|
||||
<view class="img-style-2">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -315,7 +342,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 3">
|
||||
<view class="img-style-3">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -323,7 +351,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<block v-if="urls2.length == 4">
|
||||
<view class="img-style-4">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
|
||||
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
|
||||
:src="mediaItem">
|
||||
</image>
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -336,8 +365,8 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view style="display: flex;">
|
||||
<text
|
||||
style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
|
||||
v-for="(tabItem, index2) in posttab" :key="index2"
|
||||
:text="'#' + tabItem">{{'#' + tabItem}}</text>
|
||||
v-for="(tabItem, index2) in posttab" :key="index2" :text="'#' + tabItem">{{ '#' +
|
||||
tabItem }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
|
|
@ -345,33 +374,39 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
<view class="p-item" style="width: 36%;">
|
||||
<!-- <text class="iconfont icon-quanzi"></text> -->
|
||||
<!-- <u-icon name="share" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ readCount }}</text>
|
||||
</view>
|
||||
<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
|
||||
<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ likeCount }}</text>
|
||||
</view>
|
||||
<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
|
||||
<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ likeCount }}</text>
|
||||
</view>
|
||||
<view class="p-item margin50">
|
||||
<!-- <text class="iconfont icon-pinglun"></text> -->
|
||||
<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png"
|
||||
mode=""></image>
|
||||
<text class="count">{{ commentCount }}</text>
|
||||
</view>
|
||||
<view class="p-item margin50">
|
||||
<!-- <text class="iconfont icon-pinglun"></text> -->
|
||||
<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
|
||||
<!-- <u-icon name="star" size="40rpx"></u-icon> -->
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;"
|
||||
src="../static/images/icon/icon_onFavorite.png" mode=""></image>
|
||||
</view>
|
||||
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
|
||||
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||||
<image style="width: 40rpx;height: 40rpx;"
|
||||
src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||||
</view>
|
||||
<text class="count">{{ favoriteCount }}</text>
|
||||
</view>
|
||||
|
|
@ -387,41 +422,41 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
toRefs,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
import storage from '@/utils/storage'
|
||||
} from 'vue';
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
import {
|
||||
import {
|
||||
listPost,
|
||||
getPost,
|
||||
delPost,
|
||||
addPost,
|
||||
updatePost
|
||||
} from "@/api/talk/post";
|
||||
} from "@/api/talk/post";
|
||||
|
||||
// 创建响应式数据
|
||||
const list1 = reactive([{
|
||||
// 创建响应式数据
|
||||
const list1 = reactive([{
|
||||
name: '关注'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
name: '推荐'
|
||||
}
|
||||
]);
|
||||
const viewIndex = ref(1)
|
||||
// 定义方法
|
||||
function click(item) {
|
||||
}
|
||||
]);
|
||||
const viewIndex = ref(1)
|
||||
// 定义方法
|
||||
function click(item) {
|
||||
console.log('item', item);
|
||||
viewIndex.value = item.index
|
||||
}
|
||||
}
|
||||
|
||||
const postList = ref([]);
|
||||
const loading = ref(true);
|
||||
const total = ref(0);
|
||||
const data = reactive({
|
||||
const postList = ref([]);
|
||||
const loading = ref(true);
|
||||
const total = ref(0);
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -451,16 +486,16 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
anonymity: null
|
||||
},
|
||||
rules: {}
|
||||
});
|
||||
});
|
||||
|
||||
const {
|
||||
const {
|
||||
queryParams,
|
||||
form,
|
||||
rules
|
||||
} = toRefs(data);
|
||||
} = toRefs(data);
|
||||
|
||||
/** 查询话题投稿列表 */
|
||||
function getList() {
|
||||
/** 查询话题投稿列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
queryParams.value.params = {};
|
||||
// if (null != daterangeCreateTime && '' != daterangeCreateTime) {
|
||||
|
|
@ -477,32 +512,32 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
loading.value = false;
|
||||
console.log('话题列表', postList.value)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toScan() {
|
||||
function toScan() {
|
||||
console.log('扫码')
|
||||
}
|
||||
const { proxy } = getCurrentInstance();
|
||||
function toSearch() {
|
||||
}
|
||||
const { proxy } = getCurrentInstance();
|
||||
function toSearch() {
|
||||
console.log('跳转到搜索页面')
|
||||
proxy.$tab.navigateTo('/pages/search/index')
|
||||
// prs.$tab.navigateTo('/pages/search/index')
|
||||
// uni.navigateTo()
|
||||
}
|
||||
}
|
||||
|
||||
const src = ref('https://photo.16pic.com/00/53/26/16pic_5326745_b.jpg');
|
||||
const userType = ref(1)
|
||||
const username = ref('若依')
|
||||
const postTop = ref(0)
|
||||
const poststatus = ref(0)
|
||||
const createTime = ref('2024.5.4')
|
||||
const posttitle = ref('我用十年青春,赴你最后之约')
|
||||
const postcontent = ref(
|
||||
const src = ref('https://photo.16pic.com/00/53/26/16pic_5326745_b.jpg');
|
||||
const userType = ref(1)
|
||||
const username = ref('若依')
|
||||
const postTop = ref(0)
|
||||
const poststatus = ref(0)
|
||||
const createTime = ref('2024.5.4')
|
||||
const posttitle = ref('我用十年青春,赴你最后之约')
|
||||
const postcontent = ref(
|
||||
'一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。'
|
||||
)
|
||||
const posttype = ref(1)
|
||||
const albumWidth = ref(100)
|
||||
const urls2 = ref([
|
||||
)
|
||||
const posttype = ref(1)
|
||||
const albumWidth = ref(100)
|
||||
const urls2 = ref([
|
||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
|
|
@ -513,70 +548,70 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
||||
// 'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
|
||||
]);
|
||||
const avatatlist = ref([
|
||||
]);
|
||||
const avatatlist = ref([
|
||||
'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
||||
'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
|
||||
'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||||
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL00n5sQd_z0VdifIaNlK1dLILmcdSwVJk-OnEA1eiig&s',
|
||||
'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
|
||||
])
|
||||
const postaddress = ref('天津电子信息职业技术学院')
|
||||
// const postaddress = ref()
|
||||
const isLike = ref(false)
|
||||
const isFavorite = ref(false)
|
||||
const readCount = ref(123)
|
||||
const likeCount = ref(233)
|
||||
const commentCount = ref(12)
|
||||
const favoriteCount = ref(15)
|
||||
const posttab = ref(['校园丢失', '学术'])
|
||||
const keyword = ref('')
|
||||
const postsousuotype = ref('热门')
|
||||
const searchOpen = ref(false)
|
||||
const postOpen = ref(false)
|
||||
])
|
||||
const postaddress = ref('天津电子信息职业技术学院')
|
||||
// const postaddress = ref()
|
||||
const isLike = ref(false)
|
||||
const isFavorite = ref(false)
|
||||
const readCount = ref(123)
|
||||
const likeCount = ref(233)
|
||||
const commentCount = ref(12)
|
||||
const favoriteCount = ref(15)
|
||||
const posttab = ref(['校园丢失', '学术'])
|
||||
const keyword = ref('')
|
||||
const postsousuotype = ref('热门')
|
||||
const searchOpen = ref(false)
|
||||
const postOpen = ref(false)
|
||||
|
||||
function addCollection() {
|
||||
function addCollection() {
|
||||
console.log('点赞')
|
||||
isLike.value = !isLike.value
|
||||
}
|
||||
function cancelCollection() {
|
||||
}
|
||||
function cancelCollection() {
|
||||
console.log('点赞')
|
||||
isLike.value = !isLike.value
|
||||
}
|
||||
}
|
||||
|
||||
function addFavorite() {
|
||||
function addFavorite() {
|
||||
console.log('点赞')
|
||||
isFavorite.value = !isFavorite.value
|
||||
}
|
||||
function swiperChange(item){
|
||||
}
|
||||
function swiperChange(item) {
|
||||
console.log(item)
|
||||
viewIndex.value=item.detail.current
|
||||
}
|
||||
function cancelFavorite() {
|
||||
viewIndex.value = item.detail.current
|
||||
}
|
||||
function cancelFavorite() {
|
||||
console.log('点赞')
|
||||
isFavorite.value = !isFavorite.value
|
||||
}
|
||||
}
|
||||
|
||||
getList();
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-plus {
|
||||
.top-plus {
|
||||
// padding: 10px 0px;
|
||||
padding-bottom: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// .top {
|
||||
// // height: 230rpx;
|
||||
// padding-top: 90rpx;
|
||||
// padding-bottom: 20rpx;
|
||||
// display: grid;
|
||||
// // justify-content: space-between;
|
||||
// grid-template-columns: 1fr 1fr 1fr 6fr;
|
||||
// align-items: center;
|
||||
// }
|
||||
// .top {
|
||||
// // height: 230rpx;
|
||||
// padding-top: 90rpx;
|
||||
// padding-bottom: 20rpx;
|
||||
// display: grid;
|
||||
// // justify-content: space-between;
|
||||
// grid-template-columns: 1fr 1fr 1fr 6fr;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
.top {
|
||||
.top {
|
||||
padding-top: 88rpx;
|
||||
padding-bottom: 20rpx;
|
||||
display: flex;
|
||||
|
|
@ -584,40 +619,47 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
align-items: center;
|
||||
position: relative;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top-left {
|
||||
.top-left {
|
||||
height: 290rpx;
|
||||
position: absolute;
|
||||
display: flex; /* 使用 flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
display: flex;
|
||||
/* 使用 flex 布局 */
|
||||
align-items: center;
|
||||
/* 垂直居中 */
|
||||
justify-content: center;
|
||||
left: 50rpx;
|
||||
}
|
||||
left: 32rpx;
|
||||
}
|
||||
|
||||
.top-center {
|
||||
.top-center {
|
||||
width: 100%;
|
||||
display: flex; /* 使用 flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
/* 使用 flex 布局 */
|
||||
align-items: center;
|
||||
/* 垂直居中 */
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex; /* 使用 flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
.top-right {
|
||||
display: flex;
|
||||
/* 使用 flex 布局 */
|
||||
align-items: center;
|
||||
/* 垂直居中 */
|
||||
}
|
||||
|
||||
|
||||
// @media screen and (max-width:414px) {
|
||||
// .top {
|
||||
// padding-top: 40rpx;
|
||||
// padding-bottom: 20rpx;
|
||||
// // grid-template-columns: 1fr 1fr 3fr 2fr;
|
||||
// grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
|
||||
// }
|
||||
// }
|
||||
// @media screen and (max-width:414px) {
|
||||
// .top {
|
||||
// padding-top: 40rpx;
|
||||
// padding-bottom: 20rpx;
|
||||
// // grid-template-columns: 1fr 1fr 3fr 2fr;
|
||||
// grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
|
||||
// }
|
||||
// }
|
||||
|
||||
.modal {
|
||||
.modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
|
|
@ -631,72 +673,79 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
padding: 20rpx 35rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #CCF6F5;
|
||||
border: 2px solid transparent; /* 设置元素的边框 */
|
||||
box-shadow: 0 0 0 2px #B5D7FF; /* 添加描边效果 */
|
||||
}
|
||||
border: 2px solid transparent;
|
||||
/* 设置元素的边框 */
|
||||
box-shadow: 0 0 0 2px #B5D7FF;
|
||||
/* 添加描边效果 */
|
||||
}
|
||||
|
||||
.search {
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
top: 14rpx;
|
||||
right: 32rpx;
|
||||
z-index: 100;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.page-center {
|
||||
|
||||
|
||||
.page-center {
|
||||
background: #fff;
|
||||
// margin-bottom: 20rpx;
|
||||
// padding-top: 40rpx;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-line {
|
||||
.page-line {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
background: #E5E5E5;
|
||||
// box-shadow: 0 0 0 1.96rpx #852C30;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.container {
|
||||
// margin-bottom: 22rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 让元素垂直排列 */
|
||||
margin: 0rpx 13rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
.avatar-container {
|
||||
align-self: center;
|
||||
/* 让头像水平居中 */
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
.text-container {
|
||||
text-align: center;
|
||||
/* 让文本水平居中 */
|
||||
margin-top: 16rpx;
|
||||
/* 调整头像和文本之间的间距 */
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.red-v {
|
||||
.red-v {
|
||||
position: absolute;
|
||||
display: block; /* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||||
bottom: -10rpx; /* 从父元素顶部偏移50像素 */
|
||||
right: 5rpx; /* 从父元素左侧偏移20像素 */
|
||||
}
|
||||
display: block;
|
||||
/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||||
bottom: -10rpx;
|
||||
/* 从父元素顶部偏移50像素 */
|
||||
right: 5rpx;
|
||||
/* 从父元素左侧偏移20像素 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.post-item {
|
||||
.post-item {
|
||||
padding: 20rpx;
|
||||
|
||||
.post-content {
|
||||
|
|
@ -765,23 +814,23 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-top-box {
|
||||
.post-top-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uname {
|
||||
.uname {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 19rpx;
|
||||
// padding-bottom: 1rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list-item {
|
||||
.post-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -838,18 +887,18 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-text {
|
||||
.post-text {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 10;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list-bottom {
|
||||
.post-list-bottom {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
margin-top: 28rpx;
|
||||
|
|
@ -869,9 +918,9 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
.p-item[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album {
|
||||
.album {
|
||||
@include flex;
|
||||
align-items: flex-start;
|
||||
|
||||
|
|
@ -885,21 +934,24 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-album__row.data-v-6fcabaad {
|
||||
.u-album__row.data-v-6fcabaad {
|
||||
/* 在这里添加你想要的样式 */
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
display: block; /* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||||
top: 28rpx; /* 从父元素顶部偏移50像素 */
|
||||
left: 30rpx; /* 从父元素左侧偏移20像素 */
|
||||
}
|
||||
display: block;
|
||||
/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||||
top: 28rpx;
|
||||
/* 从父元素顶部偏移50像素 */
|
||||
left: 30rpx;
|
||||
/* 从父元素左侧偏移20像素 */
|
||||
}
|
||||
|
||||
.pop-title {
|
||||
.pop-title {
|
||||
padding: 33rpx 0rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
|
|
@ -907,5 +959,5 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,182 +1,241 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<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="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 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="">
|
||||
<up-text @click.stop="onSearch" bold="true" size="28rpx" text="搜索"></up-text>
|
||||
</view>
|
||||
<view class="sousuoText" @click="deletehistory">搜索</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>
|
||||
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<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 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="history-content" v-if="historyList.length!=0">
|
||||
<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
|
||||
{{historyItem}}
|
||||
<view class="hustoryCenter">
|
||||
<view v-for="(item,index) in historyList" :key="index" class="hustoryList">
|
||||
<view class="item">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-none" v-else>
|
||||
<text style="color: #757575;">无搜索历史</text>
|
||||
</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 {
|
||||
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
toRefs,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
} from 'vue';
|
||||
|
||||
const keyword = ref('')
|
||||
const historyList = ref(['丢东西了'])
|
||||
const noSearch = ref(false)
|
||||
const keyword = ref('')
|
||||
|
||||
function onSearch() {
|
||||
console.log('搜索 ' + keyword.value)
|
||||
//把搜索的关键字保存到historyList中
|
||||
saveHistory()
|
||||
if(keyword.value == 'null') {
|
||||
noSearch.value = true
|
||||
}
|
||||
}
|
||||
const noSearch = ref(false)
|
||||
const bgColor = ref('#ffffff80')
|
||||
const leftClick = ()=> {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
const histortOpen = ref(false)
|
||||
const historyList = ref(['三毛流浪记','假如给我三天光明','遥望无期',
|
||||
'假如给我三天光明(青少年儿童读物)','遥望无期',
|
||||
'过年','遥望无期','纵横还第三万里'])
|
||||
|
||||
// 保存历史记录
|
||||
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
|
||||
}
|
||||
const deletehistory = () => {
|
||||
histortOpen.value = !histortOpen.value
|
||||
}
|
||||
|
||||
|
||||
function onLoad() {
|
||||
// 从缓存中读取历史记录
|
||||
historyList.value=JSON.parse(uni.getStorageSync('kw'))
|
||||
}
|
||||
|
||||
onLoad()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
background-color: #FAF9FA;
|
||||
height: 80rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.search {
|
||||
:deep(.u-navbar__content__title.data-v-f631659b ){
|
||||
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
color: #303133;
|
||||
|
||||
}
|
||||
|
||||
.top {
|
||||
position: relative;
|
||||
background: #ffffff80;
|
||||
.img1BOX{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 750rpx;
|
||||
height: 88rpx;
|
||||
margin-top: 88rpx;
|
||||
}
|
||||
|
||||
.scan {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 30rpx;
|
||||
z-index: 100;
|
||||
.bj{
|
||||
background-color: #FAF9FA;
|
||||
z-index: -1;
|
||||
width: 750rpx;
|
||||
height: 268rpx;
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
left: 0rpx;
|
||||
}
|
||||
|
||||
.noSearch {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直方向排列 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: 600rpx; /* 设置合适的高度，可以是页面的高度 */
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
margin-bottom: 20rpx; /* 可以根据需要调整行之间的间距 */
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.noSearch .row img {
|
||||
/* 图片样式 */
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.noSearch .row text {
|
||||
/* 文字样式 */
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.history{
|
||||
margin-top: 30rpx;
|
||||
.history-title{
|
||||
width: 90%;
|
||||
.sousuoBox1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.history-content{
|
||||
width: 90%;
|
||||
margin: 10rpx auto;
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.history-none{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.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>
|
||||
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