合并分支 'dev' 到 'master'

Dev



查看合并请求 !10

+<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>
 <template>
   <div class="counter">
   <div class="counter">
     <div class="hed">
     <div class="hed">
@@ -5,49 +20,165 @@
       <div class="rightt">
       <div class="rightt">
         <div class="noe">
         <div class="noe">
           <div class="pic">
           <div class="pic">
-              <img src="../static/set.png" alt="">设置
+            <img src="@/static/set.png" alt="">设置
           </div>
           </div>
         </div>
         </div>
         <div class="noe">
         <div class="noe">
           <div class="pic">
           <div class="pic">
-              <img src="../static/ewm.png" alt="">二维码
+            <img src="@/static/ewm.png" alt="">二维码
           </div>
           </div>
         </div>
         </div>
         <div class="noe">
         <div class="noe">
           <div class="pic">
           <div class="pic">
-              <img src="../static/fx.png" alt="">转发
+            <img src="@/static/fx.png" alt="">转发
+          </div>
+        </div>
       </div>
       </div>
     </div>
     </div>
+    <div class="bod">
+      <div class="n">
+        +新建课程
+      </div>
+      <div class="n">
+        新建文件夹
       </div>
       </div>
     </div>
     </div>
     <!-- <div class="ban">
     <!-- <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="item">
         <div class="class">
         <div class="class">
-            <img src="" alt="">
+          <img src="@/static/class.jpg" alt="">
         </div>
         </div>
         <div class="title">
         <div class="title">
           形式与政策
           形式与政策
         </div>
         </div>
       </div>
       </div>
-      </div> -->
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          1+X中级认证
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          交互动效设计
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          融媒体制作与策划
+        </div>
       </div>
       </div>
-  </template>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          形式与政策
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          1+X中级认证
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title" s>
+          交互动效设计
+        </div>
+      </div>
+      <div class="item">
+        <div class="class">
+          <img src="@/static/class.jpg" alt="">
+        </div>
+        <div class="title">
+          融媒体制作与策划
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
 
-  <style lang="scss">
-  .counter {
+<style lang="scss">
+.counter {
   width: 100%;
   width: 100%;
   background-color: #f2f2f2;
   background-color: #f2f2f2;
+
+  .ban {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-top: 30px;
+    .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;
+      }
+    }
+
     .hed {
     .hed {
+      margin-top: 37px;
       display: flex;
       display: flex;
       justify-content: space-between;
       justify-content: space-between;
-    align-items: center;
+      width: 1277px;
+
+      .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-around;
           align-items: center;
           align-items: center;
+
           img {
           img {
             width: 15px;
             width: 15px;
             height: 15px;
             height: 15px;
@@ -56,6 +187,4 @@
         }
         }
       }
       }
     }
     }
-  }
-  
-  </style>
+  }</style>