A1300399510/PCAdmissionOfficer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): 重构箭头图标布局和样式

Browse Source 
优化箭头图标的布局方式，将直接定位改为通过容器相对定位
修复箭头图标在不同状态下的对齐问题
调整专业名称的显示样式防止换行
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-08-11 18:57:33 +08:00
parent 047ddd57f6
commit 0e5f3f32cf
5 changed files with 7619 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
1.html
View File

@@ -1,49 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>HEVC转H.264播放器</title>
<style>
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
}
.progress-container {
height: 8px;
background: #eee;
border-radius: 4px;
margin: 10px 0;
}
#progressBar {
height: 100%;
background: #4285f4;
width: 0%;
}
#videoContainer {
width: 100%;
background: #000;
border-radius: 8px;
overflow: hidden;
position: relative;
min-height: 300px;
}
video {
width: 100%;
}
</style>
<meta charset="UTF-8" />
<title>H.265 硬解码 (WebCodecs)</title>
</head>
<body>
<div class="container">
<h1>HEVC转H.264播放器</h1>
<input type="file" id="hevcFileInput" accept="video/*" />
<div id="conversionStatus">请选择HEVC编码的视频文件</div>
<div class="progress-container">
<div id="progressBar"></div>
</div>
<div id="videoContainer"></div>
</div>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
<!-- 引入核心脚本 -->
<script src="hevc-to-h264-player.js"></script>
<canvas id="canvas" width="1280" height="720"></canvas>
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
async function transcodeToH265(inputFile) {
// 确保FFmpeg加载
if (!ffmpeg.isLoaded()) {
await ffmpeg.load();
}
// 将输入文件写入FFmpeg的文件系统
ffmpeg.FS("writeFile", "input.mp4", await fetchFile(inputFile));
// 执行转码命令：将输入文件转码为H.265编码，输出为output.mp4
await ffmpeg.run("-i", "input.mp4", "-c:v", "libx265", "output.mp4");
// 从FFmpeg文件系统中读取输出文件
const data = ffmpeg.FS("readFile", "output.mp4");
// 创建Blob和URL以供下载
const outputUrl = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
return outputUrl;
}
// 使用示例：当用户选择文件后
document.getElementById("fileInput").addEventListener("change", async (e) => {
const file = e.target.files[0];
if (!file) return;
const outputUrl = await transcodeToH265(file);
// 创建一个下载链接
const a = document.createElement("a");
a.href = outputUrl;
a.download = "output_h265.mp4";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
</script>
</body>
</html>

50
css/index.css
View File

@@ -549,12 +549,15 @@ body {
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .name {
white-space: nowrap;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-top: 3px;
margin-left: 12px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .margin-b-10 {
@@ -829,11 +832,19 @@ body {
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch .svg {
fill: #7d2882;
}
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
}
@@ -1059,11 +1070,19 @@ body {
left: 0;
z-index: -1;
}
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
}
.admission-officer .admission-body .retrospect .pages .arrows {
@@ -1175,14 +1194,21 @@ body {
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch .svg {
fill: #3c7de9;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows {
transform: translateY(-50%);
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows-box {
position: relative;
width: 9px;
height: 100%;
margin-left: 5px;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows-box .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
margin-top: 3px;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.pitch .arrows {
fill: #fff;
@@ -1195,7 +1221,7 @@ body {
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .arrows {
fill: #fff;
transform: translateY(-50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-mask {
display: block;

65
css/index.less
View File

@@ -651,12 +651,16 @@ body {
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
// align-items: flex-end;
.name {
white-space: nowrap;
}
.interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-top: 3px;
margin-left: 12px;
}
}
@@ -970,13 +974,22 @@ body {
}
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
vertical-align: middle;
transition: all 0.3s;
}
}
&.more {
@@ -1236,12 +1249,20 @@ body {
left: 0;
z-index: -1;
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
vertical-align: middle;
}
}
}
}
@@ -1370,14 +1391,24 @@ body {
}
}
.arrows {
transform: translateY(-50%);
.arrows-box {
position: relative;
width: 9px;
height: 5px;
height: 100%;
margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
margin-top: 3px;
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 5px;
// margin-left: 5px;
vertical-align: middle;
transition: all 0.3s;
// margin-top: 3px;
}
}
&.more {
@@ -1393,7 +1424,7 @@ body {
}
.arrows {
fill: #fff;
transform: translateY(-50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.more-mask {
display: block;

428
js/h265webjs-v20221106.js Normal file
View File

File diff suppressed because one or more lines are too long

7062
js/missile.js Normal file
View File

File diff suppressed because one or more lines are too long