264 lines
7.8 KiB
HTML
264 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
@font-face {
|
||
font-family: 'Alibaba';
|
||
src: url('./font/Alibaba-PuHuiTi-Medium.ttf');
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
}
|
||
|
||
.box {
|
||
position: absolute;
|
||
width: 60%;
|
||
height: 100%;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.progress-container {
|
||
width: 400px;
|
||
text-align: center;
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.progress-text {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.progress-percentage {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.progress-bar-container {
|
||
height: 16px;
|
||
/* background-color: #222; */
|
||
border-radius: 14px 0px 14px 0px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: flex;
|
||
padding: 2px 8px 2px 10px;
|
||
border: 1px solid rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.progress-segment {
|
||
height: 100%;
|
||
width: 8px;
|
||
margin-right: 3px;
|
||
background-color: rgba(204, 204, 204, 0.3);
|
||
border-radius: 0;
|
||
transform: skewX(-30deg);
|
||
/* 添加倾斜效果 */
|
||
}
|
||
|
||
.progress-segment.active {
|
||
background-color: #00FFFF;
|
||
/* box-shadow: 0 0 8px #00e5ff; */
|
||
}
|
||
|
||
.progress-segment:first-child {
|
||
border-top-left-radius: 2px;
|
||
border-bottom-left-radius: 2px;
|
||
}
|
||
|
||
.progress-segment:last-child {
|
||
border-top-right-radius: 2px;
|
||
border-bottom-right-radius: 2px;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.box_top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 70px;
|
||
color: #fff;
|
||
}
|
||
|
||
.box_top img {
|
||
width: 29px;
|
||
height: 29px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.box_top span {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.box_middle_title {
|
||
font-weight: 700;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.box_middle_title span {
|
||
font-size: 30px;
|
||
font-family: 'Alibaba';
|
||
}
|
||
|
||
.box_middle_title span:nth-child(1),
|
||
.box_middle_title div {
|
||
color: #fff;
|
||
}
|
||
|
||
.box_middle_title span:nth-child(2) {
|
||
color: #00FFFF;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.box_middle_title div {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.box_middle {
|
||
margin-bottom: 150px;
|
||
}
|
||
|
||
.box_middle_content {
|
||
width: 400px;
|
||
color: #ADF1FF;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 27px;
|
||
color: rgba(173, 241, 255, 1);
|
||
text-align: justify;
|
||
vertical-align: top;
|
||
font-family: 'Alibaba';
|
||
}
|
||
|
||
.box_middle,
|
||
.box_bottom {
|
||
margin-left: 30px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<video src="./start.mp4" autoplay loop class="background-video"
|
||
style="position:absolute;width: 100%;height: 100%;object-fit: cover;"></video>
|
||
<div class="box">
|
||
<!-- 顶部名称 -->
|
||
<div class="box_top">
|
||
<img src="./earth.png" alt="">
|
||
<span>实景三维数字孪生系统</span>
|
||
</div>
|
||
<!-- 中部介绍 -->
|
||
<div class="box_middle">
|
||
<div class="box_middle_title">
|
||
<span>欢迎进入</span>
|
||
<span>实景三维数字孪生系统</span>
|
||
<!-- <div>Welcome to the 3D Digital Twin System of Real Scenery</div> -->
|
||
</div>
|
||
<div class="box_middle_content">
|
||
<!-- 实景三维数字孪生系统将多维度地理空间数据与应用需求进行充分兼容整合，实现数据跨界融合、场景全角度可视、场景随意互动操作场景属性按需赋予等卓越功能 -->
|
||
自主掌控 / 智绘三维 / 全景赋能 / 慧见未来
|
||
</div>
|
||
</div>
|
||
<!-- 底部进度条 -->
|
||
<div class="box_bottom">
|
||
<div>
|
||
<div class="progress-container">
|
||
<div class="progress-info">
|
||
<div class="progress-text">数据融合加载中...</div>
|
||
<div class="progress-percentage">50%</div>
|
||
</div>
|
||
<div class="progress-bar-container" id="progressBar">
|
||
<!-- 进度条小盒子将通过JavaScript动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
// import { ipcRenderer } from 'electron';
|
||
const { ipcRenderer } = require('electron');
|
||
|
||
// 创建进度条小盒子
|
||
const progressBar = document.getElementById('progressBar');
|
||
const totalSegments = 35; // 总共的小盒子数量
|
||
const currentProgress = 0; // 当前进度百分比
|
||
const activeSegments = Math.floor(totalSegments * currentProgress / 100);
|
||
|
||
// 创建所有小盒子
|
||
for (let i = 0; i < totalSegments; i++) {
|
||
const segment = document.createElement('div');
|
||
segment.className = 'progress-segment';
|
||
if (i < activeSegments) {
|
||
segment.classList.add('active');
|
||
}
|
||
progressBar.appendChild(segment);
|
||
}
|
||
|
||
// 动态更新进度条函数
|
||
function updateProgress(percent) {
|
||
const segments = document.querySelectorAll('.progress-segment');
|
||
const activeCount = Math.floor(segments.length * percent / 100);
|
||
const progressPercentage = document.querySelector('.progress-percentage');
|
||
|
||
segments.forEach((segment, index) => {
|
||
if (index < activeCount) {
|
||
segment.classList.add('active');
|
||
} else {
|
||
segment.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
progressPercentage.textContent = percent + '%';
|
||
|
||
// 当进度达到100%时，通知主进程关闭启动页
|
||
if (percent >= 100) {
|
||
setTimeout(() => {
|
||
try {
|
||
// 先发送启动页已完成的消息
|
||
ipcRenderer.send('splash-completed');
|
||
} catch (error) {
|
||
console.error('无法发送完成消息:', error);
|
||
}
|
||
}, 500); // 缩短延迟时间到500毫秒
|
||
}
|
||
}
|
||
|
||
// 动态更新进度条，确保进度条能走完
|
||
let progress = 0;
|
||
// 增加初始延迟，给主窗口加载更多时间
|
||
setTimeout(() => {
|
||
const interval = setInterval(() => {
|
||
// 0-50%区间慢一点，每次增加1%
|
||
// 50-100%区间快一点，每次增加3%
|
||
if (progress < 50) {
|
||
progress += 2;
|
||
} else {
|
||
progress += 3.5;
|
||
}
|
||
if (progress > 100) {
|
||
progress = 100; // 确保不会超过100%
|
||
clearInterval(interval);
|
||
}
|
||
updateProgress(progress);
|
||
}, 100); // 保持100毫秒的间隔
|
||
}, 100); // 初始延迟500毫秒
|
||
</script>
|
||
</body>
|
||
|
||
</html> |