diff --git a/src/components/FileTypeImg.vue b/src/components/FileTypeImg.vue
index 15ad1c4..6b7f252 100644
--- a/src/components/FileTypeImg.vue
+++ b/src/components/FileTypeImg.vue
@@ -1,7 +1,6 @@
 <template>
-  <img class="file"
-       :style="style"
-       :src="{pdf,doc:word,ppt,zip,excel,xlsx:excel,xls:excel,rar,book,md,docx:word}[filePath.split('.').slice(-1)] || book"/>
+	<img class="file" :style="style"
+		:src="{ pdf, doc: word, ppt, zip, excel, xlsx: excel, xls: excel, rar, book, md, docx: word, png }[filePath.split('.').slice(-1)] || book" />
 </template>
 <script setup>
 import rar from '@/assets/image/file/rar.png'
@@ -12,20 +11,20 @@ import ppt from '@/assets/image/file/ppt.png'
 import word from '@/assets/image/file/word.png'
 import zip from '@/assets/image/file/zip.png'
 import book from '@/assets/image/file/book.png'
-import {defineProps, ref} from "vue";
+import { defineProps, ref } from "vue";
 
-const {modelValue = [], style} = defineProps({
-  modelValue: String,
-  style: {
-    type: Object,
-    default: {}
-  }
+const { modelValue = "", style } = defineProps({
+	modelValue: String,
+	style: {
+		type: Object,
+		default: {}
+	}
 })
 const filePath = ref(modelValue)
 </script>
 <style lang="scss">
 .file {
-  width: 22px;
-  height: 26px;
+	width: 22px;
+	height: 26px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index afee35f..035429e 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -24,7 +24,9 @@
 				<div class="time" style="margin-top: 26px">
 					<img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
 					<div style="margin-left: 8px">
-						{{ dayjs(data.planDto?.beginTime).format('YYYY-MM-DD HH:MM')  + " 至 " + dayjs(data.planDto?.endTime).format('YYYY-MM-DD HH:MM') }}
+						{{ dayjs(data.planDto?.beginTime).format('YYYY-MM-DD HH:MM') + " 至 " +
+								dayjs(data.planDto?.endTime).format('YYYY-MM-DD HH:MM')
+						}}
 					</div>
 				</div>
 				<div v-if="data.planDto?.address" class="time" style="margin-top: 23px">
@@ -39,12 +41,12 @@
 					background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
 				}" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
 				</botton>
-				<botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0 ">
+				<botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
 					评估
 				</botton>
 				<botton :style="{
 					background: `${new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
-				}" class="btn" @click="toSurvery" v-else>{{data.isSurvery ? "已评估" : "评估"}}
+				}" class="btn" @click="toSurvery" v-else>{{ data.isSurvery ? "已评估" : "评估" }}
 				</botton>
 			</div>
 		</div>
@@ -65,33 +67,34 @@
 						</div>
 					</div>
 				</div>
-			
+
 				<div class="detailB">
-					<el-tabs v-model="activeName" @tab-click="handleClick" >
+					<el-tabs v-model="activeName" @tab-click="handleClick">
 						<el-tab-pane label="课程附件" name="first">
-							<div v-if="data.planDto?.attach === '[]'" style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
+							<div v-if="data.planDto?.attach === ''"
+								style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
 								此课程无附件
 							</div>
 							<div v-else>
-								<div v-for="(el, index) in JSON.parse(data.planDto?.attach)" :key="index" class="enclosure"
+								<div v-for="(el, index) in formateArr(data.planDto?.attach)" :key="index" class="enclosure"
 									:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
 									<div class="enclosureL">
-										<FileTypeImg v-model="el.name" :style="{
+										<FileTypeImg :v-model="el.slice(el.indexOf('-') + 1)" :style="{
 											width: '22px',
 											height: '26px',
 											marginLeft: '10px',
 										}"></FileTypeImg>
-										<div style="margin-left: 20px">{{ el.name }}</div>
+										<div style="margin-left: 20px">{{ el.slice(el.indexOf('-') + 1) }}</div>
 									</div>
 									<div v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" class="download">
 										<img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
-										<div style="margin-left: 5px;color:#999;" @click="downloads(el.response.data)">
+										<div style="margin-left: 5px;color:#999;" @click="downloads(el)">
 											下载
 										</div>
 									</div>
 									<div v-else class="download">
 										<img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
-										<div style="margin-left: 5px" @click="download(el.response.data)">
+										<div style="margin-left: 5px" @click="download(el)">
 											下载
 										</div>
 									</div>
@@ -99,8 +102,8 @@
 							</div>
 						</el-tab-pane>
 						<el-tab-pane label="课程作业" name="second">
-						
-							<div class="work" v-if="data.workDto?.workName">
+
+							<div class="work" v-if="data.workDto">
 								<div>
 									<div class="question">{{ data.workDto?.workName }}</div>
 									<div style="margin-top: 16px; display: flex">
@@ -109,19 +112,23 @@
 									</div>
 								</div>
 
-								<div v-if="dayjs(data.value.workDto.submitEndTime).isBefore(dayjs())"  @click="toWork" class="submit" style="background: #999">已结束</div>
-								<div v-if="dayjs().isBefore(dayjs(data.value.workDto.submitStartTime))" @click="toWork" class="submit" style="background: #999">未开始</div>
+								<div v-if="dayjs(data.workDto.submitEndTime).isBefore(dayjs())" @click="toWork" class="submit"
+									style="background: #999">已结束</div>
+								<div v-if="dayjs().isBefore(dayjs(data.workDto.submitStartTime))" @click="toWork" class="submit"
+									style="background: #999">未开始</div>
 								<div
-									:style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }" class="submit" @click="toWork" v-else>
+									:style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
+									class="submit" @click="toWork" v-else>
 									交作业
 								</div>
 							</div>
-							<div v-else style=" font-size: 14px; font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px;margin-top: 20px; ">
+							<div v-else
+								style=" font-size: 14px; font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px;margin-top: 20px; ">
 								此课程无作业
 							</div>
 						</el-tab-pane>
-						<el-tab-pane label="课程考试" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime)) >
-							
+						<el-tab-pane label="课程考试" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
+
 							<div class="work" v-if="data.examinationDto?.examinationTestName">
 								<div>
 									<div class="question">
@@ -134,15 +141,18 @@
 										<div class="tag3" style="margin-left: 11px">考试</div>
 									</div>
 								</div>
-								<div v-if="dayjs(data.value.workDto.examinationEndTime).isBefore(dayjs())"  class="submit" style="background: #999" @click="toExamItem(data.examinationDto)">已结束</div>
-								<div v-if="dayjs().isBefore(dayjs(data.value.workDto.examinationStartTime))"  class="submit" style="background: #999">未开始</div>
+								<div v-if="dayjs(data.value.workDto.examinationEndTime).isBefore(dayjs())" class="submit"
+									style="background: #999" @click="toExamItem(data.examinationDto)">已结束</div>
+								<div v-if="dayjs().isBefore(dayjs(data.value.workDto.examinationStartTime))" class="submit"
+									style="background: #999">未开始</div>
 								<div v-else
 									:style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
 									class="submit" @click="toExamItem(data.examinationDto)">
 									去考试
 								</div>
 							</div>
-							<div v-else style=" font-size: 14px; font-weight: 400;line-height: 24px;cursor: pointer; margin-left: 40px; margin-top: 20px; ">
+							<div v-else
+								style=" font-size: 14px; font-weight: 400;line-height: 24px;cursor: pointer; margin-left: 40px; margin-top: 20px; ">
 								此课程无考试
 							</div>
 						</el-tab-pane>
@@ -207,7 +217,7 @@ const state = reactive({
 });
 const { activeName, enclosure, isAllowSign } = toRefs(state);
 const handleClick = (tab, event) => {
-	console.log("附件",tab, event);
+	console.log("附件", tab, event);
 };
 const download = (url) => {
 	window.open(url);
@@ -215,6 +225,13 @@ const download = (url) => {
 const downloads = (url) => {
 	ElMessage.warning("未到开始时间，请耐心等待！");
 };
+
+function formateArr(strs) {
+	let arrs = strs.split(',')
+	console.log('112233', arrs)
+	return arrs
+}
+
 let timer = null;
 //判断能否签到
 function isSignClick() {
@@ -491,11 +508,13 @@ onUnmounted(() => {
 				background: #ffffff;
 				border-radius: 8px;
 				margin-top: 20px;
-				.wenxintishi{
+
+				.wenxintishi {
 					display: flex;
 					justify-content: stretch;
 					padding: 72px;
 				}
+
 				.el-tabs__item {
 					height: 69px;
 					padding: 25px 7px 0px 52px;
@@ -609,7 +628,7 @@ onUnmounted(() => {
 				padding: 25px 0px;
 				display: flex;
 				position: relative;
-				
+
 				// align-items: center;
 			}
 
@@ -620,40 +639,40 @@ onUnmounted(() => {
 			}
 
 			.teacheritem {
-				.nameSpan{
+				.nameSpan {
 					width: 190px;
 					display: flex;
 					align-items: center;
 					justify-content: center;
-				
+
 					.teacherName {
-					font-size: 14px;
-					font-weight: bold;
-					color: #394145;
-					display: flex;
-					align-items: center;
+						font-size: 14px;
+						font-weight: bold;
+						color: #394145;
+						display: flex;
+						align-items: center;
 					}
 				}
-				
-				
+
+
 			}
-			
+
 			.teacheritem {
-				.nameSpan{
+				.nameSpan {
 					width: 190px;
 					display: flex;
 					align-items: center;
 					justify-content: center;
-				
+
 					.teacherName {
-					font-size: 14px;
-					font-weight: bold;
-					color: #394145;
-					display: flex;
-					align-items: center;
+						font-size: 14px;
+						font-weight: bold;
+						color: #394145;
+						display: flex;
+						align-items: center;
 					}
 				}
-				
+
 			}
 
 			.teacheritem .introduce {
diff --git a/src/views/faceteach/FaceTeachSignUp.vue b/src/views/faceteach/FaceTeachSignUp.vue
new file mode 100644
index 0000000..a32d6be
--- /dev/null
+++ b/src/views/faceteach/FaceTeachSignUp.vue
@@ -0,0 +1,496 @@
+<template>
+	<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
+	<div class="faceteach" style="padding: 30px">
+		<!-- 面包屑导航 -->
+		<div class="crumb">
+			<div>课程列表</div>
+			<div style="margin-left: 6px; margin-right: 6px">/</div>
+			<div style="font-weight: 700">课程报名</div>
+
+
+			<div v-if="pName != ''" class="return">
+				<div style="display: flex" @click="returnclick">
+					<el-button style="color:#0073FB"> <img class="img2" style="margin-right:11px;cursor: pointer;"
+							src="../../assets/image/return.png" />返回</el-button>
+				</div>
+			</div>
+		</div>
+		<!-- 面包屑导航 -->
+
+		<!-- 基本信息 -->
+		<div class="bascinfo">
+			<div style="display:flex;">
+				<img style="width:405px;height:230px;margin-left: 48px;border-radius: 8px;margin-top: 40px;"
+					:src="data.offcourseDto.picUrl" alt="">
+				<div style="margin-left: 40px;margin-top: 56px;">
+					<div class="title">【面授课】{{ data.planDto?.name }}</div>
+					<div class="time" style="margin-top: 30px">
+						<img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
+						<div style="margin-left: 8px">
+							{{ dayjs(data.planDto?.beginTime).format('YYYY-MM-DD HH:MM') + " 至 " +
+									dayjs(data.planDto?.endTime).format('YYYY-MM-DD HH:MM')
+							}}
+						</div>
+					</div>
+					<div v-if="data.planDto.address" class="time" style="margin-top: 10px">
+						<img style="width: 16px; height: 18px" src="../../assets/image/position.png" />
+						<div style="margin-left: 8px">{{ data.planDto?.address }}</div>
+					</div>
+					<div class="time" style="margin-top: 37px">
+						<botton class="btn" style="margin-right: 20px;width: 160px;height: 46px;" @click="onLineSignUp">立即报名
+						</botton>
+					</div>
+				</div>
+			</div>
+			<div style="display: flex">
+			</div>
+		</div>
+		<!-- 基本信息 -->
+
+		<!-- 详细信息 -->
+		<div class="detailinfo">
+			<div class="detail">
+				<div class="detailB">
+					<el-tabs v-model="activeName" @tab-click="handleClick">
+						<el-tab-pane label="课程介绍" name="first">
+							<div class="notice" style="padding:20px;font-size:14px;">
+								{{ data.offcourseDto?.intro || "暂无课程介绍" }}
+							</div>
+						</el-tab-pane>
+						<el-tab-pane label="课程大纲" name="second">
+							<div style="display: flex; align-items: center">
+								<div style="padding:20px;" class="content" v-html="data.offcourseDto?.outline"></div>
+							</div>
+						</el-tab-pane>
+						<!-- <el-tab-pane label="课程评论" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
+
+						</el-tab-pane> -->
+						<el-tab-pane label="材料下载" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
+							<div v-if="data.offcourseDto?.attach == ''"
+								style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
+								此课程无附件
+							</div>
+							<div v-else>
+								<div v-for="(el, index) in formateArr(data.offcourseDto.attach)" :key="index" class="enclosure"
+									:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
+									<div class="enclosureL">
+										<FileTypeImg :v-model="el.slice(el.indexOf('-') + 1)" :style="{
+											width: '22px',
+											height: '26px',
+											marginLeft: '10px',
+										}"></FileTypeImg>
+										<div style="margin-left: 20px">{{ el.slice(el.indexOf('-') + 1) }}</div>
+									</div>
+									<div class="download">
+										<img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
+										<div style="margin-left: 5px;color:#999;">
+											下载
+										</div>
+										<!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
+											下载
+										</div> -->
+									</div>
+								</div>
+							</div>
+						</el-tab-pane>
+					</el-tabs>
+				</div>
+			</div>
+			<div class="teacher">
+				<div class="title">
+					<img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
+					<div class="text">面授课讲师</div>
+					<div class="box"></div>
+				</div>
+				<!--        todo #面授课接口 讲师缺少img和介绍-->
+				<div class="teacheritem">
+					<img class="peopleimg" :src="teacherInfo.avatar" />
+					<div class="nameSpan">
+						<div class="teacherName" style="margin-right: 5px">
+							{{ data.planDto?.teacher }}
+						</div>
+						<div class="introduce">{{ data.planDto?.bandDesc }}</div>
+					</div>
+					<!--          <div class="follow">+ 关注</div>-->
+				</div>
+			</div>
+		</div>
+		<!-- 详细信息 -->
+	</div>
+</template>
+
+<script setup>
+import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
+import FileTypeImg from "@/components/FileTypeImg.vue";
+import { request, useRequest } from "@/api/request";
+import {
+	STU_OFFCOURSE_DETAIL,
+	TASK_OFFCOURSE_NOTASK_SIGN,
+	TASK_OFFCOURSE_SIGN,
+	TASK_BROADCAST_SIGN,
+} from "@/api/api";
+import { useRoute, useRouter } from "vue-router";
+import { useUserInfo } from "@/api/utils";
+import { ElMessage, messageConfig } from "element-plus";
+import dayjs from "dayjs";
+const router = useRouter();
+const returnclick = () => {
+	router.back();
+};
+const {
+	query: { courseId, type, id: taskId },
+} = useRoute();
+
+const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
+console.log("datadatadatadatadatadatadata", data);
+const teacherInfo = useUserInfo(
+	computed(() => data.value?.planDto?.teacherId)
+);
+
+const state = reactive({
+	activeName: "first",
+	enclosure: "",
+	isAllowSign: false,
+});
+const { activeName, enclosure, isAllowSign } = toRefs(state);
+const handleClick = (tab, event) => {
+	console.log("附件", tab, event);
+};
+const download = (url) => {
+	window.open(url);
+};
+const downloads = (url) => {
+	ElMessage.warning("未到开始时间，请耐心等待！");
+};
+let timer = null;
+
+// 报名
+function onLineSignUp() {
+	alert('我是要报名的面授课')
+}
+
+function formateArr(strs) {
+	let arrs = strs.split(',')
+	console.log('112233', arrs)
+	return arrs
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.faceteach {
+	.crumb {
+		color: #fff;
+		display: flex;
+		font-size: 14px;
+		line-height: 24px;
+	}
+
+	.bascinfo {
+		width: 100%;
+		height: 310px;
+		border-radius: 8px;
+		background-color: rgba(255, 255, 255, 1);
+		margin-top: 37px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.btn {
+			width: 146px;
+			height: 46px;
+			background: #2478ff;
+			border-radius: 4px;
+			box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			font-size: 14px;
+			font-weight: 800;
+			line-height: 24px;
+			cursor: pointer;
+			margin-right: 96px;
+		}
+
+		.title {
+			font-size: 20px;
+			font-weight: 800;
+			color: #333333;
+			line-height: 24px;
+			margin-left: -9px;
+		}
+
+		.time {
+			font-size: 14px;
+			color: #6e7b84;
+			line-height: 24px;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.return {
+		position: absolute;
+		right: 10%;
+
+		.text {
+			text-align: center;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+
+	.detailinfo {
+		width: 100%;
+		margin-top: 20px;
+		display: flex;
+		align-items: flex-start;
+
+		.detail {
+			flex: 1;
+			margin-right: 20px;
+
+			.detailT {
+				min-height: 263px;
+				background: #ffffff;
+				border-radius: 8px;
+				color: rgba(51, 51, 51, 1);
+
+				.title {
+					display: flex;
+					align-items: center;
+					padding-top: 39px;
+					position: relative;
+				}
+
+				.title .text {
+					margin-left: 8px;
+					font-size: 16px;
+					color: rgba(51, 51, 51, 1);
+					font-weight: 800;
+				}
+
+				.title .box {
+					width: 75px;
+					height: 10px;
+					background-color: rgba(36, 120, 255, 0.15);
+					position: absolute;
+					left: 23px;
+					top: 53px;
+				}
+
+				.content {
+					margin-left: 8px;
+					font-size: 14px;
+					color: rgba(51, 51, 48, 1);
+					font-weight: 500;
+					line-height: 35px;
+					margin-top: 30px;
+					padding-bottom: 30px;
+				}
+			}
+
+			.detailB {
+				min-height: 363px;
+				background: #ffffff;
+				border-radius: 8px;
+				margin-top: 20px;
+
+				.wenxintishi {
+					display: flex;
+					justify-content: stretch;
+					padding: 72px;
+				}
+
+				.el-tabs__item {
+					height: 69px;
+					padding: 25px 7px 0px 52px;
+					font-size: 14px;
+					font-weight: 500;
+				}
+
+				.el-tabs__nav-wrap::after {
+					background-color: rgba(56, 125, 247, 0.2);
+				}
+
+				.enclosure {
+					height: 89px;
+					margin-left: 51px;
+					margin-right: 40px;
+					// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.enclosureL {
+						display: flex;
+						align-items: center;
+						font-size: 14px;
+						font-weight: 400;
+						color: #677d86;
+						line-height: 24px;
+					}
+
+					.download {
+						display: flex;
+						align-items: center;
+						font-size: 16px;
+						font-weight: 400;
+						color: #2478ff;
+						line-height: 24px;
+						cursor: pointer;
+					}
+				}
+
+				.work {
+					margin-left: 51px;
+					margin-right: 40px;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 37px;
+				}
+
+				.work .question {
+					font-size: 14px;
+					font-weight: 500;
+					color: #333330;
+					line-height: 18px;
+				}
+
+				.work .submit {
+					width: 126px;
+					height: 46px;
+					background: #2478ff;
+					box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+					border-radius: 4px;
+					font-size: 16px;
+					font-weight: 800;
+					color: #ffffff;
+					line-height: 24px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+				}
+			}
+		}
+
+		.teacher {
+			width: 434px;
+			min-height: 500px;
+			// height: 10%;
+			background-color: rgba(255, 255, 255, 1);
+			border-radius: 8px;
+
+			.title {
+				display: flex;
+				align-items: center;
+				padding-top: 39px;
+				position: relative;
+				margin-left: 48px;
+			}
+
+			.title .text {
+				margin-left: 8px;
+				font-size: 16px;
+				color: rgba(51, 51, 51, 1);
+				font-weight: 800;
+			}
+
+			.title .box {
+				width: 75px;
+				height: 10px;
+				background-color: rgba(36, 120, 255, 0.15);
+				position: absolute;
+				left: 23px;
+				top: 53px;
+			}
+
+			.teacheritem {
+				margin-left: 48px;
+				margin-right: 48px;
+				// min-height: 115px;
+				margin-top: 20px;
+				padding: 25px 0px;
+				display: flex;
+				position: relative;
+
+				// align-items: center;
+			}
+
+			.teacheritem .peopleimg {
+				width: 60px;
+				height: 60px;
+				border-radius: 30px;
+			}
+
+			.teacheritem {
+				.nameSpan {
+					width: 190px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.teacherName {
+						font-size: 14px;
+						font-weight: bold;
+						color: #394145;
+						display: flex;
+						align-items: center;
+					}
+				}
+
+
+			}
+
+			.teacheritem {
+				.nameSpan {
+					width: 190px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.teacherName {
+						font-size: 14px;
+						font-weight: bold;
+						color: #394145;
+						display: flex;
+						align-items: center;
+					}
+				}
+
+			}
+
+			.teacheritem .introduce {
+				font-size: 14px;
+				font-weight: 500;
+				color: #394145;
+				margin-top: 14px;
+			}
+
+			.teacheritem .follow {
+				width: 80px;
+				height: 30px;
+				background: #387df7;
+				border-radius: 4px;
+				margin-top: 28px;
+				position: absolute;
+				right: -25px;
+				font-size: 14px;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 24px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+		}
+
+
+	}
+}
+</style>