685 lines
12 KiB
Plaintext
685 lines
12 KiB
Plaintext
@import '@/styles/common.less';
|
|
@import '@/styles/variables.less';
|
|
|
|
.product-dialog {
|
|
|
|
.layout() {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-font {
|
|
font-size: 36px;
|
|
line-height: 58px;
|
|
color: @blColor;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.describe-font {
|
|
font-size: 28px;
|
|
line-height: 48px;
|
|
color: @blColorG2;
|
|
}
|
|
|
|
.button() {
|
|
width: 360px;
|
|
height: 72px;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
line-height: 72px;
|
|
border-radius: 44px;
|
|
color: #FFFFFF;
|
|
background: @blHighlightColor;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.highlight-container() {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: 24px;
|
|
line-height: 48px;
|
|
color: @blHighlightColor;
|
|
background: #6D3DF514;
|
|
border-radius: 8px;
|
|
padding: 32px 72px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
// common
|
|
&__qr-code,
|
|
&__group-confirm,
|
|
&__group-need-buy,
|
|
&__job-contact-with-group,
|
|
&__group-buy,
|
|
&__group-buy_success,
|
|
&__publish-job-buy,
|
|
&__company-publish-job-buy {
|
|
.layout();
|
|
}
|
|
|
|
// ============================================= 通告 ================================================= //
|
|
// 通告已经解锁，直接联系
|
|
&__job-contact_direct,
|
|
// 通告已经解锁，等待播络联系
|
|
&__job-contact_cs {
|
|
.layout();
|
|
|
|
&__header {
|
|
.header-font();
|
|
}
|
|
|
|
&__describe {
|
|
.describe-font();
|
|
margin-top: 24px
|
|
}
|
|
|
|
&__content {
|
|
.highlight-container();
|
|
}
|
|
|
|
&__button {
|
|
.button();
|
|
}
|
|
|
|
&__report {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
color: @blHighlightColor;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
// 通告不可解锁
|
|
&__job-unable {
|
|
.layout();
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.header-font();
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
&__describe {
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 28px;
|
|
line-height: 48px;
|
|
color: @blColor;
|
|
margin-top: 32px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
.button();
|
|
}
|
|
}
|
|
|
|
// 通告购买
|
|
&__job-buy {
|
|
.layout();
|
|
|
|
&__header {
|
|
.flex-row();
|
|
.header-font();
|
|
font-size: 32px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
&__describe {
|
|
.flex-row();
|
|
.describe-font();
|
|
margin-top: 18px;
|
|
line-height: 40px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__container {
|
|
.flex-row();
|
|
justify-content: space-around;
|
|
margin-top: 56px;
|
|
}
|
|
|
|
&__item {
|
|
position: relative;
|
|
width: 182px;
|
|
height: 192px;
|
|
.flex-column();
|
|
justify-content: center;
|
|
border: 2px solid @blHighlightColor;
|
|
border-radius: 8px;
|
|
margin-right: 15px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.disabled {
|
|
border-color: #E0E0E0;
|
|
background: #F7F7F7;
|
|
}
|
|
|
|
&.selected {
|
|
background: @blHighlightBg;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 32px;
|
|
line-height: 48px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
margin-bottom: 8px;
|
|
|
|
&.free {
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
margin-bottom: 14px;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__price {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 500;
|
|
color: @blHighlightColor;
|
|
}
|
|
|
|
&__badge {
|
|
transform: translate3d(10px, -50%, 0);
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
.button();
|
|
}
|
|
|
|
&__tips {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
color: @blColorG2;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
&__hint {
|
|
font-size: 24px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
color: @blColorG1;
|
|
margin-top: 24px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
display: inline;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ============================================= 群 ================================================= //
|
|
|
|
// 群 common
|
|
&__qr-code__tips,
|
|
&__group-confirm__tips,
|
|
&__group-need-buy__top-tips,
|
|
&__group-buy__tips,
|
|
&__group-buy_success__tips {
|
|
font-size: 24px;
|
|
line-height: 34px;
|
|
font-weight: 400;
|
|
color: @blColorG1;
|
|
|
|
&.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
// 群解锁
|
|
&__group-confirm__header {
|
|
.header-font();
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 24px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__group-confirm__button {
|
|
.button();
|
|
}
|
|
|
|
// 群扫描二维码
|
|
&__qr-code__header {
|
|
.header-font();
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__qr-code__copy-button {
|
|
.button();
|
|
}
|
|
|
|
&__qr-code__copy-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
&__qr-code__copy-success {
|
|
font-size: 32px;
|
|
line-height: 40px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
}
|
|
|
|
&__qr-code__steps {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__qr-code__step {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&__qr-code__step-number {
|
|
width: 36px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
border: 2px solid #E0E0E0;
|
|
}
|
|
|
|
&__qr-code__step-title {
|
|
margin-left: 20px;
|
|
|
|
&.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__qr-code__step-line {
|
|
position: relative;
|
|
width: 2px;
|
|
height: 40px;
|
|
background: #E0E0E0;
|
|
margin: 4px 0;
|
|
margin-left: 18px;
|
|
}
|
|
|
|
&__qr-code__image {
|
|
width: 304px;
|
|
height: 304px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__qr-code__tips {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__qr-code__footer {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
color: @blHighlightColor;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
&__qr-code__tips-footer {
|
|
.divider {
|
|
width: 540px;
|
|
height: 1px;
|
|
background: #E0E0E0;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
color: @blColorG1;
|
|
}
|
|
}
|
|
|
|
// 群解锁次数已用完
|
|
&__group-need-buy__header {
|
|
.header-font();
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 16px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__group-need-buy__button-container {
|
|
position: relative;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__group-need-buy__button {
|
|
.button();
|
|
margin-top: 0;
|
|
}
|
|
|
|
// ============================================= 通告+群 ================================================= //
|
|
// 去群内联系发布人
|
|
&__job-contact-with-group__header {
|
|
.header-font();
|
|
}
|
|
|
|
&__job-contact-with-group__describe {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
line-height: 56px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
margin-top: 40px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor
|
|
}
|
|
}
|
|
|
|
&__job-contact-with-group__content {
|
|
.highlight-container();
|
|
}
|
|
|
|
&__job-contact-with-group__button-container {
|
|
width: fit-content;
|
|
position: relative;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__job-contact-with-group__button {
|
|
.button();
|
|
margin-top: 0;
|
|
}
|
|
|
|
// ============================================= 购买群 ================================================= //
|
|
&__group-buy__header {
|
|
.header-font();
|
|
}
|
|
|
|
&__group-buy__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&__group-buy__item {
|
|
position: relative;
|
|
width: 170px;
|
|
height: 156px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid @blHighlightColor;
|
|
border-radius: 8px;
|
|
margin-right: 24px;
|
|
|
|
&.selected {
|
|
background: @blHighlightBg;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&__group-buy__item-title {
|
|
font-size: 40px;
|
|
line-height: 48px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
}
|
|
|
|
&__group-buy__item-price {
|
|
font-size: 28px;
|
|
line-height: 48px;
|
|
font-weight: 500;
|
|
color: @blHighlightColor;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
&__group-buy__button {
|
|
.button();
|
|
}
|
|
|
|
&__group-buy__tips {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
// ============================================= 购买成功 ================================================= //
|
|
&__group-buy_success__tips-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
&__group-buy_success__icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
&__group-buy_success__tips {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__group-buy_success__header {
|
|
.header-font();
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 24px;
|
|
|
|
.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
}
|
|
|
|
&__group-buy_success__button {
|
|
.button();
|
|
}
|
|
|
|
|
|
// ============================================= 发布通告的企业会员 ================================================= //
|
|
&__publish-job-buy__header {
|
|
.header-font();
|
|
}
|
|
|
|
&__publish-job-buy__price-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 500;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
&__publish-job-buy__price {
|
|
font-size: 80px;
|
|
line-height: 80px;
|
|
}
|
|
|
|
&__publish-job-buy__badge {
|
|
transform: translate3d(50%, -90%, 0);
|
|
}
|
|
|
|
&__publish-job-buy__tips {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
color: @blColorG1;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
&__publish-job-buy__button {
|
|
.button();
|
|
margin-top: 32px;
|
|
}
|
|
|
|
// ============================================= 企业购买单次发布通告 ================================================= //
|
|
&__company-publish-job-buy {
|
|
&__header {
|
|
.header-font();
|
|
}
|
|
|
|
&__price-container {
|
|
.flex-row();
|
|
justify-content: space-between;
|
|
margin-top: 54px;
|
|
}
|
|
|
|
&__item {
|
|
position: relative;
|
|
width: 230px;
|
|
height: 156px;
|
|
.flex-column();
|
|
justify-content: center;
|
|
border: 2px solid @blHighlightColor;
|
|
border-radius: 8px;
|
|
margin-right: 24px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.disabled {
|
|
border-color: #E0E0E0;
|
|
background: #F7F7F7;
|
|
}
|
|
|
|
&.selected {
|
|
background: @blHighlightBg;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 32px;
|
|
line-height: 48px;
|
|
font-weight: 500;
|
|
color: @blColor;
|
|
margin-bottom: 12px;
|
|
|
|
&.free {
|
|
font-size: 24px;
|
|
line-height: 36px;
|
|
margin-bottom: 14px;
|
|
}
|
|
}
|
|
|
|
&__price {
|
|
font-size: 32px;
|
|
line-height: 48px;
|
|
font-weight: 500;
|
|
color: @blHighlightColor;
|
|
}
|
|
|
|
&__badge {
|
|
transform: translate3d(10px, -50%, 0);
|
|
}
|
|
}
|
|
|
|
&__divider {
|
|
.flex-row();
|
|
justify-content: center;
|
|
margin-top: 24px;
|
|
|
|
&__left-line,
|
|
&__right-line {
|
|
width: 206px;
|
|
height: 1px;
|
|
}
|
|
|
|
&__left-line {
|
|
background: linear-gradient(270deg, #E0E0E0 0%, #FFFFFF 100%);
|
|
}
|
|
|
|
&__right-line {
|
|
background: linear-gradient(90deg, #E0E0E0 0%, #FFFFFF 100%);
|
|
}
|
|
|
|
&__title {
|
|
font-size: 24px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
color: @blColorG1;
|
|
}
|
|
}
|
|
|
|
&__contents {
|
|
.flex-column();
|
|
align-items: flex-start;
|
|
align-self: flex-start;
|
|
margin-top: 12px;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&__content {
|
|
font-size: 24px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: @blColorG1;
|
|
|
|
&.highlight {
|
|
color: @blHighlightColor;
|
|
}
|
|
|
|
.highlight-span {
|
|
color: @blHighlightColor;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
.button();
|
|
margin-top: 32px;
|
|
}
|
|
}
|
|
|
|
}
|