A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
82e67b2a0b2b2cb0636028f2c21ed1e8d78865fd
PC-Light-Forum/css/homepage-other.css
DESKTOP-RQ919RC\Pc 82e67b2a0b feat: 实现响应式布局优化，适配移动端设备 
- 修改主页和其他页面的宽度为百分比布局，添加最大宽度限制
- 增加媒体查询规则，针对不同屏幕尺寸调整布局和样式
- 优化导航栏、卡片和列表在移动端的显示效果
- 添加滚动条隐藏样式，提升移动端用户体验
2025-12-25 19:09:30 +08:00

406 lines
10 KiB
CSS
Raw Blame History

#homepage-other {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 10px;
}
#homepage-other .head-navigation {
margin-bottom: 20px;
}
#homepage-other .head-navigation .icon {
width: 16px;
height: 16px;
}
#homepage-other .head-navigation .arrows {
width: 7px;
height: 12px;
margin: 0 5px;
}
#homepage-other .head-navigation .text {
padding: 0 5px;
font-size: 14px;
color: #000000;
cursor: pointer;
}
#homepage-other .head-navigation .text:hover {
text-decoration: underline;
}
#homepage-other .matter {
align-items: flex-start;
}
#homepage-other .matter .card-user {
width: 320px;
background: -webkit-linear-gradient(270.06444514deg, #ffffff 0%, #eef8f9 100%);
background: -moz-linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%);
background: linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%);
box-sizing: border-box;
border: 1px solid #e9eef2;
border-radius: 10px;
flex-direction: column;
padding-top: 39px;
padding-bottom: 40px;
margin-right: 20px;
position: sticky;
top: 10px;
}
#homepage-other .matter .card-user .avatar {
width: 120px;
height: 120px;
border-radius: 8px;
margin-bottom: 20px;
}
#homepage-other .matter .card-user .name-area {
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
#homepage-other .matter .card-user .name-area .username {
font-size: 15px;
color: #333;
margin-bottom: 12px;
}
#homepage-other .matter .card-user .name-area .uid {
color: #7f7f7f;
font-size: 13px;
}
#homepage-other .matter .card-user .name-area .uid .icon {
width: 14px;
height: 14px;
margin-left: 9px;
cursor: pointer;
}
#homepage-other .matter .card-user .medal-area {
margin: 0 22px 36px 30px;
align-self: self-start;
}
#homepage-other .matter .card-user .medal-area .title {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 13px;
}
#homepage-other .matter .card-user .medal-area .list {
flex-flow: wrap;
}
#homepage-other .matter .card-user .medal-area .list .item {
height: 30px;
max-width: 30px;
margin-right: 8px;
margin-bottom: 8px;
}
#homepage-other .matter .card-user .btn-area .item {
width: 200px;
height: 40px;
background-color: #ffffff;
border: 1px solid #ebebeb;
border-radius: 8px;
font-size: 15px;
color: #555555;
cursor: pointer;
}
#homepage-other .matter .card-user .btn-area .item:not(:last-child) {
margin-bottom: 15px;
}
#homepage-other .matter .card-user .btn-area .item.msg {
background-color: #50e3c2;
border: 1px solid #50e3c2;
color: #000000;
}
#homepage-other .matter .matter-content .message-box {
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding-left: 95px;
padding-right: 40px;
padding-bottom: 31px;
margin-bottom: 20px;
}
#homepage-other .matter .matter-content .message-box .header {
border-bottom: 1px dotted #d7d7d7;
padding-top: 46px;
padding-bottom: 19px;
position: relative;
}
#homepage-other .matter .matter-content .message-box .header .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 40px;
left: -55px;
}
#homepage-other .matter .matter-content .message-box .header .username {
font-size: 14px;
color: #333333;
}
#homepage-other .matter .matter-content .message-box .header .icon {
height: 20px;
margin-left: 8px;
}
#homepage-other .matter .matter-content .message-box .info-list {
flex-flow: wrap;
padding-top: 20px;
border-bottom: 1px dotted #d7d7d7;
}
#homepage-other .matter .matter-content .message-box .info-list .item {
width: 50%;
margin-bottom: 15px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .label {
font-size: 14px;
color: #7f7f7f;
width: 87px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .value {
font-size: 14px;
color: #000000;
}
#homepage-other .matter .matter-content .message-box .info-list .item .status {
color: #555555;
font-size: 13px;
padding: 0 6px;
height: 20px;
line-height: 20px;
background-color: #f0f1ec;
border-radius: 23px;
margin-left: 10px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .status.blue {
color: #ffffff;
background-color: #04b0d5;
}
#homepage-other .matter .matter-content .message-box .stats {
padding-top: 20px;
padding-bottom: 21px;
font-size: 14px;
}
#homepage-other .matter .matter-content .message-box .stats .item .text {
color: #7f7f7f;
margin-right: 5px;
}
#homepage-other .matter .matter-content .message-box .stats .item .num {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700;
color: #50e3c2;
}
#homepage-other .matter .matter-content .message-box .stats .line {
color: #d7d7d7;
margin: 0 14px;
}
#homepage-other .matter .matter-content .message-box .tags {
flex-wrap: wrap;
}
#homepage-other .matter .matter-content .message-box .tags .item {
padding: 0 10px;
font-size: 14px;
color: #333333;
height: 24px;
background-color: #f6f6f6;
border: 1px solid #f0f1ec;
border-radius: 5px;
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
}
#homepage-other .matter .matter-content .message-box .tags .item .icon {
height: 13px;
margin-right: 7px;
}
#homepage-other .matter .matter-content .list-area {
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding-left: 95px;
padding-right: 40px;
padding-bottom: 50px;
}
#homepage-other .matter .matter-content .list-area .classify {
padding-top: 39px;
padding-bottom: 23px;
}
#homepage-other .matter .matter-content .list-area .classify .item {
width: 50px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #ffffff;
border: 1px solid #f2f2f2;
border-radius: 12px;
color: #333333;
cursor: pointer;
font-size: 15px;
}
#homepage-other .matter .matter-content .list-area .classify .item.pitch {
background-color: #d35110;
color: #ffffff;
}
#homepage-other .matter .matter-content .list-area .classify .item:not(:last-child) {
margin-right: 10px;
}
#homepage-other .matter .matter-content .list-area .issue-data {
color: #7f7f7f;
font-size: 14px;
margin-bottom: 20px;
}
#homepage-other .matter .matter-content .list-area .issue-data .num {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin: 0 5px;
}
#homepage-other .matter .matter-content .list-area .list-box .item-box {
margin-bottom: 20px;
}
#homepage-other .matter .matter-content .list-area .empty {
width: 725px;
height: 360px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
flex-direction: column;
}
#homepage-other .matter .matter-content .list-area .empty .empty-icon {
width: 80px;
height: 94px;
}
#homepage-other .matter .matter-content .list-area .empty .empty-text {
font-size: 14px;
color: #7f7f7f;
margin-top: 10px;
}
#homepage-other .matter .matter-content .list-area .load-more {
padding: 20px 0 40px;
color: #7f7f7f;
font-size: 14px;
}
@media screen and (max-width: 900px) {
#homepage-other .matter {
flex-direction: column;
}
#homepage-other .matter .card-user {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
position: static;
padding: 20px;
}
#homepage-other .matter .card-user .avatar {
width: 80px;
height: 80px;
}
#homepage-other .matter .card-user .btn-area {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 10px;
width: 100%;
}
#homepage-other .matter .card-user .btn-area .item {
flex: 1;
width: auto;
margin-bottom: 0 !important;
}
#homepage-other .matter .matter-content {
width: 100%;
}
#homepage-other .matter .matter-content .message-box {
padding: 20px;
}
#homepage-other .matter .matter-content .message-box .header {
display: none;
}
#homepage-other .matter .matter-content .message-box .info-list {
padding: 0;
}
#homepage-other .matter .matter-content .message-box .info-list .item {
width: 100%;
justify-content: space-between;
}
#homepage-other .matter .matter-content .list-area {
padding: 20px;
}
#homepage-other .matter .matter-content .list-area .classify {
overflow-x: auto;
justify-content: flex-start;
}
#homepage-other .matter .matter-content .list-area .classify .item {
width: auto;
padding: 0 10px;
height: 28px;
line-height: 28px;
font-size: 13px;
border-radius: 8px;
}
#homepage-other .matter .matter-content .list-area .empty {
width: 100%;
}
}
@media screen and (max-width: 480px) {
#homepage-other .head-navigation {
font-size: 12px;
}
#homepage-other .matter .matter-content .list-area {
padding-left: 10px;
padding-right: 10px;
}
#homepage-other .matter .matter-content .list-area .classify {
padding: 20px 0;
}
#homepage-other .matter .matter-content .list-area .classify .item {
padding: 0 7px;
}
#homepage-other .matter .card-user .btn-area {
flex-direction: column;
}
#homepage-other .matter .card-user .btn-area .item {
flex: none;
width: 100%;
margin-bottom: 10px !important;
}
}
@media screen and (max-width: 430px) {
#homepage-other .matter .matter-content .list-area .classify .item:not(:last-child) {
margin-right: 7px;
}
}
@media screen and (max-width: 1015px) {
.item-box .bottom .bottom-item:not(:last-child) {
margin-right: 45px;
}
}
@media screen and (max-width: 955px) {
.item-box .bottom .bottom-item:not(:last-child) {
margin-right: 30px;
}
}
@media screen and (max-width: 900px) {
.head-top .post-list,
.head-top .sign-in {
display: none !important;
}
}
@media screen and (max-width: 480px) {
.head-top .logo {
height: 30px;
width: auto;
}
.head-top .input-box {
background: transparent !important;
border: none !important;
width: auto !important;
padding: 0 !important;
}
.head-top .input-box .placeholder,
.head-top .input-box .input,
.head-top .input-box .search-box-history {
display: none !important;
}
.head-top .input-box .icon {
margin: 0 10px;
display: block !important;
}
}
Reference in New Issue View Git Blame Copy Permalink