添加图片

2025-09-02 14:15:53 +08:00 · 2025-09-02 14:15:53 +08:00 · c56a1ca9e1
commit c56a1ca9e1
parent bc1ee53e43
3 changed files with 62 additions and 1 deletions
--- a/simple.html
+++ b/simple.html
@ -181,6 +181,52 @@
            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 {
  background: rgba(255,255,255,0.7);
@ -221,9 +267,20 @@

 <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="subtitle"></div>
+  
  <!-- 全屏图标按钮 -->
  <button id="fullscreenBtn" class="icon-btn" title="全屏">
    <img src="./yantu/quanping.svg" alt="全屏" width="28" height="28">
@ -388,6 +445,7 @@
        console.info('show')
        // 此时可确认视频已
        document.querySelector('#modal').style.display = "none"
+        document.querySelector('.image-panel').style.display = "flex"
        document.querySelector('.statement').style.visibility = "visible"
        document.querySelector('.subtitle').style.visibility = "visible"
      })
@ -405,6 +463,7 @@
      // })
      duix.on('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('.statement').innerText = all_answer + data;
      })
@ -434,6 +493,7 @@
        if (trigger_status) {
          try {
            document.querySelector('.subtitle').innerText = ''
+            document.querySelector('.image-panel').style.display = 'flex'
            // document.querySelector('.statement').innerText = ''
            trigger_status = false;

@ -537,6 +597,7 @@

        if(end_talk == data["content"]){
          trigger_status = true
+          document.querySelector('.image-panel').style.display = 'flex'
          document.querySelector('.subtitle').innerText = ''
          document.querySelector('.statement').innerText = ''
        }
--- a/yantu/erweima.jpg
+++ b/yantu/erweima.jpg
--- a/yantu/wenzi2.png
+++ b/yantu/wenzi2.png