123

src/views/WuOne.vue

@@ -0,0 +1,105 @@
+<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>