pbl-teacher-table/src/components/pages/pblCourse/component/doWorkArea.vue

<template>
	<div class="doWork">
		<div class="dw_header">
			<div class="dw_h_left">
				<img :src="require('../../../../assets/icon/pblCourse/phaseIcon.png')"> 
				<span>阶段2：探究</span>
			</div>
			<div class="dw_h_right">
				<span class="dw_h_r_back" @click.stop="back()"></span>
				<span class="dw_h_r_down" @click.stop="down()"></span>
			</div>
		</div>
		<div class="dw_work">
			<work/>
		</div>
		<div class="dw_bottom">
			<div class="dw_b_btn" @click.stop="submitWork()">
				<img :src="require('../../../../assets/icon/pblCourse/bookIcon.png')">
				<span>提交作业</span>
			</div>
		</div>	
	</div>
</template>

<script>
import work from './work'
	export default {
		components:{
			work,
		},
		methods:{
			submitWork(){
				this.$message.info("提交作业")
			},
			down(){
				this.$message.info("下一个")
			},
			back(){
				this.$message.info("上一个")
			}
		}
	}
</script>

<style scoped>
.doWork{
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background-color: white;
}

.dw_header{
	width: 100%;
	height: 60px;
	background-color: #FFF3EA;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 20px;
}

.dw_h_left{
	display: flex;
	align-items: center;
}

.dw_h_left>img{
	width: 40px;
	height: 40px;
	margin-right: 10px;
}


.dw_h_left>span{
	font-size: 22px;
	font-weight: bold;
}


.dw_h_right{
	display: flex;
	align-items: center;
}

.dw_h_right>span{
	display: block;
	width: 30px;
	height: 30px;
	background: url("../../../../assets/icon/pblCourse/backIcon.png") no-repeat;
	background-size: 100% 100%;
	margin-right: 10px;
	margin-left: 5px;
	cursor: pointer;
}

.dw_h_r_down{
	transform: rotate(180deg);
}
.dw_work{
	width: calc(100% - 30px);
	height: calc(100% - 60px - 100px - 30px);
	box-sizing: border-box;
	margin: 0 15px;
	border-radius: 8px;
	background-color: #F3F7FD;
}

.dw_bottom{
	margin-top: 15px;
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px 15px 15px;
}

.dw_b_btn{
	width: 100%;
	height: 100%;
	background-color: #F3F7FD;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
	cursor: pointer;
}

.dw_b_btn:hover{
	background-color: #eaeef5;
}

.dw_b_btn>img{
	width: 50px;
	height: 50px;
	margin-right: 10px;
	cursor: pointer;
}

.dw_b_btn>span{
	font-size: 22px;
	background: linear-gradient(to right, #3673E8, #AD88FD);
	-webkit-background-clip: text;
	color: transparent;
}
</style>