Authored by 郝肖肖

'有赚开通'

const haveGainModel = require('../models/have-gain');
const headerModel = require('../../../doraemon/models/header');
/**
* 有货-有赚
... ... @@ -11,7 +12,11 @@ class HaveGain {
page: 'have-gain-apply',
width750: true,
localCss: true,
title: '有货有赚'
title: '有货有赚',
pageHeader: headerModel.setNav({
navTitle: '有货有赚',
navBtn: false
}),
});
}
... ...
有货有赚
<div class="have-gain-apply">
<div class="section">
<div class="apply-title">基本信息</div>
<ul class="section-ul">
<li><span>姓名</span><input type="text" name="" placeholder="请输入姓名"></li>
<li class="border-node"><span>手机号码</span><input type="text" name="" placeholder="请手机号码"></li>
</ul>
</div>
<div class="section">
<div class="apply-title">完善信息</div>
<div class="party-icon-item">
<div class="public-info-section">
<img class="public-icon" src="{{imgSrc 'img/activity/have-gain/weixin@2x.png'}}" />
<div class="personal">
<div class="public-name">微信</div>
账号:<em>网点</em>&nbsp;&nbsp;
粉丝:<em>500-5000</em>
</div>
</div>
<div class="status">填写</div>
</div>
<div class="party-icon-item">
<div class="public-info-section">
<img class="public-icon" src="{{imgSrc 'img/activity/have-gain/weixin@2x.png'}}" />
<div class="personal">
<div class="public-name">微信订阅号</div>
账号:<em>网点网点网点网点网点网点网点</em>&nbsp;&nbsp;
粉丝:<em>500-5000</em>
</div>
</div>
<div class="status">填写</div>
</div>
<div class="party-icon-item">
<div class="public-info-section">
<img class="public-icon" src="{{imgSrc 'img/activity/have-gain/douyin@2x.png'}}" />
<div class="personal">
<div class="public-name">抖音</div>
<div class="account-name">
账号:<em>网点</em>&nbsp;&nbsp;
粉丝:<em>500-5000</em>
</div>
</div>
</div>
<div class="status">填写</div>
</div>
<div class="party-icon-item">
<div class="public-info-section">
<img class="public-icon" src="{{imgSrc 'img/activity/have-gain/weibo@2x.png'}}" />
<div class="personal">
<div class="public-name">微博</div>
</div>
</div>
<div class="status">填写</div>
</div>
<div class="party-icon-item">
<div class="public-info-section">
<img class="public-icon" src="{{imgSrc 'img/activity/have-gain/Instagram@2x.png'}}" />
<div class="personal">
<div class="public-name">Instagram</div>
账号:<em>网点</em>&nbsp;&nbsp;
粉丝:<em>500-5000</em>
</div>
</div>
<div class="status disable">已添加</div>
</div>
<p class="other">如果您有其他渠道,可以添加我们的服务号“有货有赚”反馈,也可以了解申请状态,<em>点击添加</em></p>
</div>
<div class="agreement-section">
<div class="agreement">
<input type="checkbox" name="check" />
我已阅读并同意<em>《有货有赚推广协议》</em>
</div>
<div class="apply-btn">申请开通</div>
</div>
</div>
... ...
.have-gain-apply {
background-color: #f0f0f0;
.section {
background-color: #fff;
padding: 0 30px;
margin-bottom: 30px;
.apply-title {
font-family: PingFang-SC-Medium, sans-serif;
color: #444;
font-size: 40px;
padding: 30px 0;
}
li {
padding: 30px 0;
border-bottom: 1px solid #e0e0e0;
color: #444;
font-size: 28px;
input {
border: none;
color: #b0b0b0;
}
span {
display: inline-block;
width: 130px;
}
}
li.border-node {
border: none;
}
.party-icon-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 30px 0;
border-bottom: 1px solid #e0e0e0;
.status {
font-family: PingFang-SC-Regular, sans-serif;
display: inline-block;
background-color: #444;
border-radius: 4px;
font-size: 24px;
color: #fff;
text-align: center;
padding: 10px 0;
width: 88px;
}
.disable {
background-color: #b0b0b0;
}
}
.public-info-section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.public-icon {
width: 80px;
height: 80px;
}
.personal {
font-family: PingFang-SC-Regular, sans-serif;
font-size: 24px;
color: #b0b0b0;
letter-spacing: 0;
margin-left: 30px;
}
.personal em {
display: inline-block;
width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: text-bottom;
}
.public-name {
font-size: 28px;
color: #444;
}
}
.other {
padding: 30px 0;
font-family: PingFang-SC-Regular, sans-serif;
font-size: 24px;
color: #b0b0b0;
letter-spacing: 0;
em {
color: #d0021b;
text-decoration: underline;
}
}
}
.agreement-section {
margin: 0 30px;
padding-bottom: 30px;
.agreement {
margin-bottom: 28px;
font-family: PingFang-SC-Regular, sans-serif;
font-size: 24px;
color: #b0b0b0;
em {
color: #d0021b;
text-decoration: underline;
}
}
.apply-btn {
height: 100px;
line-height: 100px;
background-color: #d0021b;
border-radius: 10px;
color: #fff;
text-align: center;
}
}
}
... ...