yichael_zhongchuang_front_2/components/student/record.vue

<template>
	<view class="m_right">
		<view class="m_right_container">

			<view class="m_row_class">

				<view class="m_row">
					<view class="m_row_link">

					</view>
					<view class="m_row_title" v-text="'学生信息'">

					</view>
					<view style="position: relative;margin-left: 40rpx;">
						<div class="triangle_border_down">
							<span></span>
						</div>
					</view>
				</view>
				<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 v-for="(item,index) in studentData" :key="index">
							<th>{{item.name}}</th>
							<th>{{item.Class}}</th>
							<th>{{item.PhoneNum}}</th>
						</tr>
					</tbody>
				</table>

			</view>
			<view class="m_row_class">

				<view class="m_row">
					<view class="m_row_link">

					</view>
					<view class="m_row_title" v-text="'成绩分布'">

					</view>
					<view style="position: relative;margin-left: 40rpx;">
						<div class="triangle_border_down">
							<span></span>
						</div>
					</view>
				</view>

			</view>
			<view class="m_row_class">

				<view class="m_row">
					<view class="m_row_link">

					</view>
					<view class="m_row_title" v-text="'学习进度'">

					</view>
					<view style="position: relative;margin-left: 40rpx;">
						<div class="triangle_border_down">
							<span></span>
						</div>
					</view>
				</view>
				<!-- <echats ref="echats" ></echats> -->
			</view>
			<view class="m_row_class">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="m_row">
						<view class="m_row_link">

						</view>
						<view class="m_row_title" v-text="'测试成绩'">

						</view>
						<view style="position: relative;margin-left: 40rpx;">
							<div class="triangle_border_down">
								<span></span>
							</div>
						</view>
					</view>
				</view>

				<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 v-for="(item,index) in 4" :key="index">
							<th></th>
							<th></th>
							<th></th>
							<th></th>
						</tr>
					</tbody>
				</table>

			</view>
		</view>
		<!-- <msg ref="msg" :title="title" @determine="determine" :btnArr="arr" v-show="show"></msg>
		<audit ref="audit" v-show="auditshow" @determine="determine"></audit> -->
		<!-- <locationtemp ref="location_temp"></locationtemp> -->
	</view>
</template>
<script>
	// import msg from "./msg.vue"
	// import audit from "./audit.vue"
	// import locationtemp from "./location_temp.vue"
	// import api from "../../../api/project.js"
	// export echarts from "./echarts.js"
	// import echats from "./echats.vue"
	export default {
		name: "home_projec1",
		data() {
			return {
				index: 1,
				title: "",
				studentData: [],
				queryList: {
					UserID: "",
					BeginNum: 0,
					EndNum: 1000,
				},
			}
		},
		components: {
			// echats
			// locationtemp
		},
		created() {

		},
		methods: {
			paging(obj) {
				this.pageIndex = obj;
				this.queryList.BeginNum = (this.pageIndex - 1) * this.pageSize;
				this.queryList.EndNum = this.pageIndex * this.pageSize - 1;
				this.getlist();
			},
			getlist() {
				this.queryList.UserID = this.$UserId;
				uni.request({
					url: this.$Api + "/backstage/getalluser",
					data: this.queryList,
					method: "POST",
					dataType: "json",
					success: res => {
						var {
							data
						} = res;
						if (data.code == 100) {
							this.studentData = res.Users
						} else {
							this.studentData = [];
							// this.pageCount = 0;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.m_right {
		width: 100%;
		margin-top: 5rpx;
		// padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_container {
			padding: 150rpx;
		}

		.s_logo {
			width: 100%;
			height: 800rpx;
		}

		.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;
			}
		}

	}

	.echarts {
		margin-top: 100px;
		width: 100%;
		height: 300px;
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}

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

	}

	tbody tr th:first-child {
		position: relative;
	}

	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;
	}

	.m_logoimg {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.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_row {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #ea252c;
		padding: 0 0 80rpx 0;

	}

	.m_audit {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 65px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: white;
		background-color: #FF791B;
	}

	.m_row_link {
		width: 10rpx;
		height: 60rpx;
		background-color: #ea252c;
		margin-right: 40rpx;
	}

	.m_row_title {
		color: #ea252c;
		font-weight: bold;
		font-size: 40rpx;
	}

	/*向下*/
	.triangle_border_down {
		width: 0;
		height: 0;
		border-width: 25rpx 25rpx 0;
		border-style: solid;
		border-color: #ea252c transparent transparent;
		/*灰 透明 透明 */
		margin: 20rpx auto;
		position: relative;
	}

	.m_row_class {
		margin-bottom: 60rpx;
	}
</style>