style: css样式优化

src/components/CourseItem.vue

@@ -77,7 +77,7 @@ export default {
   overflow: hidden;
 }
 .course-item__text {
-  max-height: 0.68rem;
+  max-height: 0.34rem;
   font-size: 0.26rem;
   color: #999;
   white-space: nowrap;

src/pages/course/learn/courseChapter.vue

 <template>
   <van-collapse v-model="activeNames">
     <van-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
+      <template #right-icon>
+        <van-icon name="arrow" />
+        <van-icon name="arrow-down" />
+      </template>
       <ul>
         <li
           v-for="subItem in item.children"
@@ -62,5 +66,12 @@ export default {
 }
 li {
   padding: 10px 0;
+  font-size: 13px;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 20px;
+  }
 }
 </style>

src/pages/course/tag/courseTagMessage.vue

@@ -102,7 +102,7 @@ export default {
   border-radius: 6px;
 }
 .course-tag-message-hd {
-  padding: 10px 0;
+  margin-bottom: 10px;
   font-size: 15px;
   color: #222;
 }

src/pages/course/tag/index.vue

@@ -170,7 +170,6 @@ export default {
 <style lang="scss" scoped>
 .messages {
   background: #eee;
-  overflow: hidden;
 }
 .send {
   height: 50px;

src/pages/course/tag/messageCard.vue

 <template>
   <div class="message-card" :class="classes">
     <div class="message-card-content">
+      <div class="message-arrow"></div>
       <slot :data="data.payload">
         <div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
         <course-tag-message
@@ -66,6 +67,16 @@ export default {
   border-radius: 6px;
 }
 .is-my {
+  .message-arrow {
+    position: absolute;
+    right: -5px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid #67a8ff;
+  }
   .message-card-content {
     text-align: right;
   }
@@ -75,4 +86,19 @@ export default {
     background-color: #67a8ff;
   }
 }
+.message-card-content {
+  position: relative;
+}
+.is-system {
+  .message-arrow {
+    position: absolute;
+    left: -5px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-right: 5px solid #fff;
+  }
+}
 </style>

src/pages/home/index.vue

@@ -2,7 +2,7 @@
   <div class="main-container">
     <search-bar readonly @click.native="toSearch"></search-bar>
     <div class="banner">
-      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe class="banner-swipe" :autoplay="3000">
         <van-swipe-item>
           <img src="../../assets/images/banner.png" @click="onClickNav('pay')" />
         </van-swipe-item>
@@ -184,10 +184,10 @@ export default {
   li {
     display: inline-block;
     padding: 0 5px;
-    font-size: 12px;
+    font-size: 10px;
     color: #2b7ce9;
     line-height: 14px;
-    background-color: rgba(43, 124, 233, 0.4);
+    background-color: #e9f1fc;
     border-radius: 3px;
   }
 }
@@ -199,6 +199,7 @@ export default {
 }
 .course-content__price {
   font-size: 13px;
+  font-weight: bold;
   color: #ff6767;
   line-height: 1;
   span {

src/pages/search/index.vue

@@ -126,6 +126,7 @@ export default {
 }
 .search-tips__title {
   font-size: 0.3rem;
+  font-weight: 400;
   color: #222;
 }
 .search-tips__list {

src/style.scss

@@ -102,11 +102,43 @@ body {
   margin: 0 0.4rem;
   padding-bottom: env(safe-area-inset-bottom);
 }
+.main-tabs .van-tab {
+  font-size: 15px;
+  color: #999;
+}
 .main-tabs .van-hairline--top-bottom::after {
   border-top: 0;
 }
+.main-tabs .van-tab--active {
+  font-weight: 600;
+  color: #000;
+}
 .main-list .empty {
   padding: 40px 0;
   text-align: center;
   color: #999;
 }
+.van-collapse .van-collapse-item__title {
+  padding: 20px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+}
+.van-collapse .van-icon-arrow-down {
+  display: none;
+}
+.van-collapse .van-collapse-item__title--expanded .van-icon-arrow {
+  display: none;
+}
+.van-collapse .van-collapse-item__title--expanded .van-icon-arrow-down {
+  display: block;
+}
+
+.van-swipe .van-swipe__indicator--active {
+  width: 30px;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+}
+.van-swipe .van-swipe__indicators {
+  bottom: 5px;
+}