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": {
|
"dependencies": {
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.6.8",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
|
"swiper": "^4.5.1",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
|
"vue-awesome-swiper": "^3.1.3",
|
||||||
"vue-router": "^3.5.1"
|
"vue-router": "^3.5.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
|
||||||
|
// 全局标记：51LA 脚本是否已加载（避免重复加载）
|
||||||
|
let is51ScriptLoaded = false
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@@ -58,6 +62,51 @@ const routes = [
|
|||||||
},
|
},
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../views/Share.vue')
|
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',
|
path: '/about',
|
||||||
name: '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