调整首页合作伙伴布局

src/components/index/PartnerSection.vue

@@ -4,68 +4,8 @@
       <img src="@/assets/202202/team/partners.png" alt="partners"/>
     </div>
     <div class="partner-list">
-      <a href="https://www.kucoin.com/">
-        <img class="kucoin" src="@/assets/202202/kucoin@2x.png" alt="kucoin"/>
-      </a>
-      <a href="https://twitter.com/multiverse_play">
-        <img class="multiverse" src="@/assets/202202/multiverse_play.png" alt="multiverse play"/>
-      </a>
-      <a href="https://twitter.com/cososwap">
-        <img class="coso" src="@/assets/202202/coso@2x.png" alt="coso"/>
-      </a>
-      <a href="https://gamestreet.io/">
-        <img class="gamestreet" src="@/assets/202202/partners/gamestreet.png" alt="gamestreet"/>
-      </a>
-      <a href="https://discord.com/invite/sanlazarusguild">
-        <img class="san" src="@/assets/202202/partners/san-lazarus-guild.png" alt="San Lazarus Guild"/>
-      </a>
-      <a href="https://shadowscholarguild.com/">
-        <img class="shadow" src="@/assets/202202/partners/shadow-scholar-guild.png" alt="San Lazarus Guild"/>
-      </a>
-      <a href="https://beacons.ai/fidem">
-        <img class="sfc" src="@/assets/202202/partners/sfc-guild.png" alt="Sfc Guild"/>
-      </a>
-      <a href="https://www.certik.com/projects/cebg-game">
-        <img class="certik" src="@/assets/202202/partners/certik.png" alt="certik"/>
-      </a>
-      <a href="https://discord.gg/RvDEBYpxYz">
-        <img class="alpha" src="@/assets/202202/partners/alpha_dao.png" alt="alpha dao"/>
-      </a>
-      <a href="https://twitter.com/fanzDAO">
-        <img class="fanz" src="@/assets/202202/partners/fanz.png" alt="fanz"/>
-      </a>
-      <a href="https://twitter.com/21GamingNews">
-        <img class="w400" src="@/assets/202202/partners/21gaming.png" alt="21gaming"/>
-      </a>
-      <a href="https://discord.gg/YBrPzrsS">
-        <img class="square" src="@/assets/202202/partners/astrounautes.png" alt="Astrounautes guild"/>
-      </a>
-      <a href="https://discord.gg/RCWzDaze">
-        <img class="square" src="@/assets/202202/partners/axb_esports.png" alt="AxB eSports"/>
-      </a>
-      <a href="https://twitter.com/daily_gamefi">
-        <img class="w202" src="@/assets/202202/partners/gamefi_daily.png" alt="GameFi daily"/>
-      </a>
-      <a href="https://discord.gg/rufgqemn">
-        <img class="w325" src="@/assets/202202/partners/lightning_guild.png" alt="Lighting guild "/>
-      </a>
-      <a href="https://www.blockchaingaming.games">
-        <img class="square" src="@/assets/202202/partners/blockchain_gaming.png" alt="Blockchain Gaming"/>
-      </a>
-      <a href="https://amgdao.com/">
-        <img class="square" src="@/assets/202202/partners/amg_dao.png" alt="AMG DAO"/>
-      </a>
-      <a href="https://web.facebook.com/AxbeSports">
-        <img class="w124" src="@/assets/202202/partners/axbesports.png" alt="AxbeSports"/>
-      </a>
-      <a href="https://www.hotcapital.io">
-        <img class="w284"  src="@/assets/202202/partners/hotcapital.png" alt="Hotcapital("/>
-      </a>
-      <a href="https://www.facebook.com/AsgardMetaguild">
-        <img class="w179" src="@/assets/202202/partners/asgard_meta.png" alt="Asgard Meta Guild "/>
-      </a>
-      <a href="https://www.facebook.com/CabronMetaGames">
-        <img class="w156" src="@/assets/202202/partners/cabron_metagames.png" alt="Cabron Meta Games "/>
+      <a v-for="data in datas" :href="data.href" :key="data.id">
+        <img class="logo" :src="require('@/assets/logos/'+data.id+'.png')" :alt="data.id"/>
       </a>
     </div>
   </section>
