fe / ufo-app-web · Commits

Go to a project

Authored by TaoHuang
Commit 0c11e3c9ea94dd756e62b0124af06cfaa71cecba 1 parent a38016d4

add page

Inline Side-by-side
Showing 10 changed files with 185 additions and 79 deletions
... ... @@ -42,7 +42,7 @@ export default {
.title {
display: inline-block;
color: black;
font-size: 15PX;
font-size: 17PX;
line-height: 45PX;
}
... ...
<template>
<div class="desc-wrapper">
<div class="title">
<div class="title-wrapper">
<TitleComp txt="活动说明"></TitleComp>
</div>
<p class="desc">
... ... @@ -33,15 +33,16 @@ export default {
margin-bottom: 40px;
}
.title {
.title-wrapper {
text-align: left;
margin-bottom: 20px;
margin-bottom: 60px;
}
.desc {
text-align: left;
font-size: 20px;
line-height: 1.5;
font-size: 24px;
color: #94b0c4;
line-height: 50px;
}
</style>
... ...
<template>
<div class="wrapper">
<div class="item title">
<div class="title-wrapper">
<TitleComp txt="我的收款银行"></TitleComp>
</div>
<template v-if="status === 1">
<div class="item">您还未绑定银行卡，将无法收款！</div>
<div class="item">
<div class="btn">添加银行卡</div>
<span>您还未绑定银行卡，将无法收款</span>
<span class="link">添加银行卡</span>
</div>
</template>
<template v-else>
... ... @@ -29,7 +29,7 @@ export default {
props: {
status: {
type: Number,
default: 2
default: 1
}
}
};
... ... @@ -38,12 +38,14 @@ export default {
<style lang="scss" scoped>
.item {
text-align: left;
font-size: 20px;
font-size: 24px;
margin-bottom: 20px;
color: white;
}
.title {
.title-wrapper {
text-align: left;
margin-bottom: 60px;
}
.btn {
... ... @@ -55,5 +57,6 @@ export default {
}
.link {
color: #64ad88;
}
</style>
... ...
<template>
<div class="bg">
</div>
</template>
<script>
export default {
name: 'Banner'
}
</script>
<style lang="scss" scoped>
.bg {
height: 620px;
}
</style>
... ...
<template>
<div class="wrapper">
<div class="title">
<div class="title-wrapper">
<TitleComp txt="我邀请的好友"></TitleComp>
</div>
... ... @@ -67,26 +67,34 @@ export default {
<style lang="scss" scoped>
.wrapper {
text-align: center;
color: white;
}
.title {
.title-wrapper {
text-align: left;
margin-bottom: 20px;
margin-bottom: 60px;
}
.table {
margin-top: 20px;
width: 100%;
font-size: 24px;
th {
font-weight: bold;
color: white;
}
tbody {
tr {
height: 50px;
border-bottom: 1px solid black;
height: 110px;
box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.09);
span {
color: #94b0c4;
display: inline-block;
height: 50px;
line-height: 50px;
height: 110px;
line-height: 110px;
}
}
}
... ...
<template>
<div class="wrapper">
<div class="item title">我的邀请码</div>
<div class="item code">{{code}}</div>
<div class="item">
<div class="btn">
复制
</div>
</div>
<div class="wrapper">
<template v-if="code">
<div class="item title mg4">我的邀请码</div>
<div class="item code mg3">{{code}}</div>
<div class="item count-wrapper">
<div class="count">
<div>22</div>
<div>已经邀请好友</div>
</div>
<div class="count">
<div>325</div>
<div>好友完成订单数</div>
<div class="item count-wrapper">
<div >
<div class="count">22</div>
<div class="tip">已经邀请好友</div>
</div>
<div >
<div class="count">325</div>
<div class="tip">好友完成订单数</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="item mg5">
<div class="tip2">您还未入驻</div>
<div class="tip2">请先入驻获得邀请码</div>
</div>
<div class="item mg2">
<div class="btn">
立即入驻
</div>
</div>
</template>
</div>
</template>
... ... @@ -32,7 +42,7 @@ export default {
code: {
type: String,
default() {
return 'huangtao';
return '';
}
}
},
... ... @@ -67,11 +77,12 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 400px;
border-radius: 150px;
width: 650px;
height: 504px;
text-align: center;
overflow: hidden;
background: url("~statics/image/invite/invite_bg@3x.png");
background-size: cover;
}
.item {
... ... @@ -80,27 +91,65 @@ export default {
.title {
color: black;
font-size: 20px;
font-size: 28px;
font-weight: bold;
}
.code {
color: black;
font-weight: bold;
font-size: 30px;
font-weight: bolder;
font-size: 80px;
letter-spacing: 4px;
}
.mg2 {
margin-top: 20px;
}
.mg3 {
margin-top: 12px;
}
.mg4 {
margin-top: 84px;
}
.mg5 {
margin-top: 116px;
margin-bottom: 54px;
}
.btn {
display: inline-block;
width: 200px;
height: 50px;
width: 464px;
height: 100px;
color: white;
background-color: black;
font-size: 20px;
line-height: 50px;
background-color: #08304b;
font-size: 28px;
line-height: 100px;
}
.count-wrapper {
display: flex;
justify-content: space-around;
}
.count {
font-size: 28px;
height: 40px;
line-height: 40px;
}
.tip {
font-size: 22px;
color: #999;
height: 32px;
line-height: 32px;
}
.tip2 {
font-size: 40px;
font-weight: bold;
margin-bottom: 12px;
}
</style>
... ...
<template>
<div class="wrapper">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<div class="title-wrapper" style="display: flex; justify-content: space-between; align-items: baseline;">
<TitleComp txt="我的收款记录"></TitleComp>
<span style="display: inline-block;">每月29日结算下一周期的佣金</span>
<span class="font" style="display: inline-block; color: white;">每月29日结算下一周期的佣金</span>
</div>
<table class="table">
... ... @@ -68,10 +68,15 @@ export default {
<style lang="scss" scoped>
.wrapper {
text-align: center;
color: white;
}
.title {
margin-bottom: 20px;
.title-wrapper {
margin-bottom: 60px;
.font {
font-size: 24px;
}
}
.tip {
... ... @@ -82,16 +87,23 @@ export default {
.table {
margin-top: 20px;
width: 100%;
font-size: 24px;
th {
font-weight: bold;
color: white;
}
tbody {
tr {
height: 50px;
border-bottom: 1px solid black;
height: 110px;
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.09);
span {
color: #94b0c4;
display: inline-block;
height: 50px;
line-height: 50px;
height: 110px;
line-height: 110px;
}
}
}
... ...
... ... @@ -14,15 +14,16 @@ export default {
display: inline-block;
height: 80px;
line-height: 80px;
font-size: 30px;
font-size: 40px;
font-weight: bold;
color: white;
&:before {
content: "\00a0";
position: absolute;
display: inline-block;
width: 20PX;
border-bottom: 4px solid black;
width: 32px;
border-bottom: 6px solid #64ad88;
}
}
</style>
... ...
<template>
<div class="body-wrapper">
<BannerPage></BannerPage>
<InviteCode class="mg"></InviteCode>
<FriendList class="mg"></FriendList>
<BankStatus class="mg"></BankStatus>
<RecordList class="mg"></RecordList>
<DescPage></DescPage>
<DescPage class="mg"></DescPage>
</div>
</template>
... ... @@ -14,6 +15,7 @@ import FriendList from './components/friend-list';
import BankStatus from './components/bankcard-status';
import RecordList from './components/record-list';
import DescPage from '../components/desc';
import BannerPage from './components/banner';
export default {
name: 'detailPage',
... ... @@ -22,7 +24,8 @@ export default {
FriendList,
BankStatus,
RecordList,
DescPage
DescPage,
BannerPage
}
};
</script>
... ... @@ -30,10 +33,18 @@ export default {
<style lang="scss" scoped>
.body-wrapper {
padding: 0 20PX;
margin-top: 40px;
background-color: #08304b;
}
.mg {
margin-bottom: 40px;
margin: 0 auto;
margin-bottom: 110px;
text-align: center;
&:last-child {
margin-bottom: 0;
padding-bottom: 120px;
}
}
</style>
... ...
<template>
<div class="body-wrapper">
<div class="item">
<div class="tip">您还未入驻，请先入驻获得邀请码</div>
</div>
<div class="item">
<div class="btn" @click="onClick">立即入驻</div>
</div>
<div class="item">
<DescPage></DescPage>
</div>
<BannerPage class="mg"></BannerPage>
<InviteCode class="mg"></InviteCode>
<DescPage class="mg"></DescPage>
</div>
</template>
<script>
import BannerPage from '../detail/components/banner';
import DescPage from '../components/desc';
import InviteCode from '../detail/components/invite-code';
export default {
name: 'welcomePage',
components: {
DescPage
BannerPage,
DescPage,
InviteCode
},
methods: {
onClick() {
... ... @@ -33,11 +30,7 @@ export default {
.body-wrapper {
padding: 0 20PX;
}
.item {
text-align: center;
margin-bottom: 40px;
background-color: #08304b;
}
.tip {
... ... @@ -55,4 +48,15 @@ export default {
line-height: 60px;
}
.mg {
margin: 0 auto;
margin-bottom: 110px;
text-align: center;
&:last-child {
margin-bottom: 0;
padding-bottom: 120px;
}
}
</style>
... ...