洗澡能呢个每日必学

src/views/home/learn/page-learn-child.vue

@@ -42,7 +42,16 @@
             @click="chooseContent(contentIndex)"
           >
             <div slot="default" class="contentItemDiv">
-              <div class="contentItemTitle">{{ contentItem.name }}</div>
+              <div class="contentItemTitleTitleRow">
+                <div class="contentItemTitle">{{ contentItem.name }}</div>
+                <!-- contentItem.isNeedStudyToday -->
+                <div
+                  v-if="isFirstGroup && tabIndex === 0"
+                  class="contentItemstates"
+                >
+                  今日必学
+                </div>
+              </div>
               <div class="contentItemDescription">
                 <div class="contentItemDescriptionTime">
                   {{
@@ -131,13 +140,23 @@ export default {
           )
         )
         .then(res => {
-          this.contentList = res.data;
+          this.formatNeedStudyTodayFun(res.data);
           this.finished = true;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
+    // 判断是否今日必学
+    formatNeedStudyTodayFun(datas) {
+      console.log("222222", datas);
+      datas.forEach(item => {
+        if (item.tags.length > 0) {
+          item.isNeedStudyToday = true;
+        }
+      });
+      this.contentList = datas;
+    },
     onLoad() {},
     chooseContent(index) {
       this.$router.push({
@@ -154,17 +173,38 @@ export default {
 .contentBody {
   background-color: #fff;
   .contentItemDiv {
+    width: 100%;
     .contentItemTitle {
       font-size: 0.65rem;
     }
-    .contentItemDescription {
-      margin-top: 0.5rem;
+
+    .contentItemTitleTitleRow {
+      width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       .contentItemTitle {
+        text-align: center;
         font-size: 0.65rem;
+        color: #000;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
+      .contentItemstates {
+        font-size: 0.6rem;
+        color: #f56c6c;
+        border-radius: 0.2rem;
+        margin-left: 0.5rem;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+      }
+    }
+    .contentItemDescription {
+      margin-top: 0.5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       .contentItemDescriptionTime {
         color: #696969;
         font-size: 0.55rem;