liangzejun/xyyh-hhj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

已交付版本

Browse Source
This commit is contained in:
梁泽军 2025-03-07 16:22:33 +08:00
parent 6bf1549b6d
commit 74b2d4db5e
6 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -6,6 +6,15 @@
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title><%- title%></title> <title><%- title%></title>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?346f878ea1d1115f53a9b372ce11d789";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head> </head>
<body> <body>

BIN
src/assets/images/index/title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 166 KiB

BIN
src/assets/images/index/xfl-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

72
src/components/Index.vue
View File

@ -77,15 +77,9 @@ import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
gsap.registerPlugin(MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin)
// 新增设备能力检测
const isLegacyiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
/OS [1-9]_/.test(navigator.userAgent)
console.log('isLegacyiOS', isLegacyiOS);
// 路线节点 // 路线节点
const progressArr = [0, 25, 45, 85, 100,] const progressArr = [0, 25, 45, 86, 100,]
const playerRef = ref(null) const playerRef = ref(null)
const imageFramePlayer = ref(null) const imageFramePlayer = ref(null)
@ -100,11 +94,11 @@ let animation = null
// 视频库 // 视频库
const videoList = [ const videoList = [
new URL(`../assets/video/video.mp4`, import.meta.url).href, 'https://cdn.xglpa.com/xyyh-hhj-video/1.mp4',
new URL(`../assets/video/video.mp4`, import.meta.url).href, 'https://cdn.xglpa.com/xyyh-hhj-video/2.mp4',
new URL(`../assets/video/video.mp4`, import.meta.url).href, 'https://cdn.xglpa.com/xyyh-hhj-video/3.mp4',
new URL(`../assets/video/video.mp4`, import.meta.url).href, 'https://cdn.xglpa.com/xyyh-hhj-video/4.mp4',
new URL(`../assets/video/gz.mp4`, import.meta.url).href, 'https://cdn.xglpa.com/xyyh-hhj-video/5.mp4',
] ]
// 帧图 // 帧图
@ -115,7 +109,7 @@ const frameList = Array.from({ length: 35 }, (_, index) => {
onMounted(() => { onMounted(() => {
initSvgAnimation() initSvgAnimation()
animationFn(); animationFn();
palyFrame() // palyFrame()
playerRef.value = new Plyr('#player', { playerRef.value = new Plyr('#player', {
controls: ['play', 'progress', 'current-time', 'fullscreen'], controls: ['play', 'progress', 'current-time', 'fullscreen'],
fullscreen: { fullscreen: {
@ -133,17 +127,17 @@ onMounted(() => {
}) })
// 帧图初始化 // 帧图初始化
const palyFrame = () => { // const palyFrame = () => {
imageFramePlayer.value = new ImageFramePlayer({ // imageFramePlayer.value = new ImageFramePlayer({
dom: document.getElementById("frameBox"), // dom: document.getElementById("frameBox"),
imgArr: frameList, // imgArr: frameList,
fps: 25, // fps: 25,
useCanvas: true, // useCanvas: true,
loop: -1, // loop: -1,
yoyo: true // yoyo: true
}); // });
imageFramePlayer.value.play(); // imageFramePlayer.value.play();
}; // };
@ -336,13 +330,13 @@ const animationFn = () => {
ease: "linear", ease: "linear",
yoyo: true, yoyo: true,
}); });
gsap.to(".index-title", { // gsap.to(".index-title", {
y: "-=20", // y: "-=20",
duration: 2, // duration: 2,
repeat: -1, // repeat: -1,
ease: "linear", // ease: "linear",
yoyo: true, // yoyo: true,
}); // });
gsap.to(".place-name", { gsap.to(".place-name", {
scale: "1.05", scale: "1.05",
@ -406,7 +400,7 @@ const animationFn = () => {
}) })
.from(".index-title", { .from(".index-title", {
autoAlpha: 0, autoAlpha: 0,
y: 20, y: -5,
duration: 1, duration: 1,
ease: "power1.out", ease: "power1.out",
}) })
@ -472,14 +466,15 @@ const animationFn = () => {
.index-title { .index-title {
@include bgSrc("index/title.png"); @include bgSrc("index/title.png");
@include pos(502px, 299px, 114px, 44px); @include pos(602px, 372px, 74px, -10px);
position: relative; position: relative;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
transform: scale3d(0.9, 0.9, 0.9);
.title-flower { .title-flower {
@include bgSrc("index/title-flower.png"); @include bgSrc("index/title-flower.png");
@include pos(58px, 56px, 246px, 79px); @include pos(58px, 56px, 159px, 279px);
} }
} }
@ -696,18 +691,21 @@ const animationFn = () => {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
width: 163px; width: 163px;
height: 153px; height: 133px;
transform: scale(1.5); transform: scale(1.2);
visibility: hidden; visibility: hidden;
/* 旧iOS需要绝对像素值 */ /* 旧iOS需要绝对像素值 */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
transform: scale(1.5); transform: scale(1.2);
} }
#frameBox { #frameBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
@include bgSrc("index/xfl-icon.png");
} }
} }

1
src/data/imgList.js
View File

@ -28,6 +28,7 @@ const page = [
"index/name-sh.png", "index/name-sh.png",
"index/name-wh.png", "index/name-wh.png",
"index/cls-btn.png", "index/cls-btn.png",
"index/xfl-icon.png",
"share.jpg", "share.jpg",
"xlz/xfl_35.png", "xlz/xfl_35.png",

2
src/page/Home/main.js
View File

@ -15,7 +15,7 @@ wxShare({
title: '兴福龙 护航记', title: '兴福龙 护航记',
desc: '趣味地图大探索，消保守护每一程', desc: '趣味地图大探索，消保守护每一程',
}) })
const vConsole = new VConsole(); // const vConsole = new VConsole();
// 测试环境开vconsole // 测试环境开vconsole
// if (isMobile()) { // if (isMobile()) {