feat: 添加移动端适配和优化组件样式
refactor: 重构CSS和LESS文件结构 style: 调整搜索页和公共样式 fix: 修复组件图片路径问题 docs: 更新组件文档和注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user