<template>
	<view class="content">
		<view class="posts-details-wrap">
		     <view class="banner">
		         <image src="../../icons/banner.png" /> 
		     </view>
		     <!-- content --> 
		     <view class="release-text-title">
		            帖子标题帖子标题帖子标题帖子标题帖子帖子
		     </view>
		    <view class="new-release-content">
		        <!-- 头像，名称，等级 -->
		        <view class="userinfo-wrap">
		            <image src="../../icons/nav2.png"></image>
		            <view class="userinfo">
		                <view class="userinfo-vip">
		                    <text class="title">我是用户昵称</text>
		                    <view class="VIP">
		                        <image src="../../icons/vip.png"></image>
		                        VIP5
		                    </view> 
		                </view>
		                <view class="time">
		                    1小时
		                </view>  
		            </view>
		        </view>
		        <!-- type -->
		        <view class="type-wrap">
		            <text style="margin-left:0">帮工</text>
		            <text>配送员</text>
		            <text>销售员</text>
		        </view>
		        <!-- content -->
		        <view class="release-text">
		            <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>
		<!-- footer -->
		<view class="footer">
		    <view class="search">
		        <input type="text" confirm-type="send" placeholder-class="placeholder" placeholder="写点什么..."/>
		        <view class="search-btn">
		            发表
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
	  background: #f9f9f9;
	}
	.posts-details-wrap {
	  margin-top: 20rpx;
	  padding-bottom: 92rpx;
	}
	.posts-details-wrap .release-text-title {
	  font-size: 32rpx;
	  color: #061220;
	  font-weight: bold;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  padding: 32rpx;
	  padding-bottom: 0;
	  background: #fff;
	}
	.posts-details-wrap .banner {
	  padding: 32rpx;
	  padding-bottom: 0;
	  background: #fff;
	}
	.posts-details-wrap .banner image {
	  height: 280rpx;
	}
	.new-release-content {
	  padding: 32rpx;
	  background: #fff;
	  margin-bottom: 20rpx;
	}
	.new-release-content .userinfo-wrap {
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  margin-bottom: 16rpx;
	}
	.new-release-content .userinfo-wrap image {
	  width: 64rpx;
	  height: 64rpx;
	}
	.new-release-content .userinfo-wrap .userinfo {
	  display: flex;
	  flex-direction: column;
	}
	.new-release-content .userinfo-wrap .userinfo-vip {
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	}
	.new-release-content .userinfo-wrap .userinfo-vip .title {
	  font-size: 28rpx;
	  padding: 0 20rpx;
	  color: #061220;
	  font-weight: bold;
	}
	.new-release-content .userinfo-wrap .userinfo-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;
	}
	.new-release-content .userinfo-wrap .userinfo-vip .VIP image {
	  width: 24rpx;
	  height: 20rpx;
	}
	.new-release-content .userinfo-wrap .time {
	  color: #BDC4CE;
	  font-size: 20rpx;
	  padding-left: 20rpx;
	}
	.new-release-content .type-wrap {
	  color: #BDC4CE;
	  font-size: 28rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  margin-bottom: 16rpx;
	}
	.new-release-content .type-wrap text:nth-child(1) {
	  margin-left: 16rpx;
	}
	.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;
	}
	.new-release-content .release-text .release-text-content {
	  font-size: 28rpx;
	  color: #3C444C;
	  box-sizing: border-box;
	}
	.new-release-content .release-text .release-text-content image {
	  margin-top: 16rpx;
	}
	.new-release-content .thumbs-number {
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
	  padding-top: 10rpx;
	}
	.new-release-content .thumbs-number .thumbs {
	  margin-right: 16rpx;
	}
	.new-release-content .thumbs-number .thumbs,
	.new-release-content .thumbs-number .number {
	  color: #5B5E64;
	  font-size: 28rpx;
	  display: flex;
	  align-items: center;
	}
	.new-release-content .thumbs-number .thumbs image,
	.new-release-content .thumbs-number .number image {
	  width: 28rpx;
	  height: 28rpx;
	  margin-right: 8rpx;
	}
	.footer {
	  width: 100vw;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  z-index: 1000;
	  padding: 14rpx 0;
	  background: #fff;
	}
	.footer .search {
	  padding: 0 32rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  z-index: 1000;
	}
	.footer .search .placeholder {
	  font-size: 24rpx;
	  color: #BDC4CE;
	}
	.footer .search input {
	  height: 60rpx;
	  width: 77vw;
	  border: 1px solid #eee;
	  background: #F9F9F9;
	  border-radius: 50px;
	  padding-left: 20rpx;
	}
	.footer .search .search-btn {
	  font-size: 28rpx;
	  color: #C29445;
	  margin-left: 28rpx;
	}

</style>