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