feat: 新增抱团组件和申请助手弹窗组件
新增huddle-box和helper-pop组件，包含相关图片资源和样式调整 修复item-mj组件中itemBottom导入错误 优化移动端样式适配 更新sectionV2页面引入新组件 补充公共样式和动画效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
340
css/public.css
340
css/public.css
@@ -57,7 +57,6 @@ body {
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
@@ -2184,3 +2183,342 @@ td {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
.huddle-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.70588235);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
animation: slidebj 0.5s forwards;
|
||||
z-index: 10002;
|
||||
}
|
||||
.huddle-box .box {
|
||||
width: 100vw;
|
||||
height: 719px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.10196078);
|
||||
animation: slideUp 0.5s forwards;
|
||||
background: linear-gradient(0.0796881deg, #c1a75a 0%, #15a3dc 100%);
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 32px;
|
||||
z-index: 1;
|
||||
}
|
||||
.huddle-box .box .code {
|
||||
width: 100vw;
|
||||
}
|
||||
.huddle-box .box .bj {
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
.huddle-box .box .bj-bottom {
|
||||
width: 126px;
|
||||
height: 134px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.huddle-box .box .top {
|
||||
width: 199px;
|
||||
height: 36px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.huddle-box .box .title {
|
||||
width: 311px;
|
||||
height: 86px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.huddle-box .box .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.huddle-box .box .case {
|
||||
width: 360px;
|
||||
height: 400px;
|
||||
background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 100%);
|
||||
border-radius: 15px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.huddle-box .box .case .QRcode {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: #ffffff;
|
||||
border-color: #f2f2f2;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.18431373);
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.huddle-box .box .case .QRcode .img {
|
||||
width: 218px;
|
||||
height: 218px;
|
||||
}
|
||||
.huddle-box .box .case .hint .img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.huddle-box .box .case .hint .img.img-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.huddle-box .box .case .hint .hint-text {
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.huddle-box .box {
|
||||
width: 100vw;
|
||||
height: calc(719 / 600 * 100vw);
|
||||
padding-top: calc(32 / 600 * 100vw);
|
||||
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078);
|
||||
animation-name: slideUp;
|
||||
}
|
||||
.huddle-box .box .code {
|
||||
width: 100vw;
|
||||
}
|
||||
.huddle-box .box .bj-bottom {
|
||||
width: calc(126 / 600 * 100vw);
|
||||
height: calc(134 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .top {
|
||||
width: calc(199 / 600 * 100vw);
|
||||
height: calc(36 / 600 * 100vw);
|
||||
margin-bottom: calc(13 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .title {
|
||||
width: calc(311 / 600 * 100vw);
|
||||
height: calc(86 / 600 * 100vw);
|
||||
margin-bottom: calc(4 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .text {
|
||||
font-size: calc(20 / 600 * 100vw);
|
||||
line-height: calc(30 / 600 * 100vw);
|
||||
margin-bottom: calc(25 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .case {
|
||||
width: calc(360 / 600 * 100vw);
|
||||
height: calc(400 / 600 * 100vw);
|
||||
padding-top: calc(50 / 600 * 100vw);
|
||||
border-radius: calc(15 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .case .QRcode {
|
||||
width: calc(240 / 600 * 100vw);
|
||||
height: calc(240 / 600 * 100vw);
|
||||
margin-bottom: calc(26 / 600 * 100vw);
|
||||
border-radius: calc(10 / 600 * 100vw);
|
||||
box-shadow: 0 0 calc(5 / 600 * 100vw) rgba(0, 0, 0, 0.18431373);
|
||||
}
|
||||
.huddle-box .box .case .QRcode .img {
|
||||
width: calc(218 / 600 * 100vw);
|
||||
height: calc(218 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .case .hint .img {
|
||||
width: calc(32 / 600 * 100vw);
|
||||
height: calc(32 / 600 * 100vw);
|
||||
}
|
||||
.huddle-box .box .case .hint .hint-text {
|
||||
font-size: calc(18 / 600 * 100vw);
|
||||
line-height: calc(28 / 600 * 100vw);
|
||||
margin: 0 calc(15 / 600 * 100vw);
|
||||
}
|
||||
}
|
||||
@keyframes slidebj {
|
||||
0% {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
background-color: rgba(0, 0, 0, 0.71764706);
|
||||
}
|
||||
}
|
||||
.helper-pop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.71764706);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1004;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
animation: slidebj 0.5s forwards;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.helper-pop .helper-box {
|
||||
animation: slideUp 0.5s forwards;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
background: linear-gradient(179.80708565deg, #c1cefa 0%, #e2edfb 28%, #ffffff 60%);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10196078);
|
||||
position: relative;
|
||||
padding-top: 59px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.helper-pop .helper-box .cross-grey {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 13px;
|
||||
padding: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.helper-pop .helper-box .helper-text {
|
||||
box-sizing: border-box;
|
||||
height: 103px;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
.helper-pop .helper-box .helper-box-box {
|
||||
box-sizing: border-box;
|
||||
width: 280px;
|
||||
background: linear-gradient(139.427577deg, #6589f2 0%, #74b1f0 100%);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.17647059);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
z-index: 1;
|
||||
margin-bottom: 80px;
|
||||
display: flex;
|
||||
}
|
||||
.helper-pop .helper-box .helper-box-box .helper-box-text {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box {
|
||||
box-sizing: border-box;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .left-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .left-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.helper-pop .helper-box .helper-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 151px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.helper-pop .helper-box {
|
||||
width: 100vw;
|
||||
padding-top: calc(59 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw);
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078);
|
||||
}
|
||||
.helper-pop .helper-box .cross-grey {
|
||||
width: calc(16 / 600 * 100vw);
|
||||
height: calc(16 / 600 * 100vw);
|
||||
top: calc(13 / 600 * 100vw);
|
||||
right: calc(13 / 600 * 100vw);
|
||||
padding: calc(7 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-text {
|
||||
height: calc(103 / 600 * 100vw);
|
||||
margin: 0 auto calc(24 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-box-box {
|
||||
width: calc(280 / 600 * 100vw);
|
||||
border-radius: calc(20 / 600 * 100vw);
|
||||
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059);
|
||||
padding: calc(20 / 600 * 100vw) 0;
|
||||
margin-bottom: calc(80 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-box-box .helper-box-text {
|
||||
font-size: calc(16 / 600 * 100vw);
|
||||
line-height: calc(28 / 600 * 100vw);
|
||||
margin-top: calc(20 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box {
|
||||
width: calc(240 / 600 * 100vw);
|
||||
height: calc(240 / 600 * 100vw);
|
||||
border-radius: calc(6 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
|
||||
width: calc(24 / 600 * 100vw);
|
||||
height: calc(24 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
|
||||
width: calc(220 / 600 * 100vw);
|
||||
height: calc(220 / 600 * 100vw);
|
||||
}
|
||||
.helper-pop .helper-box .helper-bottom {
|
||||
height: calc(151 / 600 * 100vw);
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
top: 100%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user