From f5ea651bfde8a27849184aeefafd9f6d2cbb1012 Mon Sep 17 00:00:00 2001
From: B1397KB <b1397ghrx@outlook.com>
Date: Tue, 31 Dec 2024 21:44:41 +0800
Subject: [PATCH] update lantern for CNY

---
 front/src/components/Header.vue  |   8 +-
 front/src/components/Lantern.vue | 227 +++++++++++++++++++++++++++++++
 2 files changed, 232 insertions(+), 3 deletions(-)
 create mode 100644 front/src/components/Lantern.vue

diff --git a/front/src/components/Header.vue b/front/src/components/Header.vue
index 82743332c..b5505beca 100644
--- a/front/src/components/Header.vue
+++ b/front/src/components/Header.vue
@@ -4,7 +4,7 @@
     <!-- TODO 过期请删除 -->
     <a href="https://announcement.bfban.com" target="_blank">
       <Card :padding="0" dis-hover
-            style="padding: 3px 20px; margin: -10px -20px 8px -20px; text-align: center; background: darkred; color: white">
+            style="padding: 3px 20px; margin: -10px -20px 0px -20px; text-align: center; background: darkred; color: white">
         {{
           {
             'zh-CN': '我们已更新《反作弊准则》,前往查看',
@@ -13,9 +13,10 @@
         }}
       </Card>
     </a>
+    <Lantern></Lantern>
     <!-- 临时通知 E -->
 
-    <div class="header-container">
+    <div class="header-container" style="margin-top: 8px;">
       <router-link class="mobile-hide" :to="{name: 'home'}">
         <img src="../assets/images/logo.png"
              style="border-radius: 50%"
@@ -199,6 +200,7 @@ import HeaderMessage from "./HeaderMessage.vue";
 import PrivilegesTag from "/src/components/PrivilegesTag";
 import Application from "@/assets/js/application";
 import Banner from "@/components/Banner.vue";
+import Lantern from "@/components/Lantern"
 
 export default new Application({
   data() {
@@ -210,7 +212,7 @@ export default new Application({
       },
     }
   },
-  components: {HistoryView, Banner, HeaderMessage, UserAvatar, PrivilegesTag},
+  components: {HistoryView, Banner, HeaderMessage, UserAvatar, PrivilegesTag, Lantern},
   watch: {
     $route: "loadData",
   },
diff --git a/front/src/components/Lantern.vue b/front/src/components/Lantern.vue
new file mode 100644
index 000000000..aed2c7aa4
--- /dev/null
+++ b/front/src/components/Lantern.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="lan" v-if="nowTime >= new Date('2024 12-31').getTime() && nowTime <= new Date('2025 2-4').getTime()" >
+    <div class="lan-header">
+      <div class="container">🎆 2025 <HtmlLink href="https://en.wikipedia.org/wiki/Chinese_New_Year" text="New Year"></HtmlLink> 🎆</div>
+    </div>
+    <div class="lan-box">
+      <div v-for="(i, index) in ['left', 'right']" :key="index" :class="`lantern ${i}-lantern`">
+        <!-- 顶部绳索 -->
+        <div class="lantern-rope lantern-top-rope "></div>
+        <!-- 提手 -->
+        <div class="lantern-handle lantern-top-handle"></div>
+        <!-- 中间部分 -->
+        <div class="lantern-center">新年</div>
+        <!-- 下提手 -->
+        <div class="lantern-handle lantern-bottom-handle"></div>
+        <!-- 绳 -->
+        <div class="lantern-bottom">
+          <div class="lantern-rope lantern-bottom-rope"></div>
+          <!-- 灯穗 -->
+          <div class="lantern-panicle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+:root {
+  --lantern-yellow: #ecaa2f;
+}
+
+.lan:hover {
+  .lan-header {
+    transition: all 0.25s;
+    padding: 15px 0;
+    text-align: center;
+    display: flex;
+    height: 55px !important;
+
+    > * {
+      width: auto;
+      height: auto;
+    }
+  }
+}
+
+.lan {
+  .lan-header {
+    position: absolute;
+    min-height: 3px;
+    display: flex;
+    left: 0;
+    right: 0;
+    background-color: red;
+    border-bottom: 3px solid var(--lantern-yellow);
+    color: #fff;
+    height: 3px;
+
+    > * {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
+  .lan-header:after {
+    content: "";
+    width: 50px;
+    height: 12px;
+    position: absolute;
+    z-index: 1;
+    left: calc(50% - 25px);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    bottom: -12px;
+    display: block;
+    background-color: var(--lantern-yellow);
+  }
+}
+
+
+.lan-box {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  left: 0;
+  right: 0;
+  top: 0;
+
+  & > * {
+    position: absolute;
+    z-index: -1;
+    top: 0px;
+  }
+
+  .left-lantern {
+    left: 55px;
+  }
+
+  .right-lantern {
+    right: 55px;
+  }
+}
+
+@media screen and (min-width: 1350px) {
+  .lan {
+    min-width: 1024px;
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  .lan {
+    .left-lantern,
+    .right-lantern {
+      display: none !important;
+    }
+  }
+}
+
+.lantern {
+  min-width: 120px !important;
+  margin: 0 5px;
+  animation: lantern 1.5s infinite ease-in-out alternate;
+  transform-origin: center -100px;
+}
+
+.lantern-rope {
+  width: 3px;
+  background-color: var(--lantern-yellow);
+  margin: 0 auto;
+}
+
+.lantern-top-rope {
+  height: 85px;
+}
+
+.lantern-bottom-rope {
+  height: 20px;
+}
+
+.lantern-handle {
+  width: 40%;
+  height: 8px;
+  background-color: var(--lantern-yellow);
+  position: relative;
+  z-index: 1;
+}
+
+.lantern-top-handle {
+  border-radius: 5px 5px 0 0;
+  margin: 0 auto -2px auto;
+}
+
+.lantern-bottom-handle {
+  border-radius: 0 0 5px 5px;
+  margin: -2px auto 0 auto;
+}
+
+.lantern-center {
+  width: 100%;
+  height: 70px;
+  background-color: red;
+  border-radius: 50px;
+  position: relative;
+  font-size: 18px;
+  color: var(--lantern-yellow);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  writing-mode: vertical-lr;
+  font-weight: 700;
+  box-shadow: 0 0 40px -10px red;
+}
+
+.lantern-center::before, .lantern-center::after {
+  top: 0;
+  content: '';
+  position: absolute;
+  display: block;
+  width: 75%;
+  height: 100%;
+  border: solid 2px var(--lantern-yellow);
+  border-radius: 50%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.lantern-center::before {
+  width: 75%;
+}
+
+.lantern-center::after {
+  width: 35%;
+}
+
+.lantern-panicle {
+  width: 12px;
+  height: 50px;
+  margin: 0 auto;
+  background: linear-gradient(to bottom, #f00, #e36d00 3px, #fbd342 5px, #e36d00 8px, #e36d00 12px, #f00 16px, rgba(255, 0, 0, .8) 26px, rgba(255, 0, 0, .6));
+}
+
+@keyframes lantern {
+  from {
+    transform: rotate(-3deg);
+  }
+
+  to {
+    transform: rotate(3deg);
+  }
+}
+</style>
+
+<script>
+import HtmlLink from "@/components/HtmlLink.vue";
+
+export default {
+  components: {HtmlLink},
+  computed: {
+    nowTime () {
+      return new Date().getTime();
+    }
+  }
+}
+</script>
\ No newline at end of file