feat: 添加移动端适配和优化组件样式
refactor: 重构CSS和LESS文件结构 style: 调整搜索页和公共样式 fix: 修复组件图片路径问题 docs: 更新组件文档和注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
248
css/index.css
248
css/index.css
@@ -1,5 +1,5 @@
|
||||
#appIndex {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#appIndex a {
|
||||
@@ -9,9 +9,15 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left {
|
||||
width: calc(100% - 252px);
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item {
|
||||
width: calc((100% - 12px) / 2);
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -19,10 +25,11 @@
|
||||
display: block;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item img {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top {
|
||||
width: 64px;
|
||||
@@ -44,7 +51,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box {
|
||||
width: 308px;
|
||||
width: calc((100% - 12px) * 0.325);
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
@@ -141,7 +148,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
|
||||
width: 628px;
|
||||
width: calc((100% - 12px) * 0.662);
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
@@ -158,6 +165,7 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item {
|
||||
width: 48%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
@@ -176,41 +184,46 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text {
|
||||
width: 265px;
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box {
|
||||
width: 948px;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 12px;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv {
|
||||
margin-right: 26px;
|
||||
width: 31%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon {
|
||||
width: 295px;
|
||||
height: 118px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding-top: 12px;
|
||||
width: 281px;
|
||||
flex: 1;
|
||||
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;
|
||||
width: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
@@ -221,10 +234,12 @@
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
|
||||
cursor: pointer;
|
||||
width: 266px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
@@ -464,12 +479,22 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item {
|
||||
width: 291px;
|
||||
height: 103px;
|
||||
width: calc((100% - 36px) / 4);
|
||||
aspect-ratio: 291 / 103;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item .admission-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item:not(:nth-child(4n)) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -486,13 +511,13 @@
|
||||
}
|
||||
#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;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .img {
|
||||
@@ -500,7 +525,7 @@
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
height: 100%;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
@@ -510,8 +535,8 @@
|
||||
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 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
@@ -525,6 +550,7 @@
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
@@ -562,3 +588,181 @@
|
||||
#appIndex .matter .sidebar .side-box.interviewexperience-side-box {
|
||||
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.head-top {
|
||||
width: 100% !important;
|
||||
padding: 0 10px;
|
||||
margin: 10px auto !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.head-top .input-box {
|
||||
display: none !important;
|
||||
}
|
||||
.head-top .post-list {
|
||||
display: none !important;
|
||||
}
|
||||
.head-top .sign-in {
|
||||
display: none !important;
|
||||
}
|
||||
#appIndex {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#appIndex .header-content-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left {
|
||||
width: 100%;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives {
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item {
|
||||
width: 100%;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text {
|
||||
width: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top {
|
||||
width: max-content !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
|
||||
width: auto;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .admission .admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .pop-list {
|
||||
display: block;
|
||||
}
|
||||
#appIndex .matter {
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .matter .matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .img {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.pop-list {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 20px;
|
||||
padding: 6px;
|
||||
margin: 0 auto 20px;
|
||||
display: none;
|
||||
}
|
||||
.pop-list .list {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.pop-list .list .item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
}
|
||||
.pop-list .list .item:nth-of-type(1) {
|
||||
flex: 95;
|
||||
}
|
||||
.pop-list .list .item:nth-of-type(2) {
|
||||
flex: 114;
|
||||
}
|
||||
.pop-list .list .item:nth-of-type(3) {
|
||||
flex: 109;
|
||||
}
|
||||
.pop-list .list .item:nth-of-type(4) {
|
||||
flex: 140;
|
||||
}
|
||||
.pop-list .list .item:not(:last-of-type) {
|
||||
border-right: 1px dotted #d7d7d7;
|
||||
}
|
||||
.pop-list .list .item .top {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
.pop-list .list .item .bottom {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user