cosmetics_shop_wxapp/pages/index.vue

<template>
	<view class="distribution">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">分销中心</view></cu-custom>
		  <view  class="padding bg-white flex justify-between border">
			  <view>累计收益</view>
			  <view class="text-red text-price">
			  	<cu-price value="100" size="32" />
			  </view>
		  </view>
		  <view class="cu-bar search bg-white border">
		    <view class="search-form round">
		      <text class="cuIcon-search"></text>
		      <input type="text" placeholder="下级分销商姓名" confirm-type="search"></input>
		    </view>
		    <view class="action">
		      <button class="cu-btn bg-green shadow-blur round">搜索</button>
		    </view>
		  </view>
		  <view class="flex border padding-lr bg-white">
		  		<view class="text-center text-black text-cut text-bold lineheight">序号</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">姓名</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">消费金额</view>
		  		<view class=" text-center text-black text-cut vtext-bold lineheight ">消费积分</view>
		  </view>
		  <view  class="flex border padding-lr bg-white">
		  		<view class="text-center text-black text-cut text-bold lineheight ">合计</view>
		  		<view class="text-center text-black text-cut text-bold lineheight "> </view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">101000</view>
		  		<view class="text-center text-black text-cut text-bold lineheight ">10000</view>
		  </view>
		  <!-- section -->
		  <cu-scrollView @scroll="scrollFunc" @refresherpulling="refresherpulling" :height="height">
			  <view class="section bg-white padding">
				 <view v-for="(item,index) in 100" :key="index" class="row">
					 <view class="cell text-center padding-tb-sm text-cut bordera">{{index+1}}</view>
					 <view class="cell text-center padding-tb-sm text-cut bordera">张三</view>
					 <view class="cell text-center padding-tb-sm text-cut bordera">100</view>
					 <view class="cell text-center padding-tb-sm text-cut bordera">1000</view>
				 </view>
			  </view>
		  </cu-scrollView>
	</view>
</template>

<script>
	import {CustomBarHeight} from "@/common/device/index.js"
	export default {
		data(){
			return {
			}
		},
		methods:{
			refresherpulling(){
				return new Promise((resolve,reject)=>{
					resolve()
				})
			},
			scrollFunc(){
				
			}
		},
		computed:{
			height(){
				let value=CustomBarHeight;
				return `calc(100vh - ${value}px - 359rpx)`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.distribution{
		.border{
			position: relative;
			&::after{
				content:"";
				width: 100%;
				position: absolute;
				bottom: 0;left: 0;
				border-bottom: 1upx solid #ccc;
				transform: scale(1,0.5);
			}
		}
		.lineheight{
			line-height: 80upx;
			&:nth-child(1){
				width: 10%;
			}
			&:not(:nth-child(1)){
				width: 30%;
			}
		}
		.bordera{
			position: relative;
			&::after{
				content:"";
				width: 100%;
				position: absolute;
				bottom: 0;left: 0;
				border-bottom: 1upx solid #eee;
				transform: scale(1,0.5);
			}
		}
	  .section{
		  display: table;
		  width: 100vw;
		  box-sizing: border-box;
		  .row{
			  display: table-row;
			  .cell{
				  display: table-cell;
			  }
			  .cell:nth-child(1){
			  	width: 10%;
			  }
			  .cell:not(:nth-child(1)){
			  	width: 30%;
			  }
		  }
		  .fixed{
			  position: fixed;left: 0;
			  width: 100vw;
		  }
	  }
	}
</style>