@@ -80,6 +20,33 @@ import { AppModule, DeviceType } from '@/store/modules/app'
   }
 })
 export default class PartnerSection extends Vue {
+  private datas = [
+    { id: 'kucoin', href: 'https://www.kucoin.com/' },
+    { id: 'multiverse_play', href: 'https://twitter.com/multiverse_play' },
+    { id: 'coso', href: 'https://twitter.com/cososwap' },
+    { id: 'gamestreet', href: 'https://gamestreet.io/' },
+    { id: 'san-lazarus-guild', href: 'https://discord.com/invite/sanlazarusguild' },
+    { id: 'shadow-scholar-guild', href: 'https://shadowscholarguild.com/' },
+    { href: 'https://beacons.ai/fidem', id: 'sfc-guild' },
+    { href: 'https://www.certik.com/projects/cebg-game', id: 'certik' },
+    { href: 'https://discord.gg/RvDEBYpxYz', id: 'alpha_dao' },
+    { href: 'https://twitter.com/fanzDAO', id: 'fanz' },
+    { href: 'https://twitter.com/21GamingNews', id: '21gaming' },
+    { href: 'https://discord.gg/YBrPzrsS', id: 'astrounautes' },
+    { href: 'https://discord.gg/RCWzDaze', id: 'axb_esports' },
+    { href: 'https://twitter.com/daily_gamefi', id: 'gamefi_daily' },
+    { href: 'https://discord.gg/rufgqemn', id: 'lightning_guild' },
+    { href: 'https://www.blockchaingaming.games', id: 'blockchain_gaming' },
+    { href: 'https://amgdao.com/', id: 'amg_dao' },
+    { href: 'https://web.facebook.com/AxbeSports', id: 'axbesports' },
+    { href: 'https://www.hotcapital.io', id: 'hotcapital' },
+    { href: 'https://www.facebook.com/AsgardMetaguild', id: 'asgard_meta' },
+    { href: 'https://www.facebook.com/CabronMetaGames', id: 'cabron_metagames' },
+    { href: 'https://discord.com/invite/vgg', id: 'vgg' },
+    { href: 'https://discord.gg/6xj6RcSH', id: 'okg' },
+    { href: 'https://discord.gg/5W5GUpKVFR', id: 'asl' }
+  ]
+
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
@@ -95,67 +62,16 @@ export default class PartnerSection extends Vue {
   }
   .partner-list{
     display: grid;
-    grid-template-columns: repeat(3, 33.33%);
+    grid-template-columns: repeat(5, 1fr);
     width: 1200px;
     flex-direction: row;
     margin: 20px auto 50px;
     align-items: center;
     justify-items: center;
     grid-row-gap: 10px;
-    .multiverse{
-      width: 232px;
-    }
-    .coso{
-      width: 130px;
-    }
-    .gamestreet{
-      width: 130px;
-    }
-    .kucoin{
-      width: 314px;
-    }
-    .shadow{
-      width: 360px;
-    }
-    .san{
-      width: 151px;
-    }
-    .sfc{
-      width: 130px;
-    }
-    .certik{
-      width: 360px;
-    }
-    .alpha {
-      width: 195px;
-    }
-    .square{
-      width: 130px;
-    }
-    .fanz{
-      width: 166px;
-      height: 80px;
-    }
-    .w400{
-      width: 400px;
-    }
-    .w202{
-      width: 202px;
-    }
-    .w325{
-      width: 325px;
-    }
-    .w124{
-      width: 124px;
-    }
-    .w284{
-      width: 284px;
-    }
-    .w179{
-      width: 179px;
-    }
-    .w156{
-      width: 156px;
+    .logo{
+      width: 200px;
+      height: 200px;
     }
   }
 }
@@ -172,68 +88,11 @@ export default class PartnerSection extends Vue {
     margin-bottom: 5vw;
     justify-content: space-between;
     width: 100vw;
+    grid-template-columns: repeat(3, 1fr);
     gap: 1vw;
-    img{
-      height: auto;
-    }
-    .coso{
-      width: 16.4vw;
-      height: 16.4vw;
-    }
-    .kucoin{
-      width: 30vw;
-    }
-    .multiverse{
-      width: 20vw;
-    }
-    .gamestreet{
-      width: 15vw;
-    }
-    .kucoin{
-      width: 30vw;
-    }
-    .shadow{
-      width: 30vw;
-    }
-    .san{
-      width: 20vw;
-    }
-    .sfc{
-      width: 15vw;
-    }
-    .certik{
-      width: 30vw;
-    }
-    .alpha {
-      width: 16.25vw;
-    }
-    .square{
-      width: 10.8vw;
-    }
-    .fanz{
-      width: 13.8vw;
-      height: 6.67vw;
-    }
-    .w400{
-      width: 33.3vw;
-    }
-    .w202{
-      width: 16.8vw;
-    }
-    .w325{
-      width: 27vw;
-    }
-    .w124{
-      width: 10.3vw;
-    }
-    .w284{
-      width: 23.7vw;
-    }
-    .w179{
-      width: 14.9vw;
-    }
-    .w156{
-      width: 13vw;
+    .logo{
+      width: 25vw;
+      height: 25vw;
     }
   }
 }