代码提交

src/views/TeacherDetail/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="container">
+    <div class="bread-container">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/teacher' }">校园名师</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ info.teacherName }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="teacher-card">
+      <div class="teacher-top">
+        <div>
+          <img :src="info.avatarUrl" alt="">
+        </div>
+        <p class="teacher-info">
+          <span>教师名称：{{ info.teacherName }}</span>
+          <span>年级：{{ info.gradeName }}</span>
+          <span>学科：{{ info.subjectName }}</span>
+        </p>
+      </div>
+      <div class="teacher-content" v-html="info.content"> </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { getShowInfoAPI } from '@/apis/home'
+
+const route = useRoute()
+const id = route.params.id
+
+const info = ref({})
+const getShowInfoData = async () => {
+  const res = await getShowInfoAPI(id)
+  info.value = res.data
+}
+
+onMounted(() => {
+  getShowInfoData()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .bread-container {
+    padding: 25px 0;
+
+    :deep(.el-breadcrumb__inner) {
+      color: #fff;
+      font-size: 16px;
+    }
+
+    :deep(.el-breadcrumb__separator) {
+      color: #fff;
+    }
+  }
+
+  .teacher-card {
+    margin-top: 20px;
+    padding: 20px;
+
+    min-height: 600px;
+    background-color: #FAEADF;
+    border-radius: 10px;
+
+    .teacher-top {
+      text-align: center;
+
+      img {
+        width: 290px;
+        height: 360px;
+      }
+
+      .teacher-info {
+        line-height: 60px;
+        color: #A9A19B;
+
+        span:nth-child(1) {
+          margin-right: 20px;
+        }
+
+        span:nth-child(2) {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .teacher-content {
+      margin: 0 20px;
+
+      :deep(p) {
+        text-indent: 2em;
+        line-height: 30px;
+      }
+    }
+
+  }
+
+}
+</style>