奖项

src/components/Awards.vue

@@ -2,21 +2,42 @@
   <div class="awards_container">
     <HeadLine themeTitle="奖项" title="荣获" :flip="true" line1="AWARDED" />
     <div class="award_cards">
+      <div class="card bg1">
+        <img class="icon" :src="A1" />
+        <p class="title">荣获奖项</p>
+      </div>
+      <div class="card">
+        <img class="icon" :src="A2" />
+        <p class="title">荣获奖项</p>
+      </div>
+      <div class="card bg1">
+        <img class="icon" :src="A3" />
+        <p class="title">荣获奖项</p>
+      </div>
       <div class="card">
-        <div class="icon"></div>
+        <img class="icon" :src="A4" />
+        <p class="title">荣获奖项</p>
+      </div>
+      <div class="card bg1">
+        <img class="icon" :src="A5" />
+        <p class="title">荣获奖项</p>
+      </div>
+      <div class="card">
+        <img class="icon" :src="A6" />
         <p class="title">荣获奖项</p>
       </div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
     </div>
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import A1 from '@/static/img/awards/Awards1.png'
+import A2 from '@/static/img/awards/Awards2.png'
+import A3 from '@/static/img/awards/Awards3.png'
+import A4 from '@/static/img/awards/Awards4.png'
+import A5 from '@/static/img/awards/Awards5.png'
+import A6 from '@/static/img/awards/Awards6.png'
 </script>
 
 <style lang="scss" scoped>
@@ -27,21 +48,26 @@ import HeadLine from 'cpns/HeadLine'
     grid-template-rows: repeat(2, 1fr);
     .card {
       flex: 1;
-      background: #f3f4f7;
+      background: #fff;
       padding: 29px 40px 26px 40px;
       .icon {
         width: 44px;
         height: 44px;
-        background: #000;
         margin-bottom: 19px;
       }
       .title {
-        font-size: 9px;
+        font-size: 18px;
+        transform: scale(0.5) translateX(-10px);
+        max-width: 39px;
         font-family: Alibaba PuHuiTi;
         font-weight: 500;
         color: #636363;
+        white-space: nowrap;
       }
     }
+    .bg1 {
+      background: #f8f8f8;
+    }
   }
 }
 </style>