teaching-uniapp/pages/publish/publish.vue

<template>
	<view class="publish">
		<statusBar :item="navBarData"></statusBar>
		
		<view class="" style="background-color: #ffffff;">
			
		
		<view class="pubTitle">
			<input class="title" style="" placeholder="活动标题" />
		</view>	
		
		<view class="pubMid">
			<view class="mid">
				<view class="txt">
					<textarea class="txtClass" value="" placeholder="请输入内容" />
				</view>
				<view class="pic">
					<view class="picCont">
						<image src="../../static/publish/photo.png" mode="aspectFill"></image>
						<view style="font-size: 24rpx;line-height: 40rpx;font-weight: 400;color: rgba(0, 0, 0, 0.6);">
							添加图片
						</view>
						<view style="font-size: 20rpx;line-height: 36rpx;font-weight: 400;color: rgba(0, 0, 0, 0.4);">
							（0/9）
						</view>
					</view>
				</view>
			</view>
		</view>
		
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								招募人数
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>

				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								活动形式
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
			
				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								活动地址
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
			
				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								活动时间
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
			
				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								活动费用
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
			
				</view>
			</view>
			<view class="userOptionsBox">
				<view class="optionsItemBox">
					<view class="optionItem">
						<view class="option_left">
							<text class="option_text">
								报名截止
							</text>
						</view>
						<view class="option_right">
							<image src="../../static/mine/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
			
				</view>
			</view>
			
			
		</view>
			<view class="publish_now">
				<button class="btn">立即发布</button>
			</view>
			<view class="liu">
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData:{
					title:'发布', //导航栏标题
					btn:1        //是否显示返回按钮 0不显示  1 显示
				},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.publish{
		.liu{
			//留白
			width: 750rpx;
			height: 68rpx;
			position: absolute;
			bottom: 0;
			background-color: #ffffff;
		}
		.pubTitle{
			width: 750rpx;
			height: 96rpx;
			padding: 24rpx 30rpx 0 30rpx;
			.title{
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 500;
			}
		}
		.pubMid{
			width: 750rpx;
			// height: 504rpx;
			padding: 24rpx 30rpx 0 30rpx;
			// background-color: #8BBEFF;
			.mid{
				width: 690rpx;
				height: 440rpx;
				// background-color: #f2f2f2;
				.txt{
					width: 690rpx;
					height: 192rpx;
					.txtClass{
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 48rpx;
					}
				}
				.pic{
					width: 224rpx;
					height: 224rpx;
					background-color: rgba(242, 242, 242, 1);
					display: flex;
					
					justify-content: center;
					align-items: center;
					.picCont{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						image{
							width: 56rpx;
							height: 66rpx;
						}
					}
				}
			}
		}
		
		
		// background-color: #fff;
		height: 100vh;
		
		
		.textCont{
			padding: 16px;
		}
		.addPhoto{
			background-color: #f2f2f2;
			width: 224rpx;
			height: 224rpx;
			display: flex;
			color: #616161;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
			image{
				width: 50px;
				height: 50px;
				// margin-left: 48px;
			}
			.photo{
				color: #000000A3;
				// padding-left: 44px;
				// font-size: 14px;
			}
			.num{
				color:  #919191;
				// padding-left: 56px;
				// font-size: 14px;
			}
			
		}
		.userOptionsBox {
			
			width: 750rpx;
			height: 96rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.optionsItemBox {
				width: 690rpx;
				.optionItem {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.option_left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						line-height: 48rpx;
						font-weight: 400;
					}
		
					.option_right {
						height: 40rpx;
		
						image {
							height: 32rpx;
							width: 32rpx;
						}
					}
				}
			}
		}
		.publish_now{
			position: absolute;
			bottom: 100rpx;
			display: flex;
			width: 750rpx;
			justify-content: center;
			
			.btn{
				width: 432rpx;
				height: 88rpx;
				background-color: #8BBEFF;
				color: #fff;
				margin-top: 20px;
			}
		}
		
	}
</style>