kitchendDevice/pageTwo/count/setting.vue

<template>
	<view class="content">
		<!--  -->
		<view class="info" @click="handleEditUser">
			<view class="left">
				<image :src="user.headimg"></image>
				<view class="name overflow">{{user.name}}</view>
				<view>{{user.sex==1?'男':user.sex==2?'女':'未知'}}</view>
				<view>{{user.age}}岁</view>
			</view>
			<icon class="iconfont icon-bianji"></icon>
		</view>
		<!--  -->
		<view class="kcal" @click="handleEditKcal()">
			<view class="text">
				建议摄入卡路里
				<text>修改></text>
			</view>
			<view class="num">
				<text>1227</text>千卡
			</view>
			<view class="desc">
				基础代谢：指人体在清醒而又极端安静的状态下，不受肌肉活动、环境温度、食物及精神紧张等影响时的能量代谢率
			</view>
		</view>
		<!--  -->
		<view class="kcal">
			<view class="text">
				建议三大营养比列
			</view>
			<view class="num">
				<view class="item">
					<icon class="iconfont icon-tanshuihuahewu"></icon>
					<text>碳水化合物</text>
					<text>53%</text>
					<view class="val">172g</view>
				</view>
				<view class="item">
					<icon class="iconfont icon-Sm-danbaizhi"></icon>
					<text>蛋白质</text>
					<text>17%</text>
					<view class="val">45g</view>
				</view>
				<view class="item">
					<icon class="iconfont icon-w_fat_normal"></icon>
					<text>脂肪</text>
					<text>30%</text>
					<view class="val">43g</view>
				</view>
			</view>
			<view class="desc">
				根据您的预算热量和饮食方案为您计算推荐摄入量。请注意，此处的推荐摄入是不涉及运动产生的额外可摄入热量。
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(["user"])
		},
		methods: {
			handleEditUser() {
				uni.navigateTo({
					url: "/pageTwo/me/userEdit?familayData=" +JSON.stringify(this.user) 
				})
			},
			handleEditKcal() {
				uni.navigateTo({
					url: "/pageTwo/count/KcalEdit"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 10px;
	}

	.info {
		width: calc(100% - 20px);
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.name {
				max-width: 50%;
				font-weight: bold;
			}

			view {
				margin-right: 15px;
			}

			image {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 10px;
				border: 1px solid #dfdfdf;
			}

		}

		icon {
			font-size: 20px;
		}
	}

	.kcal {
		width: 100%;
		background: #fff;
		border-radius: 10px;
		padding: 10px 0;
		margin-bottom: 15px;

		.text {
			padding: 5px 10px;
			display: flex;
			justify-content: space-between;
		}

		.num {
			width: 100%;
			text-align: center;
			margin: 15px 0;
			display: flex;
			justify-content: center;
			align-items: baseline;

			text {
				font-size: 25px;
				font-weight: bold;
				margin-right: 5px;
				color: $mainColor;
				border-bottom: 1px solid;
			}

			.item {
				display: flex;
				flex-wrap: wrap;
				width: 33.3%;
				justify-content: center;

				icon {
					font-size: 40px;
					color: $uni-color-warning;
					border-radius: 30%;
					padding: 5px;
					margin-bottom: 8px;
				}

				text {
					font-size: 14px;
					font-weight: 500;
					color: #666;
					display: inline-block;
					width: 100%;
					text-align: center;
					line-height: 20px;
					border-bottom: none;
				}

				.val {
					width: 100px;
					background: #f7f7f7;
					border-radius: 10px;
					margin: auto;
					margin-top: 8px;
					font-weight: bold;
					padding: 2px 0;
				}
			}
		}

		.desc {
			margin: 0 10px;
			font-size: 12px;
			color: #999;
			line-height: 20px;
		}
	}
</style>