Browse Source

奖项

master
maochaoying 2 years ago
parent
commit
abf0ba5653
  1. 44
      src/components/Awards.vue

44
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>
Loading…
Cancel
Save