页面修改 echarts修改

pages/index/index.vue

@@ -1,150 +1,100 @@
 <template>
 	<!-- 头部代码 -->
 	<view class="view_by">
-		<view>
+		<u-navbar :is-back="false" title='首页' title-color="#2E4975" :border-bottom="false" :background="true"
-			<u-navbar :is-back="false" title='首页' title-color="#000" :border-bottom="false" :background="true" id="navbar">
+			id="navbar">
 		</u-navbar>
-			<view class="header_button">
+		<view class="top_message">
-				<u-button type="primary" shape="circle" :hair-line="false" class="custom-style">学生</u-button>
+			<view class="top_message_left">
-				<u-button class="custom-style" shape="circle" :hair-line="false">班级</u-button>
+				<view class="top_message_left_top">
+					32
+				</view>
+				<view class="top_message_left_bot">
+					已完成人数（人）
 				</view>
 			</view>
-		<!-- 登录之后显示的页面 -->
+			<view class="top_message_cent">
-		<view v-if="flag">
-			<view class="view_body">
-				<view class="content_box">
-					<view class="view_text">32</view>
-					<view>已完成人数（人）</view>
-				</view>
-				<view class="content_box">
-					<view class="view_text">90%</view>
-					<view>已完成作业正确率</view>
-				</view>
-			</view>
-			<!-- 作业完成情况 -->
-			<view class="echarts_bar">
-				<view>
-					<text>作业完成情况</text>
-					<view class="echarts_text">
-						<view>本周</view>
 
 			</view>
+			<view class="top_message_right">
+				<view class="top_message_right_top">
+					90%
+				</view>
+				<view class="top_message_right_bot">
+					已完成作业正确率
+				</view>
+			</view>
+		</view>
+		<view class="work_msa">
+			<view class="work_msa_top">
+				<view class="work_msa_top_left">
+					作业完成情况
+				</view>
+				<view class="work_msa_top_right">
+					本周 <view class="iconfont icon-arrow-down"></view>
+				</view>
 			</view>
-			
 			<view class="echarts">
+				<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
 				<l-echart ref="chart" @finished="initChart"></l-echart>
 			</view>
+		</view>
+		<div class="data">
+			8月31日<view class="iconfont icon-arrow-down"></view>
+		</div>
+		<view class="class_infobox">
+			<view class="class_info" style="width:80rpx ;">
 				
-			</view>
+				<view class="class_info_bot">
-		</view>
-		<!-- 没有数据显示的页面 -->
-		<view>
-			<view class="deer">
-				<view class="deer_images">
-					<image src="https://file.langsi.online/yasiimg/web/static/udGRdnpSfgV3LMD8Ksuv" mode=""></image>
-				</view>
-				<view class="deer_right">
-						<view class="deer_text">当前暂无学习数据，快去布置作业吧！</view>
-						<view class="deer_button">
-							<view>去安排</view>
-							<view class="r_image"><image src="https://file.langsi.online/yasiimg/web/static/uITFZ6vUIiA0P2KBz1i8" mode=""></image></view>
-						</view>
-				</view>
-		
-			</view>
-		<view class="echarts_bar">
-			<view>
-				<text>作业完成情况</text>
-				<view class="echarts_text">
-					<view>本周</view>
-		
-				</view>
-			</view>
-		
-			<view class="echarts">
-				<l-echart ref="chart" @finished="initChart"></l-echart>
-			</view>
-		
-		</view>
-		</view>
-		<!-- 底部区域 -->
-		<view v-if="flag">
-			<view class="date">
-				8月31日
-			</view>
-			
-			<view class="box_rate">
-				<view class="rate_item">
-					<view class="number">
 					21
 				</view>
-					<view class="text">
+				<view class="class_info_top">
 					完成人数
 				</view>
 			</view>
-				<view class="rate_item">
+			<view class="class_info">
-					<view class="number">
+				<view class="class_info_bot">
 					6
 				</view>
-					<view class="text">
+				<view class="class_info_top">
 					平均成绩/分
 				</view>
+				
 			</view>
-				<view class="rate_item">
+			<view class="class_info">
-					<view class="number">
+				
+				<view class="class_info_bot">
 					80%
+		
 				</view>
