Răsfoiți Sursa

修改视频录制样式

yangg 2 luni în urmă
părinte
comite
596be68732

+ 1 - 1
common/config.js

@@ -1,7 +1,7 @@
 // API base URL configuration
 //线上 https://minlong.raycos.com.cn
 //测试 http://192.168.66.187:8083
-export const apiBaseUrl = 'https://minlong.raycos.com.cn';
+export const apiBaseUrl = 'http://192.168.66.187:8083';
 
 // You can add other global configuration settings here
 export const appVersion = '1.0.0';

+ 91 - 112
pages/identity-verify/identity-verify.vue

@@ -18,18 +18,18 @@
           @ended="handleVideoEnded"
           @timeupdate="handleTimeUpdate">
         </video>
-        
-        <!-- 添加字幕覆盖层 -->
-        <div class="subtitle-overlay" v-if="currentSubtitle">
+         <div class="answer-button-container" v-if="showAnswerButton">
+          <button class="answer-button" @click="handleAnswerButtonClick">
+            开始回答
+          </button>
+        </div>
+        <!-- 添加字幕覆盖层 :data-time="formatTime(recordingTimerCount) || '03:30'"-->
+        <div class="subtitle-overlay" v-if="currentSubtitle" >
           {{ currentSubtitle }}
         </div>
         
         <!-- 添加答题按钮 -->
-        <div class="answer-button-container" v-if="showAnswerButton">
-          <button class="answer-button" @click="handleAnswerButtonClick">
-            开始面试
-          </button>
-        </div>
+       
       </div>
       
       <!-- 用户摄像头视频显示区域 -->
