排序样式调整

src/componentsn/business/yqy-lecturer-order.vue

@@ -14,10 +14,10 @@
           </div>
           <div @click="order(2, 'isNewCourseOrderDown', 'newTime')" 
           :class="{'active': showOrderIndex === 2}" class="group-title-order-item">
-            <span >时间</span>
+            <span class="new-course">时间</span>
             <img class="new-course-default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 2"/>
-            <img src="../../images/lecturer/sort-down.png" v-show="isNewCourseOrderDown && showOrderIndex === 2"/>
-            <img src="../../images/lecturer/sort-up.png" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/>
+            <img class="new-course-img" src="../../images/lecturer/sort-down.png" v-show="isNewCourseOrderDown && showOrderIndex === 2"/>
+            <img class="new-course-img" src="../../images/lecturer/sort-up.png" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/>
           </div>
           <div @click="order(3, 'isResourceNumOrderDown', 'resourceNum')" 
           :class="{'active': showOrderIndex === 3}" class="group-title-order-item">
@@ -28,11 +28,11 @@
           </div>
           <div @click="order(4, 'isHotOrderDown', 'totalNum')" 
           :class="{'active': showOrderIndex === 4}" class="group-title-order-item">
-            <span>人气</span>
+            <span class="hot-degree-title">人气</span>
             <img class="hot-degree default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 4"/>
             <img class="hot-degree" src="../../images/lecturer/sort-down.png" v-show="isHotOrderDown && showOrderIndex === 4"/>
             <img class="hot-degree" src="../../images/lecturer/sort-up.png" v-show="!isHotOrderDown && showOrderIndex === 4"/>
-          </div>
+          </div> 
         </article>
     </article>
   </section>
@@ -134,20 +134,30 @@ export default {
     }
   }
   .first-name {
-    left: px2rem(76px);
+    left: px2rem(50px);
   }
   .first-name.default {
     top: px2rem(6px);
-    left: px2rem(78px);
+    left: px2rem(52px);
     height: px2rem(10px);
     width: px2rem(10px);    
   }
+  .new-course {
+    left: px2rem(50px);
+    margin-left: px2rem(8px);  
+  }
   .new-course-default {
     top: px2rem(6px);
-    left: px2rem(65px);
+    left: px2rem(48px);
     height: px2rem(10px);
     width: px2rem(10px);   
   }
+  .new-course-img {
+    top: px2rem(4px);
+    left: px2rem(46px);
+    height: px2rem(15px);
+    width: px2rem(15px);   
+  }
   .course-num {
     left: px2rem(50px);
   }
@@ -158,11 +168,14 @@ export default {
     width: px2rem(10px);    
   }
   .hot-degree {
-    left: px2rem(37px);
+    left: px2rem(45px);
+  }
+  .hot-degree-title {
+    margin-left: px2rem(8px);  
   }
   .hot-degree.default {
     top: px2rem(6px);
-    left: px2rem(39px);
+    left: px2rem(47px);
     height: px2rem(10px);
     width: px2rem(10px);    
   }