964 lines
27 KiB
Vue
964 lines
27 KiB
Vue
<template>
|
||
<view style="background: linear-gradient(-90deg, #f8f8e2, #c9f6f5);">
|
||
<view class="">
|
||
|
||
</view>
|
||
<view class="top-plus">
|
||
<!-- 顶部导航栏 -->
|
||
<!-- <u-navbar
|
||
leftText=""
|
||
:fixed="false"
|
||
title=""
|
||
:safeAreaInsetTop="false"
|
||
>
|
||
<view
|
||
class="u-nav-slot"
|
||
slot="left"
|
||
>
|
||
<u-icon
|
||
name="arrow-left"
|
||
size="19"
|
||
></u-icon>
|
||
<u-line
|
||
direction="column"
|
||
:hairline="false"
|
||
length="16"
|
||
margin="0 8px"
|
||
></u-line>
|
||
<u-icon
|
||
name="home"
|
||
size="20"
|
||
></u-icon>
|
||
</view>
|
||
</u-navbar> -->
|
||
|
||
<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>
|
||
</view>
|
||
<view class="">
|
||
<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="50" lineHeight="8"
|
||
@click="click" :activeStyle="{
|
||
color: '#303133',
|
||
fontWeight: 'bold',
|
||
transform: 'none',
|
||
fontSize: '40rpx',
|
||
width: '81rpx',
|
||
height: '41rpx',
|
||
margin: ' 0 35rpx 24rpx 35rpx',
|
||
}" :inactiveStyle="{
|
||
color: '#606266',
|
||
transform: 'none',
|
||
fontSize: '36rpx',
|
||
width: '72rpx;',
|
||
height: '36rpx',
|
||
margin: ' 0 35rpx 24rpx 35rpx',
|
||
|
||
}" itemStyle="font-size: 40rpx; "></up-tabs>
|
||
</view>
|
||
<view class="top-right">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索栏 -->
|
||
<view>
|
||
<view class="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="32" @click="toScan()"></u-icon>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
<!-- +tanchuang -->
|
||
<view class="modal" v-if="postOpen">
|
||
<text style="margin-bottom: 15rpx;">发布话题</text>
|
||
<text>发布活动</text>
|
||
</view>
|
||
<!-- 热门弹出层 -->
|
||
<up-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
|
||
<view style="height: 77vh; position: relative;">
|
||
<view class="popup-close">
|
||
<u-icon color="#CDCDCD" size="28" name="close-circle"></u-icon>
|
||
</view>
|
||
<view class="pop-title">
|
||
全部类目
|
||
</view>
|
||
<view class="">
|
||
<text style="font-size: 26rpx; color: #A3A3A3;">点击选择类目，仅可选择一个</text>
|
||
|
||
<view style="width: 100rpx; height: 100rpx; border:1px soldi #c9f6f5">
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
<swiper class="page-center" style="height: 70vh;" :current=viewIndex @change="swiperChange">
|
||
<swiper-item>
|
||
<!-- 中间内容 -->
|
||
<view class="page-center">
|
||
<!-- 关注 -->
|
||
<view style="padding-top: 40rpx;">
|
||
<view style="padding-left: 32rpx; padding-bottom: 27rpx;">
|
||
<up-text bold="true" size="33rpx" color="#000" text="我关注的人"></up-text>
|
||
</view>
|
||
<up-scroll-list :indicator="false">
|
||
<view v-for="(item, index) in avatatlist" :key="index" class="container">
|
||
<!-- <image :src="item.thumb"></image> -->
|
||
<div class="item">
|
||
<div class="avatar-container">
|
||
<up-avatar :src="item" size="120rpx"></up-avatar>
|
||
|
||
</div>
|
||
<div class="text-container">
|
||
<up-text size="26rpx" text="爱吃饭的小张" align="center"></up-text>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</up-scroll-list>
|
||
<view class="page-line"></view>
|
||
</view>
|
||
<!-- 话题投稿列表 -->
|
||
<view class="post-item">
|
||
<view class="post-list-item">
|
||
<view @click.stop="toUser('跳转到用户个人空间')">
|
||
<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="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="post-top-box">
|
||
<view class="uname">
|
||
<!-- <text v-if="userType == 1" class="official">官方</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>
|
||
</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>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
<view class="post-content">
|
||
<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
|
||
<view style="height: 8px;"></view>
|
||
<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
|
||
<view style="height: 8px;"></view>
|
||
<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
|
||
<block v-if="posttype == 1">
|
||
<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
|
||
<!--一张图片-->
|
||
<block v-if="urls2.length == 1">
|
||
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
|
||
@tap.stop="previewImage(urls2[0], urls2)"></image>
|
||
</block>
|
||
<!--二张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
<!--三张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
<!--四张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
<!-- 标签 -->
|
||
<view v-if="posttab" style="margin-top: 18rpx;">
|
||
<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
|
||
<!-- <text>{{ posttab }}</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>
|
||
</view>
|
||
</view>
|
||
<!-- 底部 -->
|
||
<view class="post-list-bottom">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</view>
|
||
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
|
||
<image style="width: 40rpx;height: 40rpx;"
|
||
src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||
</view>
|
||
<text class="count">{{ favoriteCount }}</text>
|
||
</view>
|
||
</view>
|
||
<u-line></u-line>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<!-- 中间内容 -->
|
||
<view class="page-center">
|
||
<!-- 话题投稿列表 -->
|
||
<view class="post-item">
|
||
<view class="post-list-item">
|
||
<view @click.stop="toUser('跳转到用户个人空间')">
|
||
<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="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="post-top-box">
|
||
<view class="uname">
|
||
<!-- <text v-if="userType == 1" class="official">官方</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>
|
||
</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>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
<view class="post-content">
|
||
<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
|
||
<view style="height: 8px;"></view>
|
||
<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
|
||
<view style="height: 8px;"></view>
|
||
<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
|
||
<block v-if="posttype == 1">
|
||
<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
|
||
<!--一张图片-->
|
||
<block v-if="urls2.length == 1">
|
||
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
|
||
@tap.stop="previewImage(urls2[0], urls2)"></image>
|
||
</block>
|
||
<!--二张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
<!--三张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
<!--四张图片-->
|
||
<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">
|
||
</image>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
<!-- 标签 -->
|
||
<view v-if="posttab" style="margin-top: 18rpx;">
|
||
<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
|
||
<!-- <text>{{ posttab }}</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>
|
||
</view>
|
||
</view>
|
||
<!-- 底部 -->
|
||
<view class="post-list-bottom">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</view>
|
||
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
|
||
<image style="width: 40rpx;height: 40rpx;"
|
||
src="../static/images/icon/icon_noFavorite.png" mode=""></image>
|
||
</view>
|
||
<text class="count">{{ favoriteCount }}</text>
|
||
</view>
|
||
</view>
|
||
<u-line></u-line>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
toRefs,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import storage from '@/utils/storage'
|
||
|
||
import {
|
||
listPost,
|
||
getPost,
|
||
delPost,
|
||
addPost,
|
||
updatePost
|
||
} from "@/api/talk/post";
|
||
|
||
// 创建响应式数据
|
||
const list1 = reactive([{
|
||
name: '关注'
|
||
},
|
||
{
|
||
name: '推荐'
|
||
}
|
||
]);
|
||
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({
|
||
form: {},
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
uid: null,
|
||
topicId: null,
|
||
discussId: null,
|
||
voteId: null,
|
||
title: null,
|
||
content: null,
|
||
media: null,
|
||
readCount: null,
|
||
transmitCount: null,
|
||
likeCount: null,
|
||
commentCount: null,
|
||
postTop: null,
|
||
type: null,
|
||
address: null,
|
||
longitude: null,
|
||
latitude: null,
|
||
createTime: null,
|
||
auditor: null,
|
||
status: null,
|
||
auditTime: null,
|
||
auditAdvice: null,
|
||
cut: null,
|
||
anonymity: null
|
||
},
|
||
rules: {}
|
||
});
|
||
|
||
const {
|
||
queryParams,
|
||
form,
|
||
rules
|
||
} = toRefs(data);
|
||
|
||
/** 查询话题投稿列表 */
|
||
function getList() {
|
||
loading.value = true;
|
||
queryParams.value.params = {};
|
||
// if (null != daterangeCreateTime && '' != daterangeCreateTime) {
|
||
// queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0];
|
||
// queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1];
|
||
// }
|
||
// if (null != daterangeAuditTime && '' != daterangeAuditTime) {
|
||
// queryParams.value.params["beginAuditTime"] = daterangeAuditTime.value[0];
|
||
// queryParams.value.params["endAuditTime"] = daterangeAuditTime.value[1];
|
||
// }
|
||
listPost(queryParams.value).then(response => {
|
||
postList.value = response.rows;
|
||
total.value = response.total;
|
||
loading.value = false;
|
||
console.log('话题列表', postList.value)
|
||
});
|
||
}
|
||
|
||
function toScan() {
|
||
console.log('扫码')
|
||
}
|
||
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(
|
||
'一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。'
|
||
)
|
||
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',
|
||
// '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',
|
||
// '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',
|
||
// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
|
||
]);
|
||
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)
|
||
|
||
function addCollection() {
|
||
console.log('点赞')
|
||
isLike.value = !isLike.value
|
||
}
|
||
function cancelCollection() {
|
||
console.log('点赞')
|
||
isLike.value = !isLike.value
|
||
}
|
||
|
||
function addFavorite() {
|
||
console.log('点赞')
|
||
isFavorite.value = !isFavorite.value
|
||
}
|
||
function swiperChange(item) {
|
||
console.log(item)
|
||
viewIndex.value = item.detail.current
|
||
}
|
||
function cancelFavorite() {
|
||
console.log('点赞')
|
||
isFavorite.value = !isFavorite.value
|
||
}
|
||
|
||
getList();
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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 {
|
||
padding-top: 88rpx;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 180rpx;
|
||
}
|
||
|
||
.top-left {
|
||
height: 290rpx;
|
||
position: absolute;
|
||
display: flex;
|
||
/* 使用 flex 布局 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: center;
|
||
left: 32rpx;
|
||
}
|
||
|
||
.top-center {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
/* 使用 flex 布局 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: 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;
|
||
// }
|
||
// }
|
||
|
||
.modal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
align-items: center;
|
||
top: 55rpx;
|
||
width: 250rpx;
|
||
// height: 50rpx;
|
||
left: -70rpx;
|
||
z-index: 100;
|
||
background-color: #FFFFFF;
|
||
padding: 20rpx 35rpx;
|
||
border-radius: 20rpx;
|
||
color: #CCF6F5;
|
||
border: 2px solid transparent;
|
||
/* 设置元素的边框 */
|
||
box-shadow: 0 0 0 2px #B5D7FF;
|
||
/* 添加描边效果 */
|
||
}
|
||
|
||
.search {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
|
||
.scan {
|
||
position: absolute;
|
||
top: 14rpx;
|
||
right: 32rpx;
|
||
z-index: 101;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.page-center {
|
||
background: #fff;
|
||
// margin-bottom: 20rpx;
|
||
// padding-top: 40rpx;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
}
|
||
|
||
.page-line {
|
||
width: 100%;
|
||
height: 16rpx;
|
||
background: #E5E5E5;
|
||
// box-shadow: 0 0 0 1.96rpx #852C30;
|
||
}
|
||
|
||
.container {
|
||
// margin-bottom: 22rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 让元素垂直排列 */
|
||
margin: 0rpx 13rpx;
|
||
}
|
||
|
||
.avatar-container {
|
||
align-self: center;
|
||
/* 让头像水平居中 */
|
||
}
|
||
|
||
.text-container {
|
||
text-align: center;
|
||
/* 让文本水平居中 */
|
||
margin-top: 16rpx;
|
||
/* 调整头像和文本之间的间距 */
|
||
width: 160rpx;
|
||
}
|
||
|
||
.red-v {
|
||
position: absolute;
|
||
display: block;
|
||
/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||
bottom: -10rpx;
|
||
/* 从父元素顶部偏移50像素 */
|
||
right: 5rpx;
|
||
/* 从父元素左侧偏移20像素 */
|
||
}
|
||
|
||
|
||
|
||
.post-item {
|
||
padding: 20rpx;
|
||
|
||
.post-content {
|
||
margin-top: 20rpx;
|
||
|
||
.img-style-1 {
|
||
display: block;
|
||
width: 100%;
|
||
height: 600rpx;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
border-radius: 20rpx;
|
||
|
||
}
|
||
|
||
.img-style-2 {
|
||
display: flex;
|
||
|
||
image {
|
||
margin: 5rpx;
|
||
|
||
width: 100%;
|
||
height: 305rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
|
||
.img-style-3 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
image {
|
||
width: 31.3%;
|
||
height: 200rpx;
|
||
margin: 0.6%;
|
||
border-radius: 20rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.img-style-4 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
image {
|
||
width: 48%;
|
||
height: 320rpx;
|
||
margin: 0.5%;
|
||
border-radius: 20rpx;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.address {
|
||
display: flex;
|
||
font-size: 20rpx;
|
||
background-color: #F5F5F5;
|
||
border-radius: 20rpx;
|
||
display: inline-block;
|
||
padding: 5rpx 20rpx;
|
||
margin: 20rpx 0;
|
||
|
||
.icon {
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.post-top-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.uname {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 19rpx;
|
||
// padding-bottom: 1rpx;
|
||
}
|
||
|
||
.post-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 85rpx;
|
||
height: 85rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.center {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
|
||
.username {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
}
|
||
|
||
.official {
|
||
display: inline-block;
|
||
width: 65rpx;
|
||
height: 35rpx;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 35rpx;
|
||
color: #ffffff;
|
||
background-color: #000000;
|
||
|
||
border-radius: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.officials {
|
||
display: inline-block;
|
||
font-size: 25rpx;
|
||
color: #ffffff;
|
||
background-color: #c0392b;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
height: 85rpx;
|
||
|
||
.arrow-down {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.post-text {
|
||
display: block;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 10;
|
||
white-space: pre-wrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.post-list-bottom {
|
||
display: flex;
|
||
margin: 20rpx 0;
|
||
margin-top: 28rpx;
|
||
|
||
.p-item {
|
||
margin: 0 auto;
|
||
color: #616161;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.count {
|
||
margin-left: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.p-item[hidden] {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
.album {
|
||
@include flex;
|
||
align-items: flex-start;
|
||
|
||
&__avatar {
|
||
background-color: $u-bg-color;
|
||
padding: 5px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
&__content {
|
||
margin-left: 10px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.u-album__row.data-v-6fcabaad {
|
||
/* 在这里添加你想要的样式 */
|
||
width: 100%;
|
||
}
|
||
|
||
.popup-close {
|
||
position: absolute;
|
||
display: block;
|
||
/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
|
||
top: 28rpx;
|
||
/* 从父元素顶部偏移50像素 */
|
||
left: 30rpx;
|
||
/* 从父元素左侧偏移20像素 */
|
||
}
|
||
|
||
.pop-title {
|
||
padding: 33rpx 0rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|