yichael_zhongchuang_front_2/components/home/teacher/audit.vue

<template>
	<view class="">
		<view class="m_body">

		</view>
		<view class="m_msg">
			<view class="m_title">
				审核通过
			</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 class="m_text">
				加分
			</view>
			<view class="m_text_input">
				<view class="" style="position: relative;">
					<i class="font_family icon-lujing2 icon-1" style="transform: rotate(180deg);"></i>
				</view>

				<input type="text" value="" class="form-input " />
				<view class="" style="position: relative;">
					<i class="font_family icon-lujing2 icon-2"></i>
				</view>

			</view>
			<view class="button" style="text-align: center;margin-top: 30rpx;">
				<button size="mini" class="m_btn_download" style="" @click="determine">确定</button>
			</view>
		</view>
	</view>



</template>

<script>
	export default {
		props: ['title', 'btnArr'],
		data() {
			return {

			}
		},
		created() {

		},
		methods: {
			determine(index) {
				this.$emit("determine", index);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/assets/icon/iconfont.css';

	.form-input {
		width: 200rpx;
		border: 1px solid #EA252C;
		line-height: 50rpx;
		font-size: 30rpx;
		border-radius: 6rpx;
		padding: 10rpx 40rpx;

	}

	.m_body {
		position: fixed;
		z-index: 99;
		background-color: #000000;
		opacity: 0.4;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

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

	.m_text {
		color: #EA252C;
		margin-top: 40rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.m_text_input {
		display: flex;
		justify-content: center;
		color: #EA252C;
		text-align: center;
	}

	.m_text_input input {}

	.icon-1 {
		position: absolute;
		left: -20px;
		top: 8px;
		color: #EA252C;

	}

	.icon-2 {
		position: absolute;
		left: 4px;
		top: 8px;
		color: #EA252C;
	}

	.m_msg {
		width: 1500rpx;
		// height: 400rpx;
		padding: 0rpx 90rpx 40rpx 90rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		border-radius: 10rpx;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: #fff;
	}

	.m_title {
		color: #EA252C;
		text-align: center;
		line-height: 200rpx;
		font-size: 38rpx;
		font-weight: 500;
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 150rpx;
		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: 100rpx;
		line-height: 100rpx;
	}

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