feat: 教师界面讨论tab、个人信息设置tab页面内容。修正用户主页中等尺寸屏幕宽度不占满问题

src/App.vue

@@ -89,4 +89,7 @@ body {
 .mb-24 {
   margin-bottom: 24px;
 }
+.mb-32 {
+  margin-bottom: 32px;
+}
 </style>

src/components/CourseCard.vue

@@ -26,7 +26,7 @@ export default {
   border-left: 4px solid $input-background-color;
   transition: .2s;
   cursor: pointer;
-  background-color: rgba(160, 180, 200, .1);
+  background-color: $card-background;
 
   &:hover {
     background-color: $input-background-color;

src/components/DiscussionQuestion.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="discussion-question">
+    <div class="question-title">询问的问题题目</div>
+    <div class="question-content">帖子主要内容史蒂夫史蒂夫，将撒东方是否史蒂夫和空间上的恢复健康啊史蒂夫金黄色即可的粉红色</div>
+    <div class="question-from">来源课件：编程基础 I</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.discussion-question {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 8px;
+  font-weight: bold;
+  background-color: $card-background;
+  border-left: 4px solid $input-background-color;
+  cursor: pointer;
+  transition: .2s;
+
+  &:hover {
+    background-color: $input-background-color;
+    border-left: 4px solid $theme-blue;
+  }
+}
+
+.question-title {
+  margin-bottom: 4px;
+}
+
+.question-content {
+  color: #6a7a8a;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.question-from {
+  color: #aabaca;
+  font-size: 14px;
+}
+</style>

src/components/SlideCard.vue

@@ -25,7 +25,7 @@ export default {
   font-weight: bold;
   padding: 10px 8px 10px 16px;
   border-left: 4px solid $input-background-color;
-  background-color: rgba(160, 180, 200, .1);
+  background-color: $card-background;
   transition: .2s;
   cursor: pointer;
 

src/style/theme.scss

@@ -19,3 +19,5 @@ $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);
 
 $input-background-color: rgba(235, 240, 245, .8);
+
+$card-background: rgba(160, 180, 200, .1)

src/views/shared/UserHomeLayout.vue

@@ -126,7 +126,7 @@ export default {
     padding: 48px 24px;
     margin-bottom: 30px;
     width: 100%;
-    max-width: 460px;
+    flex: 1;
   }
 
   .user-home-layout {

src/views/shared/tab-common.scss

@@ -36,9 +36,13 @@
 @media (max-width: 600px) {
   .tab {
     min-width: unset;
+    box-sizing: border-box;
+    width: 100%;
     max-width: unset;
+    padding: 24px 12px;
   }
   .left {
+    width: 100%;
     padding-right: unset;
     padding-bottom: 20vh;
     max-height: unset;

src/views/teacher/tabs/CreateSlide.vue

@@ -50,7 +50,6 @@ export default {
     })
   },
   methods: {
-
     handleSubmit () {
     }
   }

src/views/teacher/tabs/TeacherDiscussion.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="tab">
-    <h1 class="title">讨论区消息通知</h1>
-    <div class="tip"><span>{{iconMap.discussion}}</span> 您有 <span>{{2}}</span> 个问题待回答</div>
+    <div class="left">
+      <h1 class="title">讨论 & 问答</h1>
+      <div class="sub-title">待回答问题</div>
+      <div class="tip"><span>{{iconMap.discussion}}</span> 您有 <span>{{2}}</span> 个问题待回答</div>
+      <discussion-question></discussion-question>
+      <discussion-question></discussion-question>
+      <discussion-question></discussion-question>
+      <div class="mb-16"></div>
+      <div class="sub-title">热门讨论</div>
+    </div>
   </div>
 </template>
 
 <script>
 import iconMap from '@/utils/icon-map'
+import DiscussionQuestion from '@/components/DiscussionQuestion'
 
 export default {
+  components: { DiscussionQuestion },
   data () {
     return {
       iconMap: iconMap

src/views/teacher/tabs/TeacherPersonal.vue

@@ -1,15 +1,78 @@
 <template>
   <div class="tab">
     <h1 class="title">个人信息设置 <span class="tag">教师</span></h1>
-    <div class="sub-title"></div>
+    <div class="sub-title">修改姓名</div>
+    <c-input placeholder="姓名" class="mb-32"></c-input>
+    <div class="sub-title">修改密码</div>
+    <div class="verified-code-wrapper">
+      <c-input placeholder="邮箱验证码" type="number"></c-input>
+      <c-button class="secondary" :disabled="typeof this.emailButtonContent === typeof 0"
+                @click="handleSendEmailCode">{{ emailButtonContent }}
+      </c-button>
+    </div>
+    <c-input placeholder="新密码" type="password" class="mb-16"></c-input>
+    <c-input placeholder="确认新密码" type="password" class="mb-16"></c-input>
+    <c-button class="secondary full-width mb-32">确认修改密码</c-button>
+    <c-button class="error full-width">登出</c-button>
   </div>
 </template>
 
 <script>
-export default {}
+import CButton from '@/components/CButton'
+import CInput from '@/components/CInput'
+import { sendEmailCode } from '@/server/code'
+
+export default {
+  components: { CInput, CButton },
+  data () {
+    return {
+      email: '',
+      emailButtonContent: '发送验证码'
+    }
+  },
+  methods: {
+    handleSendEmailCode () {
+      this.$showMessage({ message: '正在尝试发送验证码', type: 'info' })
+      if (this.email.match(/.+@(nju.edu.cn|smail.nju.edu.cn)/)) {
+        this.setEmailCodeCd()
+        sendEmailCode({ email: this.email })
+      } else {
+        this.$showMessage({ message: '本邮箱不符合南京大学校邮格式', type: 'error' })
+      }
+    },
+    setEmailCodeCd () {
+      this._emailCodeCdInterval && clearInterval(this._emailCodeCdInterval)
+      this.emailButtonContent = 60
+      this._emailCodeCdInterval = setInterval(() => {
+        this.emailButtonContent--
+        if (typeof this.emailButtonContent !== typeof 0 || this.emailButtonContent <= 0) {
+          clearInterval(this._emailCodeCdInterval)
+          this.emailButtonContent = '发送验证码'
+        }
+      }, 1000)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
 @import "~@/views/shared/tab-common";
+
+.verified-code-wrapper {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  .c-input {
+    margin-bottom: unset;
+    flex: 1;
+  }
+
+  .c-button {
+    margin-left: 12px;
+  }
+}
+
 </style>