203 lines
4.2 KiB
SCSS
203 lines
4.2 KiB
SCSS
.container {
|
|
width: 100%;
|
|
height: 540px;
|
|
border-radius: 20px 20px 0 0;
|
|
background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fafafa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.top {
|
|
width: 100%;
|
|
padding: 0 24px;
|
|
box-sizing: border-box;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
padding: 0 10px 40px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
|
|
.jump,
|
|
.direct {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
overflow: hidden;
|
|
|
|
.button {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
color: #000;
|
|
font-feature-settings: "liga" off, "clig" off;
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
|
|
&.primary {
|
|
color: #fff;
|
|
background: #000;
|
|
|
|
.jumpIcon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
height: 72px;
|
|
width: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.closeBtn {
|
|
display: flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
background: #fff;
|
|
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
|
|
|
|
.closeIcon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.guideMsg {
|
|
padding-bottom: 20px;
|
|
|
|
.title {
|
|
color: #2a4d44;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 32px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 48px;
|
|
|
|
.colorTip {
|
|
color: #00e5ad;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 32px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.strongTip {
|
|
color: #00e5ad;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 32px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 48px;
|
|
text-decoration-line: underline;
|
|
text-decoration-style: solid;
|
|
text-decoration-skip-ink: auto;
|
|
text-decoration-thickness: auto;
|
|
text-underline-offset: auto;
|
|
text-underline-position: from-font;
|
|
}
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
color: #2a4d44;
|
|
font-family: "Noto Sans SC";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 28px;
|
|
}
|
|
|
|
@mixin commonAvatarStyle($multiple: 1) {
|
|
.avatar {
|
|
flex: 0 0 auto;
|
|
width: calc(100px * $multiple);
|
|
height: calc(100px * $multiple);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
border: 1px solid #efefef;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
.avatarUrl {
|
|
width: calc(90px * $multiple);
|
|
height: calc(90px * $multiple);
|
|
border-radius: 50%;
|
|
border: 1px solid #efefef;
|
|
}
|
|
}
|
|
|
|
.addonImage {
|
|
flex: 0 0 auto;
|
|
width: calc(88px * $multiple);
|
|
height: calc(88px * $multiple);
|
|
transform: rotate(8deg);
|
|
flex-shrink: 0;
|
|
aspect-ratio: 1/1;
|
|
border-radius: calc(20px * $multiple);
|
|
border: 4px solid #fff;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(89, 255, 214, 0.2) 0%,
|
|
rgba(89, 255, 214, 0.2) 100%
|
|
),
|
|
#fff;
|
|
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
margin-left: calc(-1 * 20px * $multiple);
|
|
|
|
.docImage {
|
|
width: calc(48px * $multiple);
|
|
height: calc(48px * $multiple);
|
|
transform: rotate(-7deg);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatarWrap {
|
|
width: 100%;
|
|
padding-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
@include commonAvatarStyle(0.5);
|
|
}
|