feat: 更新资源引用方式&构建上传 tos
This commit is contained in:
Volankey
parent
613bd00f10
commit
74d299a8c3
1737
package-lock.json
generated
1737
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,12 +2,15 @@
|
||||
"name": "kdoffical",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"upload-assets": "esno scripts/uploadAssets2volOSS.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@volcengine/tos-sdk": "^2.7.5",
|
||||
"axios": "^1.6.8",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "latest",
|
||||
@ -20,6 +23,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"esno": "^4.8.0",
|
||||
"vite": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
131
scripts/uploadAssets2volOSS.ts
Normal file
131
scripts/uploadAssets2volOSS.ts
Normal file
@ -0,0 +1,131 @@
|
||||
// Access Key ID Secret Access Key
|
||||
// AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==
|
||||
|
||||
// S3 endpoint：tos-cn-beijing.volces.com
|
||||
// 外网访问：tos-s3-cn-beijing.volces.com
|
||||
// Bucket 域名：kdesign-offical.tos-cn-beijing.volces.com
|
||||
|
||||
import { TosClient } from '@volcengine/tos-sdk';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
|
||||
// 配置信息
|
||||
const config = {
|
||||
accessKeyId: 'AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc',
|
||||
secretAccessKey: 'TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==',
|
||||
endpoint: 'tos-cn-beijing.volces.com',
|
||||
region: 'cn-beijing',
|
||||
bucket: 'kdesign-offical'
|
||||
};
|
||||
|
||||
// 创建 TOS 客户端
|
||||
const client = new TosClient({
|
||||
accessKeyId: config.accessKeyId,
|
||||
accessKeySecret: config.secretAccessKey,
|
||||
endpoint: config.endpoint,
|
||||
region: config.region
|
||||
});
|
||||
|
||||
// 获取文件的 Content-Type
|
||||
function getContentType(filePath: string): string {
|
||||
const ext = path.extname(filePath).toLowerCase();
|
||||
const contentTypeMap: Record<string, string> = {
|
||||
'.html': 'text/html',
|
||||
'.css': 'text/css',
|
||||
'.js': 'application/javascript',
|
||||
'.json': 'application/json',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.gif': 'image/gif',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.mp4': 'video/mp4',
|
||||
'.webp': 'image/webp',
|
||||
'.ico': 'image/x-icon',
|
||||
'.txt': 'text/plain',
|
||||
'.pdf': 'application/pdf',
|
||||
'.zip': 'application/zip'
|
||||
};
|
||||
|
||||
return contentTypeMap[ext] || 'application/octet-stream';
|
||||
}
|
||||
|
||||
// 递归获取目录下所有文件
|
||||
async function getAllFiles(dirPath: string, fileList: string[] = []): Promise<string[]> {
|
||||
const files = fs.readdirSync(dirPath);
|
||||
|
||||
for (const file of files) {
|
||||
const filePath = path.join(dirPath, file);
|
||||
const stat = fs.statSync(filePath);
|
||||
|
||||
if (stat.isDirectory()) {
|
||||
await getAllFiles(filePath, fileList);
|
||||
} else {
|
||||
fileList.push(filePath);
|
||||
}
|
||||
}
|
||||
|
||||
return fileList;
|
||||
}
|
||||
|
||||
// 上传单个文件
|
||||
async function uploadFile(filePath: string, basePath: string): Promise<void> {
|
||||
try {
|
||||
// 计算相对路径作为对象键名
|
||||
const key = filePath.replace(basePath, '').replace(/^\//, '');
|
||||
const contentType = getContentType(filePath);
|
||||
const fileContent = fs.readFileSync(filePath);
|
||||
|
||||
console.log(`上传文件: ${filePath} -> ${key}`);
|
||||
|
||||
const response = await client.putObject({
|
||||
bucket: config.bucket,
|
||||
key: key,
|
||||
body: fileContent,
|
||||
contentType: contentType
|
||||
});
|
||||
|
||||
console.log(`上传成功: ${key}, 请求ID: ${response.requestId}`);
|
||||
} catch (error) {
|
||||
console.error(`上传文件 ${filePath} 失败:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 上传目录下所有文件
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 主函数
|
||||
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');
|
||||
console.log(`开始上传目录: ${assetsDir}`);
|
||||
await uploadDirectory(assetsDir);
|
||||
}
|
||||
|
||||
// 执行主函数
|
||||
main().catch(error => {
|
||||
console.error('程序执行失败:', error);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@ -1,6 +1,23 @@
|
||||
<script setup>
|
||||
import { useBootstrapBreakpoint } from './useBreakpoint.js';
|
||||
import Wanted from "./Wanted.vue";
|
||||
import aboutusVideoGif from "@/assets/AboutusVideo.gif";
|
||||
import aboutusVideoPreload from "@/assets/AboutusVideoPreload.png";
|
||||
import aboutusVideoMp4 from "@/assets/AboutusVideo.mp4";
|
||||
import pcp1wep from "@/assets/AboutusRes/pcp1wep.png";
|
||||
import pcp2wep from "@/assets/AboutusRes/pcp2wep.png";
|
||||
import pcp3wep from "@/assets/AboutusRes/pcp3wep.png";
|
||||
import pcp4wep from "@/assets/AboutusRes/pcp4wep.png";
|
||||
import pcp5wep from "@/assets/AboutusRes/pcp5wep.png";
|
||||
import pcp6wep from "@/assets/AboutusRes/pcp6wep.png";
|
||||
import pcp7wep from "@/assets/AboutusRes/pcp7wep.png";
|
||||
import pcp1 from "@/assets/AboutusRes/pcp1.png";
|
||||
import pcp2 from "@/assets/AboutusRes/pcp2.png";
|
||||
import pcp3 from "@/assets/AboutusRes/pcp3.png";
|
||||
import pcp4 from "@/assets/AboutusRes/pcp4.png";
|
||||
import pcp5 from "@/assets/AboutusRes/pcp5.png";
|
||||
import pcp6 from "@/assets/AboutusRes/pcp6.png";
|
||||
import pcp7 from "@/assets/AboutusRes/pcp7.png";
|
||||
const { breakpoint } = useBootstrapBreakpoint();
|
||||
</script>
|
||||
|
||||
@ -8,27 +25,27 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
<div class="pageroot" id="aboutusroot">
|
||||
<div id="aboutusbanner" class="videorootbanner">
|
||||
<!-- <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
|
||||
<!-- src="/AboutusVideo.gif"-->
|
||||
<!-- :src="aboutusVideoGif"-->
|
||||
<!-- class="videoimg"/>-->
|
||||
<img v-if="$isMobile.phone"
|
||||
src="/AboutusVideo.gif"
|
||||
:src="aboutusVideoGif"
|
||||
class="videoimg"/>
|
||||
<video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
|
||||
poster="/AboutusVideoPreload.png"
|
||||
:poster="aboutusVideoPreload"
|
||||
controls=""
|
||||
id="abtbannervideo"
|
||||
muted autoplay="autoplay"
|
||||
loop="loop" playsinline webkit-playsinline
|
||||
class="bannervideos">
|
||||
<source src="/AboutusVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="aboutusVideoMp4" type="video/mp4"></source>
|
||||
</video>
|
||||
<video v-else
|
||||
poster="/AboutusVideoPreload.png"
|
||||
:poster="aboutusVideoPreload"
|
||||
id="abtbannervideo"
|
||||
muted autoplay="autoplay"
|
||||
loop="loop" playsinline webkit-playsinline
|
||||
class="bannervideos">
|
||||
<source src="/AboutusVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="aboutusVideoMp4" type="video/mp4"></source>
|
||||
</video>
|
||||
<div id="abtbanner" class="bannerovervideo">
|
||||
<div class="bannercontent">
|
||||
@ -74,44 +91,44 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
<span class="normalcontenttitle" style="background-color: white;">设计瞬间</span>
|
||||
</div>
|
||||
<div v-if="breakpoint==='xs'||breakpoint==='sm'" id="sjsjimgwep">
|
||||
<img src="/AboutusRes/pcp1wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp2wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp3wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp4wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp5wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp6wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img src="/AboutusRes/pcp7wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp1wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp2wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp3wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp4wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp5wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp6wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
<img :src="pcp7wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
|
||||
</div>
|
||||
<div v-else id="sjsjimg">
|
||||
<div class="imgrow" style="width: 100%; height: auto;">
|
||||
<div class="imageitem" style="width: 62.571428571428571428571428571429%;">
|
||||
<img src="/AboutusRes/pcp1.png"/>
|
||||
<img :src="pcp1"/>
|
||||
</div>
|
||||
<div class="imageitem" style="width:1.428571428571428571428571428571%;"></div>
|
||||
<div class="imageitem" style="width: 36%;background-color: black;">
|
||||
<img src="/AboutusRes/pcp2.png"/>
|
||||
<img :src="pcp2"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
|
||||
<div class="imageitem" style="width: 32.142857142857142857142857142857%">
|
||||
<img class="sjsjpic" src="/AboutusRes/pcp3.png"/>
|
||||
<img class="sjsjpic" :src="pcp3"/>
|
||||
</div>
|
||||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||||
<div class="imageitem" style="width: 32.142857142857142857142857142857%">
|
||||
<img src="/AboutusRes/pcp4.png"/>
|
||||
<img :src="pcp4"/>
|
||||
</div>
|
||||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||||
<div class="imageitem" style="width: 32.857142857142857142857142857143%">
|
||||
<img src="/AboutusRes/pcp5.png"/>
|
||||
<img :src="pcp5"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
|
||||
<div class="imageitem" style="width: 50%;">
|
||||
<img src="/AboutusRes/pcp6.png"/>
|
||||
<img :src="pcp6"/>
|
||||
</div>
|
||||
<div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
|
||||
<div class="imageitem" style="width: 48.571428571428571428571428571429%;">
|
||||
<img src="/AboutusRes/pcp7.png"/>
|
||||
<img :src="pcp7"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -162,11 +179,11 @@ export default {
|
||||
align-items: flex-start; /* 控制水平对齐 - 靠左 */
|
||||
justify-content: center;
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-image: url('/AboutusRes/aboutusbanner_wep.png');
|
||||
background-image: url('@/assets/AboutusRes/aboutusbanner_wep.png');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
background-image: url('/AboutusRes/aboutusbanner.png');
|
||||
background-image: url('@/assets/AboutusRes/aboutusbanner.png');
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,12 +217,12 @@ export default {
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-size:100%;
|
||||
padding-bottom: 112px;
|
||||
background-image: url('/AboutusRes/innerteamwep.png');
|
||||
background-image: url('@/assets/AboutusRes/innerteamwep.png');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-bottom: 164px;
|
||||
background-image: url('/AboutusRes/innerteam.png');
|
||||
background-image: url('@/assets/AboutusRes/innerteam.png');
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
|
||||
@ -41,14 +41,14 @@ export default {
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-image: url('/bottom/bg_wep.png');
|
||||
background-image: url('@/assets/bottom/bg_wep.png');
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
background-image: url('/bottom/bg_pc.png');
|
||||
background-image: url('@/assets/bottom/bg_pc.png');
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
@ -1,30 +1,34 @@
|
||||
<script setup>
|
||||
import ExamplesContent from './ExamplesContent.vue';
|
||||
import { useBootstrapBreakpoint } from './useBreakpoint.js'; // 假设 useBreakpoint.js 路径正确
|
||||
import ExpVideoPreload from "@/assets/ExpVideoPreload.png";
|
||||
import ExpVideo from "@/assets/ExpVideo.mp4";
|
||||
import Examplesbanner_wep from "@/assets/ExamplesRes/Examplesbanner_wep.png";
|
||||
import Examplesbanner from "@/assets/ExamplesRes/Examplesbanner.png";
|
||||
const { breakpoint } = useBootstrapBreakpoint();
|
||||
</script>
|
||||
|
||||
<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"/>-->
|
||||
<!-- <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"
|
||||
muted autoplay="autoplay"
|
||||
loop="loop" playsinline webkit-playsinline
|
||||
class="bannervideos">
|
||||
<source src="/ExpVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="ExpVideo" type="video/mp4"></source>
|
||||
</video>
|
||||
<video v-else
|
||||
poster="/ExpVideoPreload.png"
|
||||
:poster="ExpVideoPreload"
|
||||
id="expbannervideo"
|
||||
muted autoplay="autoplay"
|
||||
loop="loop" playsinline webkit-playsinline
|
||||
class="bannervideos">
|
||||
<source src="/ExpVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="ExpVideo" type="video/mp4"></source>
|
||||
</video>
|
||||
<div id="expbanner" class="bannerovervideo">
|
||||
<div class="bannercontent">
|
||||
@ -57,11 +61,11 @@ export default {
|
||||
|
||||
#examplesprocessbanner{
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-image: url('/ExamplesRes/Examplesbanner_wep.png');
|
||||
background-image: url('@/assets/ExamplesRes/Examplesbanner_wep.png');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
background-image: url('/ExamplesRes/Examplesbanner.png');
|
||||
background-image: url('@/assets/ExamplesRes/Examplesbanner.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,7 +28,7 @@ export default {
|
||||
justify-content: left;
|
||||
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-image: url('/bottom/bg_wep.png');
|
||||
background-image: url('@/assets/bottom/bg_wep.png');
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
padding-top: 66px;
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
@include media-breakpoint-between(md,xxl){
|
||||
margin-top: 0px;
|
||||
background-image: url('/bottom/bg_pc.png');
|
||||
background-image: url('@/assets/bottom/bg_pc.png');
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
padding-top: 109px;
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
@include media-breakpoint-up(xxl) {
|
||||
min-height: 759px;
|
||||
margin-top: 0px;
|
||||
background-image: url('/bottom/bg_pc.png');
|
||||
background-image: url('@/assets/bottom/bg_pc.png');
|
||||
padding-left: 256px;
|
||||
padding-top: 109px;
|
||||
padding-bottom: 109px;
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
// import { useBootstrapBreakpoint } from './useBreakpoint.js'; // Kept as in original
|
||||
// const { breakpoint } = useBootstrapBreakpoint(); // Kept as in original
|
||||
import logobeginPCpld from '@/assets/logobeginPCpld.png';
|
||||
import logobeginPC from '@/assets/logobeginPC.mp4';
|
||||
import intopagedir from '@/assets/intopagedir.svg';
|
||||
|
||||
const mobileFrames = import.meta.glob('@/assets/openvideo/*.jpg', { eager: true, as: 'url' });
|
||||
const tabletFrames = import.meta.glob('@/assets/openvideopad/*.jpg', { eager: true, as: 'url' });
|
||||
|
||||
export default defineComponent({
|
||||
name: "HeaderVideo",
|
||||
@ -22,28 +26,32 @@ export default defineComponent({
|
||||
isLoading: true, // True while loading initial frames needed for playback
|
||||
loadingProgress: 0, // Progress for loading initial frames (0-100%)
|
||||
preloadedImages: [], // Array to store preloaded Image objects
|
||||
logobeginPCpld: logobeginPCpld,
|
||||
logobeginPC: logobeginPC,
|
||||
intopagedir: intopagedir
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
frames() {
|
||||
const arr = [];
|
||||
if (this.$isMobile.phone) {
|
||||
// 手机模式：使用 props 提供的 basePath 和 framesCount
|
||||
// basePath 默认为 '/openvideo/', framesCount 默认为 82
|
||||
for (let i = 0; i <= this.framesCount; i++) {
|
||||
const name = String(i).padStart(2, '0') + '.jpg';
|
||||
arr.push(this.basePath + name);
|
||||
const path = `/src/assets/openvideo/${name}`;
|
||||
if (mobileFrames[path]) {
|
||||
arr.push(mobileFrames[path]);
|
||||
}
|
||||
}
|
||||
} else if (this.$isMobile.tablet) {
|
||||
// 平板模式：使用指定的 basePath 和 framesCount
|
||||
const tabletBasePath = '/openvideopad/';
|
||||
const tabletFramesCount = 90;
|
||||
for (let i = 0; i <= tabletFramesCount; i++) {
|
||||
const name = String(i).padStart(2, '0') + '.jpg'; // Pad to 3 digits for tablet
|
||||
arr.push(tabletBasePath + name);
|
||||
const name = String(i).padStart(2, '0') + '.jpg';
|
||||
const path = `/src/assets/openvideopad/${name}`;
|
||||
if (tabletFrames[path]) {
|
||||
arr.push(tabletFrames[path]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 对于桌面设备，arr 将为空，因为它们使用 <video> 标签
|
||||
return arr;
|
||||
},
|
||||
// Number of frames that need to be loaded before playback can start
|
||||
@ -249,12 +257,12 @@ export default defineComponent({
|
||||
:alt="alt"
|
||||
class="simple-frame-player"
|
||||
/>
|
||||
<video v-if="(!$isMobile.phone&&!$isMobile.tablet)" poster="/logobeginPCpld.png"
|
||||
<video v-if="(!$isMobile.phone&&!$isMobile.tablet)" :poster="logobeginPCpld"
|
||||
id="pcstart" muted autoplay
|
||||
playsinline webkit-playsinline
|
||||
class="startvideo"
|
||||
x5-video-player-type="h5-page">
|
||||
<source src="/logobeginPC.mp4" type="video/mp4"></source>
|
||||
<source :src="logobeginPC" type="video/mp4"></source>
|
||||
</video>
|
||||
</div>
|
||||
<div id="beginbottom" v-if="false">
|
||||
@ -262,7 +270,7 @@ export default defineComponent({
|
||||
<div class="normalcontentdiv" id="intovideoreq">
|
||||
<span class="normalcontenttitle" id="intoa">
|
||||
<u>进入kdesign.top</u>
|
||||
<img src="/intopagedir.svg" id="intopagesvg"/>
|
||||
<img :src="intopagedir" id="intopagesvg"/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -2,28 +2,40 @@
|
||||
import ExamplesContent from './ExamplesContent.vue'
|
||||
import Partners from './Tools/Partners.vue'
|
||||
import { useBootstrapBreakpoint } from './useBreakpoint.js';
|
||||
import bannervideopreload from "@/assets/bannervideopreload.png";
|
||||
import HpgVideo from "@/assets/HpgVideo.mp4";
|
||||
import kdesignblack from "@/assets/HomepageRes/kdesignblack.svg";
|
||||
import NewK from "@/assets/HomepageRes/NewK.png";
|
||||
import cptycx from "@/assets/HomepageRes/fwfw/cptycx.png";
|
||||
import ppty from "@/assets/HomepageRes/fwfw/ppty.png";
|
||||
import swdhcysj from "@/assets/HomepageRes/fwfw/swdhcysj.png";
|
||||
import qyszhzx from "@/assets/HomepageRes/fwfw/qyszhzx.png";
|
||||
import cytg from "@/assets/HomepageRes/fwfw/cytg.png";
|
||||
import ddx from "@/assets/HomepageRes/fwfw/2ddx.png";
|
||||
|
||||
const { breakpoint } = useBootstrapBreakpoint();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="homepageroot" class="pageroot">
|
||||
<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.png" controls=""
|
||||
:poster="bannervideopreload" controls=""
|
||||
id="bannervideo" muted autoplay="autoplay" loop="loop"
|
||||
playsinline webkit-playsinline
|
||||
class="bannervideos"
|
||||
x5-video-player-type="h5-page">
|
||||
<source src="/HpgVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="HpgVideo" type="video/mp4"></source>
|
||||
</video>
|
||||
<video v-else poster="/bannervideopreload.png"
|
||||
<video v-else :poster="bannervideopreload"
|
||||
id="bannervideo" muted autoplay="autoplay" loop="loop"
|
||||
playsinline webkit-playsinline
|
||||
class="bannervideos"
|
||||
x5-video-player-type="h5-page">
|
||||
<source src="/HpgVideo.mp4" type="video/mp4"></source>
|
||||
<source :src="HpgVideo" type="video/mp4"></source>
|
||||
</video>
|
||||
<div id="hpbanner" class="bannerovervideo">
|
||||
<div class="bannercontent">
|
||||
@ -43,7 +55,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
<div id="secondwhite" class="pageroot">
|
||||
<div id="whiteK" class="normalcontentdiv">
|
||||
<span class="normalcontenttitle">
|
||||
<img src="/HomepageRes/kdesignblack.svg" id="logoblack"/>
|
||||
<img :src="kdesignblack" id="logoblack"/>
|
||||
</span>
|
||||
<span class="normalcontenttext">
|
||||
一家涵盖<b>品牌创新/产品设计/新媒体制作</b>的一站式综合服务体<br />我们致力于聚焦数字时代的人文体验，整合各领域专业与优势，构建用户与产品/品牌的新型关系
|
||||
@ -51,11 +63,11 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div id="bigKlogomobile" v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'||breakpoint==='lg'">
|
||||
<div id="bigKlogo">
|
||||
<img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
|
||||
<img :src="NewK" width="100%" height="100%"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bigKlogo" v-else>
|
||||
<img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
|
||||
<img :src="NewK" width="100%" height="100%"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageroot" id="fwfw" style="background-color: black;">
|
||||
@ -70,7 +82,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
<div id="fwfwlogos">
|
||||
<div class="fwfwlogodiv" id="fwfwlogo01">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/cptycx.png"/>
|
||||
<img :src="cptycx"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -83,7 +95,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div class="fwfwlogodiv" id="fwfwlogo02">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/ppty.png"/>
|
||||
<img :src="ppty"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -96,7 +108,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div class="fwfwlogodiv" id="fwfwlogo03">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/swdhcysj.png"/>
|
||||
<img :src="swdhcysj"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -109,7 +121,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div class="fwfwlogodiv" id="fwfwlogo04">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/qyszhzx.png"/>
|
||||
<img :src="qyszhzx"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -122,7 +134,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div class="fwfwlogodiv" id="fwfwlogo05">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/cytg.png"/>
|
||||
<img :src="cytg"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -135,7 +147,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
<div class="fwfwlogodiv" id="fwfwlogo06">
|
||||
<div class="fwfwlogoimdiv">
|
||||
<img src="/HomepageRes/fwfw/2ddx.png"/>
|
||||
<img :src="ddx"/>
|
||||
</div>
|
||||
<div class="fwfwitemcontent">
|
||||
<span class="fwfwitemcn">
|
||||
@ -158,7 +170,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
</div>
|
||||
</a>
|
||||
<Partners></Partners>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
<script setup>
|
||||
import { useBootstrapBreakpoint } from './useBreakpoint.js';
|
||||
import Newbanner from '@/assets/ServiceProcessRes/Newbanner.png';
|
||||
import designopinionwep from '@/assets/ServiceProcessRes/designopinionwep.png';
|
||||
import designopinion from '@/assets/ServiceProcessRes/designopinion.png';
|
||||
import designprocedurewep from '@/assets/ServiceProcessRes/designprocedurewep.png';
|
||||
import designprocedure from '@/assets/ServiceProcessRes/designprocedure.png';
|
||||
const { breakpoint } = useBootstrapBreakpoint();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pageroot" id="serviceprocessroot">
|
||||
<div id="serviceprocessbanner" class="videorootbanner">
|
||||
<img class="videoimg" src="/ServiceProcessRes/Newbanner.png"/>
|
||||
<img class="videoimg" :src="Newbanner"/>
|
||||
<div id="expbanner" class="bannerovervideo">
|
||||
<div class="bannercontent">
|
||||
<span class="banner1">以体验设计重构用户关系<br /></span>
|
||||
@ -30,7 +35,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 20px;
|
||||
margin-bottom: 41px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designopinionwep.png"
|
||||
<img :src="designopinionwep"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
<div v-if="breakpoint==='md'||breakpoint==='lg'"
|
||||
@ -39,7 +44,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 79px;
|
||||
margin-bottom: 95px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designopinion.png"
|
||||
<img :src="designopinion"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
<div v-if="breakpoint==='xl'||breakpoint==='xxl'"
|
||||
@ -48,7 +53,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 79px;
|
||||
margin-bottom: 95px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designopinion.png"
|
||||
<img :src="designopinion"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +69,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 20px;
|
||||
margin-bottom: 41px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designprocedurewep.png"
|
||||
<img :src="designprocedurewep"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
<div v-if="breakpoint==='md'||breakpoint==='lg'"
|
||||
@ -73,7 +78,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 121px;
|
||||
margin-bottom: 95px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designprocedure.png"
|
||||
<img :src="designprocedure"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
<div v-if="breakpoint==='xl'||breakpoint==='xxl'"
|
||||
@ -82,7 +87,7 @@ const { breakpoint } = useBootstrapBreakpoint();
|
||||
margin-top: 121px;
|
||||
margin-bottom: 95px;
|
||||
max-width:100%;height:auto;">
|
||||
<img src="/ServiceProcessRes/designprocedure.png"
|
||||
<img :src="designprocedure"
|
||||
width="100%" height="100%"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -108,11 +113,11 @@ export default {
|
||||
width:100%;
|
||||
background-size: 100% 100%;
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
background-image: url('/ServiceProcessRes/blackbgwep.png');
|
||||
background-image: url('@/assets/ServiceProcessRes/blackbgwep.png');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
background-image: url('/ServiceProcessRes/blackbgpc.png');
|
||||
background-image: url('@/assets/ServiceProcessRes/blackbgpc.png');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,56 +2,52 @@
|
||||
<div id="toproot">
|
||||
<MobileToolbar></MobileToolbar>
|
||||
<div id="topbar">
|
||||
<a href="/">
|
||||
<router-link to="/">
|
||||
<img
|
||||
id="toplogo"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/KDESIGNlogo.svg"/>
|
||||
</a>
|
||||
:src="KDESIGNlogo"/>
|
||||
</router-link>
|
||||
<img
|
||||
id="topcode"
|
||||
class="label_1"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/topcode.png"/>
|
||||
:src="topcode"/>
|
||||
<a href="javascript:;" @click="show_weptoolbar">
|
||||
<img
|
||||
id="wepmenubutton"
|
||||
class="label_1"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/waptoptoolbarbutton.png"/>
|
||||
:src="waptoptoolbarbutton"/>
|
||||
</a>
|
||||
<span id="rightcontent">
|
||||
<span class="toptext" id="hyal"
|
||||
:class="{
|
||||
curpagetoptext: this.isActiveRoute('Examples')}">
|
||||
<a href="/Examples"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
<router-link to="/Examples">
|
||||
行业案例
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="toptext" id="fwlc"
|
||||
:class="{
|
||||
curpagetoptext: this.isActiveRoute('ServiceProcess')}">
|
||||
<a href="/ServiceProcess"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
<router-link to="/ServiceProcess">
|
||||
服务流程
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="toptext" id="gywm"
|
||||
:class="{
|
||||
curpagetoptext: this.isActiveRoute('Aboutus')}">
|
||||
<a href="/Aboutus"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
<router-link to="/Aboutus">
|
||||
关于我们
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="toptext" id="lxwm"
|
||||
:class="{
|
||||
curpagetoptext: this.isActiveRoute('ContactUs')}">
|
||||
<a href="/ContactUs"
|
||||
style="text-decoration: none; color: inherit;">
|
||||
<router-link to="/ContactUs">
|
||||
联系我们
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -60,11 +56,21 @@
|
||||
|
||||
<script>
|
||||
import MobileToolbar from "./Tools/MobileToolbar.vue";
|
||||
import KDESIGNlogo from "@/assets/toolbar/KDESIGNlogo.svg";
|
||||
import topcode from "@/assets/toolbar/topcode.png";
|
||||
import waptoptoolbarbutton from "@/assets/toolbar/waptoptoolbarbutton.png";
|
||||
export default {
|
||||
name: "Toolbar",
|
||||
components: {
|
||||
MobileToolbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
KDESIGNlogo,
|
||||
topcode,
|
||||
waptoptoolbarbutton
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(function() {
|
||||
this.contain_toolbar();
|
||||
@ -113,11 +119,14 @@ export default {
|
||||
@import "node_modules/bootstrap/scss/_variables.scss";
|
||||
@import "node_modules/bootstrap/scss/_mixins.scss";
|
||||
|
||||
.toptext
|
||||
{
|
||||
.toptext {
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
}
|
||||
@include media-breakpoint-up(md){
|
||||
a, .router-link-active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
width: 99px;
|
||||
height: 28px;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
<br/>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<div class="qritem">
|
||||
<img src="/bottom/qrwecom01.png" class="qrcodeimg">
|
||||
<img :src="qrwecom01" class="qrcodeimg">
|
||||
<span class="itemcontent">
|
||||
项目经理
|
||||
</span>
|
||||
</div>
|
||||
<div class="qritem" style="margin-right: 0px;margin-left: auto;">
|
||||
<img src="/bottom/qrwecom02.png" class="qrcodeimg">
|
||||
<img :src="qrwecom02" class="qrcodeimg">
|
||||
<span class="itemcontent">
|
||||
商务经理
|
||||
</span>
|
||||
@ -26,7 +26,7 @@
|
||||
<span class="itemtitle">WECHAT / 公众号</span>
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<div class="qritem" id="wechatpublic">
|
||||
<img src="/bottom/qrwecom03.png" class="qrcodeimg">
|
||||
<img :src="qrwecom03" class="qrcodeimg">
|
||||
<span class="itemcontent">
|
||||
K DESIGN Lab
|
||||
</span>
|
||||
@ -60,8 +60,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import qrwecom01 from "@/assets/bottom/qrwecom01.png";
|
||||
import qrwecom02 from "@/assets/bottom/qrwecom02.png";
|
||||
import qrwecom03 from "@/assets/bottom/qrwecom03.png";
|
||||
export default {
|
||||
name: "FooterContent"
|
||||
name: "FooterContent",
|
||||
data() {
|
||||
return {
|
||||
qrwecom01,
|
||||
qrwecom02,
|
||||
qrwecom03
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<script setup>
|
||||
import FooterContent from './FooterContent.vue'
|
||||
import weptoolbarlogo from "@/assets/MobileToolbar/weptoolbarlogo.png";
|
||||
import closeweptoolbar from "@/assets/MobileToolbar/closeweptoolbar.png";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -10,7 +12,7 @@ import FooterContent from './FooterContent.vue'
|
||||
<img
|
||||
id="image_1"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/MobileToolbar/weptoolbarlogo.png"
|
||||
:src="weptoolbarlogo"
|
||||
/>
|
||||
</a>
|
||||
<span style="width: 100%;"></span>
|
||||
@ -18,7 +20,7 @@ import FooterContent from './FooterContent.vue'
|
||||
<img
|
||||
id="thumbnail_1"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/MobileToolbar/closeweptoolbar.png"
|
||||
:src="closeweptoolbar"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,7 @@ const routes= [
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
history: createWebHistory('/'),
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
// 如果有保存的滚动位置 (例如，当用户点击浏览器的后退/前进按钮时)，则恢复该位置
|
||||
|
||||
@ -4,6 +4,7 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
import fs from 'fs'
|
||||
|
||||
export default defineConfig({
|
||||
base: process.env.NODE_ENV === 'production' ? 'https://cdn.kdesign.top/' : '/',
|
||||
plugins: [
|
||||
vue(),
|
||||
// 添加自定义中间件来处理根路径
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user