yichael_zhongchuang_front_2/components/user/stuTestDetails.vue

<template>
	<!-- 学生实验情况 -->
	<view class="user-full">
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">学生信息</view>
				</view>
				<view class="box2-table-box df fdr">
					<view class="m_right_container">
						<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
							<thead class="m-table-hander">
								<tr>
									<th>姓名</th>
									<th>班级</th>
									<th>学号</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th style="color: #EA252C;">张小旭</th>
									<th>实时特效</th>
									<th>96</th>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
			</view>
		</view>
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">成绩分布</view>
				</view>
				<view class="box2-table-box df fdr">
					<!-- <radar class=""></radar> -->
					<!-- 五维图暂缓 -->
				</view>
			</view>
		</view>
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">学习进度</view>
				</view>
				<view class="box2-table-box df fdc">
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress percent="80" activeColor="#e93f52" active stroke-width="8" />
						</view>
						<view class="progress-text">80%</view>
					</view>
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress percent="60" activeColor="#d6ebbf" active stroke-width="8" />
						</view>
						<view class="progress-text">60%</view>
					</view>
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress percent="40" activeColor="#60b4f0" active stroke-width="8" />
						</view>
						<view class="progress-text">40%</view>
					</view>
					<view class="xxjd-text">红色为原理认知，绿色为实景考察，蓝色为虚拟实验</view>
				</view>
			</view>
		</view>
		<view class="box3 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">测试成绩</view>
				</view>
				<view class="box2-table-box df fdr">
					<view class="m_right_container">
						<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
							<thead class="m-table-hander">
								<tr>
									<th>测试项目</th>
									<th>是否学习</th>
									<th>是否通过</th>
									<th>分值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>原理认知</th>
									<th>是</th>
									<th>是</th>
									<th>96</th>
								</tr>
								<tr>
									<th>实景勘察</th>
									<th>是</th>
									<th>是</th>
									<th>96</th>
								</tr>
								<tr>
									<th>虚拟技术搭建</th>
									<th>是</th>
									<th>是</th>
									<th>96</th>
								</tr>
								<tr>
									<th>虚拟艺术创作</th>
									<th>是</th>
									<th>是</th>
									<th>96</th>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
				<view class="btn-box df fdr aic jcc">
					<view class="btn-submit df aic jcc">成绩添加与修改</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import radar from './radar.vue'
	export default {
		components: {
			radar
		},
		onLoad() {

		},
		data() {
			return {
				//0添加1个人
				showIndex_userInfo: 1,
				sexIndex: 0,
				zjIndex: 0,
				mzIndex: 0,

				array_sex: ['男', '女'],
				array_zj: ['身份证', '护照'],
				array_mz: ['汉族', '少数民族'],
				testResults:['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作']
			}
		},
		methods: {
			//点击添加个人信息
			onClick_p1_add() {
				this.showIndex_userInfo = 1;
			},
			bindPickerChange_sex: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.sexIndex = e.target.value
			},
			bindPickerChange_zj: function(e) {
				this.zjIndex = e.target.value
			},
			bindPickerChange_mz: function(e) {
				this.mzIndex = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	.user-full {
		width: 100%;
		height: 100%;
	}

	.user-right-box {
		// background: #FFFFFF;
		background: #F4F4F4;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		flex: 1;
		margin-left: px2vw(10);
	}

	.user-right-01-tip {
		font-size: px2vw(22);
		color: #FF7373;
		line-height: px2vw(29);
		margin-top: px2vw(37);
	}

	.self-btn01 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.user-right-self01 {
		background: #FFFFFF;
	}

	.box1 {
		height: px2vw(200);
		background: #FFFFFF;
	}

	.self-avatar {
		margin-left: px2vw(227);
	}

	.self-avatar img {
		width: px2vw(120);
	}

	.self-btn02 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-left: px2vw(57);
	}

	.box2 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.box2-content {
		margin-left: px2vw(71);
		margin-top: px2vw(31);
		margin-bottom: px2vw(57);
	}

	.form-input {
		width: px2vw(355);
		height: px2vw(54);
		padding: px2vw(14) px2vw(20);

		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);

		background: #FFFFFF;
		border-radius: px2vw(4);
		border: 1px solid #B4B4B4;
	}

	.title-text {
		margin-left: px2vw(16);
	}

	.box2-table-box {
		// margin-top: px2vw(44);
		// margin-bottom: px2vw(44);
		width: px2vw(1377);
	}

	.box2-table-box-left {
		width: px2vw(500);
	}

	.box2-table-box-left-item {
		width: 100%;
		margin-top: px2vw(30);
	}

	.table-title {
		font-size: px2vw(22);
		color: #555555;
		line-height: px2vw(29);
	}

	.box2-table-box-right {
		width: px2vw(500);
		margin-left: px2vw(92);
	}

	.box3 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.btn-box {
		// margin-top: px2vw(10);
	}

	.btn-submit {
		width: px2vw(353);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.btn-cancel {
		width: px2vw(200);
		height: px2vw(58);
		background: #D8D8D8;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
		margin-left: px2vw(30);
	}

	.m_right {
		width: 100%;
		height: 100%;
		margin-top: 5rpx;
		padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;

			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}

	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;

	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_right_footer {
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}

	.m_right_container {
		width: 100%;
		margin-top: px2vw(40);
	}

	.progress-item{
		margin-top: px2vw(40);
	}
	.progress-box {
		width: px2vw(700);
		// margin-top: px2vw(40);
	}

	.xxjd-text {
		margin-top: px2vw(40);
	}

	.progress-text {
		font-size: px2vw(24);
		color: #070707;
		line-height: px2vw(26);
		margin-left: px2vw(40);
	}
</style>