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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
183
css/public.css
183
css/public.css
@@ -2502,3 +2502,186 @@ td {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.group-pop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.71764706);
|
||||
z-index: 111;
|
||||
animation: slidebj 0.5s forwards;
|
||||
}
|
||||
.group-pop .bj {
|
||||
width: 500px;
|
||||
height: 823px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 20px 20px 0 0;
|
||||
animation: slidebj 0.5s forwards;
|
||||
}
|
||||
.group-pop .QRCode {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 165px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.group-pop .bj {
|
||||
width: calc(min(164.6vw, 80vh) * 500 / 823);
|
||||
height: min(164.6vw, 80vh);
|
||||
max-height: 80vh;
|
||||
object-fit: cover;
|
||||
border-radius: calc(min(164.6vw, 80vh) * 20 / 823) calc(min(164.6vw, 80vh) * 20 / 823) 0 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.group-pop .QRCode {
|
||||
width: calc(min(164.6vw, 80vh) * 180 / 823);
|
||||
height: calc(min(164.6vw, 80vh) * 180 / 823);
|
||||
bottom: calc(min(164.6vw, 80vh) * 165 / 823);
|
||||
}
|
||||
}
|
||||
.QR-code-pop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.71764706);
|
||||
z-index: 1004;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.QR-code-pop .pop-box {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 60px;
|
||||
background: linear-gradient(180deg, #f4f4f4 -1%, #f7faff 100%);
|
||||
border-radius: 20px 20px 0 19px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.10196078);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-title {
|
||||
width: 221px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-name {
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-icon1 {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code-box {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background: -webkit-linear-gradient(90deg, #2c196d -1%, #fddf6d 99%);
|
||||
background: -moz-linear-gradient(0deg, #2c196d -1%, #fddf6d 99%);
|
||||
background: linear-gradient(0deg, #2c196d -1%, #fddf6d 99%);
|
||||
border-radius: 20px;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code-box.pop-code-box1 {
|
||||
background: -webkit-linear-gradient(90deg, #29186c -1%, #9278d4 101%);
|
||||
background: -moz-linear-gradient(-15.42108547e, #29186c -1%, #9278d4 101%);
|
||||
background: linear-gradient(-15.42108547e, #29186c -1%, #9278d4 101%);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code .pop-code-img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-text {
|
||||
color: #fff;
|
||||
letter-spacing: 0.6px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-bottom1,
|
||||
.QR-code-pop .pop-box .pop-bottom2 {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-bottom1 {
|
||||
height: 155px;
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-bottom2 {
|
||||
height: 151px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.QR-code-pop .pop-box {
|
||||
padding-top: calc(60 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw) calc(20 / 600 * 100vw) 0 calc(19 / 600 * 100vw);
|
||||
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-title {
|
||||
width: calc(221 / 600 * 100vw);
|
||||
height: calc(48 / 600 * 100vw);
|
||||
margin-bottom: calc(18 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-name {
|
||||
font-size: calc(18 / 600 * 100vw);
|
||||
margin-bottom: calc(36 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-icon {
|
||||
width: calc(22 / 600 * 100vw);
|
||||
height: calc(22 / 600 * 100vw);
|
||||
margin-right: calc(4 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-wechat-icon1 {
|
||||
width: calc(18 / 600 * 100vw);
|
||||
height: calc(18 / 600 * 100vw);
|
||||
margin-right: calc(4 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code-box {
|
||||
padding: calc(20 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw);
|
||||
-moz-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059);
|
||||
-webkit-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059);
|
||||
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059);
|
||||
margin-bottom: calc(81 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code {
|
||||
width: calc(240 / 600 * 100vw);
|
||||
height: calc(240 / 600 * 100vw);
|
||||
border-radius: calc(6 / 600 * 100vw);
|
||||
margin-bottom: calc(20 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-code .pop-code-img {
|
||||
width: calc(220 / 600 * 100vw);
|
||||
height: calc(220 / 600 * 100vw);
|
||||
}
|
||||
.QR-code-pop .pop-box .pop-text {
|
||||
letter-spacing: calc(0.6 / 600 * 100vw);
|
||||
font-size: calc(16 / 600 * 100vw);
|
||||
line-height: calc(28 / 600 * 100vw);
|
||||
}
|
||||
}
|
||||
|
||||
222
css/public.less
222
css/public.less
@@ -2995,3 +2995,225 @@ td {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.group-pop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.717647058823529);
|
||||
z-index: 111;
|
||||
animation: slidebj 0.5s forwards;
|
||||
|
||||
.bj {
|
||||
width: 500px;
|
||||
height: 823px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 20px 20px 0 0;
|
||||
animation: slidebj 0.5s forwards;
|
||||
}
|
||||
|
||||
.QRCode {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 165px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.bj {
|
||||
width: calc(~"min(164.6vw, 80vh)" * 500 / 823);
|
||||
height: ~"min(164.6vw, 80vh)";
|
||||
max-height: 80vh;
|
||||
object-fit: cover;
|
||||
border-radius: calc(~"min(164.6vw, 80vh)" * 20 / 823) calc(~"min(164.6vw, 80vh)" * 20 / 823) 0 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.QRCode {
|
||||
width: calc(~"min(164.6vw, 80vh)" * 180 / 823);
|
||||
height: calc(~"min(164.6vw, 80vh)" * 180 / 823);
|
||||
bottom: calc(~"min(164.6vw, 80vh)" * 165 / 823);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.QR-code-pop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.717647058823529);
|
||||
z-index: 1004;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
.pop-box {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 60px;
|
||||
background: linear-gradient(180deg, rgba(244, 244, 244, 1) -1%, rgba(247, 250, 255, 1) 100%);
|
||||
border-radius: 20px 20px 0 19px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.101960784313725);
|
||||
.pop-title {
|
||||
width: 221px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.pop-wechat-name {
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.pop-wechat-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.pop-wechat-icon1 {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.pop-code-box {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background: -webkit-linear-gradient(90deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%);
|
||||
background: -moz-linear-gradient(0deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%);
|
||||
background: linear-gradient(0deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%);
|
||||
border-radius: 20px;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 81px;
|
||||
|
||||
&.pop-code-box1 {
|
||||
background: -webkit-linear-gradient(90deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%);
|
||||
background: -moz-linear-gradient(-1.4210854715202e-14deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%);
|
||||
background: linear-gradient(-1.4210854715202e-14deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-code {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.pop-code-img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-text {
|
||||
color: #fff;
|
||||
letter-spacing: 0.6px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.pop-bottom1,
|
||||
.pop-bottom2 {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pop-bottom1 {
|
||||
height: 155px;
|
||||
}
|
||||
|
||||
.pop-bottom2 {
|
||||
height: 151px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.pop-box {
|
||||
padding-top: calc(60 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw) calc(20 / 600 * 100vw) 0 calc(19 / 600 * 100vw);
|
||||
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.101960784313725);
|
||||
.pop-title {
|
||||
width: calc(221 / 600 * 100vw);
|
||||
height: calc(48 / 600 * 100vw);
|
||||
margin-bottom: calc(18 / 600 * 100vw);
|
||||
}
|
||||
|
||||
.pop-wechat-name {
|
||||
font-size: calc(18 / 600 * 100vw);
|
||||
margin-bottom: calc(36 / 600 * 100vw);
|
||||
}
|
||||
|
||||
.pop-wechat-icon {
|
||||
width: calc(22 / 600 * 100vw);
|
||||
height: calc(22 / 600 * 100vw);
|
||||
margin-right: calc(4 / 600 * 100vw);
|
||||
}
|
||||
|
||||
.pop-wechat-icon1 {
|
||||
width: calc(18 / 600 * 100vw);
|
||||
height: calc(18 / 600 * 100vw);
|
||||
margin-right: calc(4 / 600 * 100vw);
|
||||
}
|
||||
|
||||
.pop-code-box {
|
||||
padding: calc(20 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw);
|
||||
-moz-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294);
|
||||
-webkit-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294);
|
||||
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294);
|
||||
margin-bottom: calc(81 / 600 * 100vw);
|
||||
}
|
||||
|
||||
.pop-code {
|
||||
width: calc(240 / 600 * 100vw);
|
||||
height: calc(240 / 600 * 100vw);
|
||||
border-radius: calc(6 / 600 * 100vw);
|
||||
margin-bottom: calc(20 / 600 * 100vw);
|
||||
|
||||
.pop-code-img {
|
||||
width: calc(220 / 600 * 100vw);
|
||||
height: calc(220 / 600 * 100vw);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-text {
|
||||
letter-spacing: calc(0.6 / 600 * 100vw);
|
||||
font-size: calc(16 / 600 * 100vw);
|
||||
line-height: calc(28 / 600 * 100vw);
|
||||
}
|
||||
|
||||
// .pop-bottom1,
|
||||
// .pop-bottom2 {
|
||||
// width: calc(500 / 600 * 100vw);
|
||||
// }
|
||||
|
||||
// .pop-bottom1 {
|
||||
// height: calc(155 / 600 * 100vw);
|
||||
// }
|
||||
|
||||
// .pop-bottom2 {
|
||||
// height: calc(151 / 600 * 100vw);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -227,10 +227,6 @@
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
#search-tag .classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search-tag .matter .matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -271,8 +271,8 @@
|
||||
height: 40px !important;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
// margin-left: 10px;
|
||||
// margin-right: 10px;
|
||||
}
|
||||
|
||||
.matter {
|
||||
|
||||
@@ -157,6 +157,9 @@
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#search .search-no {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
#search .search-no .earth-icon {
|
||||
width: 239px;
|
||||
height: 180px;
|
||||
@@ -278,13 +281,8 @@
|
||||
@media screen and (max-width: 768px) {
|
||||
#search .search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
#search .classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search .matter .matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -361,5 +359,6 @@
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,6 +199,8 @@
|
||||
}
|
||||
|
||||
.search-no {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.earth-icon {
|
||||
width: 239px;
|
||||
height: 180px;
|
||||
@@ -343,12 +345,12 @@
|
||||
#search {
|
||||
.search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
// margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
// margin-left: 10px;
|
||||
// margin-right: 10px;
|
||||
}
|
||||
|
||||
.matter {
|
||||
@@ -436,5 +438,6 @@
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user