feat: 优化响应式布局并添加签到组件

refactor: 重构CSS和LESS文件以支持响应式设计
fix: 修复图片上传和编辑器解析问题
style: 调整搜索框和日历组件的样式
docs: 更新HTML模板中的广告和操作链接

component/sign-in/sign-in.txt

@@ -51,14 +51,14 @@
 
   .signInBox-mask a {
     text-decoration: none;
-    color: unset;
+    color: unset; 
   }
 
   .signInBox-mask .signInBox {
-    width: 1060px;
+    width: min(1060px, 95vw);
     background-color: #fff;
     border-radius: 20px;
-    position: relative;
+    position: relative; 
     filter: drop-shadow(0 -5px 0 #f7c308);
   }
 
@@ -97,11 +97,14 @@
 
   .signInBox-mask .signInBox .signInBox-content {
     align-items: flex-start;
-    height: 595px;
+    height: auto;
+    gap: 16px;
+    flex-wrap: wrap;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box {
-    width: 538px;
+    flex: 1 1 520px;
+    max-width: 560px;
     padding: 20px 30px 40px;
     border-right: 1px dotted #d7d7d7;
   }
@@ -252,8 +255,8 @@
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box {
-    width: 477px;
-    height: 479px;
+    width: 100%;
+    height: auto;
     background-color: #fbfbfb;
     border-radius: 12px;
     flex-direction: column;
@@ -277,14 +280,16 @@
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar {
     margin: 0 0 14px;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(32px, 1fr));
+    column-gap: 12px;
+    row-gap: 10px;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item {
-    width: 40px;
-    height: 40px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
     border-radius: 50%;
-    margin-bottom: 10px;
     font-size: 17px;
     color: #aaaaaa;
     position: relative;
@@ -292,7 +297,7 @@
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) {
-    margin-right: 25px;
+    margin-right: 0;
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.formerly {
@@ -324,7 +329,7 @@
   }
 
   .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn {
-    height: 48px;
+    min-height: 48px;
     border-radius: 219px;
     background-color: #f7c308;
     color: #fff;
@@ -346,10 +351,31 @@
     color: #555555;
     font-size: 15px;
     flex-direction: column;
-    height: inherit;
+    flex: 1 1 420px;
+    min-height: 320px;
+    height: auto;
     overflow: auto;
   }
 
+  @media (max-width: 768px) {
+    .signInBox-mask .signInBox {
+      width: 95vw;
+    }
+    .signInBox-mask .signInBox .signInBox-content {
+      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 {
     padding: 24px 30px 9px;
     font-size: 14px;
@@ -710,4 +736,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>