'日历'

src/App.vue

@@ -2,7 +2,7 @@
   <index/>
 </template>
 <script setup lang="ts">
-import Index from "@/views/ref-parent/index.vue";
+import Index from "@/views/calendar/index.vue";
 </script>
 <style scoped>
 

src/views/calendar/component/CountDown.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="countdown">
+    <h2 v-if="targetTime">距离除夕还剩:</h2>
+    <div v-if="targetTime">
+      <span>{{ days }}</span> 天
+      <span>{{ hours }}</span> 小时
+      <span>{{ minutes }}</span> 分钟
+      <span>{{ seconds }}</span> 秒
+    </div>
+    <div v-else>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted,watch } from 'vue';
+const props = defineProps({
+  targetTime: {
+    type: String,
+    required: true
+  }
+});
+
+let intervalId;
+
+const days = ref(0);
+const hours = ref(0);
+const minutes = ref(0);
+const seconds = ref(0);
+
+const calculateTimeLeft = () => {
+  if (!props.targetTime) return;
+  const now = new Date().getTime();
+  const target = new Date(props.targetTime).getTime();
+  const difference = target - now;
+
+  if (difference > 0) {
+    days.value = Math.floor(difference / (1000 * 60 * 60 * 24));
+    hours.value = Math.floor((difference / (1000 * 60 * 60)) % 24);
+    minutes.value = Math.floor((difference / 1000 / 60) % 60);
+    seconds.value = Math.floor((difference / 1000) % 60);
+  } else {
+    days.value = 0;
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    clearInterval(intervalId); // 如果时间已经过去，则停止更新
+  }
+};
+
+onMounted(() => {
+  calculateTimeLeft(); // 初始化时计算一次
+  intervalId = setInterval(calculateTimeLeft, 1000); // 每秒更新一次
+});
+
+onUnmounted(() => {
+  clearInterval(intervalId); // 清除定时器
+});
+
+watch(() => props.targetTime, () => {
+  calculateTimeLeft(); // 当目标时间变化时重新计算
+});
+</script>
+
+<style scoped>
+.countdown {
+  background-image: linear-gradient(60deg,lightgrey,white,darkslateblue);
+  width: 370px;
+  height: 140px;
+  text-align: center;
+  font-size: 2rem;
+}
+</style>

src/views/calendar/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="box">
+    <video autoplay loop muted playsinline class="background-video">
+      <source src="../../../public/year.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+    <el-date-picker
+        v-model="targetTime"
+        type="date"
+        placeholder="请选择一个时间"
+        size="large"
+        style="width: 100%;margin-bottom: 20px"
+    />
+    <hr>
+    <CountDown  :targetTime="formattedTargetTime" />
+  </div>
+</template>
+
+<script setup>
+import {ref,computed,onMounted} from 'vue'
+// import {Calendar} from "@element-plus/icons-vue";
+import CountDown from "./component/CountDown.vue";
+// 用于存储选中的时间
+const targetTime = ref();
+// // 设置默认值为当前日期
+// onMounted(() => {
+//   targetTime.value = new Date();
+// });
+// 计算属性，将选中的时间格式化为 ISO 字符串
+const formattedTargetTime = computed(() => {
+  return targetTime.value ? targetTime.value.toISOString() : null;
+});
+</script>
+
+<style>
+.box{
+  position: absolute;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: -400px;
+  margin-left: -200px;
+  /*background-image: linear-gradient(60deg,powderblue,pink,purple);*/
+  padding: 10px;
+  height:700px;
+  overflow: hidden;
+}
+.background-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height:700px;
+  object-fit: cover;
+  z-index: -1;
+}
+</style>