A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加移动端适配和优化组件样式

Browse Source 
refactor: 重构CSS和LESS文件结构
style: 调整搜索页和公共样式
fix: 修复组件图片路径问题
docs: 更新组件文档和注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-23 19:13:01 +08:00
parent 2fd55c3e61
commit 826700970d
26 changed files with 2130 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
css/public.less
View File

@@ -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);
// }
}
}
}