MiniPrograms/subpkg/guide/childrenlist.vue

<template>
	<view class="children-container">
		<back></back>
		<view class="tips">
			<view class="title">选择您的孩子</view>
		</view>

		<!-- 孩子选择界面 -->
		<view class="children-item">
			<view class="com-box">
				<view class="item" v-for="(item,index) in parentdetail.childrenList" :key="index"
					@click="chooseChildren(item)">
					<view class="item-text">{{item.name}}</view>
					<view class="avatar-box">
						<u-avatar size="120" class="item-avatar" :src="item.avatar" mode="aspectFill"></u-avatar>
					</view>
				</view>
			</view>
		</view>
		<!-- 动画 -->
		<view class="ocean"></view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['parentdetail'])
		},
		data() {
			return {

			};
		},
		onLoad() {
			this.$initApp()
		},
		methods: {
			...mapMutations('m_children', ['updateChildrenInfo']),
			//选择孩子并跳转首页传入id查询显示孩子信息
			chooseChildren(item) {
				this.updateChildrenInfo(item)
				uni.switchTab({
					url: '/pages/home/home'
				})
			},


		}
	}
</script>

<style lang="scss">
	@import '@/subpkg/common/ocean.scss';

	.children-container {
		display: flex;
		flex-direction: column;

		.tips {
			width: 100%;
			display: flex;
			flex-direction: column;
			z-index: 99;

			.title {
				padding-top: 50rpx;
				padding-left: 40rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
				color: $color-mixblue;
				// background-clip: text; //裁剪成文字的前景色
				// color: transparent; //文字颜色变成透明
			}
		}
		
		.children-item {
			.com-box {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap; //元素换行
				margin-top: 60rpx;
		
				.item {
					margin: 10rpx 20rpx 10rpx 20rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-shadow: $box-shadow-stereo-white;
					background-color: #FFFFFF;
					border-radius: $card-border-radius;
					width: 280rpx;
					height: 300rpx;
					z-index: 99;
		
					.item-text {
						margin: -7rpx 0 20rpx 20rpx;
						width: 100%;
						line-height: 40rpx;
						font-weight: bold;
						font-size: 35rpx;
						color: #696969;
		
					}
		
					.avatar-box {
						.item-avatar {
							width: 220rpx;
							height: 220rpx;
						}
					}
				}
			}
		}
	}
</style>