feat: 添加移动端适配和优化组件样式
refactor: 重构CSS和LESS文件结构 style: 调整搜索页和公共样式 fix: 修复组件图片路径问题 docs: 更新组件文档和注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
305
css/index.less
305
css/index.less
@@ -1,5 +1,5 @@
|
||||
#appIndex {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
@@ -11,10 +11,14 @@
|
||||
margin-bottom: 28px;
|
||||
|
||||
.header-content-left {
|
||||
width: calc(100% - 252px);
|
||||
|
||||
.adv-list {
|
||||
margin-bottom: 18px;
|
||||
|
||||
.adv-item {
|
||||
width: calc((100% - 12px) / 2);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -24,10 +28,11 @@
|
||||
}
|
||||
|
||||
img {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -56,7 +61,7 @@
|
||||
}
|
||||
|
||||
.topic-box {
|
||||
width: 308px;
|
||||
width: calc((100% - 12px) * 0.325);
|
||||
height: 320px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
@@ -178,7 +183,7 @@
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: 628px;
|
||||
width: calc((100% - 12px) * 0.662);
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
@@ -196,6 +201,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 48%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
@@ -216,7 +222,8 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 265px;
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -224,42 +231,46 @@
|
||||
}
|
||||
|
||||
.header-left-bottom-box {
|
||||
width: 948px;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 12px;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
|
||||
.adv {
|
||||
margin-right: 26px;
|
||||
width: 31%;
|
||||
flex-shrink: 0;
|
||||
|
||||
.adv-icon {
|
||||
width: 295px;
|
||||
height: 118px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding-top: 12px;
|
||||
width: 281px;
|
||||
flex: 1;
|
||||
margin-right: 39px;
|
||||
|
||||
&.list2 {
|
||||
margin-right: 0;
|
||||
|
||||
.item .text {
|
||||
width: 255px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
@@ -271,11 +282,13 @@
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
cursor: pointer;
|
||||
width: 266px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
|
||||
@@ -573,12 +586,24 @@
|
||||
flex-wrap: wrap;
|
||||
|
||||
.admission-item {
|
||||
width: 291px;
|
||||
height: 103px;
|
||||
width: calc((100% - 36px) / 4);
|
||||
aspect-ratio: 291 / 103;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
.admission-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:not(:nth-child(4n)) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@@ -600,13 +625,15 @@
|
||||
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
// flex: 1;
|
||||
// height: 240px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.img {
|
||||
@@ -614,7 +641,7 @@
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -628,10 +655,7 @@
|
||||
|
||||
.list {
|
||||
.line {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -644,6 +668,7 @@
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
@@ -701,4 +726,234 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.head-top {
|
||||
width: 100% !important;
|
||||
padding: 0 10px;
|
||||
margin: 10px auto !important;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.input-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sign-in {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#appIndex {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
.header-content-box {
|
||||
flex-direction: column;
|
||||
|
||||
.header-content-left {
|
||||
width: 100%;
|
||||
|
||||
.adv-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-and-selectives {
|
||||
flex-direction: column;
|
||||
|
||||
.topic-box {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.list .item {
|
||||
width: 100%;
|
||||
.text {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-top {
|
||||
width: max-content !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header-left-bottom-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
||||
.adv {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.adv-icon {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.item {
|
||||
// margin-bottom: 12px;
|
||||
.text {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-content-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admission {
|
||||
.admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
.admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
|
||||
&:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.matter {
|
||||
flex-direction: column;
|
||||
|
||||
.matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
||||
.forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-list {
|
||||
width: 100%;
|
||||
// max-width: 470px;
|
||||
// min-height: 90px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 20px;
|
||||
padding: 6px;
|
||||
margin: 0 auto 20px;
|
||||
|
||||
display: none;
|
||||
|
||||
.list {
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
flex: 95;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
flex: 114;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
flex: 109;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
flex: 140;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px dotted #d7d7d7;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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