yuyongdong/UAW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增下载二维码

Browse Source
This commit is contained in:
yuyongdong 2024-05-04 18:33:48 +08:00
parent db5ef89f56
commit 0f23b8ee6f
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/home/index.vue
View File

@ -135,14 +135,17 @@
<li class="explore-btn" @click="exploreCli(stepTicket)">Explore Map</li> <li class="explore-btn" @click="exploreCli(stepTicket)">Explore Map</li>
</div> </div>
<div class="explore-download" v-if="navIndex == 0"> <div class="explore-download" v-if="navIndex == 0">
<li v-for="(item, index) in download" :key="index"> <div class="download-title">Pre-season Testing is live. Download now at:</div>
<div class="download-img"> <div class="download-list">
<img :src="item.imgSrc" alt=""> <li v-for="(item, index) in download" :key="index">
</div> <div class="download-img">
<div class="download-img-hover"> <img :src="item.imgSrc" alt="">
<img :src="item.imgSrcHover" alt=""> </div>
</div> <div class="download-img-hover">
</li> <img :src="item.imgSrcHover" alt="">
</div>
</li>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -2094,31 +2097,52 @@ export default {
.explore-download { .explore-download {
position: absolute; position: absolute;
right: 30px; right: 30px;
bottom: 90px; bottom: 80px;
li { padding: 40px 20px;
position: relative; margin-bottom: 10px;
margin-top: 10px; background: url("./../../assets/home/box.png") no-repeat;
cursor: pointer; background-size: 100% 100%;
.download-img { .download-title {
width: 120px; font-weight: 700;
height: 35px; text-align: left;
} font-size: 16px;
.download-img-hover { color: #fff;
display: none; font-family: 'Poppins-Light';
width: 120px; }
height: 120px; .download-list {
position: absolute; display: flex;
top: -120px; justify-content: space-between;
left: 0; li {
z-index: 99; position: relative;
} margin-top: 10px;
img { padding-right: 20px;
width: 100%; cursor: pointer;
height: 100%; .download-img {
} width: 120px;
&:hover { height: 35px;
// border-radius: 25px;
// overflow: hidden;
}
.download-img-hover { .download-img-hover {
display: block; display: none;
width: 120px;
height: 120px;
position: absolute;
top: -120px;
left: 0;
z-index: 99;
}
img {
width: 100%;
height: 100%;
}
&:hover {
.download-img-hover {
display: block;
}
}
&:nth-child(3) {
padding-right: 0px;
} }
} }
} }