From afdd3dce0b363a25cef508df29bb93ff0e77d620 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 25 Jun 2023 10:27:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E4=BD=9C=E5=AE=A2=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cooperation.vue | 151 +++++++++++++++++++++++++++++++++++------
 1 file changed, 129 insertions(+), 22 deletions(-)

diff --git a/src/components/Cooperation.vue b/src/components/Cooperation.vue
index 00bef5c..b117a19 100644
--- a/src/components/Cooperation.vue
+++ b/src/components/Cooperation.vue
@@ -8,32 +8,54 @@
       :theme="theme"
     />
     <div class="client_wrap">
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
-      <div class="card"></div>
-      <div class="card bg1"></div>
+      <div class="card">
+        <img :src="A1" alt="" class="img1" />
+      </div>
+      <div class="card bg1"><img :src="A2" alt="" class="img2" /></div>
+      <div class="card"><img :src="A3" alt="" class="img3" /></div>
+      <div class="card bg1"><img :src="A4" alt="" class="img4" /></div>
+      <div class="card bg1"><img :src="A5" alt="" class="img5" /></div>
+      <div class="card"><img :src="A6" alt="" class="img6" /></div>
+      <div class="card bg1"><img :src="A7" alt="" class="img7" /></div>
+      <div class="card"><img :src="A8" alt="" class="img8" /></div>
+      <div class="card"><img :src="A9" alt="" class="img9" /></div>
+      <div class="card bg1"><img :src="A10" alt="" class="img10" /></div>
+      <div class="card"><img :src="A11" alt="" class="img11" /></div>
+      <div class="card bg1"><img :src="A12" alt="" class="img12" /></div>
+      <div class="card bg1"><img :src="A13" alt="" class="img13" /></div>
+      <div class="card"><img :src="A14" alt="" class="img14" /></div>
+      <div class="card bg1"><img :src="A15" alt="" class="img15" /></div>
+      <div class="card"><img :src="A16" alt="" class="img16" /></div>
+      <div class="card"><img :src="A17" alt="" class="img17" /></div>
+      <div class="card bg1"><img :src="A18" alt="" class="img18" /></div>
+      <div class="card"><img :src="A19" alt="" class="img19" /></div>
+      <div class="card bg1"><img :src="A20" alt="" class="img20" /></div>
     </div>
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import A1 from '@/static/img/cooperate/cooperate1.png'
+import A2 from '@/static/img/cooperate/cooperate2.png'
+import A3 from '@/static/img/cooperate/cooperate3.png'
+import A4 from '@/static/img/cooperate/cooperate4.png'
+import A5 from '@/static/img/cooperate/cooperate5.png'
+import A6 from '@/static/img/cooperate/cooperate6.png'
+import A7 from '@/static/img/cooperate/cooperate7.png'
+import A8 from '@/static/img/cooperate/cooperate8.png'
+import A9 from '@/static/img/cooperate/cooperate9.png'
+import A10 from '@/static/img/cooperate/cooperate10.png'
+import A11 from '@/static/img/cooperate/cooperate11.png'
+import A12 from '@/static/img/cooperate/cooperate12.png'
+import A13 from '@/static/img/cooperate/cooperate13.png'
+import A14 from '@/static/img/cooperate/cooperate14.png'
+import A15 from '@/static/img/cooperate/cooperate15.png'
+import A16 from '@/static/img/cooperate/cooperate16.png'
+import A17 from '@/static/img/cooperate/cooperate17.png'
+import A18 from '@/static/img/cooperate/cooperate18.png'
+import A19 from '@/static/img/cooperate/cooperate19.png'
+import A20 from '@/static/img/cooperate/cooperate20.png'
 const props = defineProps({
   theme: {
     type: Boolean,
@@ -48,13 +70,98 @@ const props = defineProps({
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(5, 1fr);
+    background: url(../static/img/cooperate/back.png) no-repeat;
+    background-size: cover;
     .card {
       flex: 1;
       height: 94px;
-      background: #fcfcfd;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .img1 {
+        width: 66px;
+        height: 22px;
+      }
+      .img2 {
+        width: 76px;
+        height: 10px;
+      }
+      .img3 {
+        width: 52px;
+        height: 20px;
+      }
+      .img4 {
+        width: 83px;
+        height: 16px;
+      }
+      .img5 {
+        width: 73px;
+        height: 17px;
+      }
+      .img6 {
+        width: 61px;
+        height: 18px;
+      }
+      .img7 {
+        width: 66px;
+        height: 15px;
+      }
+      .img8 {
+        width: 63px;
+        height: 19px;
+      }
+      .img9 {
+        width: 65px;
+        height: 18px;
+      }
+      .img10 {
+        width: 32px;
+        height: 37px;
+      }
+      .img11 {
+        width: 59px;
+        height: 20px;
+      }
+      .img12 {
+        width: 81px;
+        height: 9px;
+      }
+      .img13 {
+        width: 72px;
+        height: 16px;
+      }
+      .img14 {
+        width: 70px;
+        height: 19px;
+      }
+      .img15 {
+        width: 76px;
+        height: 12px;
+      }
+      .img16 {
+        width: 76px;
+        height: 12px;
+      }
+      .img17 {
+        width: 55px;
+        height: 26px;
+      }
+      .img18 {
+        width: 40px;
+        height: 42px;
+      }
+      .img19 {
+        width: 54px;
+        height: 33px;
+      }
+      .img20 {
+        width: 53px;
+        height: 26px;
+      }
     }
     .bg1 {
-      background: #dedede;
+      background: rgba(251, 251, 251, 0.9);
     }
   }
 }