11

src/assets/hard.css

@@ -20,19 +20,20 @@
 .hardtxt {
   letter-spacing: 0.1rem;
   width: 6rem;
-  height: 15% !important;
+  height: 20% !important;
   display: flex;
+  flex-direction: column;
   font-size: 0.35rem;
   font-weight: 700;
-  justify-content: start;
-  align-items: start;
+  justify-content: center;
+  align-items: center;
   background-clip: text;
   flex-wrap: wrap;
   color: rgba(0, 0, 0, 0);
   background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
   position: absolute;
   left: 1rem;
-  top: 0rem;
+  top: 5% !important;
   transition: all 1s ease;
   transition-delay: 0.5s;
   transform: translateX(-3rem);
@@ -59,7 +60,7 @@
   font-weight: 70;
   display: flex;
   color: aliceblue;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
   transition: all 1s ease;
   transition-delay: 1s;

src/assets/night.css

@@ -51,14 +51,16 @@
 }
 
 .nightfont {
+  white-space: nowrap;
   position: absolute;
   z-index: 3;
   display: flex;
+  flex-direction: column;
   justify-content: start;
   align-items: center;
   width: 6rem;
-  height: 1rem;
-  top: 0;
+  height: 4rem !important;
+  top: 5% !important;
   left: 1rem;
   /* background-color: red; */
   font-size: 0.35rem;
@@ -84,13 +86,13 @@
 
 .nightgl {
   display: flex;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
   width: 5rem;
-  height: 0.5rem;
+  height: 1rem !important;
   position: absolute;
   left: 1.2rem;
-  top: 1.1rem;
+  top: 24% !important;
   color: aliceblue;
   font-weight: 70;
   font-size: 0.2rem;
@@ -101,9 +103,13 @@
   filter: blur(0.1rem);
 
   .haiyou{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
     position: absolute;
     left: 0;
-    top: 100%;
+    top: 90%;
     font-size: .3rem;
   }
 }

src/components/Hard.vue

@@ -2,8 +2,8 @@
   <section>
     <div class="hard">
       <div class="hardtxt">
-        <span>还记得</span><br>「<span>{{ maxtries }}</span>」<br><span>这道题吗？</span
-        ><span>你提交了整整 <span class="cnt">{{ cnt }}</span> 次才过</span>
+        <span>还记得</span><span>「{{ maxtries }}」</span><span>这道题吗？</span
+        ><span style="margin-top: .3rem;">你提交了整整 <span class="cnt">{{ cnt }}</span> 次才过</span>
       </div>
       <div class="hard_slogan">
         那份喜悦背后的坚韧，一定也陪你走到了今天

src/components/Night.vue

@@ -2,12 +2,11 @@
   <section>
     <div class="night">
       <div class="nightfont">
-        与星同行的你<span>{{ night }}</span>还在做题<span>😴</span>
+        <p>与星同行的你</p><span style="margin: .3rem;">{{ night }}</span><p>还在做题<span>😴</span></p>
       </div>
       <div class="nightgl">
         这是属于你的不眠之夜
-        <div class="haiyou" v-if="hastogether">在这一晚，还有{{haiyou}}名用户和你一样在夜色中遨想星河</div>
-        <!-- <img class="sticker" src="../assets/img/sticker.png" alt="" /> -->
+        <div class="haiyou" v-if="hastogether">在这一晚，还有<span style="font-size: .7rem;">{{haiyou}}</span>名用户和你一样在夜色中遨想星河</div>
       </div>
       <div class="moon"></div>
       <div class="sea"></div>

src/views/Message.vue

@@ -6,8 +6,11 @@
     class="next"
     :class="{ nextactive: isnext }"
   />
+  <Night id="page6" class="page hide" v-if="hasNight"></Night>
+
+  <Hard id="page7" class="page " v-if="hasMaxTries"></Hard>
 
-  <section id="page1" class="page ">
+  <section id="page1" class="page hide">
     <div class="confettis" v-if="true">
       <div class="confetti"></div>
       <div class="confetti"></div>
@@ -68,8 +71,6 @@
   <NewContest id="page4" class="page hide"></NewContest>
   <AC id="page5" class="page hide"></AC>
 
-  <Night id="page6" class="page hide" v-if="hasNight"></Night>
-  <Hard id="page7" class="page hide" v-if="hasMaxTries"></Hard>
   <BiSai id="page8" class="page hide" v-if="hascontest"></BiSai>
   <Blue id="page9" class="page hide" v-if="hasBlue" ></Blue>