<template>
	<view class="content">
		<view class="personal-wrap">
			<!-- 头像，名称，等级 -->
			<view class="user-info">
				<image src="../../icons/nav2.png" />
				<view class="name-vip-type">
					<view class="name-vip">
						<text class="title">我是用户昵称</text>
						<view class="VIP">
							<image src="../../icons/vip.png"></image>
							VIP5
						</view>
					</view>
					<view class="type">
						<text>帮工</text>
						<text>配送员</text>
						<text>销售员</text>
					</view>
				</view>
			</view>
			<!-- content  -->
			<view class="new-release-content">
				<!-- 头像，名称，等级 -->
				<view class="userinfo-wrap">
					<image src="../../icons/nav2.png"></image>
					<text class="title">我是用户昵称</text>
					<view class="VIP">
						<image src="../../icons/vip.png"></image>
						VIP5
					</view>
				</view>
				<!-- type -->
				<view class="type-wrap">
					帮工招聘求职
					<text>帮工</text>
					<text>配送员</text>
					<text>销售员</text>
				</view>
				<!-- content -->
				<view class="release-text">
					<view class="release-text-title">
						帖子标题帖子标题帖子标题帖子标题帖子帖子
					</view>
					<view class="release-text-content">
						帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容...
					</view>
				</view>
				<!-- 点赞， 人数 -->
				<view class="thumbs-number">
					<view class="thumbs">
						<image src="../../icons/thumbs.png"></image>
						399
					</view>
					<view class="number">
						<image src="../../icons/number.png"></image>
						399
					</view>
				</view>
			</view>
			<view class="new-release-content">
				<!-- 头像，名称，等级 -->
				<view class="userinfo-wrap">
					<image src="../../icons/nav2.png"></image>
					<text class="title">我是用户昵称</text>
					<view class="VIP">
						<image src="../../icons/vip.png"></image>
						VIP5
					</view>
				</view>
				<!-- type -->
				<view class="type-wrap">
					帮工招聘求职
					<text>帮工</text>
					<text>配送员</text>
					<text>销售员</text>
				</view>
				<!-- content -->
				<view class="release-text">
					<view class="release-text-title">
						帖子标题帖子标题帖子标题帖子标题帖子帖子
					</view>
					<view class="release-text-content">
						帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容...
					</view>
				</view>
				<!-- 点赞， 人数 -->
				<view class="thumbs-number">
					<view class="thumbs">
						<image src="../../icons/thumbs1.png"></image>
						399
					</view>
					<view class="number">
						<image src="../../icons/number.png"></image>
						399
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showbanben: false
			}
		},
		onLoad() {



		},
		methods: {
			hidebanben() {
				this.showbanben = false
			},
			// 更多
			goodkind() {
				uni.navigateTo({
					url: '/pages/homepage/goodkind'
				})
			},
			// 积分商城
			jifenshop() {
				uni.navigateTo({
					url: '/pages/homepage/jifenshop'
				})
			},
			// 搜索
			search() {
				uni.navigateTo({
					url: '/pages/homepage/search'
				})
			},
			// 秒杀
			miaosha() {
				uni.navigateTo({
					url: '/pages/homepage/miaosha'
				})
			}
		}

	}
</script>

<style>
	page {
		background: #F9F9F9;
	}

	.personal-wrap .user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 32rpx;
		margin-bottom: 15rpx;
		background: #fff;
	}

	.personal-wrap .user-info image {
		width: 128rpx;
		height: 128rpx;
	}

	.personal-wrap .user-info .name-vip-type {
		padding-left: 28rpx;
	}

	.personal-wrap .user-info .name-vip {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.personal-wrap .user-info .name-vip .title {
		font-size: 32rpx;
		padding-right: 20rpx;
		color: #061220;
		font-weight: bold;
	}

	.personal-wrap .user-info .name-vip .VIP {
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #f4d297 0%, #fcbf75 100%);
		color: #784700;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 50rpx;
	}

	.personal-wrap .user-info .name-vip .VIP image {
		width: 24rpx;
		height: 20rpx;
	}

	.personal-wrap .user-info .type text {
		margin-right: 16rpx;
		text-align: center;
		color: #C29445;
		font-size: 22rpx;
		border-radius: 50rpx;
		border: 1px solid #EEEEEE;
		padding: 5rpx 20rpx;
	}

	.personal-wrap .new-release-content {
		padding: 32rpx;
		background: #fff;
		border-bottom: 1px solid #EEEEEE;
	}

	.personal-wrap .new-release-content .userinfo-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap image {
		width: 60rpx;
		height: 60rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap .title {
		font-size: 32rpx;
		padding: 0 20rpx;
		color: #061220;
		font-weight: bold;
	}

	.personal-wrap .new-release-content .userinfo-wrap .VIP {
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #f4d297 0%, #fcbf75 100%);
		color: #784700;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 50rpx;
	}

	.personal-wrap .new-release-content .userinfo-wrap .VIP image {
		width: 24rpx;
		height: 20rpx;
	}

	.personal-wrap .new-release-content .type-wrap {
		color: #BDC4CE;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.personal-wrap .new-release-content .type-wrap text:nth-child(1) {
		margin-left: 16rpx;
	}

	.personal-wrap .new-release-content .type-wrap text {
		margin-right: 16rpx;
		text-align: center;
		color: #C29445;
		font-size: 22rpx;
		border-radius: 50rpx;
		border: 1px solid #EEEEEE;
		padding: 5rpx 20rpx;
	}

	.personal-wrap .new-release-content .release-text .release-text-title {
		font-size: 32rpx;
		color: #061220;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 12rpx;
	}

	.personal-wrap .new-release-content .release-text .release-text-content {
		font-size: 28rpx;
		color: #3C444C;
	}

	.personal-wrap .new-release-content .thumbs-number {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs {
		margin-right: 16rpx;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs,
	.personal-wrap .new-release-content .thumbs-number .number {
		color: #5B5E64;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.personal-wrap .new-release-content .thumbs-number .thumbs image,
	.personal-wrap .new-release-content .thumbs-number .number image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
</style>