Compare commits

...

2 Commits

Author SHA1 Message Date
zhcnyuyang
bacb60fb43 Merge remote-tracking branch 'origin/newstartview' into newstartview
# Conflicts:
#	src/publicstyle.scss
2025-08-21 18:27:29 +08:00
zhcnyuyang
5c2a9ab91b 解决布局跳动问题 2025-08-21 18:26:35 +08:00
4 changed files with 43 additions and 32 deletions

View File

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

View File

@ -10,7 +10,7 @@ const { breakpoint } = useBootstrapBreakpoint();
<template> <template>
<div class="pageroot" id="serviceprocessroot"> <div class="pageroot" id="serviceprocessroot">
<div id="serviceprocessbanner" class="videorootbanner"> <div id="serviceprocessbanner">
<img class="videoimg" :src="Newbanner"/> <img class="videoimg" :src="Newbanner"/>
<div id="expbanner" class="bannerovervideo"> <div id="expbanner" class="bannerovervideo">
<div class="bannercontent"> <div class="bannercontent">
@ -131,6 +131,12 @@ export default {
@import "src/publicstyle.scss"; @import "src/publicstyle.scss";
#serviceprocessbanner{ #serviceprocessbanner{
width: 100% !important;
background-color: black !important;
position: relative !important;
z-index: 0 !important;
overflow: hidden !important;
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
aspect-ratio: 1.92; aspect-ratio: 1.92;
} }

View File

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

View File

@ -4,7 +4,8 @@ import { fileURLToPath, URL } from 'node:url'
import fs from 'fs' import fs from 'fs'
export default defineConfig({ 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: [ plugins: [
vue(), vue(),
// 添加自定义中间件来处理根路径 // 添加自定义中间件来处理根路径
@ -37,6 +38,11 @@ export default defineConfig({
input: { input: {
main: fileURLToPath(new URL('./index.html', import.meta.url)), main: fileURLToPath(new URL('./index.html', import.meta.url)),
start: fileURLToPath(new URL('./start.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]'
} }
} }
}, },