MiniPrograms/pages/grade/grade.vue

<template>
	<view class="chart-list-container">
		<view>
			<view class="home-topinfo">
				<image class="children-avatar" src="../../static/girl.png"></image>
				<view class="children-name">
					<text class="name">张小伟</text>
					<text class="detail">成绩分析</text>
				</view>
			</view>
		</view>
		
		<view class="chart-card">
			<line-chart></line-chart>
			<area-chart></area-chart>
			<column-chart></column-chart>
			<bar-chart></bar-chart>
			<!-- 雷达图列表板块 -->
			<view class="radar-box">
				<radar-chart></radar-chart>
				<!-- <view class="radar-box-taps">
					<button @click="open">打开弹窗</button>
				</view> -->
			</view>
		</view>
		
	</view>
</template>

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

			}
		},
		mounted() {

		},
		methods: {
			open(e){
				console.log(e);
			}
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss">
	.chart-list-container{
		height: 100%;
		.home-topinfo{
			height: 400rpx;
			background: linear-gradient(#FFC600, #f1f3f5);
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.children-avatar{
			margin-top: 10px;
			margin-left: 20px;
			width: 48px;
			height: 48px;
			border-radius: 25px;
			border: 2px solid #FFFFFF;
			box-shadow: 0 5px 10px rgba(0,0,0,0.2);
		}
		.children-name{
			margin-top: 12px;
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			.name{
				color: #6b778d;
				font-size: 13px;
				margin: 2px 0px 0px 5px;
			}
			.detail{
				color: #3B4144;
				font-weight: bold;
				margin: 5px 0px 0px 5px;
			}
		}
	}
	.chart-card{
		margin: -60px 7px 7px 7px;
		
		// .radar-box{
		// 	display: flex;
		// 	align-items: center;
		// 	.radar-box-taps{
		// 		width: 10px;
		// 		background-color: #000000;
		// 	}
		// }
	}
</style>