pages/sub_index/chatIssue.vue

<template>
	<view class="chatIssue">
		<!-- #ifdef APP-PLUS -->
		<view class="bgColor"></view>
		<!-- #endif -->
		<u-sticky>
			<view class="chatIssue-tabs">
				<u-tabs :list="list" :current="current" @change="change" bar-width="250" item-width="250"></u-tabs>
			</view>
			<view class="chatIssue-con">
				<view class="chatIssue-con-search">
					<u-search placeholder="搜索关键词" v-model="val" action-text="+  发布" :show-action="false" @search="search"></u-search>
				</view>
				<view class="chatIssue-con-add" @click="toPath('/pages/sub_index/issueQuestion')">
					<u-icon name="plus" color="#333333" size="32"></u-icon>
					<text class="chatIssue-con-add-text">发布</text>
				</view>
			</view>
		</u-sticky>
		<view v-if="current===1">
			<view class="chatIssue-item">
				<view class="chatIssue-item-avatar">
					<u-avatar :src="avatar" size="110"></u-avatar>
				</view>
				<view class="chatIssue-item-con">
					<view class="chatIssue-item-con-title" @click="toPath('/pages/sub_index/chatDetails')">哇，好大的雪啊，你们那里雪大吗？</view>
					<view class="chatIssue-item-con-author">
						<view class="chatIssue-item-con-author-left">
							<text>张嚣</text>
							<text>06:36</text>
						</view>
						<view class="chatIssue-item-con-author-km">
							<u-icon name="map" color="#999999" size="24"></u-icon>
							<text>3.6km</text>
						</view>
					</view>
					<view class="chatIssue-item-con-desc">
						早上一觉醒来，迷迷糊糊拉开窗帘，便见到如此景象忍不住想分享，太美了！！！
					</view>
					<view class="chatIssue-item-con-img">
						<scroll-view :scroll-x="true" class="scrollView">
							<view class="chatIssue-item-con-img-items">
								<u-image width="100%" height="100%" mode="aspectFit" src="/static/images/index/bannar.png"></u-image>
							</view>
							<view class="chatIssue-item-con-img-items">
								<u-image width="100%" height="100%" mode="aspectFit" src="/static/images/index/bannar.png"></u-image>
							</view>
							<view class="chatIssue-item-con-img-items">
								<u-image width="100%" height="100%" mode="aspectFit" src="/static/images/index/bannar.png"></u-image>
							</view>
							<view class="chatIssue-item-con-img-items">
								<u-image width="100%" height="100%" mode="aspectFit" src="/static/images/index/bannar.png"></u-image>
							</view>
						</scroll-view>
					</view>
					<view class="chatIssue-item-con-footer">
						<view class="chatIssue-item-con-footer-watcher">
							<u-icon name="eye" color="#999999" size="24"></u-icon>
							<text>3456</text>
						</view>
						<view class="chatIssue-item-con-footer-chat">
							<u-icon name="chat" color="#999999" size="24"></u-icon>
							<text>34</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current === 0">
			<u-empty text="暂无动态" mode="list" margin-top="300"></u-empty>
		</view>
		<view v-if="current === 2">
			<u-empty text="暂无动态" mode="list" margin-top="300"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: "人气热帖"
					},
					{
						name: "附近邻居"
					},
					{
						name: "最新发布"
					}
				],
				current: 1,
				val: "",
				avatar: ""
			}
		},
		methods: {
			change(index) {
				this.current = index
			},
			search(e) {
				uni.showToast({
					icon: "none",
					title: "搜索服务功能暂未开通",
					duration: 1500
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.scrollView {
		white-space: nowrap;
		height: 180rpx;
		width: 100%;
	}

	/* #ifdef APP-PLUS */
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: -1;
	}

	/* #endif */
	page {
		background-color: #FFFFFF;
	}

	.chatIssue {
		font-family: "PingFang-SC-Medium";
		background-color: #FFFFFF;

		&-tabs {
			box-shadow: 0 0 2rpx 6rpx rgba(222, 224, 228, 0.4);
		}

		&-con {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx 30rpx;
			align-items: center;
			background-color: #FFFFFF;

			&-search {
				width: 80%;
			}

			&-add {
				width: 15%;
				fontSize: '30rpx';
				font-family: 'PingFang-SC-Medium';
				color: '#333333';
				display: flex;
				align-items: center;

				&-text {
					margin-left: 10rpx;
				}
			}
		}

		&-item {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			&-con {
				width: 80%;
				margin-left: 30rpx;
				margin-top: 15rpx;

				&-title {
					color: #333333;
					font-size: 30rpx;
				}

				&-author {
					padding: 10rpx 0 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999999;
					font-size: 25rpx;

					&-left {
						text {
							margin-right: 20rpx;
						}
					}
				}

				&-desc {
					color: #666666;
					font-size: 28rpx;
				}

				&-footer {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999999;

					&-watcher {
						margin-right: 50rpx;

						text {
							margin-left: 10rpx;
						}
					}

					&-chat {
						text {
							margin-left: 10rpx;
						}
					}
				}

				&-img {
					width: 100%;
					margin: 10rpx 0;

					&-items {
						margin-right: 30rpx;
						border-radius: 20rpx;
						display: inline-block;
						width: 170rpx;
						height: 170rpx;
						background-color: #999999;
					}
				}
			}
		}
	}
</style>