-					<view class="text">
+				<view class="class_info_top">
 					作业正确率
 				</view>
 			</view>
 		</view>
-			<view>
+		<div class="card">
-				<view class="view_botton">
+			<view class="card_left">
-					<view class="view_spoken">
+				<view class="stu_img">
-						<view>
+					<image src="https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49" mode=""></image>
-							<image src="https://file.langsi.online/yasiimg/web/static/u80EhqyvMfcOaaSyK09X" mode=""></image>
 				</view>
-						<view class="view_span">
+				<view class="stu_info">
-							<text>口语单科模考</text>
+					<view class="stu_info_top">
-							<text>李斯丹妮</text>
+						口语单科模考
+					</view>
+					<view class="stu_info_bot">
+						李斯丹妮
 					</view>
 				</view>
-					<view class="view_text2">
+			</view>
-						<view>正确率<text class="text2">80%</text></view>
+			<view class="card_right">
-						<text>2023/02/23 12:00</text>
+				<view class="card_right_top">
+					正确率 80%
+				</view>
+				<view class="card_right_bot">
+					2023/02/23 12:00
 				</view>
 			</view>
-				<view class="view_botton">
+		</div>
-					<view class="view_spoken">
-						<view>
-							<image src="https://file.langsi.online/yasiimg/web/static/u80EhqyvMfcOaaSyK09X" mode=""></image>
-						</view>
-						<view class="view_span">
-							<text>口语单科模考</text>
-							<text>李斯丹妮</text>
-						</view>
-					</view>
-					<view class="view_text2">
-						<view>正确率<text class="text2">80%</text></view>
-						<text>2023/02/23 12:00</text>
-					</view>
-				</view>
-			
-			</view>
-			<!--底部导航栏 -->
-		</view>
-		<!-- 没有数据显示的区域 -->
-		<view class="zu_footer">
-			
-				<view class="date">8月31日</view>
-				<view class="zu_zp">
-					<view class="zu_image"><image src="https://file.langsi.online/yasiimg/web/static/uFgs4acAUC68weaKB9Yi" mode=""></image></view>
-					<view class="zu_text">暂无学习记录，快去安排作业吧！</view>
-				</view>
-		
-			
-		</view>
 	</view>
 
 </template>
@@ -158,7 +108,7 @@
 		},
 		data() {
 			return {
-				flag:false
+				flag: true
 			}
 		},
 		methods: {
@@ -166,19 +116,38 @@
 				let _this = this
 
 				const option = {
+					 grid: {
+					          left: 0,
+					          right: 0,
+					          top: 10,
+					          bottom: 0,
+					          containLabel: true,
+					        },
 					xAxis: {
 						type: 'category',
-						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+						data: ['Mon', '', 'Wed', '', 'Fri', '', 'Sun']
 					},
 					yAxis: {
 						type: 'value',
-						boundaryGap: ['10%', '20%',]
+						min: 0,
+						max: 100,
+						interval: 20,
+						axisLabel: {
+							formatter: '{value}%'
+						}
 					},
 					series: [{
-						data: [120, 200, 150, 80, 70, 110, 130],
+						data: [90, 45, 66, 82, 37, 65, 40],
-						type: 'bar'
+						type: 'bar',
-					}]
+						itemStyle: {
+							normal: {
+								color: '#2D7CE6',
+								barBorderRadius: [5, 5, 0, 0] // 设置四个角的半径，都为10像素
 							}
+						}
+					}]
+				};
+
 
 				const chart = await this.$refs.chart.init(echarts);
 				chart.setOption(option)
@@ -189,280 +158,224 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-	.view_by {
+	page {
 		background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 100%);
-		padding: 32rpx;
+	}
 
