feat: 优化响应式布局并添加签到组件
refactor: 重构CSS和LESS文件以支持响应式设计 fix: 修复图片上传和编辑器解析问题 style: 调整搜索框和日历组件的样式 docs: 更新HTML模板中的广告和操作链接
This commit is contained in:
DESKTOP-RQ919RC\Pc
211
css/public.css
211
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;
|
||||
}
|
||||
}
|
||||
|
||||
242
css/public.less
242
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#search {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#search .search-box {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#search {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.search-box {
|
||||
|
||||
Reference in New Issue
Block a user