A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5c199bb8fea655e3719aed0a94580777d5b806e8
PC-Light-Forum/css/index.css
DESKTOP-RQ919RC\Pc 5c199bb8fe refactor(组件): 重构链接处理并优化样式结构 
- 将硬编码的详情页链接改为通过item.url统一管理
- 将评论区域的div改为可点击的a标签
- 调整图标容器的样式结构，增加定位和尺寸控制
- 修复标签过滤逻辑，避免空值导致的错误
2025-11-06 19:19:59 +08:00

550 lines
16 KiB
CSS
Raw Blame History

#appIndex {
width: 1200px;
margin: 0 auto;
}
#appIndex a {
text-decoration: none;
}
#appIndex .header-content-box {
justify-content: space-between;
margin-bottom: 28px;
}
#appIndex .header-content-box .header-content-left .adv-list {
margin-bottom: 18px;
}
#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) {
margin-right: 12px;
}
#appIndex .header-content-box .header-content-left .adv-list .adv-item a {
display: block;
}
#appIndex .header-content-box .header-content-left .adv-list .adv-item img {
width: 468px;
height: 60px;
border-radius: 10px;
display: block;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top {
width: 64px;
height: 24px;
border-radius: 20px 20px 20px 0;
margin-top: 0;
margin-bottom: 10px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .icon {
width: 15px;
height: 12px;
margin-right: 3px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #ffffff;
font-size: 14px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box {
width: 308px;
height: 320px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 10px;
margin-right: 12px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .head-top {
background-color: #f4ae38;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head {
height: 109px;
background-color: #f6f6f6;
border-radius: 8px;
flex-direction: column;
justify-content: space-between;
padding: 12px 16px;
margin-bottom: 12px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .title {
font-size: 16px;
color: #000000;
line-height: 23px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .hint {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #7f7f7f;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people {
position: relative;
justify-content: space-between;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people::after {
content: "";
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
width: 30px;
height: 4px;
background-color: #f4ae38;
border-radius: 150px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left {
color: #aaaaaa;
font-size: 13px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left .number {
color: #333333;
margin-right: 3px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item {
width: 26px;
height: 26px;
border-radius: 50%;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item .img {
width: 26px;
height: 26px;
border-radius: 50%;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
margin-right: -9px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
margin-right: -9px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
margin-right: -7px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item {
cursor: pointer;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
margin-bottom: 1px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .img {
width: 12px;
height: 10px;
margin-right: 9px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text {
font-size: 14px;
color: #555555;
line-height: 28px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text:hover {
color: #000000;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
width: 628px;
height: 320px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 10px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .head-top {
background-color: #f68251;
margin-bottom: 22px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list {
flex-wrap: wrap;
padding: 0 5px;
justify-content: space-between;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item {
font-size: 14px;
color: #555555;
line-height: 20px;
margin-bottom: 12px;
position: relative;
cursor: pointer;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item:hover {
color: #000000;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #f68251;
margin-right: 10px;
}
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text {
width: 265px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box {
width: 948px;
height: 140px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding-left: 12px;
margin-top: 12px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv {
margin-right: 26px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon {
width: 295px;
height: 118px;
border-radius: 5px;
cursor: pointer;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
font-size: 14px;
color: #555555;
padding-top: 12px;
width: 281px;
margin-right: 39px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 {
margin-right: 0;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 .item .text {
width: 255px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item {
height: 20px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) {
margin-bottom: 12px;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .icon {
width: 6px;
height: 6px;
margin-right: 10px;
background: #30b0d5;
border-radius: 50%;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
cursor: pointer;
width: 266px;
text-decoration: none;
color: #555;
}
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text:hover {
color: #000000;
}
#appIndex .header-content-box .header-content-right {
width: 240px;
}
#appIndex .header-content-box .header-content-right .post-entrance {
background-color: #fff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top {
height: 46px;
background-color: #d5f3f7;
border-radius: 8px;
font-size: 14px;
text-align: center;
color: #333;
cursor: pointer;
padding-left: 52px;
margin-bottom: 8px;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top:hover {
background-color: #c2eff6;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top .icon {
width: 20px;
height: 20px;
margin-right: 13px;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom {
height: 90px;
flex-wrap: wrap;
background-color: #f6f6f6;
border-radius: 8px;
overflow: hidden;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item {
width: 50%;
height: 50%;
cursor: pointer;
font-size: 14px;
color: #333;
text-decoration: none;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:nth-child(odd) {
border-right: 1px solid #ebebeb;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:not(:nth-last-child(-n + 2)) {
border-bottom: 1px solid #ebebeb;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:hover {
background-color: #e7e7e7;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon-box {
position: relative;
width: 16px;
height: 16px;
margin-right: 8px;
}
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon-box .icon {
position: absolute;
width: 38px;
top: -8px;
left: -6px;
}
#appIndex .header-content-box .header-content-right .adv {
width: 240px;
height: 140px;
margin-bottom: 10px;
display: block;
}
#appIndex .header-content-box .header-content-right .adv a {
display: block;
}
#appIndex .header-content-box .header-content-right .adv img {
width: 240px;
height: 140px;
border-radius: 10px;
display: block;
}
#appIndex .header-content-box .header-content-right .group-box {
width: 240px;
height: 150px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
#appIndex .header-content-box .header-content-right .group-box .group {
flex-wrap: wrap;
height: 100%;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item {
width: 50%;
height: 50%;
cursor: pointer;
color: #333;
text-decoration: none;
flex-direction: column;
background-color: #f6f6f6;
font-size: 14px;
text-align: center;
line-height: 22px;
position: relative;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(1) {
border-top-left-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(2) {
border-top-right-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(3) {
border-bottom-left-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(4) {
border-bottom-right-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) {
border-right: 1px solid #ebebeb;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:not(:nth-last-child(-n + 2)) {
border-bottom: 1px solid #ebebeb;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover {
background-color: #e7e7e7;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .icon {
width: 16px;
height: 16px;
margin-right: 6px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle {
color: #555555;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover .QRcode-box {
display: flex;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 64px;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .text {
color: #555555;
font-size: 14px;
}
#appIndex .header-content-box .header-content-right .offer-box {
width: 240px;
height: 214px;
background-color: #fff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 17px 10px;
overflow: hidden;
}
#appIndex .header-content-box .header-content-right .offer-box.small {
height: 64px;
padding: 15px 10px;
}
#appIndex .header-content-box .header-content-right .offer-box .item {
align-items: flex-start;
cursor: pointer;
margin-bottom: 19px;
}
#appIndex .header-content-box .header-content-right .offer-box .item .avatar {
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 50%;
background-size: contain;
}
#appIndex .header-content-box .header-content-right .offer-box .item .condition {
font-size: 12px;
color: #aaaaaa;
width: 180px;
}
#appIndex .header-content-box .header-content-right .offer-box .item .titletitle {
font-family: "ArialMT", "Arial", sans-serif;
font-weight: 400;
font-size: 13px;
color: #333333;
width: 180px;
}
#appIndex .header-content-box .header-content-right .offer-box .item:hover .titletitle {
color: #000000;
}
#appIndex .admission {
margin-bottom: 30px;
}
#appIndex .admission .admission-header {
margin-bottom: 24px;
display: inline-flex;
}
#appIndex .admission .admission-header .admission-header-icon {
width: 91px;
height: 28px;
margin-right: 16px;
}
#appIndex .admission .admission-header .admission-header-name {
font-family: "Roboto-Light", "Roboto Light", "Roboto", sans-serif;
font-weight: 200;
font-size: 16px;
line-height: 16px;
color: #555555;
align-items: flex-end;
}
#appIndex .admission .admission-list {
flex-wrap: wrap;
}
#appIndex .admission .admission-list .admission-item {
width: 291px;
height: 103px;
border-radius: 9px;
cursor: pointer;
overflow: hidden;
}
#appIndex .admission .admission-list .admission-item:not(:nth-child(4n)) {
margin-right: 12px;
}
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
margin-bottom: 14px;
}
#appIndex .matter .matter-content {
margin-right: 12px;
}
#appIndex .matter .matter-content .forum-sections-list {
position: relative;
width: 897px;
height: 240px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding-left: 70px;
padding-top: 20px;
margin-bottom: 20px;
}
#appIndex .matter .matter-content .forum-sections-list .img {
position: absolute;
top: -1px;
left: -1px;
width: 60px;
height: 240px;
}
#appIndex .matter .matter-content .forum-sections-list .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-bottom: 16px;
}
#appIndex .matter .matter-content .forum-sections-list .list .line:not(:last-child) {
margin-bottom: 10px;
}
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #333;
padding: 0 18px;
height: 32px;
background-color: #f6f6f6;
border: 1px solid #f2f2f2;
border-radius: 16px;
cursor: pointer;
}
#appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) {
margin-right: 10px;
}
#appIndex .matter .matter-content .item-box {
margin-bottom: 12px;
}
#appIndex .matter .sidebar .adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
}
#appIndex .matter .sidebar .adv .adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
#appIndex .matter .sidebar .side-box {
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
}
#appIndex .matter .sidebar .side-box.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
#appIndex .matter .sidebar .side-box.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
#appIndex .matter .sidebar .side-box.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
Reference in New Issue View Git Blame Copy Permalink