feat: 修改大赛截止报名日期

Author: QhdJiaYou

src/components/home/index.scss

@@ -14,37 +14,41 @@
     top: 50%;
     transform: translateY(-50%);
     right: 100px;
+    .timer-cover {
+      z-index: 2;
+      position: absolute;
+      bottom: 12%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .timer-text {
+      position: absolute;
+      z-index: 4;
+      width: 160px;
+      font-weight: 500;
+      font-size: 20px;
+      color: white;
+      top: 30%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .timer-day {
+      position: absolute;
+      z-index: 9999;
+      font-weight: 500;
+      font-size: 110px;
+      color: white;
+      top: 55%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
   .timer-divider {
     position: absolute;
     top: 52%;
     transform: translateY(-50%);
     right: 122px;
   }
-  .timer-cover {
-    z-index: 2;
-    position: absolute;
-    top: 53%;
-    right: 132px;
-  }
-  .timer-text {
-    position: absolute;
-    z-index: 3;
-    font-weight: 500;
-    font-size: 20px;
-    color: white;
-    top: 36%;
-    right: 164px;
-  }
-  .timer-day {
-    position: absolute;
-    z-index: 3;
-    font-weight: 500;
-    font-size: 110px;
-    color: white;
-    top: 38%;
-    right: 156px;
-  }
 }
 
 .button-bg {

src/components/home/index.tsx

@@ -82,7 +82,7 @@ export const JoinButton = ({ textColor = "white" }) => {
     </div>
   );
 };
-const restDay = getDiffDay("2024-08-30", Date.now());
+const restDay = getDiffDay("2024-09-30", Date.now());
 const Home = () => {
   return (
     <div className="flex flex-col items-center">
@@ -91,54 +91,15 @@ const Home = () => {
           <img src={huoshanIntel} />
         </div>
         <img src={openTitle} width={"60%"} />
-        {/* <div className="mt-[20px] mb-[50px]">
-          <JoinButton />
-        </div> */}
-        {/* <img width={"60%"} src={require("../../images/logoGroup.svg")} /> */}
-        {/* <div className="flex flex-col  justify-between">
-          <div className="flex items-center">
-            <div className="text-[18px] font-bold">指导单位：</div>
-            <img
-              className="h-[26px] mr-[8px]"
-              src={require("../../images/logo/ccf.png")}
-            ></img>
-            <img
-              className="h-[30px]"
-              src={require("../../images/logo/guangshi.png")}
-            ></img>
-          </div>
-          <div className="flex items-center">
-            <div className="text-[18px] font-bold">主办单位：</div>
-            <img
-              className="h-[24px] mr-[16px]"
-              src={require("../../images/logo/volc.png")}
-            ></img>
-            <img
-              className="h-[22px]"
-              src={require("../../images/logo/intelIcon.png")}
-            ></img>
-          </div>
-          <div className="flex items-center">
-            <div className="text-[18px] font-bold">协办单位：</div>
-            <img
-              className="h-[26px] mr-[16px]"
-              src={require("../../images/logo/ccfWeiyuan.png")}
-            ></img>
-          </div>
-          <div className="flex items-center">
-            <div className="text-[18px] font-bold">
-              合作单位：
-              中国生物信息学学会（筹）、上海生物信息学会、广东省生物信息学学会、南方医科大学、…（持续更新中）
-            </div>
-          </div>
-        </div> */}
         <img className="timer-divider" src={timerDivider} />
-        <img className="timer-cover" src={timerCover} />
-        <img className="timer" src={timer} />
-        <div className="timer-text">距离报名截止还剩</div>
-        <div className="timer-day">
-          {restDay}
-          <span className="text-[20px]">天</span>
+        <div className="timer">
+          <img src={timer} width={"100%"} />
+          <img className="timer-cover" src={timerCover} />
+          <div className="timer-text">距离报名截止还剩</div>
+          <div className="timer-day">
+            {restDay}
+            <span className="text-[20px]">天</span>
+          </div>
         </div>
       </div>
       <div className="flex items-center justify-between w-[1100px]">

src/images/arrange.svg

@@ -5,7 +5,10 @@ export const getDiffDay = (date1, date2) => {
   if (typeof date2 === "string") {
     date2 = Date.parse(date2);
   }
-  const diffTime = Math.abs(date1 - date2);
+  const diffTime = date1 - date2;
+  if (diffTime <= 0) {
+    return "0";
+  }
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
   return diffDays < 10 ? `0${diffDays}` : diffDays;
 };