improvement: 界面显示的一些微调

src/components/Basic/BackTitle.vue

@@ -20,7 +20,6 @@ export default {
 
 <style scoped>
 .icon-button {
-  color: #3a4a5a;
   left: -10px;
 }
 

src/components/Basic/CIcon.vue

@@ -50,7 +50,8 @@ export default {
       return {
         fontSize: this.size ? this.size + 'px' : null,
         marginRight: this.right ? this.right + 'px' : null,
-        marginLeft: this.left ? this.left + 'px' : null
+        marginLeft: this.left ? this.left + 'px' : null,
+        color: this.color || null
       }
     }
   }

src/components/CComment.vue

@@ -167,15 +167,4 @@ export default {
     color: #8a9aaa;
   }
 }
-
-.icon {
-  font-family: 'iconfont', sans-serif;
-  text-align: center;
-  padding: 4px 0;
-  color: #7a8a9a;
-
-  span {
-    font-size: 12px;
-  }
-}
 </style>

src/components/CourseCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="course-card" title="点击修改课程详情" @click="handleClick">
     <div class="course-card-title">
-      <c-icon theme="orange" :left="-3" :right="4" :size="24">book</c-icon>
+      <c-icon theme="orange" :left="-2" :right="6" :size="18">book</c-icon>
       {{course.name || '暂无课程名称'}}
     </div>
     <div class="course-card-bio">{{course.bio || '暂无课程简介'}}</div>
-    <div class="course-card-teacher">{{course.teacherName}}</div>
+<!--    <div class="course-card-teacher">{{course.teacherName}}</div>-->
   </div>
 </template>
 
@@ -27,15 +27,17 @@ export default {
 @import '~@/style/theme.scss';
 
 .course-card {
+  margin: 12px 0;
   padding: 8px 8px 8px 16px;
-  border-left: 4px solid $input-background-color;
+  // border-left: 4px solid $input-background-color;
   transition: .2s;
   cursor: pointer;
-  // background-color: $white-transparent;
+  border-radius: 12px;
+  background-color: $card-background;
 
   &:hover {
-    background-color: $input-background-color;
-    border-left: 4px solid $theme-blue;
+    background: darken($card-background, 5);
+    // border-left: 4px solid $theme-blue;
   }
 }
 
@@ -59,10 +61,7 @@ export default {
   color: #6a7a8a;
 }
 
-.icon {
-   font-family: 'iconfont', sans-serif;
-   display: inline-block;
-   transform: scale(1.3);
-   color: $theme-orange;
- }
+.c-icon {
+  transform: scale(1.3);
+}
 </style>

src/components/DiscussionTab/CMessage.vue

@@ -5,11 +5,11 @@
     </div>
     <div v-show="edit">
       <div class="left-content">
-        <icon-button v-if="!read" class="archive-button" :class="toArchive ? 'archive-button--active' : ''"
+        <icon-button v-if="!read" theme="blue" class="archive-button" :class="toArchive ? 'archive-button--active' : ''"
                      title="设置为已读" @click.native.stop="handleArchiveButtonClick" :size="32">
           archive
         </icon-button>
-        <icon-button class="delete-button" :class="toDelete ? 'delete-button--active' : ''"
+        <icon-button class="delete-button" theme="red" :class="toDelete ? 'delete-button--active' : ''"
                      title="删除" @click.native.stop="handleDeleteButtonClick" :size="32">
           delete
         </icon-button>
@@ -129,18 +129,18 @@ export default {
   animation: show .2s .3s forwards;
 
   .archive-button {
-    color: lighten($theme-blue, 30);
+    opacity: .4;
 
     &--active {
-      color: $theme-blue;
+      opacity: 1;
     }
   }
 
   .delete-button {
-    color: lighten($theme-red, 30);
+    opacity: .4;
 
     &--active {
-      color: $theme-red;
+      opacity: 1;
     }
   }
 }

src/components/PDF/PdfController.vue

@@ -9,7 +9,7 @@
     <icon-button @click="handleScreenShot" title="将本页截图">save_alt</icon-button>
     <icon-button @click="handleNext" title="下一页">navigate_next</icon-button>
     <div class="spacer"></div>
-    <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">forum</icon-button>
+    <icon-button :theme="showDiscussion ? 'blue' : null" @click="handleDiscussionShowState" title="讨论区">char_bubble</icon-button>
   </div>
 </template>
 
@@ -66,19 +66,12 @@ export default {
   width: 100%;
 }
 
-.icon {
-  margin: 0 12px;
-}
-
 .spacer {
   max-width: 24px;
   flex: 1;
 }
 
 @media (max-width: 480px) {
-  .icon {
-    margin: 0 8px;
-  }
   .spacer {
     max-width: 12px;
   }

src/components/SlideCard.vue

@@ -76,11 +76,4 @@ export default {
   font-size: 14px;
   color: #6a7a8a;
 }
-
-.icon {
-  font-family: 'iconfont', sans-serif;
-  display: inline-block;
-  transform: scale(1.3);
-  color: $theme-blue;
-}
 </style>

src/style/theme.scss

@@ -22,9 +22,9 @@ $theme-black: #3a4a5a;
 $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);
 
-$input-background-color: rgba(235, 242, 245, 0.9);
-$input-hover-background-color: rgba(230, 237, 240, 0.9);
+$input-background-color: rgba(235, 242, 245, 0.5);
+$input-hover-background-color: rgba(230, 237, 240, 0.5);
 
-$card-background: rgba(160, 180, 200, .1);
+$card-background: rgba(235, 242, 245, 0.6);
 
-$white-transparent: rgba(255, 255, 255, .8);
+$white-transparent: rgba(255, 255, 255, .5);

src/views/shared/Discussion.vue

@@ -242,10 +242,6 @@ export default {
     &:hover {
       opacity: .8;
     }
-
-    .icon {
-      color: $theme-green;
-    }
   }
 
   .cancel {

src/views/student/StudentHome.vue

@@ -26,7 +26,7 @@ export default {
         },
         {
           name: 'discussion',
-          icon: 'forum',
+          icon: 'chat_bubble',
           title: '讨论区消息通知'
         },
         {

src/views/teacher/TeacherHome.vue

@@ -23,12 +23,12 @@ export default {
         },
         {
           name: 'create-slide',
-          icon: 'add_circle',
+          icon: 'add_box',
           title: '新建幻灯片'
         },
         {
           name: 'discussion',
-          icon: 'forum',
+          icon: 'chat_bubble',
           title: '讨论区消息通知'
         },
         {

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -2,7 +2,7 @@
   <div class="tab complex-tab">
     <div class="left">
       <h1 class="title">课程管理</h1>
-      <div class="sub-title">开设的课程</div>
+      <div class="sub-title">我的课程</div>
       <div class="no-content-warning" v-if="courses === null">
         <div class="no-content-warning-tip">加载中...</div>
       </div>