A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(组件): 优化移动端分享功能并调整样式

Browse Source 
调整推荐和精华图标高度为25px
为移动端添加点击分享直接复制链接功能
修复itemBottom组件中itemvalue拼写错误
添加响应式布局样式适配不同屏幕尺寸
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-18 18:33:52 +08:00
parent 69aee5460a
commit 1a49ba60ce
9 changed files with 791 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/public.css
View File

@@ -710,6 +710,8 @@ body {
.item-box .comment .text {
font-size: 14px;
color: #7f7f7f;
flex: 1;
width: 10px;
}
.item-box .bottom {
height: 55px;

2
css/public.less
View File

@@ -857,6 +857,8 @@ body {
.text {
font-size: 14px;
color: #7f7f7f;
flex: 1;
width: 10px;
}
}

47
css/section.css
View File

@@ -1,5 +1,5 @@
#sectionIndex {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
}
#sectionIndex .matter {
@@ -77,7 +77,7 @@
z-index: -1;
}
#sectionIndex .matter .matter-content .info-box {
width: 1035px;
width: 100%;
background: -webkit-linear-gradient(270.53908529deg, #ffffff 2%, #ebf8f9 98%);
background: -moz-linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%);
background: linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%);
@@ -263,7 +263,7 @@
width: 265px;
}
#sectionIndex .matter .matter-content .details-box .content-box .red-tag {
width: 732px;
width: 100%;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
@@ -307,9 +307,6 @@
margin-bottom: 14px;
cursor: pointer;
}
#sectionIndex .matter .matter-content .details-box .content-box .list-box {
width: 732px;
}
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box {
margin-bottom: 12px;
}
@@ -361,3 +358,41 @@
#sectionIndex .matter .matter-content .details-box .sidebar-box .side-box.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
@media screen and (max-width: 1000px) {
.item-box .bottom {
justify-content: space-between;
}
.item-box .bottom .bottom-item:not(:last-child) {
margin-right: 0;
}
}
@media screen and (max-width: 880px) {
#sectionIndex {
margin: 0 10px;
}
#sectionIndex .matter .matter-content .details-box .sidebar-box {
display: none;
}
#sectionIndex .matter .matter-content .details-box .content-box {
margin-right: 0;
}
.item-box .comment .text {
width: 10px !important;
}
}
@media screen and (max-width: 768px) {
.item-box {
padding: 18px 20px 0;
}
}
@media screen and (max-width: 680px) {
#sectionIndex .matter .matter-content .info-box .right .bottom .btn {
width: auto;
background-color: transparent;
}
}
@media screen and (max-width: 600px) {
#sectionIndex .matter .sidebar {
display: none;
}
}

55
css/section.less
View File

@@ -1,5 +1,5 @@
#sectionIndex {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
.matter {
@@ -84,7 +84,7 @@
.matter-content {
.info-box {
width: 1035px;
width: 100%;
background: -webkit-linear-gradient(270.539085289936deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
background: -moz-linear-gradient(179.460914710064deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
background: linear-gradient(179.460914710064deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
@@ -296,7 +296,7 @@
}
.red-tag {
width: 732px;
width: 100%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
@@ -345,7 +345,7 @@
}
.list-box {
width: 732px;
// width: 732px;
.item-box {
margin-bottom: 12px;
@@ -427,3 +427,50 @@
}
}
}
@media screen and (max-width: 1000px) {
.item-box .bottom {
justify-content: space-between;
.bottom-item:not(:last-child) {
margin-right: 0;
}
}
}
@media screen and (max-width: 880px) {
#sectionIndex {
margin: 0 10px;
}
#sectionIndex .matter .matter-content .details-box .sidebar-box {
display: none;
}
#sectionIndex .matter .matter-content .details-box .content-box {
margin-right: 0;
}
.item-box .comment .text {
width: 10px !important;
}
}
@media screen and (max-width: 768px) {
.item-box {
padding: 18px 20px 0;
}
}
@media screen and (max-width: 680px) {
#sectionIndex .matter .matter-content .info-box .right .bottom .btn {
width: auto;
background-color: transparent;
}
}
@media screen and (max-width: 600px) {
#sectionIndex .matter .sidebar {
display: none;
}
}