songjvcheng/html_digital_item
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加图片
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Song367 2025-09-02 14:15:53 +08:00
parent bc1ee53e43
commit c56a1ca9e1
3 changed files with 62 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
simple.html
View File

@ -181,6 +181,52 @@
display: none; display: none;
} }
/* 图片框样式 */
.image-panel {
position: absolute;
top: 70%;
left: 6%;
transform: translateY(-50%);
display: none;
flex-direction: column;
gap: 20px;
z-index: 100000;
}
.image-container-square {
width: 16vw;
height: 16vw;
border-radius: 8px;
overflow: hidden;
/* background: rgba(255, 255, 255, 0.1); */
display: flex;
align-items: center;
justify-content: center;
}
.image-container-vertical {
width: 64vw;
height: 78vw;
border-radius: 8px;
overflow: hidden;
/* background: rgba(255, 255, 255, 0.1); */
display: flex;
align-items: center;
justify-content: center;
}
.image-container-square img,
.image-container-vertical img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-align: center;
}
.icon-btn { .icon-btn {
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.7);
@ -221,9 +267,20 @@
<body> <body>
<!-- 数字人容器 --> <!-- 数字人容器 -->
<div class="container"></div> <div class="container">
<!-- 图片框 -->
<div class="image-panel">
<div class="image-container-square">
<img src="./yantu/erweima.jpg" alt="图片1">
</div>
<div class="image-container-vertical">
<img src="./yantu/wenzi2.png" alt="图片2">
</div>
</div>
</div>
<div class="statement"></div> <div class="statement"></div>
<div class="subtitle"></div> <div class="subtitle"></div>
<!-- 全屏图标按钮 --> <!-- 全屏图标按钮 -->
<button id="fullscreenBtn" class="icon-btn" title="全屏"> <button id="fullscreenBtn" class="icon-btn" title="全屏">
<img src="./yantu/quanping.svg" alt="全屏" width="28" height="28"> <img src="./yantu/quanping.svg" alt="全屏" width="28" height="28">
@ -388,6 +445,7 @@
console.info('show') console.info('show')
// 此时可确认视频已 // 此时可确认视频已
document.querySelector('#modal').style.display = "none" document.querySelector('#modal').style.display = "none"
document.querySelector('.image-panel').style.display = "flex"
document.querySelector('.statement').style.visibility = "visible" document.querySelector('.statement').style.visibility = "visible"
document.querySelector('.subtitle').style.visibility = "visible" document.querySelector('.subtitle').style.visibility = "visible"
}) })
@ -405,6 +463,7 @@
// }) // })
duix.on('speakSection', (data) => { duix.on('speakSection', (data) => {
console.info('speakSection', data) console.info('speakSection', data)
document.querySelector('.image-panel').style.display = 'none'
document.querySelector('.subtitle').innerText = document.querySelector('.subtitle').innerText + data.content document.querySelector('.subtitle').innerText = document.querySelector('.subtitle').innerText + data.content
// document.querySelector('.statement').innerText = all_answer + data; // document.querySelector('.statement').innerText = all_answer + data;
}) })
@ -434,6 +493,7 @@
if (trigger_status) { if (trigger_status) {
try { try {
document.querySelector('.subtitle').innerText = '' document.querySelector('.subtitle').innerText = ''
document.querySelector('.image-panel').style.display = 'flex'
// document.querySelector('.statement').innerText = '' // document.querySelector('.statement').innerText = ''
trigger_status = false; trigger_status = false;
@ -537,6 +597,7 @@
if(end_talk == data["content"]){ if(end_talk == data["content"]){
trigger_status = true trigger_status = true
document.querySelector('.image-panel').style.display = 'flex'
document.querySelector('.subtitle').innerText = '' document.querySelector('.subtitle').innerText = ''
document.querySelector('.statement').innerText = '' document.querySelector('.statement').innerText = ''
} }

BIN
yantu/erweima.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
yantu/wenzi2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB