class

 <template>
 <template>
-    <div class="counter">
-      <div class="hed">
-        <div class="leftt">我的课程</div>
-        <div class="rightt">
-          <div class="noe">
-            <div class="pic">
-              <img src="../static/set.png" alt="">设置
-            </div>
+  <div class="counter">
+    <div class="hed">
+      <div class="leftt">我的课程</div>
+      <div class="rightt">
+        <div class="noe">
+          <div class="pic">
+            <img src="@/static/set.png" alt="">设置
           </div>
           </div>
-          <div class="noe">
-            <div class="pic">
-              <img src="../static/ewm.png" alt="">二维码
-            </div>
+        </div>
+        <div class="noe">
+          <div class="pic">
+            <img src="@/static/ewm.png" alt="">二维码
           </div>
           </div>
-          <div class="noe">
-            <div class="pic">
-              <img src="../static/fx.png" alt="">转发
-            </div>
+        </div>
+        <div class="noe">
+          <div class="pic">
+            <img src="@/static/fx.png" alt="">转发
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
-      <!-- <div class="ban">
-        <div class="item">
-          <div class="class">
-            <img src="" alt="">
-          </div>
-          <div class="title">
-            形式与政策
-          </div>
+    </div>
+    <div class="bod">
+      <div class="n">
+        +新建课程
+      </div>
+      <div class="n">
+        新建文件夹
+      </div>
+    </div>
+
+    <div class="ban">
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          形式与政策
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          1+X中级认证
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          交互动效设计
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          融媒体制作与策划
+        </div>
+      </div>
+    </div>
+
+    <div class="ban">
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          形式与政策
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          1+X中级认证
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
         </div>
         </div>
-      </div> -->
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          交互动效设计
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" style="    text-align: center;
+    padding: 8px 0;">
+          融媒体制作与策划
+        </div>
+      </div>
     </div>
     </div>
-  </template>
-  
-  <style lang="scss">
-  .counter {
-    width: 100%;
+  </div>
+</template>
+
+<style lang="scss">
+.counter {
+  width: 100%;
   background-color: #f2f2f2;
   background-color: #f2f2f2;
+  margin-left: 20px;
+
+  .ban {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 30px;
+
+    .item {
+      width: 200px;
+      margin-top: 25px;
+      .title {
+        text-align: center；
+      }
+
+      img {
+        height: 125px;
+        width: 100%;
+        border-radius: 10px;
+      }
+
+    }
+
+  }
+
+  .bod {
+    display: flex;
+    margin-top: 30px;
+
+    .n {
+      font-size: 8px;
+      border-radius: 15px;
+      padding: 3px 10px;
+      height: 20px;
+      line-height: 20px;
+      background-color: white;
+      border: #189eff 1px solid;
+      margin-right: 25px;
+    }
+  }
+
   .hed {
   .hed {
+    margin-top: 37px;
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     align-items: center;
     align-items: center;
+
+    width: 900px;
+
+    .leftt {
+      font-weight: 800;
+    }
+
     .rightt {
     .rightt {
       display: flex;
       display: flex;
+
       .noe {
       .noe {
         width: 70px;
         width: 70px;
         display: flex;
         display: flex;
         justify-content: space-between;
         justify-content: space-between;
         align-items: center;
         align-items: center;
-       img {
-        width: 15px;
-        height: 15px;
-       }
+
+        img {
+          width: 15px;
+          height: 15px;
+        }
 
 
       }
       }
     }
     }
   }
   }
-  }
-  
-  </style>
+}</style>