flying-monkey/pagesB/personal-information/personal-information.vue

<template>
	<view>
		<status-nav navBarTitle="个人信息" returnColor="#c2c2c2"></status-nav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="fon28">
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30">我的昵称</view>
						<view style="color: #8b8b8b;">156****0510</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30">姓名</view>
						<view style="color: #8b8b8b;">156****0510</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30">性别</view>
						<view class="disac">
							<view @tap="chooseGender(1)" class="disac gender-box" :class="genderNum==1 ? 'gender-active' : ''">
								<view></view>
								<text>男</text>
							</view>
							<view @tap="chooseGender(2)" class="disac gender-box" :class="genderNum==2 ? 'gender-active' : ''">
								<view></view>
								<text>女</text>
							</view>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30">联系电话</view>
						<view style="color: #8b8b8b;">15616330510</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30">电子邮箱</view>
						<view style="color: #8b8b8b;">7607640@qq.com</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot mar-s10">
						<view class="bold width30">身份证号码</view>
						<view style="color: #8b8b8b;">430225199708210800</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">身份证正反面</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text>查看</text>
							<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">意外险材料</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text>查看</text>
							<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold flexs mar-y40">签署工程师合作协议</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text>查看</text>
							<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">技能证书</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text>查看</text>
							<image src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
				</view>
				<view class="person-btn">提交保存</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	export default {
		components:{
			containerSubgroupTwo
		},
		data() {
			return {
				genderNum:1 // 1：男		2：女
			}
		},
		methods: {
			// 性别切换
			chooseGender(index){
				this.genderNum = index;
			}
		}
	}
</script>

<style>

</style>