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,20 +122,19 @@
 .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；
+    .item{
+      margin: 50px;
+    }
+    .title{
+      text-align: center;
+      margin-top: 10px;
     }
-
     img {
         height: 125px;
         width: 100%;
@@ -135,7 +143,6 @@
     
     }
 
-  }
 
     .bod {
       display: flex;
@@ -157,9 +164,7 @@
       margin-top: 37px;
       display: flex;
       justify-content: space-between;
-    align-items: center;
-
-    width: 900px;
+      width: 1277px;
 
       .leftt {
         font-weight: 800;
@@ -171,7 +176,7 @@
         .noe {
           width: 70px;
           display: flex;
-        justify-content: space-between;
+          justify-content: space-around;
           align-items: center;
 
           img {
@@ -182,4 +187,4 @@
         }
       }
     }
-}</style>
\ No newline at end of file
+  }</style>
\ No newline at end of file