feat: first commit
This commit is contained in:
eleanor.mao
663
src/components/product-dialog/index.less
Normal file
663
src/components/product-dialog/index.less
Normal file
@ -0,0 +1,663 @@
|
||||
@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();
|
||||
|
||||
.highlight {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
.describe-font();
|
||||
margin-top: 24px;
|
||||
|
||||
.highlight {
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
.flex-row();
|
||||
justify-content: space-around;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 192px;
|
||||
.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: 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ============================================= 群 ================================================= //
|
||||
|
||||
// 群 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;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
.button();
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user