fix: 修正课程详情、课件详情文字过长时的显示问题，为课程、课件组件前添加 icon

src/App.vue

@@ -46,12 +46,12 @@ export default {
 
 @font-face {
   font-family: 'iconfont';  /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot');
-  src: url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_b0x6db1qad6.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.eot');
+  src: url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_pbdwuenk7jg.svg#iconfont') format('svg');
 }
 
 body {

src/components/CourseCard.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="course-card" title="点击修改课程详情" @click="handleClick">
-    <div class="course-card-title" :index="index ? index : '*'">{{course.name || '暂无课程名称'}}</div>
+    <div class="course-card-title">
+      <span class="icon">{{iconMap['courses']}}</span>
+      {{course.name || '暂无课程名称'}}
+    </div>
     <div class="course-card-bio">{{course.bio || '暂无课程简介'}}</div>
     <div class="course-card-teacher">{{course.teacherName}}</div>
   </div>
 </template>
 
 <script>
+import iconMap from '@/utils/icon-map'
+
 export default {
   props: ['index', 'clickHandler', 'course'],
+  data () {
+    return {
+      iconMap
+    }
+  },
   methods: {
     handleClick () {
       this.clickHandler(this.course)
@@ -38,20 +48,6 @@ export default {
   font-size: 16px;
   margin-bottom: 6px;
   position: relative;
-
-  &::before {
-    content: attr(index);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-    color: white;
-    margin-right: 8px;
-    background-color: $theme-orange;
-    font-family: 'Courier', 'Courier New', monospace;
-    width: 2ch;
-    height: 2ch;
-  }
 }
 
 .course-card-bio {
@@ -64,4 +60,11 @@ export default {
   font-size: 14px;
   color: #6a7a8a;
 }
+
+.icon {
+   font-family: 'iconfont', sans-serif;
+   display: inline-block;
+   transform: scale(1.3);
+   color: $theme-orange;
+ }
 </style>

src/components/CourseDetail.vue

@@ -1,10 +1,22 @@
 <template>
   <div>
     <div class="detail">
-      <div>课程名称：{{course.name}}</div>
-      <div>课程简介：{{course.bio}}</div>
-      <div>创建时间：{{createTime}}</div>
-      <div>教师：{{course.teacherName}}</div>
+      <div>
+        <div>课程名称：</div>
+        <div>{{course.name}}</div>
+      </div>
+      <div>
+        <div>课程简介：</div>
+        <div>{{course.bio}}</div>
+      </div>
+      <div>
+        <div>创建时间：</div>
+        <div>{{createTime}}</div>
+      </div>
+      <div>
+        <div>教师：</div>
+        <div>{{course.teacherName}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -27,12 +39,15 @@ export default {
   margin-bottom: 24px;
   color: #7a8a9a;
 
-  div {
+  & > div {
     margin-top: 2px;
-
+    display: flex;
+    & > div:first-child {
+      min-width: 80px;
+    }
   }
 
-  div:not(:last-child) {
+  & > div:not(:last-child) {
     border-bottom: 1px dashed #aabaca;
     padding-bottom: 2px;
   }

src/components/DiscussionArea.vue

@@ -70,6 +70,8 @@ export default {
       }).then(res => {
         this.$setSuccessMessage('您的讨论帖发表成功')
         this.updateComments()
+      }).catch(err => {
+        this.$setErrorMessage(err.response.data.msg)
       })
     }
   }

src/components/SlideCard.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
-    <div class="slide-card-title">{{ slide.name }}
+    <div class="slide-card-title"><span class="icon">{{iconMap['slide_show']}}</span>
+      {{ slide.name }}
       <span class="tag">{{slideStateTranslation[slide.state]}}</span>
     </div>
     <div class="slide-card-time">最近更新：{{ updateTime }}</div>
@@ -11,11 +12,13 @@
 
 <script>
 import slideStateTranslation from '@/server/enums/slide-state-translation'
+import iconMap from '@/utils/icon-map'
 
 export default {
   props: ['index', 'clickHandler', 'slide'],
   data () {
     return {
+      iconMap,
       slideStateTranslation
     }
   },
@@ -65,4 +68,10 @@ export default {
   color: #6a7a8a;
 }
 
+.icon {
+  font-family: 'iconfont', sans-serif;
+  display: inline-block;
+  transform: scale(1.3);
+  color: $theme-blue;
+}
 </style>

src/components/SlideDetail.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="detail">
+    <div>
+      <div>课件名称：</div>
+      <div>{{slide.name}}</div>
+    </div>
+    <div>
+      <div>所属课程：</div>
+      <div>{{slide.courseName}}</div>
+    </div>
+    <div>
+      <div>创建时间：</div>
+      <div>{{createTime}}</div>
+    </div>
+    <div>
+      <div>最后更新：</div>
+      <div>{{updateTime}}</div>
+    </div>
+    <div>
+      <div>总页面数：</div>
+      <div>{{slide.pages}} 页</div>
+    </div>
+    <div>
+      <div>课件状态：</div>
+      <div>{{slideStateTranslation[slide.state]}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import slideStateTranslation from '@/server/enums/slide-state-translation'
+
+export default {
+  props: ['slide'],
+  data () {
+    return {
+      slideStateTranslation
+    }
+  },
+  computed: {
+    updateTime () {
+      return this.$moment(this.slide.updateAt).fromNow()
+    },
+    createTime () {
+      return this.$moment(this.slide.createAt).fromNow()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 24px;
+  color: #7a8a9a;
+
+  & > div {
+    margin-top: 2px;
+    display: flex;
+    & > div:first-child {
+      min-width: 80px;
+    }
+  }
+
+  & > div:not(:last-child) {
+    border-bottom: 1px dashed #aabaca;
+    padding-bottom: 2px;
+  }
+}
+</style>

src/utils/icon-map.js

@@ -17,7 +17,8 @@ const iconMap = {
   'back': '\ue714',
   'quiz': '\ue6d1',
   'down': '\ue7db',
-  'up': '\ue7d9'
+  'up': '\ue7d9',
+  'slide_show': '\ue74e'
 }
 
 export default iconMap

src/views/student/components/StudentSlideDetail.vue

@@ -1,14 +1,7 @@
 <template>
   <tab-side-component>
     <back-title>课件详情</back-title>
-    <div class="detail">
-      <div>课件名称：{{slide.name}}</div>
-      <div>所属课程：{{slide.courseName}}</div>
-      <div>创建时间：{{createTime}}</div>
-      <div>最后更新：{{updateTime}}</div>
-      <div>总页面数：{{slide.pages}} 页</div>
-      <div>课件状态：{{slideStateTranslation[slide.state]}}</div>
-    </div>
+    <slide-detail :slide="slide"></slide-detail>
     <c-button class="full-width mb-16" @click="handleReadSlide">浏览课件</c-button>
     <a :href="slideUrl">
       <c-button class="full-width mb-16 secondary">
@@ -23,29 +16,22 @@
 import TabSideComponent from '@/components/TabSideComponent'
 import CButton from '@/components/CButton'
 import BackTitle from '@/components/BackTitle'
+import SlideDetail from '@/components/SlideDetail'
 import { mapState } from 'vuex'
 import { getSlideUrl } from '@/server/slide'
 import { SET_SRC } from '@/store/types/pdf-types'
-import slideStateTranslation from '@/server/enums/slide-state-translation'
 
 export default {
-  components: { BackTitle, CButton, TabSideComponent },
+  components: { BackTitle, CButton, TabSideComponent, SlideDetail },
   data () {
     return {
-      slideUrl: '',
-      slideStateTranslation: slideStateTranslation
+      slideUrl: ''
     }
   },
   computed: {
     ...mapState({
       slide: state => state.pdf.slideInfo
-    }),
-    updateTime () {
-      return this.$moment(this.slide.updateAt).fromNow()
-    },
-    createTime () {
-      return this.$moment(this.slide.createAt).fromNow()
-    }
+    })
   },
   mounted () {
     getSlideUrl({ slideId: this.slide.id }).then(res => {

src/views/teacher/components/TeacherSlideDetail.vue

@@ -1,14 +1,7 @@
 <template>
   <tab-side-component>
     <back-title>课件详情</back-title>
-    <div class="detail">
-      <div>课件名称：{{slide.name}}</div>
-      <div>所属课程：{{slide.courseName}}</div>
-      <div>创建时间：{{createTime}}</div>
-      <div>最后更新：{{updateTime}}</div>
-      <div>总页面数：{{slide.pages}} 页</div>
-      <div>课件状态：{{slideStateTranslation[slide.state]}}</div>
-    </div>
+    <slide-detail :slide="slide"></slide-detail>
     <c-button class="full-width mb-16" @click="handleReadSlide">浏览课件</c-button>
     <a :href="slideUrl">
       <c-button class="full-width mb-16 secondary">
@@ -30,27 +23,20 @@ import BackTitle from '@/components/BackTitle'
 import { mapState } from 'vuex'
 import { getSlideUrl, modifySlideState, removeSlide } from '@/server/slide'
 import { SET_SLIDE_INFO, SET_SRC } from '@/store/types/pdf-types'
-import slideStateTranslation from '@/server/enums/slide-state-translation'
 import getSlideNextState from '@/utils/get-slide-next-state'
+import SlideDetail from '@/components/SlideDetail'
 
 export default {
-  components: { BackTitle, CButton, TabSideComponent },
+  components: { BackTitle, CButton, TabSideComponent, SlideDetail },
   data () {
     return {
-      slideUrl: '',
-      slideStateTranslation: slideStateTranslation
+      slideUrl: ''
     }
   },
   computed: {
     ...mapState({
       slide: state => state.pdf.slideInfo
     }),
-    updateTime () {
-      return this.$moment(this.slide.updateAt).fromNow()
-    },
-    createTime () {
-      return this.$moment(this.slide.createAt).fromNow()
-    },
     nextState () {
       return getSlideNextState(this.slide.state)
     }