Files
PC-Light-Forum/css/section.less
A1300399510 16f45c4466 no message
2025-11-18 00:24:47 +08:00

424 lines
16 KiB
Plaintext

#sectionIndex {
width: 1200px;
margin: 0 auto;
.matter {
align-items: flex-start;
.sidebar {
width: 150px;
background-color: rgba(8, 53, 62, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
margin-right: 15px;
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
color: #badee6;
padding-top: 29px;
padding-bottom: 27px;
border-bottom: 1px solid rgba(255, 255, 255, 0.247058823529412);
margin-left: 20px;
margin-right: 20px;
}
.list {
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
.line {
height: 1px;
background-color: rgba(255, 255, 255, 0.24705882);
margin-top: 10px;
margin-bottom: 10px;
}
.item {
height: 50px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
z-index: 1;
cursor: pointer;
.text {
z-index: 1;
position: relative;
}
&.pitch {
position: relative;
.text {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #08353e;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 20px);
height: 32px;
background: inherit;
background-color: rgba(236, 249, 250, 1);
border: none;
border-radius: 16px;
z-index: -1;
}
}
}
}
}
.matter-content {
.info-box {
width: 1035px;
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%);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
padding-left: 30px;
padding-top: 30px;
padding-bottom: 34px;
margin-bottom: 20px;
position: relative;
z-index: 3;
.img {
width: 80px;
height: 80px;
border-radius: 10px;
margin-right: 20px;
}
.right {
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 24px;
color: #000000;
margin-bottom: 15px;
margin-top: 4px;
}
.link {
flex-wrap: wrap;
border-top: 1px dotted #d7d7d7;
border-bottom: 1px dotted #d7d7d7;
margin-right: 20px;
margin-bottom: 28px;
width: fit-content;
width: 100%;
.item {
padding: 12px 0;
position: relative;
cursor: pointer;
&:not(:last-child) {
margin-right: 72px;
}
.text {
font-size: 14px;
color: #333333;
margin-right: 8px;
}
.icon {
width: 12px;
height: 12px;
}
&:hover {
.QRcode-box {
display: flex;
}
}
.QRcode-box {
position: absolute;
top: 51px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 240px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12156862745098);
flex-direction: column;
z-index: 1;
display: none;
.QRcode-img {
width: 130px;
height: 130px;
margin-bottom: 12px;
}
.name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
margin-bottom: 9px;
}
.hint {
font-size: 13px;
color: #333333;
}
}
}
}
.bottom {
justify-content: space-between;
margin-right: 20px;
.data {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #555555;
font-size: 13px;
.sum {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin: 0 5px;
}
}
.btn {
width: 125px;
height: 32px;
background-color: rgba(80, 227, 194, 1);
border-radius: 8px;
font-size: 14px;
color: #333;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
margin-right: 3px;
}
}
}
}
}
.details-box {
align-items: flex-start;
.content-box {
margin-right: 12px;
position: sticky;
z-index: 1;
.selectives-box {
width: 100%;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 19px 14px;
margin-bottom: 20px;
.head-top {
width: 64px;
height: 24px;
border-radius: 20px 20px 20px 0;
margin-bottom: 13px;
background-color: rgba(246, 130, 81, 1);
.icon {
width: 15px;
height: 12px;
margin-right: 3px;
}
.text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #ffffff;
font-size: 14px;
}
}
.list {
flex-wrap: wrap;
padding: 0 50px 0 5px;
justify-content: space-between;
.item {
font-size: 14px;
color: #555555;
line-height: 20px;
margin-bottom: 12px;
position: relative;
cursor: pointer;
&:hover {
color: #000000;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #f68251;
margin-right: 10px;
}
.text {
width: 265px;
}
}
}
}
.red-tag {
width: 732px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
padding-top: 21px;
padding-bottom: 8px;
margin-bottom: 12px;
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
padding: 0 21px;
margin-bottom: 12px;
position: relative;
.icon {
width: 10px;
height: 18px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.list {
flex-wrap: wrap;
display: flex;
padding: 0 21px;
.item {
height: 32px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(242, 242, 242, 1);
border-radius: 16px;
line-height: 36px;
font-size: 14px;
color: #333333;
padding: 0 10px;
margin-right: 10px;
margin-bottom: 14px;
cursor: pointer;
}
}
}
.list-box {
width: 732px;
.item-box {
margin-bottom: 12px;
}
}
.empty {
width: 100%;
height: 70vh;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
flex-direction: column;
margin-right: 12px;
.empty-icon {
width: 80px;
height: 94px;
}
.empty-text {
font-size: 14px;
color: #7f7f7f;
margin-top: 10px;
}
}
}
// .side-box {
// width: 291px;
// height: 300px;
// background-color: rgba(236, 249, 250, 1);
// border-radius: 10px;
// }
.sidebar-box {
position: sticky;
// &.fixed {
// position: fixed;
// right: calc((100% - 1200px) / 2);
// bottom: 10px;
// }
.adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
}
// .sidebar {
.side-box {
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
}
// }
}
}
}
}
}