yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

解决布局跳动问题

Browse Source
This commit is contained in:
zhcnyuyang 2025-08-21 18:26:35 +08:00
parent 74d299a8c3
commit 5c2a9ab91b
7 changed files with 190 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
scripts/uploadAssets2volOSS.ts
View File

@ -8,6 +8,7 @@
import { TosClient } from '@volcengine/tos-sdk';
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';
// 配置信息
@ -97,15 +98,15 @@ async function uploadDirectory(dirPath: string): Promise<void> {
try {
const basePath = path.resolve(dirPath, '..');
const allFiles = await getAllFiles(dirPath);
console.log(`找到 ${allFiles.length} 个文件需要上传`);
// 创建上传任务队列
const uploadTasks = allFiles.map(filePath => uploadFile(filePath, basePath));
// 并发上传文件
await Promise.all(uploadTasks);
console.log('所有文件上传完成');
} catch (error) {
console.error('上传目录失败:', error);
@ -114,11 +115,10 @@ async function uploadDirectory(dirPath: string): Promise<void> {
// 主函数
async function main() {
// 使用 import.meta.url 替代 __dirname (ES 模块兼容)
const currentFileUrl = import.meta.url;
const currentFilePath = new URL(currentFileUrl).pathname;
const currentDir = path.dirname(currentFilePath);
const assetsDir = path.resolve(currentDir, '../dist/assets');
// ES 模块中获取当前文件目录的正确方式
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const assetsDir = path.resolve(__dirname, '../dist/assets');
console.log(`开始上传目录: ${assetsDir}`);
await uploadDirectory(assetsDir);
}
@ -128,4 +128,3 @@ main().catch(error => {
console.error('程序执行失败:', error);
process.exit(1);
});

46
src/components/Aboutus.vue
View File

@ -142,7 +142,51 @@ const { breakpoint } = useBootstrapBreakpoint();
<script>
export default {
name: "Aboutus"
name: "Aboutus",
mounted() {
this.$nextTick(function() {
this.handleMediaLoad();
});
},
methods: {
handleMediaLoad: function() {
const container = document.getElementById('aboutusbanner');
if (container) {
// 处理视频加载
const video = document.getElementById('abtbannervideo');
if (video) {
const handleVideoReady = () => {
container.classList.add('video-loaded');
video.removeEventListener('loadedmetadata', handleVideoReady);
video.removeEventListener('canplay', handleVideoReady);
};
video.addEventListener('loadedmetadata', handleVideoReady);
video.addEventListener('canplay', handleVideoReady);
if (video.videoWidth > 0) {
handleVideoReady();
}
}
// 处理图片加载（移动端GIF）
const img = document.querySelector('#aboutusbanner .videoimg');
if (img) {
const handleImageReady = () => {
container.classList.add('video-loaded');
img.removeEventListener('load', handleImageReady);
};
img.addEventListener('load', handleImageReady);
if (img.complete && img.naturalWidth > 0) {
handleImageReady();
}
}
}
}
}
}
</script>

35
src/components/Examples.vue
View File

@ -11,9 +11,6 @@ const { breakpoint } = useBootstrapBreakpoint();
<template>
<div class="pageroot" id="examplesprocessroot">
<div id="examplebanner" class="videorootbanner">
<!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
<!-- src="/ExpVideoPreload.png"-->
<!-- class="videoimg"/>-->
<video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
controls=""
id="expbannervideo"
@ -23,7 +20,6 @@ const { breakpoint } = useBootstrapBreakpoint();
<source :src="ExpVideo" type="video/mp4"></source>
</video>
<video v-else
:poster="ExpVideoPreload"
id="expbannervideo"
muted autoplay="autoplay"
loop="loop" playsinline webkit-playsinline
@ -52,7 +48,36 @@ const { breakpoint } = useBootstrapBreakpoint();
<script>
import axios from 'axios';
export default {
name: "Examples"
name: "Examples",
mounted() {
this.$nextTick(function() {
this.handleVideoLoad();
});
},
methods: {
handleVideoLoad: function() {
const video = document.getElementById('expbannervideo');
const container = document.getElementById('examplebanner');
if (video && container) {
// 优化：使用loadedmetadata事件，这是视频尺寸信息可用的最早时机
const handleVideoReady = () => {
container.classList.add('video-loaded');
// 移除事件监听器避免重复触发
video.removeEventListener('loadedmetadata', handleVideoReady);
video.removeEventListener('canplay', handleVideoReady);
};
video.addEventListener('loadedmetadata', handleVideoReady);
video.addEventListener('canplay', handleVideoReady);
// 如果视频已经有尺寸信息，立即触发
if (video.videoWidth > 0) {
handleVideoReady();
}
}
}
}
}
</script>

29
src/components/Homepage.vue
View File

@ -19,18 +19,14 @@ const { breakpoint } = useBootstrapBreakpoint();
<template>
<div id="homepageroot" class="pageroot">
<div id="homepagebanner" class="videorootbanner">
<!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
<!-- src="/bannervideopreload.png"-->
<!-- class="videoimg"/>-->
<video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
:poster="bannervideopreload" controls=""
id="bannervideo" muted autoplay="autoplay" loop="loop"
playsinline webkit-playsinline
class="bannervideos"
x5-video-player-type="h5-page">
<source :src="HpgVideo" type="video/mp4"></source>
</video>
<video v-else :poster="bannervideopreload"
<video v-else
id="bannervideo" muted autoplay="autoplay" loop="loop"
playsinline webkit-playsinline
class="bannervideos"
@ -179,6 +175,7 @@ export default {
mounted() {
this.$nextTick(function() {
this.video_autoplay();
this.handleVideoLoad();
});
},
methods:{
@ -190,6 +187,28 @@ export default {
video.play();
}
});
},
handleVideoLoad: function() {
const video = document.getElementById('bannervideo');
const container = document.getElementById('homepagebanner');
if (video && container) {
// 优化：使用loadedmetadata事件，这是视频尺寸信息可用的最早时机
const handleVideoReady = () => {
container.classList.add('video-loaded');
// 移除事件监听器避免重复触发
video.removeEventListener('loadedmetadata', handleVideoReady);
video.removeEventListener('canplay', handleVideoReady);
};
video.addEventListener('loadedmetadata', handleVideoReady);
video.addEventListener('canplay', handleVideoReady);
// 如果视频已经有尺寸信息，立即触发
if (video.videoWidth > 0) {
handleVideoReady();
}
}
}
}
}

