refactor(components): 使用defineAsyncComponent优化异步组件加载

fix(public.js): 添加getScriptParameter函数并处理请求参数
style(index.html): 移除多余空行和注释
perf(bi.js): 移除冗余ajax方法并优化请求参数处理
docs(sign-in.txt): 调整样式和响应式布局

component/sign-in/sign-in.txt

@@ -51,14 +51,14 @@
 
   .signInBox-mask a {
     text-decoration: none;
-    color: unset; 
+    color: unset;
   }
 
   .signInBox-mask .signInBox {
-    width: min(1060px, 95vw);
+    width: 1060px;
     background-color: #fff;
     border-radius: 20px;
-    position: relative; 
+    position: relative;
     filter: drop-shadow(0 -5px 0 #f7c308);
   }
 
@@ -97,19 +97,21 @@
 
   .signInBox-mask .signInBox .signInBox-content {
     align-items: flex-start;
-    height: auto;
-    gap: 16px;
-    flex-wrap: wrap;
+    height: 595px;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box {
-    flex: 1 1 520px;
-    max-width: 560px;
+    width: 50%;
+    max-width: 538px;
     padding: 20px 30px 40px;
     border-right: 1px dotted #d7d7d7;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .content-header {
+    width: 100%;
     font-size: 15px;
     color: #555555;
     line-height: 40px;
@@ -144,19 +146,19 @@
     cursor: pointer;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring {
     position: absolute;
-    left: calc(100% + 31px);
-    top: -21px;
+    left: 0;
+    top: 0;
     z-index: 1;
-    width: 522px;
-    height: 596px;
+    width: 100%;
+    height: 100%;
     background-color: #fdda55;
     padding: 20px;
-    border-radius: 0 0 20px 0;
+    border-radius: 20px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring::after {
     content: "";
     position: absolute;
     top: 26px;
@@ -171,7 +173,7 @@
     border-right-color: #fdda55;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box {
     background-color: #fff;
     -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
     -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824);
@@ -182,7 +184,7 @@
     padding-bottom: 62px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
     font-weight: 650;
     font-size: 24px;
     color: #ab8705;
@@ -194,7 +196,7 @@
     margin-bottom: 14px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header::after {
     content: "";
     display: block;
     position: absolute;
@@ -208,12 +210,12 @@
     z-index: -1;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list {
     flex-direction: column;
     margin: 0 23px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
     width: 52px;
     height: 52px;
     background-color: #f6f6f6;
@@ -225,23 +227,23 @@
     margin-right: 30px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
     width: 30px;
     height: 36px;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
     color: #333;
     line-height: 28px;
     font-size: 16px;
     padding: 40px 0;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text {
     border-bottom: 1px dotted #ebebeb;
   }
 
-  .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-close {
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-close {
     font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
@@ -256,7 +258,9 @@
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
     width: 100%;
-    height: auto;
+    max-width: 477px;
+    min-width: min-content;
+    height: 479px;
     background-color: #fbfbfb;
     border-radius: 12px;
     flex-direction: column;
@@ -281,15 +285,17 @@
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
     margin: 0 0 14px;
     display: grid;
-    grid-template-columns: repeat(7, minmax(32px, 1fr));
-    column-gap: 12px;
-    row-gap: 10px;
+    grid-template-columns: repeat(7, minmax(40px, 1fr));
+    justify-items: center;
+    gap: 10px;
+    width: 100%;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
-    width: 100%;
-    aspect-ratio: 1 / 1;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
+    margin-bottom: 10px;
     font-size: 17px;
     color: #aaaaaa;
     position: relative;
@@ -329,7 +335,7 @@
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
-    min-height: 48px;
+    height: 48px;
     border-radius: 219px;
     background-color: #f7c308;
     color: #fff;
@@ -351,29 +357,16 @@
     color: #555555;
     font-size: 15px;
     flex-direction: column;
-    flex: 1 1 420px;
-    min-height: 320px;
-    height: auto;
-    overflow: auto;
+    height: inherit;
+    position: relative;
+    overflow: hidden;
   }
-
-  @media (max-width: 768px) {
-    .signInBox-mask .signInBox {
-      width: 95vw;
-    }
-    .signInBox-mask .signInBox .signInBox-content {
+  
+  .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-scroll-wrapper {
+      overflow: auto;
+      flex: 1;
+      display: flex;
       flex-direction: column;
-      gap: 12px;
-    }
-    .signInBox-mask .signInBox .signInBox-content .left-box {
-      max-width: 100%;
-      border-right: none;
-      border-bottom: 1px dotted #d7d7d7;
-    }
-    .signInBox-mask .signInBox .signInBox-content .sign-in-box {
-      margin: 0;
-      border-radius: 12px;
-    }
   }
 
   .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
@@ -657,6 +650,333 @@
       display: none;
     }
   }
+  @media screen and (max-width: 1200px) {
+    .signInBox-mask .signInBox {
+      width: 95%;
+      max-width: 1060px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .signInBox-mask {
+        align-items: flex-end; /* Align box to bottom */
+    }
+
+    .signInBox-mask .signInBox {
+      width: 100%; /* Full width */
+      max-width: none; /* Remove max width */
+      height: 90vh;
+      border-radius: 20px 20px 0 0; /* Rounded top corners only */
+      margin: 0; /* No margins */
+      display: flex;
+      flex-direction: column;
+      /* overflow-y: hidden; */ /* Container fixed, inner scrolls */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-head {
+        flex-shrink: 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content {
+      flex-direction: column;
+      height: 0; /* Allow growing */
+      flex: 1;
+      align-items: stretch;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box {
+      width: 100%;
+      height: auto; /* Let it grow */
+      flex: 0 0 auto; /* Don't shrink below content */
+      border-right: none;
+      border-bottom: 1px dotted #d7d7d7;
+      padding: 15px 20px; /* Restore comfortable padding */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      overflow: visible; /* Default overflow */
+      max-width: inherit;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header {
+      width: 100%;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-bottom: 16px; /* Restore margin */
+      transform: none; /* Restore size */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 90%;
+      height: auto;
+      max-height: 80vh;
+      border-radius: 20px;
+      background-color: rgba(253, 218, 85, 0.95);
+      position: fixed;
+      z-index: 10010;
+      overflow: hidden;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring::after {
+        display: none;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box {
+      padding-bottom: 30px;
+      height: auto;
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list {
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header {
+      font-size: 20px;
+      padding-top: 25px;
+      margin-bottom: 10px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after {
+      width: 100px;
+      height: 18px;
+      bottom: -2px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+      width: 42px;
+      height: 42px;
+      margin-right: 15px;
+      border-radius: 12px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+      width: 24px;
+      height: 28px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+      font-size: 14px;
+      line-height: 24px;
+      padding: 20px 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
+      max-width: 100%;
+      height: auto;
+      padding: 0; /* Remove all padding */
+      padding: 10px 0; /* Add vertical margin */
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text {
+        margin-bottom: 15px; /* Restore margin */
+        font-size: 14px; /* Restore font size */
+        line-height: 28px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr); /* Force 7 columns */
+        gap: 1.5%; /* Relative gap */
+        width: 100%; /* Full width */
+        max-width: none; /* Remove limit */
+        justify-items: center; /* Center items in their cells */
+        margin-bottom: 15px; /* Restore margin */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
+      width: 100%; /* Fill grid cell */
+      max-width: 40px; /* Limit max size to original desktop size */
+      aspect-ratio: 1; /* Keep square */
+      height: auto; /* Auto height based on width */
+      line-height: normal; /* Reset line-height */
+      display: flex; /* Use flex for centering content */
+      align-items: center;
+      justify-content: center;
+      font-size: min(14px, 3vw); /* Fluid font size */
+      margin: 0; /* Grid handles spacing */
+      border-width: 1px; /* Default border width */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
+        height: 40px; /* Reduced height */
+        font-size: 16px; /* Adjusted font size */
+        width: auto; /* Restore width */
+        min-width: auto;
+        padding: 0 30px; /* Add padding for auto width */
+    }
+    
+    /* Adjust border width for 'today' item to be relative if possible, but px is usually safer for borders. 
+       We can use thin/medium or keep 1px as it's already quite thin. 
+       Let's keep 1px but ensure box-sizing handles it well. */
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.today {
+        border-width: 1px; 
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
+        width: 30%; /* Relative tick size */
+        height: 30%;
+        top: -5%;
+        right: -5%;
+    }
+
+    /* Remove previous margin overrides as grid handles it */
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
+      margin-right: 0;
+    }
+    
+    /* List Styling Adjustments */
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box {
+      width: 100%;
+      height: auto; /* Auto height */
+      flex: 1; /* Take remaining height */
+      margin: 0;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      /* overflow: hidden; */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header {
+        padding: 15px 10px; /* Compact header */
+        font-size: 13px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item {
+        padding: 8px 0 0 10px; /* Compact item padding */
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-index {
+        font-size: 13px;
+        width: 30px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
+        width: 32px;
+        height: 32px;
+        font-size: 14px;
+        margin-right: 10px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name {
+        font-size: 13px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-time {
+        font-size: 12px;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .signInBox-mask .signInBox .signInBox-head .header-bi {
+      width: 60px;
+      height: 72px;
+      top: -45px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-head .header-halo {
+      width: 120px;
+      height: 115px;
+      top: -65px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box {
+        padding: 15px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value {
+        font-size: 24px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
+      padding: 20px 5px; /* Very tight padding for mobile */
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 1.5%; /* Relative gap */
+        justify-items: center;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
+      width: 100%;
+      max-width: none; /* Fully fluid */
+      aspect-ratio: 1;
+      height: auto;
+      font-size: 4vw; /* Large relative font for mobile */
+      margin: 0;
+      /* display: none;  Remove hide default */
+      border-width: 1px;
+    }
+    
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick {
+        width: 35%; /* Larger relative tick for mobile */
+        height: 35%;
+    }
+
+    /* .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.show-mobile {
+        display: flex; 
+    } Remove show logic */
+
+    /* Override any previous margin settings */
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
+      margin-right: 0;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
+      height: 36px;
+      font-size: 15px;
+      margin-top: 10px;
+    }
+    
+    /* Adjust Success Modal for mobile */
+    .signInBox-mask .succeed-mask .succeed-box {
+        transform: scale(0.9);
+    }
+    
+    /* Further compact list for mobile */
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value {
+        width: 28px;
+        height: 28px;
+        font-size: 13px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-header {
+      font-size: 18px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-icon {
+      width: 36px;
+      height: 36px;
+      margin-right: 10px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-img {
+      width: 20px;
+      height: 24px;
+    }
+
+    .signInBox-mask .signInBox .signInBox-content .sign-in-box .outer-ring .rule-box .rule-list .rule-item .rule-item-text {
+      font-size: 13px;
+      padding: 15px 0;
+    }
+  }
 </style>
 <div class="signInBox-mask flexcenter">
   <div class="signInBox">
@@ -672,14 +992,6 @@
           <div class="bi-value" data-field="integral">0</div>
           <div class="bi-text">寄托币</div>
           <div class="bi-rule">签到规则</div>
-          <div class="outer-ring" hidden>
-            <div class="rule-box flexflex">
-              <div class="rule-header">签到规则</div>
-              <div class="rule-list flexflex" data-list="tips"></div>
-              <div class="flex1"></div>
-              <div class="rule-close">关闭</div>
-            </div>
-          </div>
         </div>
 
         <div class="calendar-box flexflex">
@@ -694,16 +1006,27 @@
       </div>
 
       <div class="sign-in-box flex1 flexflex">
-        <div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人
+        <div class="sign-in-scroll-wrapper flex1 flexcolumn">
+            <div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人
+            </div>
+            <div class="discuss-list-no flexcenter flex1">
+            <img class="empty-icon" src="https://app.gter.net/image/gter/commonCom/sign-in/img/empty-icon.png">
+            <div class="discuss-list-no-text">- 暂无数据 -</div>
+            </div>
+            <div class="sign-in-list"></div>
+            <div class="sign-in-finish flexcenter">- End -</div>
+            <div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
+                src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
         </div>
-        <div class="discuss-list-no flexcenter flex1">
-          <img class="empty-icon" src="https://app.gter.net/image/gter/commonCom/sign-in/img/empty-icon.png">
-          <div class="discuss-list-no-text">- 暂无数据 -</div>
+        
+        <div class="outer-ring" hidden>
+            <div class="rule-box flexflex">
+                <div class="rule-header">签到规则</div>
+                <div class="rule-list flexflex" data-list="tips"></div>
+                <div class="flex1"></div>
+                <div class="rule-close">关闭</div>
+            </div>
         </div>
-        <div class="sign-in-list"></div>
-        <div class="sign-in-finish flexcenter">- End -</div>
-        <div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
-            src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
       </div>
     </div>
   </div>
@@ -736,4 +1059,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>