@@ -189,14 +189,14 @@ export default {
       thirdVideoSubtitles: [
         {
           startTime: 0,
-          endTime: 3,
+          endTime: 4,
           text: '在工作中,你如何确保个人防护装备的正确使用?'
         }
       ],
       fourthVideoSubtitles: [
         {
           startTime: 0,
-          endTime: 3,
+          endTime: 4,
           text: '描述一次你与团队合作改善生产流程的经历。'
         }
       ],
@@ -1799,11 +1799,11 @@ export default {
               this.uploadQueue.shift();
               
               // 显示简短的成功提示
-              uni.showToast({
-                title: '视频提交成功',
-                icon: 'success',
-                duration: 1500
-              });
+              // uni.showToast({
+              //   title: '视频提交成功',
+              //   icon: 'success',
+              //   duration: 1500
+              // });
               
               // 继续处理队列中的下一个任务
               this.processUploadQueue();
@@ -2086,15 +2086,15 @@ export default {
         currentSubtitles = this.subtitles;
       } else if (this.currentVideoIndex === 1) {
         currentSubtitles = this.secondVideoSubtitles;
-      }else if (this.currentVideoIndex === 2) {
+      } else if (this.currentVideoIndex === 2) {
         currentSubtitles = this.thirdVideoSubtitles;
-      }else if (this.currentVideoIndex === 3) {
+      } else if (this.currentVideoIndex === 3) {
         currentSubtitles = this.fourthVideoSubtitles;
-      }else if (this.currentVideoIndex === 4) {
+      } else if (this.currentVideoIndex === 4) {
         currentSubtitles = this.fifthVideoSubtitles;
-      }else if (this.currentVideoIndex === 5) {
+      } else if (this.currentVideoIndex === 5) {
         currentSubtitles = this.sixthVideoSubtitles;
-      }else {
+      } else {
         // 如果有更多视频,可以继续添加条件
         currentSubtitles = [];
       }
@@ -2453,6 +2453,7 @@ export default {
 
     // 添加格式化时间的辅助方法
     formatTime(seconds) {
+      if (!seconds && seconds !== 0) return '03:30'; // 默认显示03:30
       const minutes = Math.floor(seconds / 60);
       const remainingSeconds = seconds % 60;
       return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
@@ -2491,15 +2492,15 @@ export default {
 /* 用户摄像头容器样式 */
 .user-camera-container {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 100px;
-  height: 150px;
-  border-radius: 8px;
+  top: 50px;
+  right: 5px;
+  width: 110px; /* 稍微增加宽度 */
+  height: 160px; /* 稍微增加高度 */
+  border-radius: 4px; /* 减小圆角 */
   overflow: hidden;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   z-index: 20;
-  border: 1px solid #fff;
+  border: 1px solid #eee;
 }
 
 /* 用户摄像头视频样式 */
@@ -2559,23 +2560,32 @@ video::-webkit-media-controls-fullscreen-button {
   display: none !important;
 }
 
+/* 修改字幕覆盖层样式,使其与图片中的样式一致 */
 .subtitle-overlay {
   position: absolute;
-  bottom: 50px;
-  left: 0;
-  width: 100%;
-  padding: 15px;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  text-align: center;
+  bottom: 180px; /* 调整位置,使其更靠近底部 */
+  left: 5%; /* 从左侧留出5%的空间 */
+  width: 80%; /* 宽度设为90%,两侧各留5%实现居中 */
+  padding: 15px 20px; /* 增加左右内边距 */
+  border-radius: 15px;
+  background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
+  color: #333; /* 文字颜色为深色 */
+  text-align: left; /* 文字左对齐 */
   font-size: 16px;
   line-height: 1.5;
   z-index: 10;
-  border-radius: 4px;
-  max-width: 90%;
-  margin: 0 auto;
-  left: 5%;
-  right: 5%;
+  margin: 0 auto; /* 添加自动边距实现居中 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+}
+
+/* 添加计时器样式,右侧显示橙色圆点和时间 */
+.subtitle-overlay::after {
+  content: attr(data-time);
+  position: absolute;
+  right: 20px;
+  bottom: 15px;
+  color: #333;
+  font-size: 14px;
 }
 
 .control-panel {
@@ -2625,144 +2635,113 @@ video::-webkit-media-controls-fullscreen-button {
 
 .answer-button-container {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 将按钮放在底部而不是75%的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%); /* 只在X轴上平移,保持水平居中 */
   z-index: 20;
 }
 
+/* 修改回答按钮样式 */
 .answer-button {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
- background-color: #0039b3; /* 绿色背景,与图片中的颜色类似 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  }
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
-  }
-  100% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  }
+  animation: none; /* 移除脉动动画 */
 }
 
 .stop-recording-button-container {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 统一与其他按钮的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   z-index: 20;
 }
 
 .stop-recording-button {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: #e74c3c; /* 色背景 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #e74c3c; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  }
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
-  }
-  100% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  }
+  animation: none; /* 移除脉动动画 */
 }
 
-/* 录制中的指示器 */
 .recording-indicator {
   position: absolute;
   top: 20px;
   left: 20px;
   display: flex;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.9); /* 改为白色半透明背景 */
   padding: 5px 10px;
   border-radius: 15px;
   z-index: 20;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .recording-dot {
   width: 12px;
   height: 12px;
-  background-color: #e74c3c;
+  background-color: #ff6b00; /* 改为橙色,与图片中的颜色一致 */
   border-radius: 50%;
   margin-right: 8px;
   animation: blink 1s infinite;
 }
 
 .recording-text {
-  color: white;
+  color: #333; /* 改为深色文字 */
   font-size: 14px;
 }
 
-@keyframes blink {
-  0% { opacity: 1; }
-  50% { opacity: 0.3; }
-  100% { opacity: 1; }
+.timer-text {
+  color: #333; /* 改为深色文字 */
+  font-size: 14px;
+  margin-left: 8px;
 }
 
 .start-recording-button-container {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 统一与其他按钮的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   z-index: 20;
 }
 
 .start-recording-button {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: #0039b3; /* 与开始面试按钮颜色保持一致 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse 2s infinite; /* 使用相同的动画 */
+  animation: none; /* 移除脉动动画 */
 }
 
-/* 可以删除pulse-green动画,直接使用与开始面试按钮相同的pulse动画 */
-
 .retry-button-container {
   position: absolute;
-  bottom: 50px;
+  bottom: 30px; /* 统一与其他按钮的位置 */
   left: 50%;
   transform: translateX(-50%);
   z-index: 20;
@@ -2770,12 +2749,12 @@ video::-webkit-media-controls-fullscreen-button {
 
 .retry-button {
   padding: 10px 20px;
-  background-color: #3498db; /* 蓝色背景 */
-  color: white;
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
   font-size: 16px;
   border: none;
-  border-radius: 4px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 20px; /* 圆角矩形 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   cursor: pointer;
 }
 
@@ -2797,7 +2776,7 @@ video::-webkit-media-controls-fullscreen-button {
 }
 
 .timer-text {
-  color: white;
+  color: #000;
   font-size: 14px;
   font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
 }

+ 1 - 1
unpackage/dist/dev/mp-weixin/common/config.js

@@ -1,3 +1,3 @@
 "use strict";
-const apiBaseUrl = "https://minlong.raycos.com.cn";
+const apiBaseUrl = "http://192.168.66.187:8083";
 exports.apiBaseUrl = apiBaseUrl;

+ 10 - 13
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.js

@@ -54,14 +54,14 @@ const _sfc_main = {
       thirdVideoSubtitles: [
         {
           startTime: 0,
-          endTime: 3,
+          endTime: 4,
           text: "在工作中,你如何确保个人防护装备的正确使用?"
         }
       ],
       fourthVideoSubtitles: [
         {
           startTime: 0,
-          endTime: 3,
+          endTime: 4,
           text: "描述一次你与团队合作改善生产流程的经历。"
         }
       ],
@@ -1269,11 +1269,6 @@ const _sfc_main = {
           if (res.data.code === 0 || res.data.code === 2e3) {
             if (task) {
               this.uploadQueue.shift();
-              common_vendor.index.showToast({
-                title: "视频提交成功",
-                icon: "success",
-                duration: 1500
-              });
               this.processUploadQueue();
             } else {
               common_vendor.index.showToast({
@@ -1745,6 +1740,8 @@ const _sfc_main = {
     },
     // 添加格式化时间的辅助方法
     formatTime(seconds) {
+      if (!seconds && seconds !== 0)
+        return "03:30";
       const minutes = Math.floor(seconds / 60);
       const remainingSeconds = seconds % 60;
       return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
@@ -1757,13 +1754,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     b: common_vendor.o((...args) => $options.handleVideoError && $options.handleVideoError(...args)),
     c: common_vendor.o((...args) => $options.handleVideoEnded && $options.handleVideoEnded(...args)),
     d: common_vendor.o((...args) => $options.handleTimeUpdate && $options.handleTimeUpdate(...args)),
-    e: $data.currentSubtitle
-  }, $data.currentSubtitle ? {
-    f: common_vendor.t($data.currentSubtitle)
-  } : {}, {
-    g: $data.showAnswerButton
+    e: $data.showAnswerButton
   }, $data.showAnswerButton ? {
-    h: common_vendor.o((...args) => $options.handleAnswerButtonClick && $options.handleAnswerButtonClick(...args))
+    f: common_vendor.o((...args) => $options.handleAnswerButtonClick && $options.handleAnswerButtonClick(...args))
+  } : {}, {
+    g: $data.currentSubtitle
+  }, $data.currentSubtitle ? {
+    h: common_vendor.t($data.currentSubtitle)
   } : {}, {
     i: $data.useMiniProgramCameraComponent
   }, $data.useMiniProgramCameraComponent ? {

Fișier diff suprimat deoarece este prea mare
+ 0 - 0
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.wxml


+ 74 - 96
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.wxss

@@ -26,15 +26,15 @@
 /* 用户摄像头容器样式 */
 .user-camera-container.data-v-464e78c6 {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 100px;
-  height: 150px;
-  border-radius: 8px;
+  top: 50px;
+  right: 5px;
+  width: 110px; /* 稍微增加宽度 */
+  height: 160px; /* 稍微增加高度 */
+  border-radius: 4px; /* 减小圆角 */
   overflow: hidden;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   z-index: 20;
-  border: 1px solid #fff;
+  border: 1px solid #eee;
 }
 
 /* 用户摄像头视频样式 */
@@ -83,23 +83,33 @@ video.data-v-464e78c6::-webkit-media-controls-volume-slider {
 video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
   display: none !important;
 }
+
+/* 修改字幕覆盖层样式,使其与图片中的样式一致 */
 .subtitle-overlay.data-v-464e78c6 {
   position: absolute;
-  bottom: 50px;
-  left: 0;
-  width: 100%;
-  padding: 15px;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  text-align: center;
+  bottom: 180px; /* 调整位置,使其更靠近底部 */
+  left: 5%; /* 从左侧留出5%的空间 */
+  width: 80%; /* 宽度设为90%,两侧各留5%实现居中 */
+  padding: 15px 20px; /* 增加左右内边距 */
+  border-radius: 15px;
+  background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
+  color: #333; /* 文字颜色为深色 */
+  text-align: left; /* 文字左对齐 */
   font-size: 16px;
   line-height: 1.5;
   z-index: 10;
-  border-radius: 4px;
-  max-width: 90%;
-  margin: 0 auto;
-  left: 5%;
-  right: 5%;
+  margin: 0 auto; /* 添加自动边距实现居中 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+}
+
+/* 添加计时器样式,右侧显示橙色圆点和时间 */
+.subtitle-overlay.data-v-464e78c6::after {
+  content: attr(data-time);
+  position: absolute;
+  right: 20px;
+  bottom: 15px;
+  color: #333;
+  font-size: 14px;
 }
 .control-panel.data-v-464e78c6 {
   padding: 15px;
@@ -142,148 +152,116 @@ video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
 }
 .answer-button-container.data-v-464e78c6 {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 将按钮放在底部而不是75%的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%); /* 只在X轴上平移,保持水平居中 */
   z-index: 20;
 }
+
+/* 修改回答按钮样式 */
 .answer-button.data-v-464e78c6 {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
- background-color: #0039b3; /* 绿色背景,与图片中的颜色类似 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse-464e78c6 2s infinite;
-}
-@keyframes pulse-464e78c6 {
-0% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-50% {
-    transform: scale(1.05);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
-}
-100% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
+  animation: none; /* 移除脉动动画 */
 }
 .stop-recording-button-container.data-v-464e78c6 {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 统一与其他按钮的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   z-index: 20;
 }
 .stop-recording-button.data-v-464e78c6 {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: #e74c3c; /* 色背景 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #e74c3c; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse-464e78c6 2s infinite;
-}
-@keyframes pulse-464e78c6 {
-0% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-50% {
-    transform: scale(1.05);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
-}
-100% {
-    transform: scale(1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  animation: none; /* 移除脉动动画 */
 }
-}
-
-/* 录制中的指示器 */
 .recording-indicator.data-v-464e78c6 {
   position: absolute;
   top: 20px;
   left: 20px;
   display: flex;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.9); /* 改为白色半透明背景 */
   padding: 5px 10px;
   border-radius: 15px;
   z-index: 20;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .recording-dot.data-v-464e78c6 {
   width: 12px;
   height: 12px;
-  background-color: #e74c3c;
+  background-color: #ff6b00; /* 改为橙色,与图片中的颜色一致 */
   border-radius: 50%;
   margin-right: 8px;
-  animation: blink-464e78c6 1s infinite;
+  animation: blink 1s infinite;
 }
 .recording-text.data-v-464e78c6 {
-  color: white;
+  color: #333; /* 改为深色文字 */
   font-size: 14px;
 }
-@keyframes blink-464e78c6 {
-0% { opacity: 1;
-}
-50% { opacity: 0.3;
-}
-100% { opacity: 1;
-}
+.timer-text.data-v-464e78c6 {
+  color: #333; /* 改为深色文字 */
+  font-size: 14px;
+  margin-left: 8px;
 }
 .start-recording-button-container.data-v-464e78c6 {
   position: absolute;
-  top: 75%;
+  bottom: 50px; /* 统一与其他按钮的位置 */
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   z-index: 20;
 }
 .start-recording-button.data-v-464e78c6 {
   width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: #0039b3; /* 与开始面试按钮颜色保持一致 */
-  color: white;
-  font-size: 18px;
+  height: 40px; /* 改为矩形按钮 */
+  border-radius: 20px; /* 圆角矩形 */
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
+  font-size: 16px;
   border: none;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  animation: pulse-464e78c6 2s infinite; /* 使用相同的动画 */
+  animation: none; /* 移除脉动动画 */
 }
-
-/* 可以删除pulse-green动画,直接使用与开始面试按钮相同的pulse动画 */
 .retry-button-container.data-v-464e78c6 {
   position: absolute;
-  bottom: 50px;
+  bottom: 30px; /* 统一与其他按钮的位置 */
   left: 50%;
   transform: translateX(-50%);
   z-index: 20;
 }
 .retry-button.data-v-464e78c6 {
   padding: 10px 20px;
-  background-color: #3498db; /* 蓝色背景 */
-  color: white;
+  background-color: #ffffff; /* 白色背景 */
+  color: #333; /* 深色文字 */
   font-size: 16px;
   border: none;
-  border-radius: 4px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 20px; /* 圆角矩形 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   cursor: pointer;
 }
 .retry-button.data-v-464e78c6:hover {
@@ -303,7 +281,7 @@ video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
   flex-direction: column;
 }
 .timer-text.data-v-464e78c6 {
-  color: white;
+  color: #000;
   font-size: 14px;
   font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
 }
@@ -314,7 +292,7 @@ video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
 }
 .remaining-time.warning.data-v-464e78c6 {
   color: #ff6b6b; /* 剩余时间少时显示红色 */
-  animation: blink-464e78c6 1s infinite; /* 使用闪烁动画提醒用户 */
+  animation: blink 1s infinite; /* 使用闪烁动画提醒用户 */
 }
 
 /* 添加上传状态指示器 */

+ 1 - 1
unpackage/dist/dev/mp-weixin/project.config.json

@@ -8,7 +8,7 @@
     "urlCheck": false,
     "es6": true,
     "postcss": false,
-    "minified": true,
+    "minified": false,
     "newFeature": true,
     "bigPackageSizeSupport": true,
     "babelSetting": {

Unele fișiere nu au fost afișate deoarece prea multe fișiere au fost modificate în acest diff