|
|
@@ -23,6 +23,116 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content_body" :style="{background:color4}">
|
|
|
+ <view class="content_beginner_guide">
|
|
|
+ <view class="title">
|
|
|
+ <text class="title_txt">- 新手引导 -</text>
|
|
|
+ <view class="title_right">
|
|
|
+ <text class="title_right_txt">收起</text>
|
|
|
+ <image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="guide_content">
|
|
|
+ <view class="item_guide">
|
|
|
+ <image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode=""></image>
|
|
|
+ <text class="guide_title">注册业主</text>
|
|
|
+ <text class="guide_desc">业主注册审核\n实时等级升级</text>
|
|
|
+ </view>
|
|
|
+ <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode=""></image>
|
|
|
+ <view class="item_guide">
|
|
|
+ <image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;" src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
|
|
|
+ <text class="guide_title">分享项目</text>
|
|
|
+ <text class="guide_desc">分享到朋友圈\n自动计算收益</text>
|
|
|
+ </view>
|
|
|
+ <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode=""></image>
|
|
|
+ <view class="item_guide">
|
|
|
+ <image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;" src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
|
|
|
+ <text class="guide_title">提现到微信</text>
|
|
|
+ <text class="guide_desc">实时查看收益\n快速提现到账</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="content_tab">
|
|
|
+ <view class="tab_item">
|
|
|
+ <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_zcyz.png" mode=""></image>
|
|
|
+ <text class="txt_tab">注册业主</text>
|
|
|
+ </view>
|
|
|
+ <view class="tab_item">
|
|
|
+ <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_shouyi.png" mode=""></image>
|
|
|
+ <text class="txt_tab">收益排行榜</text>
|
|
|
+ </view>
|
|
|
+ <view class="tab_item">
|
|
|
+ <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_report.png" mode=""></image>
|
|
|
+ <text class="txt_tab">效果报表</text>
|
|
|
+ </view>
|
|
|
+ <view class="tab_item">
|
|
|
+ <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_myinfo.png" mode=""></image>
|
|
|
+ <text class="txt_tab">我的信息</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content_tuiguang">
|
|
|
+ <view class="content_tuiguang_city">
|
|
|
+ <text class="city_num">4个</text>
|
|
|
+ <text class="city_num_desc">推广任务</text>
|
|
|
+ <view class="city_list">
|
|
|
+ <text class="city_name">城市</text>
|
|
|
+ <image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="content_tuiguang_money">
|
|
|
+ <text class="money_num">￥50,176.00</text>
|
|
|
+ <text class="money_num_des">剩余任务金额</text>
|
|
|
+ <view class="money_list">
|
|
|
+ <text class="money_name">类型</text>
|
|
|
+ <image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content_list">
|
|
|
+ <view class="content_title">
|
|
|
+ <view class="content_title_poi">
|
|
|
+ </view>
|
|
|
+ 任务列表
|
|
|
+ </view>
|
|
|
+ <view class="content_hongbao">
|
|
|
+ <view class="hongbao_left">
|
|
|
+ <image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png" mode=""></image>
|
|
|
+ <view class="hongbao_left_info">
|
|
|
+ <text class="hongbao_title">邀请好友注册</text>
|
|
|
+ <text class="hongbao_money">完成邀请，可获得 ¥1/人</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="hongbao_right">
|
|
|
+ 邀请好友
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list_item">
|
|
|
+ <image class="house_img" src="https://dm.static.elab-plus.com/yezhu/icon_house_test.png" mode=""></image>
|
|
|
+ <view class="item_content">
|
|
|
+ <text class="house_name">南京青龙山项目</text>
|
|
|
+ <text class="house_hk">获客 ¥2/人、获电 ¥5/人</text>
|
|
|
+ <view class="house_address">
|
|
|
+ <image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
|
|
|
+ 南京 · 4.5万/m² · 住宅
|
|
|
+ </view>
|
|
|
+ <view class="house_num">
|
|
|
+ <image src="https://dm.static.elab-plus.com/yezhu/icon_family.png" mode=""></image>
|
|
|
+ 三口之家
|
|
|
+ </view>
|
|
|
+ <text class="house_desc">11月6日前推广赚佣金</text>
|
|
|
+ </view>
|
|
|
+ <view class="item_share">
|
|
|
+ <image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png" mode=""></image>
|
|
|
+ <text class="icon_text">分享</text>
|
|
|
+ </view>
|
|
|
+ <view class="item_bg"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -189,6 +299,416 @@
|
|
|
margin-top: -24rpx;
|
|
|
z-index: 102;
|
|
|
position: relative;
|
|
|
+ padding: 1rpx;
|
|
|
+
|
|
|
+ .content_beginner_guide{
|
|
|
+ height: 354rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ height: 110rpx;
|
|
|
+ .title_txt{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: FontName, FontName-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ font-style: italic;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 30rpx;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .title_right{
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ top: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title_right_txt{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: right;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ .title_right_cion{
|
|
|
+ width: 10rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .guide_content{
|
|
|
+ display: flex;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item_guide{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .guide_img{
|
|
|
+ width: 58rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ margin-bottom: 17rpx;
|
|
|
+ }
|
|
|
+ .guide_title{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #2c2c2c;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .guide_desc{
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon_guide{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .content_tab{
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 180rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ .tab_item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .icon_tab{
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ }
|
|
|
+ .txt_tab{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #262626;
|
|
|
+ margin-top: 2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content_tuiguang{
|
|
|
+ height: 220rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .content_tuiguang_city{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50%;
|
|
|
+ .city_num{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: DIN Alternate, DIN Alternate-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #262626;
|
|
|
+
|
|
|
+ }
|
|
|
+ .city_num_desc{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ .city_list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 52rpx;
|
|
|
+ align-items: center;
|
|
|
+ .city_name{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .city_more{
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content_tuiguang_money{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ .money_num{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: DIN Alternate, DIN Alternate-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #fd8f3c;
|
|
|
+ }
|
|
|
+ .money_num_des{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ .money_list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 52rpx;
|
|
|
+ align-items: center;
|
|
|
+ .money_name{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .money_more{
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .money_bg{
|
|
|
+ position: absolute;
|
|
|
+ right: 0rpx;
|
|
|
+ top: 0;
|
|
|
+ width: 220rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content_list{
|
|
|
+ margin-top: 60rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ .content_title{
|
|
|
+ display: flex;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ align-items: center;
|
|
|
+ .content_title_poi{
|
|
|
+ width: 8rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ background: #f07423;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content_hongbao{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ background: linear-gradient(108deg,#ffb55f 9%, #f87523 96%);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .hongbao_left{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ .icon_hongbao{
|
|
|
+ width: 60rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .hongbao_left_info{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .hongbao_title{
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .hongbao_money{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffead8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .hongbao_right{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #f07423;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item{
|
|
|
+ width: 100%;
|
|
|
+ height: 280rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .house_img{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ z-index: 11;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .item_content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 50rpx;
|
|
|
+ z-index: 11;
|
|
|
+
|
|
|
+ .house_name{
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .house_hk{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #fd8f3c;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ .house_address{
|
|
|
+ display: flex;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 20rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .house_num{
|
|
|
+ display: flex;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .house_desc{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_share{
|
|
|
+ z-index: 11;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #f07423;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icon_share{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+ .icon_text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_bg{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 95%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
