feat: 主页探索页跳转逻辑、课件详情页面

src/App.vue

@@ -64,4 +64,24 @@ body {
   vertical-align: middle;
   bottom: 2px;
 }
+
+.full-width {
+  width: 100%;
+}
+
+.mb-8 {
+  margin-bottom: 8px;
+}
+
+.mb-12 {
+  margin-bottom: 12px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.mb-24 {
+  margin-bottom: 24px;
+}
 </style>

src/components/BackTitle.vue

@@ -32,4 +32,9 @@ export default {
   left: -10px;
   background: transparent;
 }
+
+.title {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/CButton.vue

@@ -41,4 +41,28 @@ button {
     background: darken($theme-blue, 10);
   }
 }
+
+.secondary {
+  color: $theme-blue;
+  background: $theme-blue-transparent;
+  &:hover {
+    background:  darken($theme-blue-transparent, 5);
+  }
+
+  &:active {
+    background:  darken($theme-blue-transparent, 10);
+  }
+}
+
+.error {
+  color: $theme-red;
+  background: $theme-red-transparent;
+  &:hover {
+    background:  darken($theme-red-transparent, 5);
+  }
+
+  &:active {
+    background:  darken($theme-red-transparent, 10);
+  }
+}
 </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(180, 180, 180, .05);
+  background-color: rgba(160, 180, 200, .1);
 
   &:hover {
     background-color: $input-background-color;

src/components/FileUploader.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="c-input">
+  <div class="file-uploader">
     <label>
-      <span>{{iconMap.upload}} 点击选取文件上传</span>
+      <span>{{iconMap.upload}} {{placeholder ? placeholder : '点击选取文件上传'}}</span>
       <input
         type="file"
-        :placeholder="placeholder"
         :value="value"
         @input="$emit('input', $event.target.value)"
       />
@@ -32,7 +31,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-.c-input {
+.file-uploader {
   position: relative;
   display: inline-flex;
   align-items: center;

src/components/SlideCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slide-card" title="点击查看课件" @click="handleClick">
+  <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
     <div class="slide-card-title">课件名称 <span class="tag">课件状态</span></div>
     <div class="slide-card-time">更新时间：2020 年 2 月 2 日</div>
     <div class="slide-card-course">所属课程：软件工程与计算 I</div>
@@ -11,8 +11,8 @@
 export default {
   props: ['index', 'clickHandler'],
   methods: {
-    handleClick () {
-      this.clickHandler(123)
+    handleClick (slideId) {
+      this.clickHandler(slideId)
     }
   }
 }
@@ -25,7 +25,7 @@ export default {
   font-weight: bold;
   padding: 10px 8px 10px 16px;
   border-left: 4px solid $input-background-color;
-  background-color: rgba(180, 180, 180, .05);
+  background-color: rgba(160, 180, 200, .1);
   transition: .2s;
   cursor: pointer;
 

src/router/index.js

@@ -12,6 +12,10 @@ const routes = [{
   path: '/login',
   name: 'login',
   component: () => import('../views/login/Login.vue')
+}, {
+  path: '/register',
+  name: 'register',
+  component: () => import('../views/register/Register.vue')
 }, {
   path: '/teacher',
   name: 'teacher',
@@ -24,14 +28,12 @@ const routes = [{
     children: [{
       path: 'course-slides/:courseId',
       name: 'teacher-course-slides',
-      component: () => import('../views/teacher/components/CourseSlides.vue')
-    }
-    // ,{
-    //   path: 'slide-detail/:slideId',
-    //   name: 'teacher-course-detail',
-    //   component: () => import('../views/teacher/components/CourseDetail.vue')
-    // }
-    ]
+      component: () => import('../views/teacher/components/TeacherCourseSlides.vue')
+    }, {
+      path: 'slide-detail/:slideId',
+      name: 'teacher-explore-slide-detail',
+      component: () => import('../views/teacher/components/TeacherSlideDetail.vue')
+    }]
   }, {
     path: 'create-slide',
     name: 'create-slide',
@@ -47,7 +49,7 @@ const routes = [{
     }, {
       path: 'course-detail/:courseId',
       name: 'teacher-course-detail',
-      component: () => import('../views/teacher/components/CourseDetail.vue')
+      component: () => import('../views/teacher/components/TeacherCourseDetail.vue')
     }]
   }, {
     path: 'discussion',

src/style/theme.scss

@@ -1,7 +1,13 @@
 $theme-blue: #5485e5;
 $theme-orange: #ffaa44;
+$theme-red: #f44336;
+
+$theme-blue-transparent: rgba(84, 133, 229, .1);
+$theme-orange-transparent: rgba(255, 170, 68, .1);
+$theme-red-transparent: rgba(244, 67, 54, .1);
+
 
 $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);
 
-$input-background-color: #ebf0f5;
+$input-background-color: rgba(235, 240, 245, .8);

src/views/register/Register.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="login-view-container">
+    <div>
+      <h1><span>SEEC</span> 用户注册</h1>
+      <c-input placeholder="用户名"></c-input>
+      <c-input placeholder="密码"></c-input>
+      <c-input placeholder="确认密码"></c-input>
+      <c-input placeholder="邮箱"></c-input>
+      <div class="verified-code-wrapper">
+        <c-input placeholder="邮箱验证码"></c-input>
+        <c-button>发送验证码</c-button>
+      </div>
+      <c-input placeholder="手机"></c-input>
+      <div class="verified-code-wrapper">
+        <c-input placeholder="手机验证码"></c-input>
+        <c-button>发送验证码</c-button>
+      </div>
+      <div class="button-area">
+        <c-button @click.native="handleSubmit">确认</c-button>
+        <c-button class="help-button">帮助</c-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CInput from '@/components/CInput'
+import CButton from '@/components/CButton'
+
+export default {
+  components: { CButton, CInput },
+  methods: {
+    handleSubmit () {
+      this.$router.push('/teacher')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  color: #3a4a5a;
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 32px;
+
+  & > span {
+    font-family: 'Courier New', 'Courier', monospace;
+    font-size: 1.15em;
+  }
+}
+
+.login-view-container {
+  height: 95vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > div {
+    max-width: 260px;
+    width: 100%;
+  }
+}
+
+.c-input {
+  margin-bottom: 24px;
+  background: #f2f6fa;
+}
+
+.button-area {
+  display: flex;
+  margin: 0 -8px;
+
+  & > button {
+    margin: 0 8px;
+  }
+}
+
+.help-button {
+  $background-color: #e6e8ea;
+  background: #e6e8ea;
+  color: #3a4a5a;
+
+  &:hover {
+    background: darken($background-color, 5);
+  }
+
+  &:active {
+    background: darken($background-color, 10);
+  }
+}
+
+.verified-code-wrapper {
+  & > .c-input {
+    margin-bottom: unset;
+  }
+
+  .c-button {
+    margin-left: 12px;
+    height: 48px;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  margin-bottom: 24px;
+  display: flex;
+}
+</style>

src/views/teacher/components/CreateNewCourse.vue

@@ -26,8 +26,4 @@ export default {
 .c-input {
   margin-bottom: 24px;
 }
-.title {
-  display: flex;
-  align-items: center;
-}
 </style>

src/views/teacher/components/CourseDetail.vue → src/views/teacher/components/TeacherCourseDetail.vue

@@ -27,8 +27,4 @@ export default {
 .c-input {
   margin-bottom: 24px;
 }
-.title {
-  display: flex;
-  align-items: center;
-}
 </style>

src/views/teacher/components/CourseSlides.vue → src/views/teacher/components/TeacherCourseSlides.vue

@@ -27,8 +27,4 @@ export default {
 .c-input {
   margin-bottom: 24px;
 }
-.title {
-  display: flex;
-  align-items: center;
-}
 </style>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -0,0 +1,54 @@
+<template>
+  <tab-side-component>
+    <back-title>课件详情</back-title>
+    <div class="sub-title">浏览课件</div>
+    <c-button class="full-width mb-16" @click.native="handleReadSlide">浏览课件</c-button>
+    <c-button class="full-width secondary mb-24">查看习题答题情况</c-button>
+    <div class="sub-title">课件设置</div>
+    <div class="sub-title">
+      <file-uploader placeholder="选取文件重新上传"/>
+      <c-button class="secondary">确认修改</c-button>
+    </div>
+    <c-button class="secondary full-width mb-16">设置课件习题</c-button>
+    <c-button class="error full-width mb-16">删除课件</c-button>
+  </tab-side-component>
+</template>
+
+<script>
+import TabSideComponent from '@/components/TabSideComponent'
+import CButton from '@/components/CButton'
+import BackTitle from '@/components/BackTitle'
+import FileUploader from '@/components/FileUploader'
+
+export default {
+  components: { FileUploader, BackTitle, CButton, TabSideComponent },
+  data () {
+    return {
+      courseId: this.$route.params.courseId
+    }
+  },
+  methods: {
+    handleReadSlide () {
+      this.$router.push({ name: 'pdf-reader', params: { id: '123' } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.sub-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+
+  & .c-button {
+    margin-left: 12px;
+  }
+}
+
+.delete-slide {
+  color: $theme-red
+}
+</style>

src/views/teacher/tabs/CreateSlide.vue

@@ -94,6 +94,6 @@ select {
 }
 
 .my-button {
-  margin-top: 12px;
+  margin-top: 24px;
 }
 </style>

src/views/teacher/tabs/TeacherExplore.vue

@@ -6,7 +6,7 @@
       <section>
         <h1 class="sub-title">最近浏览</h1>
         <!--      <c-button @click.native="push()">临时：PDF阅读器链接</c-button>-->
-        <slide-card :click-handler="push"></slide-card>
+        <slide-card :click-handler="handleSlideCardClick"></slide-card>
         <br>
       </section>
       <section>
@@ -23,12 +23,13 @@
 import SearchBar from '@/components/SearchBar'
 import SlideCard from '@/components/SlideCard'
 import CourseCard from '@/components/CourseCard'
+
 export default {
   components: { CourseCard, SlideCard, SearchBar },
   methods: {
     // todo 临时
-    push () {
-      this.$router.push('/pdf-reader/1')
+    handleSlideCardClick (slideId) {
+      this.$router.push({ name: 'teacher-explore-slide-detail', params: { courseId: slideId } })
     },
     handleCourseCardClick (courseId) {
       // todo
@@ -44,6 +45,7 @@ export default {
 .title {
   margin-bottom: 16px;
 }
+
 .search-bar {
   margin-bottom: 16px;
 }