我的推广

src/pages/extendProduct/extendProduct.wxml

@@ -78,7 +78,39 @@
         </view>
       </swiper-item>
       <swiper-item>
-        <view>222222</view>
+        <view class="release-num weui-flex df-j--bt">
+          <view class="num-invite df-1 border_box">
+            <view class="share-number">1287</view>
+            <view class="share-title">当前分享订单</view>
+          </view>
+          <view class="extension-line"></view>
+          <view class="num-invite-yesterday df-1 border_box">
+            <view class="share-number">87</view>
+            <view class="share-title">昨日新增分享订单</view>
+          </view>
+        </view>
+         <view class="order-content">
+
+      <view class="order-list">
+        <view class="order-header">
+          <view class="order-number">
+            <text>时间</text>
+          </view>
+          <text class="order-status">查看收益</text>
+        </view>
+        <view class="pro-list">
+          <image class="pro-img"></image>
+          <image class="pro-img"></image>
+          <image class="pro-img"></image>
+          <image class="pro-img"></image>
+          <text class="pro-img-dot">...</text>
+        </view>
+        <view class="pro-number">
+          <text class="total-pro">促成订单 <text class="help-order">5</text> 笔</text>
+        </view>
+        
+      </view>
+    </view>
       </swiper-item>
 	</swiper>
 </view>

src/pages/extendProduct/extendProduct.wxss

@@ -149,5 +149,88 @@ swiper {
   height: 18rpx;
 }
 
+/* *************** 我的推广 ****************** */
+.release-num {
+  height: 120rpx;
+  background: linear-gradient(to right, rgba(192,154,116,0.2) 69%,rgba(207,179,150,0.1) 100%);
+  align-items: center;
+}
+/* .num-invite {
+  border-right: 1rpx solid #C09A74 ;
+} */
+.extension-line{
+  width: 3rpx;
+  height: 50rpx;
+  background-color:  rgba(192, 154, 116, 0.2);
+}
+.num-invite, .num-invite-yesterday {
+  text-align: center;
+  margin: 25rpx 0 30rpx 0 ;
+}
+.share-number{
+  color: #333333;
+  font-size: 42rpx;
+}
+.share-title{
+  font-size: 18rpx;
+  color: #666666;
+}
+.order-content{
+  padding: 0 20rpx;
+  margin-top: 20rpx;
+}
+.order-list{
+  border-radius: 5rpx;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 8rpx 5rpx rgba(0, 0, 0, 0.05), 0px 0px 2rpx 0px rgba(0, 0, 0, 0.1);
+  padding: 24rpx 26rpx 25rpx 32rpx;  
+  margin-bottom: 20rpx;
+}
+.order-header{
+  border-bottom: 1px solid rgba(151,151,151,0.3);
+  display: flex;
+  padding: 0 0 14rpx 2rpx;
+  justify-content: space-between;
+}
+.order-number{
+  color: #808080;
+  font-size: 22rpx;
+}
+
+.order-status{
+  font-size: 22rpx;
+  color: #C09A74;
+}
+.pro-list{
+  margin-top: 16rpx;
+  display: flex;
+  justify-content: space-between;
+}
+.pro-img{
+  width: 140rpx;
+  height: 140rpx;
+  border:1px solid red;
+  vertical-align: middle;
+}
+.pro-img-dot{
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 144rpx;
+}
+.pro-number{
+  margin-top: 25rpx;
+  display: flex;
+  justify-content: space-between;
+}
+.total-pro{
+  color: #666666;
+  font-size: 26rpx;
+}
+.help-order{
+  color: #cb3c3c;
+}
+
+
+