merge from xhx

.gitignore

 .DS_Store
+<<<<<<< HEAD
 node_modules/*
 .vscode/
+=======
+/node_modules
+npm-debug.log
+.vscode
+.editorconfig
+.idea/
+package-lock.json
+yarn.lock
+yarn-error.log
+dist/
+>>>>>>> develop-xhx

src/components/Card.vue

@@ -9,7 +9,9 @@
                 </div>
                 <div class='overlay w-full h-36 absolute top-0 left-0 z-50 p-5 '>
                     <div>离投票截止还有约</div>
-                    <div></div>
+                    <div>
+                        <app-timeBox times='1623259264197'  bgColor='bg-app-blue-2'></app-timeBox>
+                    </div>
                 </div>
             </div>
         </div>
@@ -40,7 +42,8 @@ export default Vue.extend({
 
   },
     components:{
-        'app-btn':()=>import('@/components/common/Btn.vue')
+        'app-btn':()=>import('@/components/common/Btn.vue'),
+        'app-timeBox':()=>import('@/components/Timebox.vue')
     }
 });
 </script>

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>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  data() {
+    return {
+      day: '00',
+      hour: '00',
+      min: '00',
+      sec: '00',
+      time: 0,
+      timer: 0
+    }
+  },
+  props: {
+    times: {
+      type: [String, Date, Number]
+    },
+    fontStyle: {
+      type: Object
+    },
+    bgColor:{
+      type: String,
+      default:'bg-app-blue-3 '
+    }
+  },
+  methods: {
+    getTimes() {
+      const r = +this.time - Date.now()
+      if (r < 0) {
+        if (this.timer) clearInterval(this.timer)
+        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
+    }
+  },
+  mounted() {
+    this.time = +this.times
+    if (this.timer) clearInterval(this.timer)
+    this.timer = window.setInterval(() => {
+      this.time--
+      this.getTimes()
+    }, 1000)
+  }
+})
+</script>
+
+<style scoped>
+  .time-items {
+    padding: 4px;
+    background: #191C73;
+  }
+  .time-box {
+    
+  }
+</style>
\ No newline at end of file

src/views/Home.vue

 <template>
   <div class="flex flex-col">
     首页
+   
   </div>
 </template>