pblCourse

src/components/pages/pblCourse/component/doWorkArea.vue

@@ -1,13 +1,23 @@
 <template>
 	<div class="doWork">
 		<div class="dw_header">
-			<h1>顶部</h1>
+			<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">
-			<h1>提交区域</h1>
+			<div class="dw_b_btn" @click.stop="submitWork()">
+				<img :src="require('../../../../assets/icon/pblCourse/bookIcon.png')">
+				<span>提交作业</span>
+			</div>
 		</div>	
 	</div>
 </template>
@@ -17,6 +27,17 @@ import work from './work'
 	export default {
 		components:{
 			work,
+		},
+		methods:{
+			submitWork(){
+				this.$message.info("提交作业")
+			},
+			down(){
+				this.$message.info("下一个")
+			},
+			back(){
+				this.$message.info("上一个")
+			}
 		}
 	}
 </script>
@@ -25,26 +46,107 @@ import work from './work'
 .doWork{
 	width: 100%;
 	height: 100%;
-	background-color: red;
+	border-radius: 12px;
+	overflow: hidden;
+	background-color: white;
 }
 
 .dw_header{
 	width: 100%;
-	height: 50px;
+	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: 100%;
-	height: calc(100% - 50px - 100px - 30px);
-	overflow: auto;
+	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>

src/components/pages/pblCourse/component/work.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="work">
-
+		<div style="width: 100px;height: 1000px;background-color: yellow;"></div>
 	</div>
 </template>
 
@@ -13,7 +13,8 @@
 <style scoped>
 .work{
 	width: 100%;
-	height: 1000px;
-	background-color: aqua;
+	max-height: 100%;
+	overflow: auto;
+	/* background-color: aqua; */
 }
 </style>