倒计时

app/home/controller/AiExam.php

@@ -9,13 +9,15 @@ class Aiexam extends HomeBaseController
 {
     public function index()
     {
-        $date = strtotime('2024-12-25 09:00:00');
+        $date = strtotime('2024-12-26 00:00:00');
         $now  = time();
         if ($now < $date) {
             return view('tip', ['second' => $date - $now + 1]);
         }
 
-        return view('');
+        return view('', [
+            'second' => strtotime('2025-12-26 08:58:20') - time(),
+        ]);
     }
 
     public function upload()
@@ -36,8 +38,8 @@ class Aiexam extends HomeBaseController
 
     public function deleteFile()
     {
-        $name = $this->request->param('name');
-        $filename = public_path('storage/files/ai_exam').$name;
+        $name     = $this->request->param('name');
+        $filename = public_path('storage/files/ai_exam') . $name;
 
         if (file_exists($filename)) {
             if (unlink($filename)) {

app/home/view/ai_exam/index.html

@@ -1,16 +1,47 @@
 {extend name="public/base_el"/}
 {block name="css"}
 <style>
-    .box {margin:0 auto; width:1200px;}
-    .title {margin-top:50px;}
-    .title p{margin:10px auto;padding:0 20px;text-align: center;font-size:24px;font-weight: 700;}
-    .font-bold {font-weight: bold;}
-    .exam-title {font-family: "黑体";}
-    .content,.exam-title {text-indent: 2em;line-height: 28px;font-size:18px;font-family: "仿宋_GB2312";}
+    .box {
+        margin: 0 auto;
+        width: 1200px;
+    }
+
+    .countdown {
+        text-align: right;
+        color: red;
+    }
+
+    .title {
+        margin-top: 50px;
+    }
+
+    .title p {
+        margin: 10px auto;
+        padding: 0 20px;
+        text-align: center;
+        font-size: 24px;
+        font-weight: 700;
+    }
+
+    .font-bold {
+        font-weight: bold;
+    }
+
+    .exam-title {
+        font-family: "黑体";
+    }
+
+    .content, .exam-title {
+        text-indent: 2em;
+        line-height: 28px;
+        font-size: 18px;
+        font-family: "仿宋_GB2312";
+    }
 </style>
 {/block}
 {block name="body"}
 <div class="box">
+    <div class="countdown">结束倒计时 {{second_text}}</div>
     <div class="title">
         <p>2025年晋江市AI政务应用技能竞赛</p>
         <p>决赛考题</p>
@@ -19,8 +50,12 @@
         <span class="font-bold">考题名称：</span>
         <span>利用AI工具设计“晋品出海”品牌宣传作品</span>
     </div>
-    <div class="content">晋江市作为“中国品牌之都”，正积极推动本土优质产品（如鞋服、食品、建材等）拓展国际市场，打造“晋品出海”品牌战略。通过建立品牌认知，将晋江的优质产品推向全球市场。</div>
-    <div class="content">围绕“晋品出海”及建立品牌认知的核心主题，利用AI技术设计一份具有创新性和吸引力的宣传作品，展现晋江产品独特的国际魅力与品牌价值，进一步推动“晋品出海”战略的实施，增强全球市场对晋江品牌的认知与好感。</div>
+    <div class="content">
+        晋江市作为“中国品牌之都”，正积极推动本土优质产品（如鞋服、食品、建材等）拓展国际市场，打造“晋品出海”品牌战略。通过建立品牌认知，将晋江的优质产品推向全球市场。
+    </div>
+    <div class="content">
+        围绕“晋品出海”及建立品牌认知的核心主题，利用AI技术设计一份具有创新性和吸引力的宣传作品，展现晋江产品独特的国际魅力与品牌价值，进一步推动“晋品出海”战略的实施，增强全球市场对晋江品牌的认知与好感。
+    </div>
     <div class="content">具体要求：</div>
     <div class="content">
         <span class="font-bold">1.设计宣传作品：</span>
@@ -57,7 +92,7 @@
 
         base.fileList = Vue.ref([]);
         base.removeFile = (res) => {
-            postJson("{:url('ai_exam/deleteFile')}",{name:res.name}).then(()=>{
+            postJson("{:url('ai_exam/deleteFile')}", {name: res.name}).then(() => {
                 ElementPlus.ElMessage.success('删除成功');
             });
         }
@@ -66,6 +101,32 @@
             location.href = "{:url('examSuccess')}";
         }
 
+        base.second = Vue.ref({$second});
+        base.second_text = Vue.ref('');
+        base.set = setInterval(function () {
+            base.dealTime();
+            base.second.value--;
+            if (base.second.value < 0) {
+                clearInterval(base.set);
+            }
+        }, 1000);
+        base.dealTime = () => {
+            if (base.second.value < 0) {
+                return;
+            }
+            const hour = Math.floor(base.second.value / 3600);
+            const minute = Math.floor((base.second.value - 3600 * hour) / 60);
+            const second = base.second.value - 3600 * hour - minute * 60;
+            base.second_text.value = String(hour).padStart(2,'0') + '：' + String(minute).padStart(2,'0') + '：' + String(second).padStart(2,'0')
+        }
+
+        Vue.onMounted(() => {
+            base.dealTime();
+        });
+        Vue.onUnmounted(()=> {
+            clearInterval(base.set);
+        })
+
         return base;
     }
 </script>