diff --git a/component/sign-in/sign-in.js b/component/sign-in/sign-in.js
index 286dc78..3bb65d8 100644
--- a/component/sign-in/sign-in.js
+++ b/component/sign-in/sign-in.js
@@ -1,5 +1,5 @@
const signTemplate = document.createElement("template");
-signTemplate.innerHTML = `
本月已签到 0 天,共领 0 寄托币,次月可获寄托勤务兵勋章
立即签到
- 暂无数据 -
- End -
更多

`;
+signTemplate.innerHTML = `
本月已签到 0 天,共领 0 寄托币,次月可获寄托勤务兵勋章
立即签到
- 暂无数据 -
- End -
更多

`;
class SignInBox extends HTMLElement {
static get observedAttributes() {
diff --git a/component/sign-in/sign-in.txt b/component/sign-in/sign-in.txt
index 8aa9f7e..66e74e9 100644
--- a/component/sign-in/sign-in.txt
+++ b/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 @@
-
\ No newline at end of file
+
diff --git a/css/public.css b/css/public.css
index 4e214ab..fe8396f 100644
--- a/css/public.css
+++ b/css/public.css
@@ -1777,11 +1777,6 @@ body {
display: none;
padding: 5px;
}
-@media screen and (max-width: 480px) {
- .head-top .head-more {
- display: flex;
- }
-}
.hot-tag {
background-color: #ffffff;
border: 1px solid #e9eef2;
@@ -1970,6 +1965,7 @@ td {
}
.head-pop.head-pop-show {
left: 0;
+ display: block !important;
}
.head-pop.head-pop-show .head-more-pop {
animation: slide-in-left 0.5s ease-out forwards;
@@ -2097,3 +2093,208 @@ td {
margin: 0 auto;
box-sizing: content-box;
}
+@media (max-width: 1200px) {
+ .head-pop .head-more-pop {
+ width: 80vw;
+ }
+ .head-pop .head-more-pop .head-more-userinfo {
+ margin-left: 20px;
+ padding-right: 20px;
+ }
+ .head-pop .head-more-pop .tab-list {
+ padding-right: 20px;
+ margin-left: 20px;
+ }
+ .head-pop .head-more-pop .tab-list .tab-item {
+ height: 50px;
+ padding-left: 20px;
+ font-size: 14px;
+ }
+ .head-pop .head-more-pop .head-more-post {
+ margin: 40px 0 90px;
+ }
+ .head-pop .head-more-pop .cross-icon {
+ left: calc(50% + 40px);
+ }
+}
+@media (max-width: 768px) {
+ .head-pop .head-more-pop {
+ width: 100vw;
+ height: 100vh;
+ }
+ .head-pop .head-more-pop .head-more-userinfo {
+ margin-left: 16px;
+ padding-right: 16px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-right {
+ width: auto;
+ height: auto;
+ }
+ .head-pop .head-more-pop .tab-list {
+ padding-right: 16px;
+ margin-left: 16px;
+ }
+ .head-pop .head-more-pop .tab-list .tab-item {
+ height: 46px;
+ padding-left: 16px;
+ font-size: 13px;
+ }
+ .head-pop .head-more-pop .head-more-post {
+ margin: 36px 0 80px;
+ font-size: 16px;
+ }
+ .head-pop .head-more-pop .head-more-post .head-more-post-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 6px;
+ }
+ .head-pop .head-more-pop .cross-icon {
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 15px;
+ }
+}
+@media (max-width: 480px) {
+ .head-pop .head-more-pop .head-more-userinfo {
+ margin-left: 12px;
+ padding-right: 12px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-avatar {
+ width: 36px;
+ height: 36px;
+ margin-right: 8px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-username {
+ font-size: 12px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box {
+ width: 14px;
+ height: 14px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box .information-icon {
+ width: 14px;
+ height: 14px;
+ }
+ .head-pop .head-more-pop .head-more-userinfo .head-more-right .loginBtn {
+ width: 72px;
+ height: 28px;
+ font-size: 12px;
+ }
+ .head-pop .head-more-pop .tab-list {
+ padding-right: 12px;
+ margin-left: 12px;
+ }
+ .head-pop .head-more-pop .tab-list .tab-item {
+ height: 42px;
+ padding-left: 14px;
+ font-size: 12px;
+ }
+ .head-pop .head-more-pop .head-more-post {
+ margin: 24px 0 60px;
+ font-size: 14px;
+ }
+ .head-pop .head-more-pop .head-more-post .head-more-post-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 6px;
+ }
+ .head-pop .head-more-pop .head-more-post .head-more-post-icon .head-more-post-img {
+ width: 8px;
+ height: 8px;
+ }
+ .head-pop .head-more-pop .cross-icon {
+ width: 10px;
+ height: 10px;
+ padding: 12px;
+ bottom: 12px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
+@media screen and (max-width: 1200px) {
+ header.page-header {
+ min-width: auto !important;
+ }
+ header.page-header .box {
+ width: 100vw;
+ }
+ .head-top.flexacenter {
+ max-width: 1200px !important;
+ width: initial !important;
+ margin: 20px 10px 30px !important;
+ }
+ .head-top.flexacenter .input-box {
+ margin-right: 10px;
+ }
+ .index-footer {
+ min-width: inherit !important;
+ }
+}
+@media screen and (max-width: 768px) {
+ header.page-header {
+ display: none !important;
+ }
+ .head-top .head-more {
+ display: flex;
+ }
+ .index-footer {
+ display: none !important;
+ }
+ .head-top .post-list {
+ display: none !important;
+ }
+ #search .search-box {
+ width: auto !important;
+ margin: 0 10px 20px;
+ height: 40px !important;
+ }
+ #search .classify {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ #search .matter .matter-content {
+ margin: 0 10px;
+ }
+ #search .matter .sidebar-box {
+ display: none;
+ }
+ #search .matter .search-box {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ .item-box {
+ padding: 18px 10px 0;
+ }
+ .item-box .comment .text {
+ width: calc(100vw - 122px);
+ }
+ .item-box .bottom .bottom-item:not(:last-child) {
+ margin-right: 30px;
+ }
+}
+@media screen and (max-width: 500px) {
+ #search .classify .item {
+ min-width: inherit;
+ font-size: 13px;
+ height: 28px;
+ line-height: 28px;
+ border-radius: 8px;
+ }
+}
+@media screen and (max-width: 480px) {
+ .head-top.flexacenter {
+ margin-bottom: 10px !important;
+ }
+ .item-box .bottom {
+ height: 55px;
+ justify-content: space-between;
+ }
+ .item-box .bottom .bottom-item:not(:last-child) {
+ margin-right: 0;
+ }
+}
+@media screen and (max-width: 450px) {
+ #search .classify .item {
+ padding: 0 5px;
+ }
+}
diff --git a/css/public.less b/css/public.less
index 028e67c..ca29050 100644
--- a/css/public.less
+++ b/css/public.less
@@ -2140,14 +2140,6 @@ body {
}
}
-@media screen and (max-width: 480px) {
- .head-top {
- .head-more {
- display: flex;
- }
- }
-}
-
.hot-tag {
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
@@ -2369,6 +2361,7 @@ td {
&.head-pop-show {
left: 0;
+ display: block !important;
.head-more-pop {
animation: slide-in-left 0.5s ease-out forwards;
@@ -2515,5 +2508,238 @@ td {
margin: 0 auto;
box-sizing: content-box;
}
+
+ // 响应式断点:1200 / 768 / 480
+ @media (max-width: 1200px) {
+ width: 80vw;
+ .head-more-userinfo {
+ margin-left: 20px;
+ padding-right: 20px;
+ }
+ .tab-list {
+ padding-right: 20px;
+ margin-left: 20px;
+ .tab-item {
+ height: 50px;
+ padding-left: 20px;
+ font-size: 14px;
+ }
+ }
+ .head-more-post {
+ margin: 40px 0 90px;
+ }
+ .cross-icon {
+ left: calc(50% + 40px);
+ }
+ }
+
+ @media (max-width: 768px) {
+ width: 100vw;
+ height: 100vh;
+ .head-more-userinfo {
+ margin-left: 16px;
+ padding-right: 16px;
+ .head-more-right {
+ width: auto;
+ height: auto;
+ }
+ }
+ .tab-list {
+ padding-right: 16px;
+ margin-left: 16px;
+ .tab-item {
+ height: 46px;
+ padding-left: 16px;
+ font-size: 13px;
+ }
+ }
+ .head-more-post {
+ margin: 36px 0 80px;
+ font-size: 16px;
+ .head-more-post-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 6px;
+ }
+ }
+ .cross-icon {
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 15px;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .head-more-userinfo {
+ margin-left: 12px;
+ padding-right: 12px;
+ .head-more-left {
+ .head-more-userinfo-avatar {
+ width: 36px;
+ height: 36px;
+ margin-right: 8px;
+ }
+ .head-more-userinfo-username {
+ font-size: 12px;
+ }
+ }
+ .head-more-right {
+ .information-box {
+ width: 14px;
+ height: 14px;
+ .information-icon {
+ width: 14px;
+ height: 14px;
+ }
+ }
+ .loginBtn {
+ width: 72px;
+ height: 28px;
+ font-size: 12px;
+ }
+ }
+ }
+ .tab-list {
+ padding-right: 12px;
+ margin-left: 12px;
+ .tab-item {
+ height: 42px;
+ padding-left: 14px;
+ font-size: 12px;
+ }
+ }
+ .head-more-post {
+ margin: 24px 0 60px;
+ font-size: 14px;
+ .head-more-post-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 6px;
+ .head-more-post-img {
+ width: 8px;
+ height: 8px;
+ }
+ }
+ }
+ .cross-icon {
+ width: 10px;
+ height: 10px;
+ padding: 12px;
+ bottom: 12px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ header.page-header {
+ min-width: auto !important;
+ .box {
+ width: 100vw;
+ }
+ }
+
+ .head-top.flexacenter {
+ max-width: 1200px !important;
+ width: initial !important;
+ margin: 20px 10px 30px !important;
+
+ .input-box {
+ margin-right: 10px;
+ }
+ }
+
+ .index-footer {
+ min-width: inherit !important;
+ }
+}
+
+// 媒体查询 最大宽度 768px 时
+@media screen and (max-width: 768px) {
+ header.page-header {
+ display: none !important;
+ }
+
+ .head-top {
+ .head-more {
+ display: flex;
+ }
+ }
+
+ .index-footer {
+ display: none !important;
+ }
+
+ .head-top .post-list {
+ display: none !important;
+ }
+
+ #search {
+ .search-box {
+ width: auto !important;
+ margin: 0 10px 20px;
+ height: 40px !important;
+ }
+ .classify {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .matter {
+ .matter-content {
+ margin: 0 10px;
+ }
+ .sidebar-box {
+ display: none;
+ }
+
+ .search-box {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .item-box {
+ padding: 18px 10px 0;
+ .comment .text {
+ width: calc(100vw - 122px);
+ }
+ .bottom .bottom-item:not(:last-child) {
+ margin-right: 30px;
+ }
+ }
+}
+
+@media screen and (max-width: 500px) {
+ #search .classify .item {
+ min-width: inherit;
+ font-size: 13px;
+ height: 28px;
+ line-height: 28px;
+ border-radius: 8px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .head-top.flexacenter {
+ margin-bottom: 10px !important;
+ }
+
+ .item-box .bottom {
+ height: 55px;
+ justify-content: space-between;
+
+ .bottom-item:not(:last-child) {
+ margin-right: 0;
+ }
+ }
+}
+
+@media screen and (max-width: 450px) {
+ #search .classify .item {
+ padding: 0 5px;
}
}
diff --git a/css/search.css b/css/search.css
index a3407e3..2e77054 100644
--- a/css/search.css
+++ b/css/search.css
@@ -1,5 +1,5 @@
#search {
- width: 1200px;
+ max-width: 1200px;
margin: 0 auto;
}
#search .search-box {
diff --git a/css/search.less b/css/search.less
index 55a378b..3fae62f 100644
--- a/css/search.less
+++ b/css/search.less
@@ -1,5 +1,5 @@
#search {
- width: 1200px;
+ max-width: 1200px;
margin: 0 auto;
.search-box {
diff --git a/homepage-other.html b/homepage-other.html
index 5e14295..98f56dc 100644
--- a/homepage-other.html
+++ b/homepage-other.html
@@ -156,6 +156,7 @@
+