jp-zeroWorkerStation/pages/mine/employmentService/postMessage.vue

<template>
	<view>
		<u-navbar back-text="发布信息" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 发布标题 -->
		<view class="post-title">
			<view class="title">
				发布标题
			</view>
			<view class="title-content">
			   <input class="input" type="text" value="" placeholder="请填写标题内容"/>
			</view>
			<!-- 类型选择 -->
			<view class="type">
				<view class="name">
					<text>*</text>共享类型
				</view>
				<!-- 单选框 -->
				<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
			</view>
			
		</view>
	   <!-- 内容描述 -->
	  <view class="content-description">
		  <view class="title">
		  	内容描述
		  </view>
		  <view class="content-textarea">
		  	 <textarea class="textarea" value="" placeholder="请描述共享用工需求内容，并留下您的联系方式。" />
		  </view>
	  	
	  </view>
	  
	  <!-- 底部按钮 -->
	  
	  	<button class="btn">发布信息</button>
	</view>
</template>

<script>
	export default {
	data() {
		return {
			list: [
				{
					name: '急需用工',
					disabled: false
				},
				{
					name: '资源共享',
					disabled: false
				},
				
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '急需用工',
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style scoped lang="scss">
	// 发布标题
	.post-title{
		margin: 24rpx 32rpx 0;
		padding: 24rpx 32rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		background-color: #fff;
		border-radius: 24rpx;
		.title{
			font-family: 'PingFangSC-medium';
		}
		.title-content{
		  .input{
			  width: 100%;
			  height: 96rpx;
			  line-height: 96rpx;
			  color: rgba(136, 136, 136, 1);
			  font-family: Microsoft Yahei;
		  }
		}
		// 类型选择
		.type{
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			.name{
				font-size: 32rpx;
				color: #101010;
				margin-right: 40rpx;
				text{
					color:#EE3138
				}
			}
		}
	}

	// 内容描述
	.content-description{
			margin: 24rpx 32rpx 0;
				padding: 24rpx 32rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				background-color: #fff;
				border-radius: 24rpx;
				.title{
					font-family: 'PingFangSC-medium';
				}
				.content-textarea{
					margin-top: 24rpx;
					 .textarea{
						 width: 100%;
						 height: 640rpx;
						 color: rgba(136, 136, 136, 1);
						 font-family: Microsoft Yahei;
						 line-height: 40rpx;
					 }
				}
	}
	
// 底部按钮

	
	.btn{
		position: fixed;
		bottom: 32rpx;
		left: 0;
		right: 0;
		background-color:#F0F0F2;
		padding: 0 32rpx;
		border-radius: 50px;
		background-color: rgba(34, 149, 255, 1);
		color: rgba(241, 241, 241, 1);
		font-size: 36rpx;
		margin: 0 32rpx;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.03);
	}
</style>