106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
||
<div class="home-wrapper">
|
||
<swiper :options="swiperOption" class="bg-swiper">
|
||
<swiper-slide class="bg-slide">
|
||
<img src="@/assets/51/back1.png" alt="背景1" class="bg-img">
|
||
</swiper-slide>
|
||
<swiper-slide class="bg-slide">
|
||
<img src="@/assets/51/back2.png" alt="背景2" class="bg-img">
|
||
</swiper-slide>
|
||
<swiper-slide class="bg-slide">
|
||
<img src="@/assets/51/back3.png" alt="背景3" class="bg-img">
|
||
</swiper-slide>
|
||
</swiper>
|
||
|
||
<div class="j-button">
|
||
<button class="downbtn" @click="goShare" aria-label="前往分享页面"></button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||
import 'swiper/dist/css/swiper.css'
|
||
|
||
export default {
|
||
components: { swiper, swiperSlide },
|
||
data() {
|
||
return {
|
||
swiperOption: {
|
||
autoplay: {
|
||
delay: 2000, // 切换时间（毫秒）
|
||
disableOnInteraction: false
|
||
},
|
||
loop: true,
|
||
effect: 'fade',
|
||
fadeEffect: { crossFade: true }, // 关键：避免白屏
|
||
pagination: false,
|
||
navigation: false
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 手动触发51LA统计（确保页面加载被统计）
|
||
if (window._51la) {
|
||
window._51la.trackPageView(); // 51LA 全局方法，用于手动统计页面
|
||
}
|
||
},
|
||
methods: {
|
||
goShare() {
|
||
this.$router.push({ name: 'share', query: { from: '8' } })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 轮播容器全屏覆盖 */
|
||
.bg-swiper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
/* 去除默认边距，避免白边 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 轮播项全屏 */
|
||
.bg-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden; /* 隐藏超出容器的部分 */
|
||
}
|
||
|
||
/* 核心：图片自动铺满且保持比例 */
|
||
.bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 关键属性：铺满容器，裁剪多余部分，保持比例 */
|
||
object-fit: cover;
|
||
/* 可选：图片居中显示（默认就是居中） */
|
||
object-position: center;
|
||
}
|
||
.j-button {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
bottom: 70px;
|
||
width: 300px;
|
||
height: 60px;
|
||
background: url("@/assets/download51.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 10;
|
||
}
|
||
.downbtn {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|