class

+<script setup>
+// import { ref } from 'vue'
+// import Head from '@/components/head.vue'
+// const classList = ref([
+//   {url: '@/static/set.png', name: '形式与政策'},
+//   {url: '@/static/class.jpg', name: '1+X中级认证'},
+//   {url: '@/static/class.jpg', name: '交互动效设置'},
+//   {url: '@/static/class.jpg', name: '融媒体制作与策划'},
+//   {url: '@/static/class.jpg', name: '形式与政策'},
+//   {url: '@/static/class.jpg', name: '1+X中级认证'},
+//   {url: '@/static/class.jpg', name: '交互动效设置'},
+//   {url: '@/static/class.jpg', name: '融媒体制作与策划'},
+
+// ])
+// </script>
 <template>
   <div class="counter">
     <div class="hed">
@@ -28,14 +43,18 @@
         新建文件夹
       </div>
     </div>
-
+    <!-- <div class="ban">
+      <div class="bottom">
+        <div class="pic" v-for="item in classList" :key="item"><img :src="item.url" alt=""></div>
+          <div class="li" v-for="item in classList" :key="item">{{ item.name}}</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 class="title">
           形式与政策
         </div>
       </div>
@@ -43,8 +62,7 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title">
           1+X中级认证
         </div>
       </div>
@@ -52,8 +70,7 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title">
           交互动效设计
         </div>
       </div>
@@ -61,20 +78,15 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title">
           融媒体制作与策划
         </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 class="title">
           形式与政策
         </div>
       </div>
@@ -82,8 +94,7 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title">
           1+X中级认证
         </div>
       </div>
@@ -91,8 +102,7 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title" s>
           交互动效设计
         </div>
       </div>
@@ -100,8 +110,7 @@
         <div class="class">
           <img src="@/static/class.jpg" alt="">
         </div>
-        <div class="title" style="    text-align: center;
-    padding: 8px 0;">
+        <div class="title">
           融媒体制作与策划
         </div>
       </div>
@@ -113,73 +122,69 @@
 .counter {
   width: 100%;
   background-color: #f2f2f2;
-  margin-left: 20px;
 
   .ban {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-around;
     margin-top: 30px;
-
-    .item {
-      width: 200px;
-      margin-top: 25px;
-      .title {
-        text-align: center；
-      }
-
-      img {
+    .item{
+      margin: 50px;
+    }
+    .title{
+      text-align: center;
+      margin-top: 10px;
+    }
+    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;
+    .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 {
-    margin-top: 37px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    .hed {
+      margin-top: 37px;
+      display: flex;
+      justify-content: space-between;
+      width: 1277px;
 
-    width: 900px;
+      .leftt {
+        font-weight: 800;
+      }
 
-    .leftt {
-      font-weight: 800;
-    }
+      .rightt {
+        display: flex;
 
-    .rightt {
-      display: flex;
+        .noe {
+          width: 70px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
 
-      .noe {
-        width: 70px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+          img {
+            width: 15px;
+            height: 15px;
+          }
 
-        img {
-          width: 15px;
-          height: 15px;
         }
-
       }
     }
-  }
-}</style>
\ No newline at end of file
+  }</style>
\ No newline at end of file