862 lines
24 KiB
Vue
862 lines
24 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 顶部导航栏 -->
|
||
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||
<template class="img1BOX" #left>
|
||
<image src="../static/images/icon/tu2-4.png" class="img1"></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 class="img2Box" #center>
|
||
<view class="qiehuanBox">
|
||
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
|
||
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
|
||
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
|
||
:list="list1" @click="click"></u-tabs>
|
||
</view>
|
||
</template>
|
||
|
||
</u-navbar>
|
||
|
||
<view class="bgc"></view>
|
||
<!-- 搜索栏 -->
|
||
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
||
<view class="sousuoBox flex alignCenter justifyBetween" @click="toEarch">
|
||
<view class="souBOx flex alignCenter">
|
||
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
||
<view class="shuruText">在食堂捡到一张饭卡</view>
|
||
</view>
|
||
<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||
</view>
|
||
<view class="category-dropdown flex alignCenter" @click="searchOpen = !searchOpen">
|
||
<text class="text1 flex alignCenter">{{searchPrerequisite}}</text>
|
||
<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 class="center-content">
|
||
<!-- 关注 -->
|
||
<view class="" v-if="viewIndex == 0">
|
||
<view class="center-content-focus">
|
||
<text class="center-content-focus-text">我关注的人</text>
|
||
<view class="center-content-focus-list">
|
||
<u-scroll-list :indicator='false'>
|
||
<view class="flex alignCenter justifyBetween">
|
||
<view class="center-content-focus-item" v-for="(item, index) in focusList" :key="index">
|
||
<u-avatar class="center-content-focus-item-avatat" size="120rpx" :src="item.avatar"></u-avatar>
|
||
<text class="center-content-focus-item-text">{{item.uname}}</text>
|
||
</view>
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
</view>
|
||
<view class="center-content-focus-line"></view>
|
||
</view>
|
||
|
||
<!-- 话题 -->
|
||
<view class="center-content-post" v-for="(item, index) in postList" :key="index">
|
||
<!-- <view class="center-content-post-head flex alignCenter justifyBetween">
|
||
<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
|
||
<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-timeAddress">{{item.createTime + '·' + item.address}}</text>
|
||
</view>
|
||
<text v-if="item.isFocus">关注</text>
|
||
<text>已关注</text>
|
||
</view> -->
|
||
|
||
<view class="center-content-post-padding">
|
||
<view class="center-content-post-head">
|
||
<!-- 左对齐 -->
|
||
<view class="flex alignCenter">
|
||
<!-- 头像 -->
|
||
<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">
|
||
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
|
||
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 右对齐 -->
|
||
<view class="flex alignCenter" v-if="viewIndex != 0">
|
||
<text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
|
||
<text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
|
||
</view>
|
||
</view>
|
||
<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
|
||
<text class="center-content-post-content">{{item.content}}</text>
|
||
<!-- 图片 -->
|
||
<!--一张图片-->
|
||
<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 -->
|
||
<view class="center-content-post-tab" style="display: flex;">
|
||
<text
|
||
class="center-content-post-tab-text"
|
||
v-for="(tabItem, index2) in item.tab" :key="index2"
|
||
:text="'#' + tabItem">{{'#' + tabItem}}</text>
|
||
</view>
|
||
<view class="post-list-bottom" style="display: flex; justify-content: space-between;">
|
||
<!-- 靠左对齐 -->
|
||
<view class="">
|
||
<view class="p-item">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
|
||
<text class="count">{{ item.transmitCount }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 靠右对齐 -->
|
||
<view class="flex alignCenter">
|
||
<view v-if="item.isLike" class="p-item" @click.stop="cancelCollection(index)">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
|
||
<text class="count">{{ item.likeCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view v-if="!item.isLike" class="p-item" @click.stop="addCollection(index)">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
|
||
<text class="count">{{ item.likeCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
|
||
<text class="count">{{ item.commentCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50" v-if="item.ifFavorite" @click.stop="cancelFavorite(index)">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
|
||
<text class="count">{{ item.favoriteCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50" v-if="!item.ifFavorite" @click.stop="addFavorite(index)">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
|
||
<text class="count">{{ item.favoriteCount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<u-line></u-line>
|
||
</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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
viewIndex: 0,
|
||
searchOpen: false,
|
||
lefther: 0,
|
||
searchPrerequisite: '热门',
|
||
postTypeOpen: false,
|
||
postTypeList: ['发布话题', '发布活动'],
|
||
bgColor: 'rgba(170, 0, 0, 0)',
|
||
searchPrerequisiteList: [
|
||
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
|
||
],
|
||
list1: [{
|
||
name: '关注',
|
||
}, {
|
||
name: '推荐',
|
||
}],
|
||
focusList: [{
|
||
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
||
uname: '爱吃饭的小张'
|
||
},{
|
||
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
|
||
uname: '喜欢你没道理'
|
||
},{
|
||
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||
uname: '恋爱60秒'
|
||
},{
|
||
avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
|
||
uname: '爱吃饭的小张'
|
||
}],
|
||
postList: [{
|
||
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
||
uname: '爱吃饭的小张',
|
||
createTime: '11分钟前',
|
||
address: '南开大学',
|
||
isFocus: false,
|
||
isOfficial: true,
|
||
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
|
||
type: '1',
|
||
media: [
|
||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||
'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',
|
||
],
|
||
tab: [
|
||
'学术讨论组',
|
||
'校园风景'
|
||
],
|
||
transmitCount: 136,
|
||
isLike: true,
|
||
likeCount: 999,
|
||
commentCount: 136,
|
||
ifFavorite: true,
|
||
favoriteCount: 136
|
||
},{
|
||
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
|
||
uname: '喜欢你没道理',
|
||
createTime: '2024-5-5',
|
||
address: '南开大学',
|
||
isFocus: false,
|
||
isOfficial: false,
|
||
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
||
type: '1',
|
||
media: [
|
||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||
],
|
||
tab: [
|
||
'校园风景'
|
||
],
|
||
transmitCount: 13,
|
||
isLike: false,
|
||
likeCount: 99,
|
||
commentCount: 13,
|
||
ifFavorite: true,
|
||
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
|
||
}]
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.log(this.$store.state.user.QNDomain);
|
||
},
|
||
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() {
|
||
console.log()
|
||
this.$tab.navigateTo('/pages/search/index')
|
||
},
|
||
rightClick() {
|
||
console.log('rightClick');
|
||
},
|
||
leftClick() {
|
||
console.log('leftClick');
|
||
},
|
||
click(item) {
|
||
console.log('item', item);
|
||
this.viewIndex = item.index;
|
||
},
|
||
cancelCollection(index) {
|
||
console.log(111,index)
|
||
this.postList[index].likeCount -= 1;
|
||
this.postList[index].isLike = !this.postList[index].isLike;
|
||
},
|
||
addCollection(index) {
|
||
console.log(111,index)
|
||
this.postList[index].likeCount += 1;
|
||
this.postList[index].isLike = !this.postList[index].isLike;
|
||
},
|
||
cancelFavorite(index) {
|
||
console.log(111,index)
|
||
this.postList[index].favoriteCount -= 1;
|
||
this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
|
||
},
|
||
addFavorite(index) {
|
||
console.log(111,index)
|
||
this.postList[index].favoriteCount += 1;
|
||
this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
|
||
},
|
||
cancelFocus(index) {
|
||
console.log(111,index)
|
||
this.postList[index].isFocus = !this.postList[index].isFocus;
|
||
}
|
||
,
|
||
addFocus(index) {
|
||
console.log(111,index)
|
||
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>
|
||
|
||
<style lang="scss">
|
||
// 微信小程序配置
|
||
:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
|
||
padding-left: 32rpx !important;
|
||
}
|
||
// 安卓app配置
|
||
:deep(.u-navbar__content__left[data-v-f631659b], .u-navbar__content__right[data-v-f631659b]){
|
||
padding-left: 32rpx !important;
|
||
}
|
||
.img1BOX{
|
||
padding-left: 32rpx;
|
||
display: flex;
|
||
align-content: center;
|
||
}
|
||
.img1{
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
margin-right: 28rpx;
|
||
}
|
||
.img2{
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
|
||
.img2Box{
|
||
|
||
.qiehuanBox{
|
||
padding-left: 32rpx;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.u-scroll-list.data-v-fea2b4f4 {
|
||
padding-bottom: 0px !important;
|
||
}
|
||
.u-tabs__wrapper__nav__line[data-v-0de61367]{
|
||
position: absolute !important;
|
||
bottom: 0rpx !important;
|
||
}
|
||
/* .u-navbar__content[data-v-75dad532] {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
height: 44px;
|
||
background-color: linear-gradient(90deg, rgba(170, 0, 0, 1.0) 100%, rgba(255, 255, 255, 0) 100%) !important;
|
||
position: relative;
|
||
justify-content: center;
|
||
} */
|
||
|
||
|
||
.bgc{
|
||
width: 750rpx;
|
||
height: 356rpx;
|
||
background: linear-gradient(90deg, rgb(201, 246, 245), rgb(248, 248, 226));
|
||
position: fixed;
|
||
top: 0rpx;
|
||
left: 0rpx;
|
||
z-index: -1;
|
||
}
|
||
.sousuoBox1{
|
||
margin: 16rpx 32rpx;
|
||
width: auto;
|
||
}
|
||
.sousuoBox{
|
||
width: 538rpx;
|
||
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: 60rpx;
|
||
// height: 31rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #1B1B1B;
|
||
margin-right: 8rpx;
|
||
}
|
||
.img5{
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
.shuruText{
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
margin-left: 18rpx;
|
||
}
|
||
.center-content{
|
||
/* width: 750rpx; */
|
||
/* height: 2592rpx; */
|
||
border-radius: 64rpx 64rpx 0 0;
|
||
background: #ffffff;
|
||
margin-top: 40rpx;
|
||
}
|
||
.center-content-focus{
|
||
padding: 50rpx 0;
|
||
}
|
||
.center-content-focus-text{
|
||
font-weight: 400;
|
||
width: 174rpx;
|
||
// height: 35rpx;
|
||
font-size: 34rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
display: block;
|
||
/* padding-top: 52rpx; */
|
||
margin-left: 32rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.center-content-focus-list {
|
||
margin-left: 32rpx;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0px !important;
|
||
}
|
||
.u-scroll-list.data-v-e2a26316 {
|
||
padding-bottom: 0px !important;
|
||
}
|
||
.center-content-focus-item{
|
||
/* 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;
|
||
flex-direction: column;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.center-content-post-head-title-uname {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
align-self: flex-start; /* 垂直起始对齐 */
|
||
margin-bottom: 20rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.center-content-post-head-title-timeAddress {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
align-self: flex-end; /* 垂直结束对齐 */
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
.no-focus-text {
|
||
font-weight: 400;
|
||
width: 58rpx;
|
||
// height: 30rpx;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #3477FC;
|
||
}
|
||
.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;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.box-b {
|
||
width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.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-size: 30rpx;
|
||
text-align: center;
|
||
font-family: "Microsoft YaHei";
|
||
// line-height: 82rpx;
|
||
display: block;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.boxtext {
|
||
font-weight: 600;
|
||
color: #91b4ff;
|
||
}
|
||
|
||
.box-d {
|
||
border-color: #91b4ff;
|
||
}
|
||
|
||
.avatar-container {
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-1 {
|
||
position: relative;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 其他样式... */
|
||
|
||
.postTypeContainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
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 的距离 */
|
||
}
|
||
|
||
|
||
.postTypeWindow {
|
||
/* 这里不需要设置 display: flex; */
|
||
/* 这里也不需要设置 flex-direction: column; */
|
||
/* 这里也不需要设置 align-items: center; */
|
||
font-weight: 400;
|
||
width: 100rpx;
|
||
height: 26rpx;
|
||
font-size: 24rpx;
|
||
line-height: 26rpx;
|
||
text-align: left;
|
||
color: #CAF6F5;
|
||
}
|
||
|
||
</style>
|