+	.view_by {
+		padding: 0 32rpx;
+
+		.top_message {
 
-		.header_button {
 			display: flex;
-			justify-content: space-evenly;
+			flex-wrap: nowrap;
-			align-items: center;
+			justify-content: space-between;
 
-
+			.top_message_left {
-			.custom-style {
+				margin-left: 60rpx;
-				width: 180rpx;
-				height: 72rpx;
-
-
-			}
-
-			.active {
-				background: #2D7CE6;
-				color: #fff;
-				box-shadow: inset 0rpx 8rpx 16rpx 0rpx rgba(255, 255, 255, 0.35);
-			}
-
-		}
-
-		.view_body {
 				display: flex;
-			justify-content: center;
+				flex-wrap: wrap;
-			align-items: center;
-			margin-top: 52rpx;
 
-			.content_box {
+				.top_message_left_top {
-				flex: 1;
+					width: 100%;
-			}
+					text-align: center;
-
-
-
-			.content_box:first-child {
-
-				border-right: 2rpx solid rgba(0, 0, 0, 0.11);
-			}
-
-			.view_text {
 					font-size: 76rpx;
 					font-family: PingFang SC, PingFang SC;
+					font-weight: 800;
+					color: #2E4975;
+				}
+
+				.top_message_left_bot {
+					width: 100%;
+					text-align: center;
+					font-size: 28rpx;
+					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
 					color: #2E4975;
-
+				}
-
 			}
 
-			view {
+			.top_message_cent {
+				width: 0;
+				height: 146rpx;
+				border-radius: 0rpx 0rpx 0rpx 0rpx;
+				margin-left: 2rpx;
+				border: 2rpx solid rgba(0, 0, 0, 0.11);
+			}
+
+			.top_message_right {
+				margin-right: 60rpx;
 				display: flex;
-				flex-direction: column;
+				flex-wrap: wrap;
-				align-items: center;
 
+				.top_message_right_top {
+					width: 100%;
+					text-align: center;
+					font-size: 76rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 800;
+					color: #2E4975;
 				}
 
+				.top_message_right_bot {
+					width: 100%;
+					text-align: center;
+					font-size: 28rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #2E4975;
+				}
+			}
 		}
 
-		.echarts_bar {
+		.work_msa {
+			padding: 32rpx;
+			margin-top: 32rpx;
 			width: 686rpx;
 			height: 459rpx;
 			background: #FFFFFF;
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			opacity: 1;
-			margin-top: 32rpx;
-			padding: 32rpx;
 
-			view {
+			.work_msa_top {
 				display: flex;
+				flex-wrap: nowrap;
 				justify-content: space-between;
 
-				text {
+				// justify-content: center;
+				.work_msa_top_left {
 					font-size: 28rpx;
 					font-family: PingFang SC, PingFang SC;
 					font-weight: 800;
 					color: #2E4975;
 				}
 
-			}
+				.work_msa_top_right {
-
-
-
-		}
-
-
-
-		.box_rate {
 					display: flex;
-			justify-content: center;
 					align-items: center;
-			padding: 30rpx;
+					flex-wrap: nowrap;
-			background: linear-gradient(179deg, rgba(255, 237, 223, 0.65) 0%, #FFFFFF 100%);
+					font-size: 24rpx;
-			border-radius: 18rpx 18rpx 18rpx 18rpx;
-
-			.rate_item {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-
-			}
-
-			.number {
-				font-size: 28rpx;
-				font-family: PingFang SC, PingFang SC;
-				font-weight: 800;
-				color: #2D7CE6;
-			}
-
-			.text {
-				font-size: 20rpx;
 					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
-				color: rgba(7, 47, 90, 0.5);
+					color: rgba(46, 73, 117, 0.65);
+
+					.icon-arrow-down {
+						margin-left: 8rpx;
+						font-size: 24rpx;
+					}
+				}
 			}
 		}
 
-		.date {
+		.echarts {
+			// width: 100%;
+			// height: 80%;
+			width: 622rpx;
+			height: 350rpx;
+		}
+		.data{
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+			margin-top: 32rpx;
 			font-size: 24rpx;
 			font-family: PingFang SC, PingFang SC;
 			font-weight: 800;
 			color: #2E4975;
-			padding: 30rpx;
-		}
 			
-		.view_botton {
+			.icon-arrow-down {
+				color: #2E4975 ;
+				margin-left: 8rpx;
+				font-size: 24rpx;
+			}
+		}
+		.class_infobox {
+			margin-top: 20rpx;
 			display: flex;
+			flex-wrap: nowrap;
 			align-items: center;
-			justify-content: space-between;
+			justify-content: space-around;
-			height: 124rpx;
+			width: 686rpx;
-			background: #fff;
+			height: 128rpx;
+			background: linear-gradient(179deg, rgba(255,237,223,0.65) 0%, #FFFFFF 100%);
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			margin: 20rpx 0rpx;
-			padding: 24rpx;
 		
-			.view_spoken {
+			.class_info {
+				width: 110rpx;
 				display: flex;
-				align-items: center;
+				flex-wrap: wrap;
+				justify-content: center;
 		
-				.view_span {
+				.class_info_top {
-					display: flex;
+					margin-top: 12rpx;
-					flex-direction: column;
+					font-size: 20rpx;
-					margin-left: 16rpx;
+					font-family: 'PingFang', 'PingFang';
+					font-weight: 500;
+					color: rgba(7, 47, 90, 0.5);
 				}
 		
-				.view_span text:nth-child(1) {
+				.class_info_bot {
+					
+					font-size: 28rpx;
+					font-family: 'PingFang', 'PingFang';
+					font-weight: 800;
+					color: #2D7CE6;
+				}
+			}
+		}
+		.card{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 20rpx;
+			padding: 24rpx;
+			width: 686rpx;
+			height: 124rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 20rpx 20rpx;
+			.card_left{
+				display: flex;
+				flex-wrap: nowrap;
+				.stu_img{
+					width: 76rpx;
+					height: 76rpx;
+					border-radius: 50%;
+				}
+				.stu_info{
+					margin-left: 16rpx;
+					.stu_info_top{
 						font-size: 28rpx;
 						font-family: PingFang SC, PingFang SC;
 						font-weight: bold;
 						color: #072F5A;
-					margin-bottom: 7rpx;
-
 					}
-
+					.stu_info_bot{
-				.view_span text:nth-child(2) {
+						margin-top: 4rpx;
 						font-size: 20rpx;
 						font-family: PingFang SC, PingFang SC;
 						font-weight: 500;
 						color: rgba(46,73,117,0.5);
-					margin-bottom: 7rpx;
 					}
 				}
+			}
+			.card_right{
 				
-			.view_text2 {
+				.card_right_top{
-				display: flex;
-				flex-direction: column;
 					text-align: right;
-
-				view .text2 {
-					color: #F18F21;
-					font-size: 27rpx;
-					font-weight: 800;
-					margin-left: 7rpx;
-				}
-
-			}
-
-
-
-			.view_text2 view {
 					font-size: 20rpx;
 					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
 					color: #F18F21;
 				}
-
+				.card_right_bot{
-
+					margin-top: 4rpx;
-			.view_text2 text {
+					text-align: right;
 					font-size: 20rpx;
 					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
 					color: rgba(7,47,90,0.4);
 				}
-
-			image {
-				width: 76rpx;
-				height: 76rpx;
 			}
-			
 		}
-		.echarts{
-			width: 300rpx;
-			height: 600rpx;
-			margin-top: -100rpx;
-		}
-		.deer{
-			display: flex;
-			align-items: center;
-		}
-		.deer_images{
-			width: 145rpx;
-			height: 245rpx;
-			margin-left: 15rpx;
-		}
-		.r_image{
-			width: 16rpx;
-			height: 16rpx;
-			line-height: 16rpx;
-			margin-left: 8rpx;
-		}
-		.deer_button{
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-top: 19rpx;
-			width: 160rpx;
-			height: 56rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: #FFFFFF;
-		
-			background: #2D7CE6;
-			border-radius: 86rpx 86rpx 86rpx 86rpx;
-			
-		}
-		.deer_right{
-			margin-left: 20rpx;
-		}
-		.deer_text{
-			font-size: 28rpx;
-		
-			font-weight: 500;
-			color: #627698;
-		}
-		.operation{
-			height: 459rpx;
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-		.zu_image{
-			width: 172rpx;
-			height: 162rpx;
-			
-		}
-		.zu_text{
-			font-size: 24rpx;
-			font-weight: 400;
-			color: #0E3B77;
-			margin: 20rpx 0rpx 50rpx 0rpx;
-		}
-		.zu_footer{
-			// padding: 32rpx 0rpx;
-		}
-		.zu_zp{
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			padding: 72rpx;
-		}
-		
 	}
 </style>