已交付版本
This commit is contained in:
梁泽军
parent
6bf1549b6d
commit
74b2d4db5e
@ -6,6 +6,15 @@
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 166 KiB |
BIN
src/assets/images/index/xfl-icon.png
Normal file
BIN
src/assets/images/index/xfl-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -77,15 +77,9 @@ import { MotionPathPlugin } from 'gsap/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 imageFramePlayer = ref(null)
|
||||
@ -100,11 +94,11 @@ let animation = null
|
||||
|
||||
// 视频库
|
||||
const videoList = [
|
||||
new URL(`../assets/video/video.mp4`, import.meta.url).href,
|
||||
new URL(`../assets/video/video.mp4`, import.meta.url).href,
|
||||
new URL(`../assets/video/video.mp4`, import.meta.url).href,
|
||||
new URL(`../assets/video/video.mp4`, import.meta.url).href,
|
||||
new URL(`../assets/video/gz.mp4`, import.meta.url).href,
|
||||
'https://cdn.xglpa.com/xyyh-hhj-video/1.mp4',
|
||||
'https://cdn.xglpa.com/xyyh-hhj-video/2.mp4',
|
||||
'https://cdn.xglpa.com/xyyh-hhj-video/3.mp4',
|
||||
'https://cdn.xglpa.com/xyyh-hhj-video/4.mp4',
|
||||
'https://cdn.xglpa.com/xyyh-hhj-video/5.mp4',
|
||||
]
|
||||
|
||||
// 帧图
|
||||
@ -115,7 +109,7 @@ const frameList = Array.from({ length: 35 }, (_, index) => {
|
||||
onMounted(() => {
|
||||
initSvgAnimation()
|
||||
animationFn();
|
||||
palyFrame()
|
||||
// palyFrame()
|
||||
playerRef.value = new Plyr('#player', {
|
||||
controls: ['play', 'progress', 'current-time', 'fullscreen'],
|
||||
fullscreen: {
|
||||
@ -133,17 +127,17 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
// 帧图初始化
|
||||
const palyFrame = () => {
|
||||
imageFramePlayer.value = new ImageFramePlayer({
|
||||
dom: document.getElementById("frameBox"),
|
||||
imgArr: frameList,
|
||||
fps: 25,
|
||||
useCanvas: true,
|
||||
loop: -1,
|
||||
yoyo: true
|
||||
});
|
||||
imageFramePlayer.value.play();
|
||||
};
|
||||
// const palyFrame = () => {
|
||||
// imageFramePlayer.value = new ImageFramePlayer({
|
||||
// dom: document.getElementById("frameBox"),
|
||||
// imgArr: frameList,
|
||||
// fps: 25,
|
||||
// useCanvas: true,
|
||||
// loop: -1,
|
||||
// yoyo: true
|
||||
// });
|
||||
// imageFramePlayer.value.play();
|
||||
// };
|
||||
|
||||
|
||||
|
||||
@ -336,13 +330,13 @@ const animationFn = () => {
|
||||
ease: "linear",
|
||||
yoyo: true,
|
||||
});
|
||||
gsap.to(".index-title", {
|
||||
y: "-=20",
|
||||
duration: 2,
|
||||
repeat: -1,
|
||||
ease: "linear",
|
||||
yoyo: true,
|
||||
});
|
||||
// gsap.to(".index-title", {
|
||||
// y: "-=20",
|
||||
// duration: 2,
|
||||
// repeat: -1,
|
||||
// ease: "linear",
|
||||
// yoyo: true,
|
||||
// });
|
||||
|
||||
gsap.to(".place-name", {
|
||||
scale: "1.05",
|
||||
@ -406,7 +400,7 @@ const animationFn = () => {
|
||||
})
|
||||
.from(".index-title", {
|
||||
autoAlpha: 0,
|
||||
y: 20,
|
||||
y: -5,
|
||||
duration: 1,
|
||||
ease: "power1.out",
|
||||
})
|
||||
@ -472,14 +466,15 @@ const animationFn = () => {
|
||||
|
||||
.index-title {
|
||||
@include bgSrc("index/title.png");
|
||||
@include pos(502px, 299px, 114px, 44px);
|
||||
@include pos(602px, 372px, 74px, -10px);
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
|
||||
.title-flower {
|
||||
@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;
|
||||
position: absolute;
|
||||
width: 163px;
|
||||
height: 153px;
|
||||
transform: scale(1.5);
|
||||
height: 133px;
|
||||
transform: scale(1.2);
|
||||
visibility: hidden;
|
||||
|
||||
/* 旧iOS需要绝对像素值 */
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
transform: scale(1.5);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#frameBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include bgSrc("index/xfl-icon.png");
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ const page = [
|
||||
"index/name-sh.png",
|
||||
"index/name-wh.png",
|
||||
"index/cls-btn.png",
|
||||
"index/xfl-icon.png",
|
||||
"share.jpg",
|
||||
|
||||
"xlz/xfl_35.png",
|
||||
|
||||
@ -15,7 +15,7 @@ wxShare({
|
||||
title: '兴福龙 护航记',
|
||||
desc: '趣味地图大探索，消保守护每一程',
|
||||
})
|
||||
const vConsole = new VConsole();
|
||||
// const vConsole = new VConsole();
|
||||
|
||||
// 测试环境开vconsole
|
||||
// if (isMobile()) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user