فهرست منبع

improvement: 调小SlideCard组件

ChenYangfan 6 سال پیش
والد
کامیت
4cbcf7deec

+ 16 - 14
src/components/SlideCard.vue

@@ -1,17 +1,13 @@
 <template>
-  <transition>
-    <div>
-      <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
-        <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>
-        <div class="slide-card-course">所属课程:{{ slide.courseName }}</div>
-        <div class="slide-card-teacher">教师:{{ slide.teacherName }}</div>
-      </div>
+  <div class="slide-card" :class="small ? 'small' : ''" title="点击查看课件" @click="handleClick(123)">
+    <div class="slide-card-title"><span class="icon">{{iconMap['slide_show']}}</span>
+      {{ slide.name }}
+      <span class="tag">{{slideStateTranslation[slide.state]}}</span>
     </div>
-  </transition>
+    <div class="slide-card-time">最近更新:{{ updateTime }}</div>
+    <div class="slide-card-course">所属课程:{{ slide.courseName }}</div>
+    <div class="slide-card-teacher">教师:{{ slide.teacherName }}</div>
+  </div>
 </template>
 
 <script>
@@ -19,7 +15,7 @@ import slideStateTranslation from '@/server/enums/slide-state-translation'
 import iconMap from '@/utils/icon-map'
 
 export default {
-  props: ['index', 'clickHandler', 'slide'],
+  props: ['index', 'clickHandler', 'slide', 'small'],
   data () {
     return {
       iconMap,
@@ -44,7 +40,7 @@ export default {
 
 .slide-card {
   font-weight: bold;
-  padding: 10px 8px 10px 16px;
+  padding: 6px 8px 6px 16px;
   border-left: 4px solid $input-background-color;
   // background-color: $card-background;
   transition: .2s;
@@ -56,6 +52,12 @@ export default {
   }
 }
 
+.small {
+  .slide-card-course {
+    display: none;
+  }
+}
+
 .slide-card-title {
   font-size: 16px;
   margin-bottom: 4px;

+ 1 - 1
src/views/student/components/StudentCourseSlides.vue

@@ -9,7 +9,7 @@
       <div class="no-content-warning-tip">本课程尚无课件~</div>
     </div>
     <template v-for="slide of slides">
-      <slide-card :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+      <slide-card :key="slide.id" small="true" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </template>
     <c-button class="full-width secondary mt-16" @click="handleToManager">管理课程</c-button>
   </tab-side-component>

+ 1 - 1
src/views/teacher/components/TeacherCourseSlides.vue

@@ -10,7 +10,7 @@
       <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课件</c-button>
     </div>
     <template v-for="slide of slides">
-      <slide-card :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+      <slide-card :key="slide.id" small="true" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </template>
     <c-button class="full-width secondary mt-16" @click="handleToManager">管理本课程</c-button>
   </tab-side-component>