<template>
	<view class="overall">
		<view class="date">2021年03月12日</view>

		<view class="content">
			<view class="circle-container">
				<view class="card-con-txt1-left">
					<image src="@/static/images/index/score.png" class="overlay-image"></image>
				</view>
				<view class="card-con-txt1-left-txt">90</view>
				<view class="card-con-txt1-left-txt top1">综合评分</view>
			</view>
			<view style="height: 170rpx;"></view>
			<view style="display: flex;justify-content: space-around;">
				<view style="text-align: center;">
					<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">身高 (CM)</view>
					<view style="font-size: 55rpx;color: #29d3b4;">123</view>
				</view>
				<view style="text-align: center;">
					<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">体重 (KG)</view>
					<view style="font-size: 55rpx;color: #29d3b4;">45</view>
				</view>
			</view>
			<view class="coach-message">
				<view>
					<image src="@/static/images/index/lv.png" class="drop-image"></image>
				</view>
				<view style="padding: 15rpx 0 0 5rpx;line-height: 1.6;font-size: 30rpx;color: #7F7F7F;">教练寄语教练寄语教练寄语教练寄语教练寄语教练寄语教练寄教练寄语教练寄语教练寄语教练寄语教练寄语教练教练寄语教练寄语教练寄语教练寄语练教练语教练寄教练寄语教练寄语教练寄语教练寄语教练寄语教练</view>
			</view>
			<view style="font-size: 45rpx;text-align: center;margin-top: 30%;">详细数据信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script> 

<style lang="less" scoped>
	.overall {
		width: 100%;
		height: 100vh;
		background-color: #29d3b4; 
	}

	.date {
		color: #fff;
		width: 92%;
		margin: auto;
		text-align: left;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.content {
		width: 92%;
		height: 70vh;
		background-color: #fff;
		border-radius: 15rpx;
		margin: 150rpx auto 0;
		position: relative;
	}

	.circle-container::before {
		content: '';
		width: 200px;
		height: 100px;
		background-color: #fff;
		border-radius: 100px 100px 0 0;
		display: inline-block;
		transform: translate(-50%, 0) rotate(0deg);
		transform-origin: center top;
		position: absolute;
		top: -12%;
		left: 50%;
		transform: translate(-50%, -0%);
	}
	
	.card-con-txt1-left {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.overlay-image {
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.card-con-txt1-left-txt {
		font-size: 32rpx;
		color: #29d3b4;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -0%);
	}
	
	.top1{
		top: 5%;
	}
	
	.coach-message{
		width: 92%;
		margin: 10rpx auto;
		display: flex;
	}
	
	.drop-image{
		width: 60rpx;
		height: 60rpx;
		align-items: center;
	}
	
</style>