feat: banner
This commit is contained in:
eleanor.mao
123
src/components/partner-intro/index.less
Normal file
123
src/components/partner-intro/index.less
Normal file
@ -0,0 +1,123 @@
|
||||
@import '@/styles/variables.less';
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.partner-intro {
|
||||
padding-top: 112px;
|
||||
padding-bottom: calc(112px + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(112px + env(safe-area-inset-bottom));
|
||||
|
||||
&__banner {
|
||||
background: fade(@blHighlightBg, 8);
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
&__main {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
&__highlight {
|
||||
color: @blHighlightColor;
|
||||
font-family: 'DIN Alternate';
|
||||
padding: 0 8px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
&__block {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
&__card {
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
&__h1 {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
color: #1d2129;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
&__special {
|
||||
padding: 32px;
|
||||
.flex-column();
|
||||
|
||||
.partner-intro__body {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__service {
|
||||
.button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
margin-top: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: #ffffff;
|
||||
padding: 12px 32px;
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 12px);
|
||||
/* 兼容 iOS < 11.2 */
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
|
||||
/* 兼容 iOS >= 11.2 */
|
||||
box-shadow: 0px -4px 20px 0px #00000014;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__download-button {
|
||||
flex: 1 1;
|
||||
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px; @highlight: 0);
|
||||
}
|
||||
|
||||
&__share-button {
|
||||
flex: 2 2;
|
||||
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
61
src/components/partner-intro/index.tsx
Normal file
61
src/components/partner-intro/index.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { Button } from '@tarojs/components';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { openCustomerServiceChat } from '@/utils/common';
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'partner-intro';
|
||||
export default function PartnerIntro() {
|
||||
const handleOpenService = useCallback(() => {
|
||||
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
|
||||
}, []);
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__banner`}>
|
||||
邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
|
||||
</div>
|
||||
<div className={`${PREFIX}__main`}>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__card`}>
|
||||
<div className={`${PREFIX}__h1`}>收益一</div>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
|
||||
</div>
|
||||
<div className={`${PREFIX}__h1`}>收益二</div>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
|
||||
<span className={`${PREFIX}__highlight`}>50%</span>
|
||||
</div>
|
||||
<div className={`${PREFIX}__h1`}>收益三</div>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
邀请朋友加入合伙人，可额外获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__title`}>群主特别通道</div>
|
||||
<div className={`${PREFIX}__card ${PREFIX}__special`}>
|
||||
<div className={`${PREFIX}__body`}>如果您是主播群群主，请务必添加播络小伙计</div>
|
||||
<div className={`${PREFIX}__body`}>我们会为您提供专属服务，让您的收益最大化</div>
|
||||
<Button className={`${PREFIX}__service`} onClick={handleOpenService}>
|
||||
点击添加播络伙计
|
||||
</Button>
|
||||
</div>
|
||||
<div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PartnerIntroFooter() {
|
||||
return (
|
||||
<div className={`${PREFIX}__footer`}>
|
||||
<Button className={`${PREFIX}__download-button`}>下载海报</Button>
|
||||
<Button className={`${PREFIX}__share-button`} openType="share">
|
||||
分享邀请
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user