talk_appAmin/pages/index.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>
				
		    </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">
				<view class="souBOx flex alignCenter" @click="toEarch">
					<image src="../static/images/icon/tu2-2.png" class="img3"></image>
					<view class="shuruText">在食堂捡到一张饭卡</view>
				</view>
				<image src="../static/images/icon/tu2-3.png" class="img4"></image>
			</view>
			<view class="category-dropdown flex alignCenter">
			    <text class="text1 flex alignCenter">热门</text>
			    <image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
			</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">
					        <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>
					    </view>
					    <!-- 右对齐 -->
					    <view class="flex alignCenter">
					        <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>
					<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
					<!-- 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>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewIndex: 0,
				bgColor: 'rgba(170, 0, 0, 0)',
				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,
					title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
					content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
					type: '1',
					media: [
						'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',
					],
					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,
					// 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
				}]
			}
		},
		onLoad() {

		},
		methods: {
			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;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 微信小程序配置
: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: 35rpx;
		height: 35rpx;
	}
	.img4{
		width: 32rpx;
		height: 32rpx;
		margin-right: 32rpx;
	}
	.category-dropdown {
		margin-left: 42rpx;
	}
	.text1{
		font-weight: 400;
		width: 60rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #1B1B1B 100%;
		margin-right: 8rpx;
	}
	.img5{
		width: 26rpx;
		height: 16rpx;
	}
	.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;
		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;
	}
	
	.center-content-post-head-title-timeAddress {
	    font-weight: 400;
	    font-size: 30rpx;
	    text-align: left;
	    color: #999999;
	    align-self: flex-end; /* 垂直结束对齐 */
	}
	.no-focus-text {
		font-weight: 400;
		width: 58rpx;
		height: 29rpx;
		font-size: 28rpx;
		text-align: left;
		color: #3477FC;
	}
	.focus-text {
		font-weight: 400;
		/* width: 58rpx; */
		height: 29rpx;
		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 100%;
		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: #000000;
		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; */
	}
	.data-v-723ad357 {
		border-radius: 20rpx 20rpx 20rpx 20rpx;
/* 		width: 200rpx !important;
		height: 200rpx !important; */
	}
	
	.center-content-post-tab{
		margin-top: 38rpx;
		margin-bottom: 54rpx;
	}
	

	.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: 25rpx;
		font-size: 24rpx;
		text-align: left;
		color: #3477FC;
		/* width: 130rpx; */
		height: 44rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #f7f8fa;
		/* margin-left: 50rpx; */
	}
	.center-content-post-tab-text:nth-child(2) {
	    /* 您的样式 */
		margin-left: 50rpx; /* 添加额外的左边距 */
	}
	
	.margin50 {
	  margin-left: 50rpx; /* 添加额外的左边距 */
	}
	.count{
		font-weight: 400;
		width: 47rpx;
		/* height: 23rpx; */
		font-size: 28rpx;
		text-align: left;
		color: #787878;
	}

</style>