feat: 文件上传组件样式，教师主页5个tab的基本样式（均尚未添加逻辑）

src/App.vue

@@ -13,14 +13,15 @@ export default {
 
 <style lang="scss">
 @import "~@/style/reset.scss";
+@import "~@/style/theme.scss";
 @font-face {
   font-family: 'iconfont';  /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.eot');
-  src: url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_aycbq7lv7mk.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.eot');
+  src: url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_te9xe3x57p9.svg#iconfont') format('svg');
 }
 
 body {
@@ -30,19 +31,34 @@ body {
 .title {
   font-size: 28px;
   font-weight: 600;
-  margin-bottom: 12px;
+  margin-bottom: 24px;
 }
 
 .sub-title {
   font-size: 22px;
   font-weight: 600;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
-a {
-  outline: none;
-  text-decoration: none;
-  color: black;
+.no-content-warning {
+  color: #aabaca;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  padding: 50px 0;
 }
 
+.tag {
+  display: inline-block;
+  position: relative;
+  background-color: lighten($theme-blue, 30);
+  color: $theme-blue;
+  font-size: 12px;
+  padding: 4px 12px;
+  margin-left: 4px;
+  border-radius: 8px;
+  vertical-align: middle;
+  bottom: 2px;
+}
 </style>

src/components/CInput.vue

@@ -38,6 +38,10 @@ input {
   height: 48px;
   line-height: 40px;
   padding: 0 0 0 12px;
+  transition: .2s;
+  &:hover {
+    background: darken($input-background-color, 5);
+  }
 }
 
 </style>

src/components/FileUploader.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="c-input">
+    <label>
+      <span>&#xe6c8; 点击选取文件上传</span>
+      <input
+        type="file"
+        :placeholder="placeholder"
+        :value="value"
+        @input="$emit('input', $event.target.value)"
+      />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: String,
+    placeholder: String
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+.c-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: bold;
+  color: #3a4a5a;
+  background: $input-background-color;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 48px;
+  line-height: 40px;
+  padding: 0 0 0 12px;
+  transition: .2s;
+  & span {
+    font-family: 'iconfont', sans-serif;
+    display: block;
+    vertical-align: middle;
+    color: #5a6a7a;
+  }
+  &:hover {
+    background: darken($input-background-color, 5);
+  }
+}
+
+input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 20px 0;
+  width: 100%;
+  opacity: 0;
+}
+
+</style>

src/components/SearchBar.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="search-bar">
     <label>
       <input
         type="text"
         :value="value"
+        placeholder="输入关键词搜索"
         @input="$emit('input', $event.target.value)"
       />
     </label>
@@ -37,6 +38,11 @@ input {
   height: 48px;
   line-height: 40px;
   padding: 0 0 0 52px;
+  transition: .2s;
+
+  &:hover {
+    background: darken($input-background-color, 5);
+  }
 }
 
 div {

src/views/shared/UserHomeLayout.vue

@@ -106,7 +106,7 @@ export default {
 
 .tab {
   min-height: 320px;
-  padding: 20px;
+  padding: 40px;
   width: 320px;
   flex: 1;
 }
@@ -145,6 +145,7 @@ export default {
   }
   .tab {
     width: unset;
+    padding: unset;
   }
 }
 

src/views/teacher/tabs/CreateSlide.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tab">
-    <div class="title">新建幻灯片</div>
+    <h1 class="title">新建幻灯片</h1>
     <div class="sub-title">所属课程：</div>
     <div class="select-wrapper">
       <label>
@@ -14,10 +14,14 @@
     </div>
     <div class="sub-title">幻灯片名称：</div>
     <c-input
-      type="text"
       v-model="userInput"
       placeholder="请勿与同课程幻灯片重名"
     />
+    <div class="sub-title">幻灯片文件 <span class="tag">目前支持 PDF 格式</span></div>
+    <file-uploader
+      v-model="file"
+      placeholder="请勿与同课程幻灯片重名"
+    />
     <c-button class="my-button" @click.native.prevent="handleSubmit">
       添加
     </c-button>
@@ -29,14 +33,16 @@ import { getTeacherCourse } from '@/server/course'
 import { createSlide } from '@/server/slide'
 import CInput from '@/components/CInput'
 import CButton from '@/components/CButton'
+import FileUploader from '@/components/FileUploader'
 
 export default {
-  components: { CButton, CInput },
+  components: { FileUploader, CButton, CInput },
   data () {
     return {
       courses: [],
       selectedCourseId: '',
-      userInput: ''
+      userInput: '',
+      file: null
     }
   },
   mounted () {
@@ -56,16 +62,6 @@ export default {
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
 
-.title {
-  margin-bottom: 32px;
-}
-
-.select-wrapper {
-  width: 100%;
-  height: 40px;
-  margin-bottom: 36px;
-}
-
 select {
   box-sizing: border-box;
   font-size: 16px;
@@ -84,9 +80,19 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   //通过padding-left的值让文字居中
+
+  transition: .2s;
+
+  &:hover {
+    background: darken($input-background-color, 5);
+  }
+}
+
+.select-wrapper, .c-input {
+  margin-bottom: 16px;
 }
 
 .my-button {
-  margin-top: 36px;
+  margin-top: 12px;
 }
 </style>

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="tab">
-    teacher course manager
+    <h1 class="title">课程管理</h1>
+    <div class="sub-title">我的课程</div>
+    <div class="no-content-warning">您还没有设置相关课程喔～</div>
+    <c-button>新建课程</c-button>
   </div>
 </template>
 
 <script>
-export default {}
+import CButton from '@/components/CButton'
+export default {
+  components: { CButton }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/teacher/tabs/TeacherDiscussion.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="tab">
-    explore
+    <h1 class="title">讨论区消息通知</h1>
+    <div class="tip"><span>&#xe610;</span> 您有 <span>{{2}}</span> 条未读消息</div>
+    <div class="sub-title">新帖子</div>
   </div>
 </template>
 
@@ -9,5 +11,13 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-
+.tip {
+  font-weight: bold;
+  color: #7a8a9a;
+  margin-bottom: 16px;
+  & > span {
+    font-family: 'iconfont', sans-serif;
+    color: #ffc33b;
+  }
+}
 </style>

src/views/teacher/tabs/TeacherExplore.vue

@@ -1,13 +1,24 @@
 <template>
   <div class="tab">
-    explore
+    <search-bar></search-bar>
+    <section>
+      <h1 class="sub-title">最近浏览</h1>
+    </section>
+    <section>
+      <h1 class="sub-title">课程列表</h1>
+    </section>
   </div>
 </template>
 
 <script>
-export default {}
+import SearchBar from '@/components/SearchBar'
+export default {
+  components: { SearchBar }
+}
 </script>
 
 <style lang="scss" scoped>
-
+.search-bar {
+  margin-bottom: 16px;
+}
 </style>

src/views/teacher/tabs/TeacherPersonal.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="tab">
-    explore
+    <h1 class="title">个人信息设置 <span class="tag">教师</span></h1>
+    <div class="sub-title"></div>
   </div>
 </template>
 
@@ -9,5 +10,5 @@ export default {}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~@/style/theme.scss";
 </style>