40
src/components/ServiceProcess.vue
View File

@ -10,7 +10,7 @@ const { breakpoint } = useBootstrapBreakpoint();
<template>
<div class="pageroot" id="serviceprocessroot">
<div id="serviceprocessbanner" class="videorootbanner">
<div id="serviceprocessbanner">
<img class="videoimg" :src="Newbanner"/>
<div id="expbanner" class="bannerovervideo">
<div class="bannercontent">
@ -96,7 +96,34 @@ const { breakpoint } = useBootstrapBreakpoint();
<script>
export default {
name: "ServiceProcess"
name: "ServiceProcess",
mounted() {
this.$nextTick(function() {
this.handleImageLoad();
});
},
methods: {
handleImageLoad: function() {
const img = document.querySelector('#serviceprocessbanner .videoimg');
const container = document.getElementById('serviceprocessbanner');
if (img && container) {
// 图片加载完成后的处理
const handleImageReady = () => {
container.classList.add('video-loaded');
// 移除事件监听器避免重复触发
img.removeEventListener('load', handleImageReady);
};
img.addEventListener('load', handleImageReady);
// 如果图片已经加载完成
if (img.complete && img.naturalWidth > 0) {
handleImageReady();
}
}
}
}
}
</script>
@ -104,9 +131,18 @@ export default {
@import "src/publicstyle.scss";
#serviceprocessbanner{
width: 100% !important;
background-color: black !important;
position: relative !important;
z-index: 0 !important;
overflow: hidden !important;
@include media-breakpoint-between(xs, md) {
aspect-ratio: 1.92;
}
@include media-breakpoint-up(md){
aspect-ratio: 2.62026969;
}
}
#blackchart{

43
src/publicstyle.scss
View File

@ -35,12 +35,43 @@
}
.videorootbanner{
width: 100%;
height: auto;
background-color: black;
position: relative;
z-index: 0; // 明确设置父容器z-index
overflow: hidden; // 帮助创建新的堆叠上下文
width: 100% !important;
background-color: black !important;
position: relative !important;
z-index: 0 !important;
overflow: hidden !important;
// 始终保持固定的aspect-ratio作为占位，确保立即渲染
@include media-breakpoint-between(xs, md) {
aspect-ratio: 1.92 !important;
}
@include media-breakpoint-up(md){
aspect-ratio: 2.62026969 !important;
}
// 视频/图片元素的默认样式
video, .videoimg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
// 当媒体加载完成后，重新调整容器和媒体尺寸
&.video-loaded {
aspect-ratio: unset !important; // 移除固定比例
height: auto !important; // 高度自适应
video, .videoimg {
position: static !important; // 改为文档流布局
width: 100% !important; // 宽度占满
height: auto !important; // 高度自适应
object-fit: contain !important; // 保持媒体比例，完整显示
}
}
}
.bannervideos{

8
vite.config.js
View File

@ -4,7 +4,8 @@ import { fileURLToPath, URL } from 'node:url'
import fs from 'fs'
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? 'https://cdn.kdesign.top/' : '/',
// base: process.env.NODE_ENV === 'production' ? 'https://cdn.kdesign.top/' : '/',
base: '/',
plugins: [
vue(),
// 添加自定义中间件来处理根路径
@ -37,6 +38,11 @@ export default defineConfig({
input: {
main: fileURLToPath(new URL('./index.html', import.meta.url)),
start: fileURLToPath(new URL('./start.html', import.meta.url))
},
output: {
chunkFileNames: 'assets/[name]-[hash].js',
entryFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]'
}
}
},