倒计时组件更新

.gitignore

 .DS_Store
-<<<<<<< HEAD
-node_modules/*
-.vscode/
-=======
 /node_modules
 npm-debug.log
 .vscode
@@ -12,4 +8,3 @@ package-lock.json
 yarn.lock
 yarn-error.log
 dist/
->>>>>>> develop-xhx

src/components/timebox.vue

 <template>
   <div class="time-box flex items-center">
-    <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ day }}</div>
-    <p class="text text-xs mx-1">天</p>
-    <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ hour }}</div>
-    <p class="text text-xs mx-1">时</p>
-    <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ min }}</div>
-    <p class="text text-xs mx-1">分</p>
-    <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ sec }}</div>
-    <p class="text text-xs mx-1">秒</p>
+    <div v-if="showNum >= 1" class="flex items-center">
+      <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ day }}</div>
+      <p class="text text-xs mx-1">天</p>
+    </div>
+    <div v-if="showNum >= 2" class="flex items-center">
+      <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ hour }}</div>
+      <p class="text text-xs mx-1">时</p>
+    </div>
+    <div v-if="showNum >= 3" class="flex items-center">
+      <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ min }}</div>
+      <p class="text text-xs mx-1">分</p>
+    </div>
+    <div v-if="showNum >= 4" class="flex items-center">
+      <div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ sec }}</div>
+      <p class="text text-xs mx-1">秒</p>
+    </div>
+    
   </div>
 </template>
 
@@ -34,6 +43,10 @@ export default Vue.extend({
     bgColor:{
       type: String,
       default:'bg-app-blue-3 '
+    },
+    showNum: {
+      type: Number,
+      default: 4
     }
   },
   methods: {
@@ -41,14 +54,14 @@ export default Vue.extend({
       const r = +this.time - Date.now()
       if (r < 0) {
         if (this.timer) clearInterval(this.timer)
-        throw Error('已超出截至时间')
+        return
+        // throw Error('已超出截至时间')
       }
       const day = +parseInt(r / (1000 * 60 * 60 * 24) + '')
       this.day = day >= 10 ? day + '' : '0' + day
       const hour = +parseInt(r / (1000 * 60 * 60) % 24 + '')
       this.hour = hour >= 10 ? hour + '' : '0' + hour
       const min = +parseInt(r / (1000 * 60) % 60 + '')
-      console.log(min)
       this.min = min >= 10 ? min + '' : '0' + min
       const sec = +parseInt((r - (day * 24 * 60 * 60 * 1000) - hour * (1000 * 60 * 60) - min * (1000 * 60)) / 1000 + '')
       this.sec = sec >= 10 ? sec + '' : '0' + sec
@@ -66,10 +79,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-  .time-items {
-    padding: 4px;
-    background: #191C73;
-  }
   .time-box {
     
   }

src/views/Home.vue

 <template>
   <div class="flex flex-col">
     首页
-   
+    <timebox times="1623440344679" :showNum="3"/>
   </div>
 </template>
 
 <script lang="ts">
 
-import Vue from "vue";
+import timebox from "@/components/Timebox.vue";
+import Vue from "vue"
 
 export default Vue.extend({
+  components: { timebox },
   name: "Home",
   data() {
     return {