830 lines
19 KiB
Vue
830 lines
19 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 顶部导航栏 -->
|
|
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
|
<template class="img1BOX" #left>
|
|
<image @click="GotoUNISignid()" 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 @click="publishTalk(item)">{{item.lable}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image @click="togoFriend()" src="../static/images/icon/tong-1.png" class="img1" ></image>
|
|
</template>
|
|
<template class="img2Box" #center>
|
|
<view class="qiehuanBox">
|
|
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" :scrollable="false"
|
|
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
|
|
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}" :list="list1"
|
|
:current="viewIndex" @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="getAvatar(item.avatar)"></u-avatar>
|
|
<text class="center-content-focus-item-text">{{item.nickName}}</text>
|
|
</view>
|
|
</view>
|
|
</u-scroll-list>
|
|
</view>
|
|
</view>
|
|
<view class="center-content-focus-line"></view>
|
|
</view>
|
|
|
|
<view class="" v-for="(postItem, postIndex) in postList" :key="postIndex">
|
|
<PostView :postValue="postItem" :postViewIndex="viewIndex" :postViewType="0"
|
|
@updateFocusFather="updateFocusFather"></PostView>
|
|
<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">
|
|
<view class="box-c" :class="{ 'box-d': lefther === index }" @click="handerShowHand">
|
|
<view class="offtext" :class="{ boxtext: lefther === index }" @click.stop="handerLi(index)">
|
|
<text>{{ item }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
toRefs,
|
|
onMounted,
|
|
onUnmounted,
|
|
onBeforeUnmount,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import {
|
|
onReachBottom,
|
|
onLoad,
|
|
onShow,
|
|
onPageScroll
|
|
} from "@dcloudio/uni-app";
|
|
import PostView from "@/pages/common/postview/index.vue";
|
|
import {
|
|
listPost,
|
|
listPostFollow,
|
|
getPost,
|
|
delPost,
|
|
addPost,
|
|
updatePost,
|
|
getLoginUserinfo
|
|
} from "@/api/talk/post";
|
|
import {
|
|
listFollowUser,
|
|
getFollowUser,
|
|
delFollowUser,
|
|
addFollowUser,
|
|
updateFollowUser
|
|
} from "@/api/followUser/followUser";
|
|
import {
|
|
useStore
|
|
} from 'vuex';
|
|
const store = useStore();
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
const loginUser = reactive(uni.getStorageSync('loginUserPost'));
|
|
const QNDomain = store.state.user.QNDomain;
|
|
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,
|
|
tab: null,
|
|
readCount: null,
|
|
transmitCount: null,
|
|
likeCount: null,
|
|
commentCount: null,
|
|
favoriteCount: null,
|
|
postTop: null,
|
|
type: null,
|
|
anonymity: null,
|
|
postPrivate: null,
|
|
address: null,
|
|
longitude: null,
|
|
latitude: null,
|
|
auditor: null,
|
|
status: 0,
|
|
auditTime: null,
|
|
auditAdvice: null,
|
|
cut: null,
|
|
sortField: null,
|
|
sortDirection: null,
|
|
},
|
|
rules: {
|
|
status: [{
|
|
required: true,
|
|
message: "状态不能为空",
|
|
trigger: "change"
|
|
}],
|
|
cut: [{
|
|
required: true,
|
|
message: "分类不能为空",
|
|
trigger: "change"
|
|
}],
|
|
}
|
|
});
|
|
|
|
const {
|
|
queryParams,
|
|
form,
|
|
rules
|
|
} = toRefs(data);
|
|
|
|
const followTotal = ref(0);
|
|
const queryFollowParams = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
uid: null,
|
|
topicId: null,
|
|
discussId: null,
|
|
voteId: null,
|
|
title: null,
|
|
content: null,
|
|
media: null,
|
|
tab: null,
|
|
readCount: null,
|
|
transmitCount: null,
|
|
likeCount: null,
|
|
commentCount: null,
|
|
favoriteCount: null,
|
|
postTop: null,
|
|
type: null,
|
|
anonymity: null,
|
|
postPrivate: null,
|
|
address: null,
|
|
longitude: null,
|
|
latitude: null,
|
|
auditor: null,
|
|
status: 0,
|
|
auditTime: null,
|
|
auditAdvice: null,
|
|
cut: null,
|
|
sortField: null,
|
|
sortDirection: null,
|
|
})
|
|
|
|
/** 查询话题投稿new列表 */
|
|
function getList() {
|
|
if (searchPrerequisite.value == '热门') {
|
|
queryParams.value.sortField = 'like_count';
|
|
} else if (searchPrerequisite.value == '最新') {
|
|
queryParams.value.sortField = 'create_time';
|
|
}
|
|
listPost(queryParams.value).then(response => {
|
|
console.log('看一下查了啥啊', response.rows)
|
|
if (queryParams.value.pageNum > 1) {
|
|
postList.value.push(...response.rows);
|
|
uni.setStorageSync('postList', postList.value)
|
|
} else {
|
|
uni.setStorageSync('postList', response.rows)
|
|
}
|
|
postList.value = uni.getStorageSync('postList');
|
|
// postList.value = response.rows;
|
|
total.value = response.total;
|
|
});
|
|
}
|
|
|
|
function getFollowList() {
|
|
if (searchPrerequisite.value == '热门') {
|
|
queryFollowParams.sortField = 'like_count';
|
|
} else if (searchPrerequisite.value == '最新') {
|
|
queryFollowParams.sortField = 'create_time';
|
|
}
|
|
listPostFollow(queryFollowParams).then(response => {
|
|
console.log('看一下查了啥啊关注', response)
|
|
if (queryFollowParams.pageNum > 1) {
|
|
postList.value.push(...response.rows);
|
|
} else {
|
|
postList.value = response.rows;
|
|
}
|
|
|
|
followTotal.value = response.total;
|
|
});
|
|
}
|
|
|
|
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 bgColor = ref('rgba(170, 0, 0, 0)');
|
|
onLoad(() => {
|
|
uni.$on('refreshData', () => {
|
|
reactiveList();
|
|
})
|
|
getLoginUserinfo().then(res => {
|
|
uni.setStorageSync('loginUserPost', res.data)
|
|
})
|
|
onPageScroll((e) => {
|
|
// console.log("滚动距离为：" + e.scrollTop);
|
|
if (e.scrollTop >= 70) {
|
|
bgColor.value = 'rgba(255, 255, 255, 1)'
|
|
} else {
|
|
bgColor.value = 'rgba(170, 0, 0, 0)'
|
|
}
|
|
});
|
|
onReachBottom(() => {
|
|
console.log('触底了')
|
|
if (viewIndex.value == 1) {
|
|
if (total.value > postList.value.length) {
|
|
queryParams.value.pageNum += 1;
|
|
getList();
|
|
}
|
|
}
|
|
if (viewIndex.value == 0) {
|
|
if (followTotal.value > postList.value.length) {
|
|
queryFollowParams.pageNum += 1;
|
|
getFollowList();
|
|
}
|
|
}
|
|
})
|
|
InspectionData()
|
|
})
|
|
//检查资料完整性
|
|
const InspectionData = () => {
|
|
|
|
let birthday = proxy.$store.state.userInfo.birthday
|
|
let area = proxy.$store.state.userInfo.area
|
|
let remark = proxy.$store.state.userInfo.remark
|
|
console.log(birthday, " ", area, " ", remark);
|
|
if (birthday == '' | area == '' | remark == '') {
|
|
console.log(birthday, " ", area);
|
|
proxy.$modal.showToast("请去完善个人信息")
|
|
proxy.$tab.navigateTo('/pages/mine/updateInfo/newUserupInfo')
|
|
}
|
|
|
|
}
|
|
|
|
onShow(() => {
|
|
if (viewIndex.value == 1) {
|
|
postList.value = uni.getStorageSync('postList');
|
|
}
|
|
if (viewIndex.value == 0) {
|
|
selectFollowView();
|
|
}
|
|
})
|
|
|
|
const viewIndex = ref(1);
|
|
const searchOpen = ref(false);
|
|
const lefther = ref(0);
|
|
const searchPrerequisite = ref('热门');
|
|
const postTypeOpen = ref(false);
|
|
|
|
// const postTypeList = ['发布话题', '发布活动'];
|
|
const postTypeList = [{
|
|
lable: '发布话题',
|
|
id: 1
|
|
}, {
|
|
lable: '发布活动',
|
|
id: 2
|
|
}];
|
|
const searchPrerequisiteList = [
|
|
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8'
|
|
];
|
|
|
|
const list1 = reactive([{
|
|
name: '关注'
|
|
},
|
|
{
|
|
name: '推荐'
|
|
}
|
|
]);
|
|
|
|
const focusList = ref([]);
|
|
|
|
const publishTalk = (item) => {
|
|
if (item.id === 1) {
|
|
uni.setStorageSync('postInfoPublish', null)
|
|
proxy.$tab.navigateTo('/pages/post/postPublish/postPublish')
|
|
}
|
|
if (item.id === 2) {
|
|
//todo 判断用户是否有增加活动的接口调用权限
|
|
proxy.$tab.navigateTo('/pages/activity/publish')
|
|
}
|
|
}
|
|
|
|
const previewImage = (url, urls) => {
|
|
uni.previewImage({
|
|
current: url, // 当前显示图片的http链接
|
|
urls: urls // 需要预览的图片http链接列表
|
|
});
|
|
};
|
|
|
|
const toScanCode = () => {
|
|
// 允许从相机和相册扫码
|
|
uni.scanCode({
|
|
success: function(res) {
|
|
console.log('条码类型：' + res.scanType);
|
|
console.log('条码内容：' + res.result);
|
|
}
|
|
});
|
|
};
|
|
|
|
const togglePostType = () => {
|
|
postTypeOpen.value = !postTypeOpen.value;
|
|
};
|
|
|
|
const toEarch = () => {
|
|
proxy.$tab.navigateTo('/pages/search/index');
|
|
};
|
|
const togoFriend =()=>{
|
|
proxy.$tab.navigateTo('/pages/Friend/messageswitching');
|
|
}
|
|
|
|
const rightClick = () => {
|
|
console.log('rightClick');
|
|
};
|
|
|
|
const leftClick = () => {
|
|
console.log('leftClick');
|
|
};
|
|
|
|
const click = (item) => {
|
|
if (item.index == 1 && viewIndex.value == 0) {
|
|
queryParams.value.pageNum = 1;
|
|
getList();
|
|
}
|
|
viewIndex.value = item.index;
|
|
if (item.index == 0) {
|
|
selectFollowView();
|
|
}
|
|
if (item.index == 1) {
|
|
postList.value = uni.getStorageSync('postList');
|
|
}
|
|
};
|
|
|
|
const selectFollowView = () => {
|
|
const FollowUser = {
|
|
userId: loginUser.userId
|
|
};
|
|
listFollowUser(FollowUser).then(res => {
|
|
console.log(res.rows);
|
|
queryFollowParams.pageNum = 1;
|
|
postList.value = [];
|
|
if (res.rows.length == 0) {
|
|
const noFollew = {
|
|
avatar: 'noFollew',
|
|
nickName: '暂无关注'
|
|
};
|
|
res.rows.push(noFollew);
|
|
focusList.value = res.rows;
|
|
return;
|
|
};
|
|
focusList.value = res.rows;
|
|
getFollowList();
|
|
})
|
|
}
|
|
|
|
const handerLi = (res) => {
|
|
lefther.value = res;
|
|
searchPrerequisite.value = searchPrerequisiteList[res];
|
|
if (viewIndex.value == 1) {
|
|
queryParams.value.pageNum = 1;
|
|
postList.value = [];
|
|
getList();
|
|
} else if (viewIndex.value == 0) {
|
|
getFollowList();
|
|
}
|
|
setTimeout(() => {
|
|
searchOpen.value = !searchOpen.value;
|
|
}, 350);
|
|
};
|
|
|
|
const handerShowHand = () => {
|
|
searchOpen.value = !searchOpen.value;
|
|
};
|
|
|
|
function GotoUNISignid() {
|
|
proxy.$tab.navigateTo("/pages/signln/signid");
|
|
}
|
|
|
|
// 关注操作 updateFocusFather
|
|
const updateFocusFather = (val) => {
|
|
// postList.value.forEach(post => {
|
|
// if (post.uid === val.followId) {
|
|
// post.focus = val.focus;
|
|
// }
|
|
// });
|
|
// console.log("子传父")
|
|
postList.value = uni.getStorageSync('postList');
|
|
// console.log('关注' + uni.getStorageSync('postList'))
|
|
}
|
|
|
|
const reactiveList = () => {
|
|
queryParams.value.pageNum = 1;
|
|
getList();
|
|
}
|
|
|
|
getList();
|
|
</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;
|
|
}
|
|
|
|
.data-v-6fcabaad {
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
|
|
/* width: 200rpx !important;
|
|
height: 200rpx !important; */
|
|
}
|
|
|
|
.data-v-6fcabaad {
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
|
|
}
|
|
|
|
.box-a {
|
|
margin-top: 42rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
}
|
|
|
|
.box-b {
|
|
width: calc(33.33% - 26rpx);
|
|
/* 每行三个元素，减去外边距的总宽度 */
|
|
margin-bottom: 24rpx;
|
|
// margin-left: 12rpx;
|
|
margin-right: 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;
|
|
}
|
|
|
|
.image-container {
|
|
// display: inline-block;
|
|
position: relative;
|
|
/* 设置父元素为相对定位 */
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 28rpx;
|
|
}
|
|
|
|
/* 其他样式... */
|
|
|
|
.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> |