86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template>
|
|
<section id="chip_section" data-anchor="chip">
|
|
<div class="title">
|
|
<img src="@/assets/main/p4/txt_title.png">
|
|
<span class="text">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
|
|
</div>
|
|
<img class="main-img" src="@/assets/main/p4/main.png">
|
|
<img class="main-img_2" src="@/assets/main/p4_m/main.png">
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
|
|
@Component({
|
|
name: 'ChipSection',
|
|
components: {
|
|
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#chip_section {
|
|
background-image: url('~@/assets/main/p4/bg_p4.png');
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.title img {
|
|
width: 562px;
|
|
height: auto;
|
|
}
|
|
.title .text{
|
|
color: white;
|
|
font-size: 28px;
|
|
margin: 10px 15px;
|
|
text-align: center;
|
|
text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
|
|
}
|
|
.main-img{
|
|
width: 87vw;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 60px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.main-img_2 {
|
|
display: none;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.main-img{
|
|
display: none;
|
|
}
|
|
.title img {
|
|
width: 281px;
|
|
}
|
|
.title .text{
|
|
font-size: 14px;
|
|
}
|
|
.main-img_2{
|
|
display: block;
|
|
width: 90vw;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 20vh;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
</style>
|