剩余分钟数小于3时字体变成红色。

src/views/zhongchou/index.vue

@@ -40,7 +40,7 @@
                             </div>
 
                             <!-- 美股剩余时间显示 -->
-                            <div class="stock-info">
+                            <div class="stock-info" :class="{ 'time-almost-up': isTimeAlmostUp }">
                                 <h3>距美股实时数据</h3>
                                 <h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3>
                             </div>
@@ -272,6 +272,11 @@ const usDisplayTime = computed(() => {
     return Math.max(0, usRemainingTime.value)
 })
 
+// 计算属性：判断剩余时间是否小于等于3分钟
+const isTimeAlmostUp = computed(() => {
+    return usRemainingTime.value <= 3
+})
+
 // const hkDisplayTime = computed(() => {
 //     return Math.max(0, hkRemainingTime.value)
 // })
@@ -679,6 +684,11 @@ const hideRules = () => {
     flex-direction: column;
 }
 
+/* 剩余时间小于等于3分钟时的样式 */
+.time-almost-up h3 {
+    color: #ff0000;
+}
+
 /* 股票信息标题样式 */
 .stock-info h3 {
     margin: 5px 0;