123
This commit is contained in:
777
12007
package-lock.json
generated
12007
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,7 +10,9 @@
|
||||
"dependencies": {
|
||||
"axios": "^1.6.8",
|
||||
"core-js": "^3.8.3",
|
||||
"swiper": "^4.5.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-router": "^3.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
BIN
src/assets/51/back1.png
Normal file
BIN
src/assets/51/back1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/51/back2.png
Normal file
BIN
src/assets/51/back2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 875 KiB |
BIN
src/assets/51/back3.png
Normal file
BIN
src/assets/51/back3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/download51.png
Normal file
BIN
src/assets/download51.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
@@ -4,6 +4,10 @@ import HomeView from '../views/HomeView.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
||||
// 全局标记：51LA 脚本是否已加载（避免重复加载）
|
||||
let is51ScriptLoaded = false
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@@ -58,6 +62,51 @@ const routes = [
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Share.vue')
|
||||
},
|
||||
{
|
||||
path: '/51share',
|
||||
name: 'wuone',
|
||||
meta: {
|
||||
title: "51分享",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/WuOne.vue'),
|
||||
beforeEnter: (to, from, next) => {
|
||||
// 1. 设置页面标题（避免 Hash 路由标题不更新）
|
||||
document.title = to.meta.title || '51分享'
|
||||
|
||||
// 2. 加载 51LA 脚本（仅加载一次）
|
||||
if (!is51ScriptLoaded) {
|
||||
const script = document.createElement('script')
|
||||
script.type = 'text/javascript'
|
||||
script.src = '//js.users.51.la/21981405.js' // 你的正确脚本地址
|
||||
|
||||
// 脚本加载成功：标记状态 + 触发统计
|
||||
script.onload = () => {
|
||||
is51ScriptLoaded = true
|
||||
console.log('51LA 脚本加载完成')
|
||||
// 手动触发一次统计（适配 Hash 路由，确保捕获当前页面）
|
||||
if (window._51la) {
|
||||
window._51la.trackPageView()
|
||||
}
|
||||
next() // 脚本加载完再进入页面
|
||||
}
|
||||
|
||||
// 脚本加载失败：降级处理（避免页面卡住）
|
||||
script.onerror = () => {
|
||||
console.error('51LA 脚本加载失败')
|
||||
next()
|
||||
}
|
||||
|
||||
// 插入脚本到 <head>（优先执行）
|
||||
document.head.appendChild(script)
|
||||
} else {
|
||||
// 脚本已加载：直接触发统计并进入页面
|
||||
if (window._51la) {
|
||||
window._51la.trackPageView()
|
||||
}
|
||||
next()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
|
||||
105
src/views/WuOne.vue
Normal file
105
src/views/WuOne.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user