timebox merge

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 justify-center items-center">
-    <div class="time-items font-semibold" :style="fontStyle">{{ day }}</div>
-    <p class="text text-xs">天</p>
-    <div class="time-items font-semibold" :style="fontStyle">{{ hour }}</div>
-    <p class="text text-xs">时</p>
-    <div class="time-items font-semibold" :style="fontStyle">{{ min }}</div>
-    <p class="text text-xs">分</p>
-    <div class="time-items font-semibold" :style="fontStyle">{{ sec }}</div>
-    <p class="text text-xs">秒</p>
+  <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>
 
@@ -30,6 +30,10 @@ export default Vue.extend({
     },
     fontStyle: {
       type: Object
+    },
+    bgColor:{
+      type: String,
+      default:'bg-app-blue-3 '
     }
   },
   methods: {