783 lines
20 KiB
Vue
783 lines
20 KiB
Vue
<template>
|
|
<!-- 话题 -->
|
|
<view class="center-content-post" @click="toPostInfoView()">
|
|
<view class="center-content-post-padding">
|
|
<view class="center-content-post-head" v-if="postViewIndex != 3">
|
|
<!-- 左对齐 -->
|
|
<view class="flex alignCenter">
|
|
<!-- 头像 -->
|
|
<div class="avatar-container" @click="ToAddfruedb(postValue.uid)">
|
|
<u-avatar class="avatar-1" size="84rpx" :src="getAvatar(postValue.avatar)"></u-avatar>
|
|
<image v-if="postValue.isOfficial" class="official-1"
|
|
src="../../../static/images/icon/tu3-6.png" :lazy-load="true"></image>
|
|
</div>
|
|
<!-- 用户名 -->
|
|
<view class="center-content-post-head-title">
|
|
<text class="center-content-post-head-title-uname">{{postValue.nickName}}</text>
|
|
<text
|
|
class="center-content-post-head-title-timeAddress">{{timeAgo(postValue.createTime)}}{{postValue.address ? '·' + postValue.address : ""}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 右对齐 -->
|
|
<!-- 关注操作 -->
|
|
<view class="flex alignCenter" v-if="postViewIndex != 0 && loginUser.userId != postValue.uid">
|
|
<text class="focus-text" v-if="postValue.focus" @click.stop="cancelFocus(postValue.uid)">已关注</text>
|
|
<text class="no-focus-text" v-else @click.stop="addFocus(postValue.uid)">关注</text>
|
|
</view>
|
|
<!-- 状态 -->
|
|
<view class="" v-if="postViewIndex == 2 && loginUser.userId == postValue.uid">
|
|
<text class="pass-text" v-if="postValue.status == 0" >已发布</text>
|
|
<text class="audit-text" v-if="postValue.status == 2" >审核中</text>
|
|
<text class="refuse-text" v-if="postValue.status == 3" >未通过</text>
|
|
</view>
|
|
<!-- 删除操作 -->
|
|
<view class="">
|
|
<image v-if="postViewIndex == 4 && loginUser.userId == postValue.uid && postValue.status == 0" class="delImg" @click="toDel"
|
|
src="../../../static/images/icon/sang-1.png" :lazy-load="true"></image>
|
|
</view>
|
|
</view>
|
|
<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
|
|
<text class="center-content-post-content-0"
|
|
v-if="postValue.content && postViewIndex == 3 || postViewIndex == 0 || postViewIndex == 1 || postViewIndex == 2">{{postValue.content}}</text>
|
|
<text class="center-content-post-content-1"
|
|
v-else>{{postValue.content}}</text>
|
|
<!-- 图片 -->
|
|
<!--一张图片-->
|
|
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 1">
|
|
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="toimage(postValue.media)"
|
|
@tap.stop="previewImage(toimage(postValue.media), toimage(postValue.media))"></image>
|
|
</block>
|
|
<!--二张图片-->
|
|
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 2">
|
|
<view class="img-style-2">
|
|
<image :lazy-load="true" v-for="(mediaItem, index2) in toimage(postValue.media)" :key="index2"
|
|
@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
|
|
:src="mediaItem"></image>
|
|
</view>
|
|
</block>
|
|
<!-- 三张图片 -->
|
|
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 3">
|
|
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
|
|
<view class="flex justifyBetween">
|
|
<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)"
|
|
:key="index3">
|
|
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
|
|
mode="aspectFill" :src="mediaItem"></image>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!--大于三张图片-列表-->
|
|
<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 0">
|
|
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
|
|
<view class="flex justifyBetween">
|
|
<view class="img-style-3-2" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)"
|
|
:key="index3">
|
|
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
|
|
mode="aspectFill" :src="mediaItem"></image>
|
|
<view v-if="index3 == 2" class="img-cover-style"
|
|
@tap.stop="previewImage(mediaItem, toimage(postValue.media))">
|
|
<text>+{{ toimage(postValue.media).length - 3 }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!--大于三张图片-详情-->
|
|
<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 1">
|
|
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
|
|
<view class="flex justifyBetween wrap">
|
|
<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media)" :key="index3">
|
|
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
|
|
mode="aspectFill" :src="mediaItem"></image>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- tab -->
|
|
<view v-if="postValue.tab" class="center-content-post-tab" style="display: flex;">
|
|
<text class="center-content-post-tab-text" v-for="(tabItem, index2) in strToList(postValue.tab)"
|
|
:key="index2" :text="'#' + tabItem">{{'#' + dictTab(tabItem)}}</text>
|
|
</view>
|
|
<view class="post-list-bottom" v-if="postViewType == 0"
|
|
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> -->
|
|
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu2-9.png" mode=""
|
|
:lazy-load="true"></image>
|
|
|
|
<text class="count">{{ postValue.transmitCount }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 靠右对齐 -->
|
|
<view class="flex alignCenter">
|
|
<view v-if="postValue.like" class="p-item" @click.stop="cancelCollection(postValue.id)">
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-8.png" mode=""
|
|
:lazy-load="true"></image>
|
|
<text class="count-like">{{ postValue.likeCount }}</text>
|
|
</view>
|
|
|
|
<!-- 靠右对齐 -->
|
|
<view v-if="!postValue.like" class="p-item" @click.stop="addCollection(postValue.id)">
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-7.png" mode=""
|
|
:lazy-load="true"></image>
|
|
<text class="count">{{ postValue.likeCount }}</text>
|
|
</view>
|
|
|
|
<!-- 靠右对齐 -->
|
|
<view class="p-item margin50">
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-3.png" mode=""
|
|
:lazy-load="true"></image>
|
|
<text class="count">{{ postValue.commentCount }}</text>
|
|
</view>
|
|
|
|
<!-- 靠右对齐 -->
|
|
<view class="p-item margin50" v-if="postValue.favorite" @click.stop="cancelFavorite(postValue.id)">
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-2.png" mode=""
|
|
:lazy-load="true"></image>
|
|
<text class="count-favorite">{{ postValue.favoriteCount }}</text>
|
|
</view>
|
|
|
|
<!-- 靠右对齐 -->
|
|
<view class="p-item margin50" v-if="!postValue.favorite" @click.stop="addFavorite(postValue.id)">
|
|
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-1.png" mode=""
|
|
:lazy-load="true"></image>
|
|
<text class="count">{{ postValue.favoriteCount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<up-modal :show="modalShow" title="是否删除该话题" showCancelButton="true" closeOnClickOverlay="true" @confirm='modalConfirm' @cancel="modalCancel" @close="modalClose"></up-modal>
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
getCurrentInstance,
|
|
defineEmits
|
|
} from 'vue';
|
|
import {
|
|
onReachBottom,
|
|
onLoad,
|
|
onPageScroll
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
useStore
|
|
} from 'vuex';
|
|
import {
|
|
getDicts
|
|
} from "@/api/system/dict/data";
|
|
import {
|
|
listPost,
|
|
listPostFollow,
|
|
getPost,
|
|
delPost,
|
|
addPost,
|
|
updatePost,
|
|
getLoginUserinfo
|
|
} from "@/api/talk/post";
|
|
import {
|
|
listFollowUser,
|
|
getFollowUser,
|
|
delFollowUserByFollowUser,
|
|
addFollowUser,
|
|
updateFollowUser
|
|
} from "@/api/followUser/followUser";
|
|
import {
|
|
delLikeByPostLike,
|
|
addLike
|
|
} from "@/api/like/like";
|
|
import {
|
|
delPostFavoriteByPostFavorite,
|
|
addPostFavorite
|
|
} from "@/api/postFavorite/postFavorite";
|
|
|
|
const emit = defineEmits(["updateFocusFather"])
|
|
const modalShow = ref(false)
|
|
const loginUser = reactive(uni.getStorageSync('loginUserPost'));
|
|
const dictPostTab = ref([])
|
|
onLoad((options) => {
|
|
|
|
getDicts('post_tab').then(e => {
|
|
dictPostTab.value = e.data
|
|
})
|
|
});
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
const store = useStore();
|
|
const QNDomain = store.state.user.QNDomain;
|
|
const props = defineProps({
|
|
postValue: Object,
|
|
postViewIndex: Number,
|
|
postViewType: Number
|
|
});
|
|
|
|
const postListStorage = ref(uni.getStorageSync('postList'));
|
|
|
|
const upPostListStorage = () => {
|
|
postListStorage.value.forEach(item => {
|
|
if (item.id === props.postValue.id) {
|
|
Object.assign(item, props.postValue);
|
|
}
|
|
});
|
|
uni.setStorageSync('postList', postListStorage.value);
|
|
}
|
|
|
|
const upPostListStorageInFocus = () => {
|
|
postListStorage.value = postListStorage.value.map(item => {
|
|
if (item.uid == props.postValue.uid) {
|
|
item.focus = props.postValue.focus;
|
|
}
|
|
return item;
|
|
});
|
|
uni.setStorageSync('postList', postListStorage.value);
|
|
}
|
|
|
|
const dictTab = (tab) => {
|
|
// console.log('dictPostTab',dictPostTab)
|
|
const dict = dictPostTab.value.find((dict) => dict.dictValue === tab);
|
|
return dict ? dict.dictLabel : '未知状态';
|
|
}
|
|
|
|
function strToList(strList) {
|
|
let list = strList.split(",");
|
|
return list;
|
|
}
|
|
|
|
function formatDate(input) {
|
|
const date = new Date(input);
|
|
if (isNaN(date)) {
|
|
throw new Error('Invalid date');
|
|
}
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}.${month}.${day}`;
|
|
}
|
|
|
|
function timeAgo(input) {
|
|
const date = new Date(input);
|
|
if (isNaN(date)) {
|
|
throw new Error('Invalid date');
|
|
}
|
|
const now = new Date();
|
|
const diff = now - date;
|
|
|
|
const minutes = Math.floor(diff / 60000); // 1 minute = 60000 ms
|
|
const hours = Math.floor(diff / 3600000); // 1 hour = 3600000 ms
|
|
const days = Math.floor(diff / 86400000); // 1 day = 86400000 ms
|
|
|
|
if (minutes < 60) {
|
|
return `${minutes}分钟前`;
|
|
} else if (hours < 24) {
|
|
return `${hours}小时前`;
|
|
} else if (days < 3) {
|
|
return `${days}天前`;
|
|
} else {
|
|
return formatDate(date);
|
|
}
|
|
}
|
|
|
|
function getAvatar(avatar) {
|
|
return QNDomain + avatar;
|
|
}
|
|
const toimage = (url) => {
|
|
if (typeof url === 'string') {
|
|
let info = url.split(",");
|
|
let processedInfo = info.map(item => QNDomain + item);
|
|
// console.log("processedInfo", processedInfo);
|
|
return processedInfo;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
|
|
const toPostInfoView = () => {
|
|
if (props.postViewType == 1 && props.postViewIndex != 3 && props.postViewIndex != 2) {
|
|
return;
|
|
}
|
|
if (props.postViewIndex == 3) {
|
|
uni.setStorageSync('postInfoPublish', props.postValue)
|
|
proxy.$tab.navigateTo('/pages/post/postPublish/postPublish')
|
|
return;
|
|
}
|
|
uni.setStorageSync('postInfo', props.postValue)
|
|
proxy.$tab.navigateTo('/pages/post/postInfo/postInfo')
|
|
}
|
|
|
|
const previewImage = (url, urls) => {
|
|
uni.previewImage({
|
|
current: url, // 当前显示图片的http链接
|
|
urls: urls // 需要预览的图片http链接列表
|
|
});
|
|
};
|
|
|
|
// 删除操作
|
|
// 方法
|
|
const uToastRef = ref(null)
|
|
const uToastRefParams = reactive({
|
|
type: 'default',
|
|
title: '结束后跳转标签页',
|
|
message: "删除成功",
|
|
// url: '/pages/componentsB/tag/tag',
|
|
// iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
|
|
})
|
|
function showToast(params) {
|
|
uToastRef.value.show({
|
|
...params,
|
|
complete() {
|
|
params.url && uni.navigateTo({
|
|
url: params.url
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
const modalConfirm = () => {
|
|
delPost(props.postValue.id).then(res => {
|
|
showToast(uToastRefParams);
|
|
setTimeout(function() {
|
|
uni.$emit('refreshData');
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 1000);
|
|
});
|
|
modalShow.value = false;
|
|
}
|
|
|
|
const modalCancel = () => {
|
|
modalShow.value = false;
|
|
}
|
|
|
|
const modalClose = () => {
|
|
modalShow.value = false;
|
|
}
|
|
|
|
const toDel = () => {
|
|
modalShow.value = true;
|
|
}
|
|
|
|
// 点赞操作
|
|
const cancelCollection = (postId) => {
|
|
const postLike = reactive({
|
|
likeId: postId,
|
|
})
|
|
delLikeByPostLike(postLike).then(res => {
|
|
props.postValue.likeCount -= 1;
|
|
props.postValue.like = !props.postValue.like;
|
|
upPostListStorage();
|
|
})
|
|
};
|
|
|
|
const addCollection = (postId) => {
|
|
const postLike = reactive({
|
|
likeId: postId,
|
|
})
|
|
addLike(postLike).then(res => {
|
|
props.postValue.likeCount += 1;
|
|
props.postValue.like = !props.postValue.like;
|
|
upPostListStorage();
|
|
})
|
|
};
|
|
|
|
// 收藏操作
|
|
const cancelFavorite = (postId) => {
|
|
const postFavorite = reactive({
|
|
favoriteId: postId,
|
|
})
|
|
delPostFavoriteByPostFavorite(postFavorite).then(res => {
|
|
props.postValue.favoriteCount -= 1;
|
|
props.postValue.favorite = !props.postValue.favorite;
|
|
upPostListStorage();
|
|
})
|
|
};
|
|
|
|
const addFavorite = (postId) => {
|
|
const postFavorite = reactive({
|
|
favoriteId: postId,
|
|
})
|
|
addPostFavorite(postFavorite).then(res => {
|
|
props.postValue.favoriteCount += 1;
|
|
props.postValue.favorite = !props.postValue.favorite;
|
|
upPostListStorage();
|
|
})
|
|
|
|
};
|
|
|
|
// 关注操作
|
|
|
|
|
|
const cancelFocus = (uid) => {
|
|
const followUser = reactive({
|
|
followId: uid,
|
|
})
|
|
delFollowUserByFollowUser(followUser).then(res => {
|
|
props.postValue.focus = !props.postValue.focus;
|
|
upPostListStorageInFocus();
|
|
console.log('关注操作后', uni.getStorageSync('postList'))
|
|
// let param={
|
|
// followId: uid,
|
|
// focus: props.postValue.focus
|
|
// }
|
|
//传递给父组件
|
|
emit('updateFocusFather')
|
|
});
|
|
};
|
|
|
|
const addFocus = (uid) => {
|
|
const followUser = reactive({
|
|
followId: uid,
|
|
})
|
|
addFollowUser(followUser).then(res => {
|
|
props.postValue.focus = !props.postValue.focus;
|
|
upPostListStorageInFocus();
|
|
console.log('关注操作后', uni.getStorageSync('postList'))
|
|
// let param={
|
|
// followId: uid,
|
|
// focus: props.postValue.focus
|
|
// }
|
|
//传递给父组件
|
|
emit('updateFocusFather')
|
|
});
|
|
};
|
|
|
|
|
|
// 点击头像经行详情页
|
|
function ToAddfruedb(res){
|
|
// console.log(res)
|
|
proxy.$tab.navigateTo('/pages/Friend/addfruebd?uid=' + res)
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.center-content-post {
|
|
}
|
|
|
|
.center-content-post-padding {
|
|
padding: 46rpx 32rpx 28rpx 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;
|
|
display: block;
|
|
width: 480rpx;
|
|
// display: flex; /* 设置为弹性盒子 */
|
|
// max-width: 450rpx; /* 最大宽度为 300rpx */
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
text-overflow: ellipsis; /* 超出部分用省略号表示 */
|
|
white-space: nowrap; /* 不换行 */
|
|
}
|
|
|
|
.no-focus-text {
|
|
font-weight: 600;
|
|
width: 58rpx;
|
|
// height: 30rpx;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #3477FC;
|
|
}
|
|
|
|
.focus-text {
|
|
font-weight: 600;
|
|
/* 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;
|
|
margin-bottom: 30rpx;
|
|
display: -webkit-box;
|
|
/* 将文本视为弹性盒子 */
|
|
-webkit-line-clamp: 2;
|
|
/* 设置最大行数 */
|
|
-webkit-box-orient: vertical;
|
|
/* 垂直方向排列文本 */
|
|
overflow: hidden;
|
|
/* 隐藏超出部分 */
|
|
}
|
|
|
|
.center-content-post-content-0 {
|
|
display: block;
|
|
font-weight: 400;
|
|
/* width: 670rpx; */
|
|
// height: 80rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #333333;
|
|
// margin-top: 18rpx;
|
|
margin-bottom: 28rpx;
|
|
display: -webkit-box;
|
|
/* 将文本视为弹性盒子 */
|
|
-webkit-line-clamp: 2;
|
|
/* 设置最大行数 */
|
|
-webkit-box-orient: vertical;
|
|
/* 垂直方向排列文本 */
|
|
overflow: hidden;
|
|
/* 隐藏超出部分 */
|
|
}
|
|
|
|
.center-content-post-content-1 {
|
|
display: block;
|
|
font-weight: 400;
|
|
/* width: 670rpx; */
|
|
// height: 80rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #333333;
|
|
margin-top: 18rpx;
|
|
margin-bottom: 28rpx;
|
|
|
|
}
|
|
|
|
.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 !important;
|
|
/* width: 200rpx !important;
|
|
height: 200rpx !important; */
|
|
}
|
|
|
|
.center-content-post-tab {
|
|
margin-top: 20rpx;
|
|
// margin-bottom: 20rpx;
|
|
}
|
|
|
|
|
|
.post-list-bottom {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
/* 水平居中 */
|
|
}
|
|
|
|
.p-item {
|
|
display: flex;
|
|
align-items: center;
|
|
/* 垂直居中 */
|
|
justify-content: center;
|
|
/* 水平居中 */
|
|
|
|
}
|
|
|
|
.center-content-post-tab-text {
|
|
font-weight: 600;
|
|
/* 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;
|
|
}
|
|
|
|
.count-like {
|
|
font-weight: 400;
|
|
width: 48rpx;
|
|
/* height: 23rpx; */
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #FA3939;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.count-favorite {
|
|
font-weight: 400;
|
|
width: 48rpx;
|
|
/* height: 23rpx; */
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #FFC729;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.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: 20rpx;
|
|
background: #b3d7ff;
|
|
}
|
|
|
|
.img-style-2 {
|
|
display: flex;
|
|
|
|
image {
|
|
margin: 6rpx;
|
|
|
|
width: 100%;
|
|
height: 306rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.img-style-3-1 {
|
|
|
|
image {
|
|
// margin: 6rpx;
|
|
width: 222rpx;
|
|
height: 222rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.img-style-3-2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
image {
|
|
// margin: 6rpx;
|
|
width: 222rpx;
|
|
height: 222rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.img-cover-style {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
|
|
text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.pass-text {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #3477FC;
|
|
}
|
|
|
|
.audit-text {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #43CE8F;
|
|
}
|
|
|
|
.refuse-text {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #F87863;
|
|
}
|
|
|
|
.delImg {
|
|
width: 32rpx;
|
|
height: 42rpx;
|
|
}
|
|
</style> |