票务

@@ -38,6 +38,27 @@
           {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
           {{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
         </div>
         </div>
 
 
+
+        <div v-if="!countDown">
+          <!--        倒计时-->
+          <p class="countDownTitle">
+            <span v-if="language==0">报名截止倒计时</span>
+            <span v-else>REGISTRATION COUNTDOWN</span>
+          </p>
+          <van-count-down :time="timeData" format="DD 天 HH 时 mm 分 ss 秒">
+            <template #default="timeData">
+              <span class="block">{{ timeData.days }}</span>
+              <span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
+              <span class="block">{{ timeData.seconds }}</span>
+              <span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
+            </template>
+          </van-count-down>
+        </div>
+        <div v-else>
           <!-- 时间 -->
           <!-- 时间 -->
           <div class="select_item_box">
           <div class="select_item_box">
             <div class="label">
             <div class="label">
@@ -82,6 +103,8 @@
             {{ triggerLanguage(language, "添加观影人", "Add Moviegoers") }}
             {{ triggerLanguage(language, "添加观影人", "Add Moviegoers") }}
           </div>
           </div>
         </div>
         </div>
+
+      </div>
     </div>
     </div>
 
 
     <div class="container bottom">
     <div class="container bottom">
@@ -110,10 +133,12 @@ const route = useRoute();
 const router = useRouter();
 const router = useRouter();
 const activeId = ref(route.params.activeId)
 const activeId = ref(route.params.activeId)
 const flag = ref(false)
 const flag = ref(false)
+const countDown = ref(false)
 const props = defineProps({
 const props = defineProps({
   activityId: [String, Number],
   activityId: [String, Number],
 });
 });
-
+const timeData = ref({})
+const nowData = ref(dayjs().valueOf())
 const matchForm = ref({})
 const matchForm = ref({})
 const tickClass = ref([])
 const tickClass = ref([])
 const selectForm = ref({
 const selectForm = ref({
@@ -128,6 +153,8 @@ getDetail()
 async function getDetail() {
 async function getDetail() {
   const res = await getTicketInfoByActivityId({activityId: activeId.value})
   const res = await getTicketInfoByActivityId({activityId: activeId.value})
   matchForm.value = res.data
   matchForm.value = res.data
+  timeData.value = dayjs(res.data.ticketStart).valueOf()
+  if (timeData.value <= nowData.value) countDown.value = true
 }
 }
 
 
 // 根据赛事ID获取票档
 // 根据赛事ID获取票档
@@ -190,7 +217,7 @@ function toSelectSeat() {
   width: 1200px;
   width: 1200px;
   margin: 0 auto;
   margin: 0 auto;
   background-color: #fff;
   background-color: #fff;
-  box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
+  box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
   border-radius: 8px;
   border-radius: 8px;
   box-sizing: border-box;
   box-sizing: border-box;
   font-family: SourceHanSansCN, SourceHanSansCN;
   font-family: SourceHanSansCN, SourceHanSansCN;
@@ -404,4 +431,61 @@ function toSelectSeat() {
     padding: 0
     padding: 0
   }
   }
 }
 }
+
+.countDownTitle {
+  text-align: center;
+  color: #000;
+  position: relative;
+  width: 100%;
+  left: 0;
+  font-size: 35px;
+}
+
+.countDownTitle span {
+  background: #fff;
+  padding: 0 10px;
+  position: relative;
+  z-index: 1;
+}
+
+.countDownTitle::after {
+  position: absolute;
+  background: #ccc;
+  height: 1px;
+  content: '';
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 100%;
+  left: 0;
+}
+
+.van-count-down {
+  text-align: center;
+  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.colon {
+  display: inline-block;
+  font-size: 20px;
+  margin: 0 8px;
+  color: #7B7F83;
+}
+
+.block {
+  display: inline-block;
+  opacity: 0.7;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  color: #fff;
+  font-size: 35px;
+  font-weight: bold;
+  border-radius: 10px;
+  background: url(@/assets/img/djs_bg.png) left;
+  background-size: 100% 100%;
+  text-align: center;
+}
 </style>
 </style>