From e5c72531232155d2141bd69b034dea6cd7088b53 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 2 Sep 2025 14:37:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(directPushList):=20=E7=9B=B4=E6=8E=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=85=A5=E5=8F=A3=E5=8F=98=E6=9B=B4=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=AD=97=E6=AE=B5-=E5=9B=A2?=
 =?UTF-8?q?=E9=98=9F=E4=BA=BA=E6=95=B0=20=E6=B3=A8=E5=86=8C=E4=B8=9A?=
 =?UTF-8?q?=E7=BB=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/distribution/directList.vue        | 390 +++--------
 .../distribution/performanceDistribution.vue  | 593 ++++++++--------
 config/request.js                             |   2 +-
 pages.json                                    |   8 -
 pages/mine/index.vue                          |  21 +-
 pages/performanceEchart/index.vue             | 660 +++++++-----------
 6 files changed, 711 insertions(+), 963 deletions(-)

diff --git a/components/distribution/directList.vue b/components/distribution/directList.vue
index fd8043b..97c0239 100644
--- a/components/distribution/directList.vue
+++ b/components/distribution/directList.vue
@@ -1,295 +1,127 @@
-
 <template>
-  <view class="main">
-	  <view class="search-content">
-		  <view class="search-list">
-			<view v-for="item in dataList" class="search-view">
-				<view class="flex_s">
-					<view class="data-left">
-						{{'会员编号'}}
-					</view>
-					<view class="data-right">
-						{{item.memberCode}}
-					</view>
-				</view>
-				<view class="flex_s">
-					<view class="data-left">
-						{{'会员姓名'}}
-					</view>
-					<view class="data-right">
-						{{item.memberName}}
-					</view>
-				</view>
-				<view class="flex_s">
-					<view class="data-left">
-						{{'注册等级'}}
-					</view>
-					<view class="data-right">
-						{{item.pkRegisterGradeStr}}
-					</view>
-				</view>
-				<view class="flex_s">
-					<view class="data-left">
-						{{'注册日期'}}
-					</view>
-					<view class="data-right">
-						{{item.creationTime}}
-					</view>
-				</view>
-				<view class="flex_s">
-					<view class="data-left">
-						{{'累计业绩'}}
-					</view>
-					<view class="data-right">
-						{{item.consumeMoney | numberToCurrency}}
-					</view>
-				</view>
-				<view style="clear: both;"></view>
-				<view style="height: 20rpx;background-color: #fff;"></view>
-			</view>
-		  </view>
-	  </view>
+  <view class="container">
+    <view class="list">
+      <view class="list-item" v-for="item in list" :key="item.memberCode">
+        <view class="item-row">
+          <text class="label">会员编号</text>
+          <text class="value">{{ item.memberCode }}</text>
+        </view>
+        <view class="item-row">
+          <text class="label">会员昵称</text>
+          <text class="value">{{ item.nickName }}</text>
+        </view>
+        <!-- <view class="item-row">
+          <text class="label">会员手机号</text>
+          <text class="value">{{ item.phone }}</text>
+        </view> -->
+        <view class="item-row">
+          <text class="label">会员等级</text>
+          <text class="value">{{ item.settleGradeVal }}</text>
+        </view>
+        <view class="item-row">
+          <text class="label">注册时间</text>
+          <text class="value">{{ item.creationTime }}</text>
+        </view>
+        <view class="item-row">
+          <text class="label">注册业绩</text>
+          <text class="value">{{ item.consumeAchieve }}</text>
+        </view>
+        <view class="item-row">
+          <text class="label">团队人数</text>
+          <text class="value">{{ item.teamCount }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="load-more">
+      <text v-if="status === 'loading'">加载中...</text>
+      <text v-if="status === 'nomore'">没有更多数据了</text>
+    </view>
   </view>
 </template>
 
 <script>
-import * as api from '@/config/distribute.js'
-import { setToken } from '@/config/auth.js'
-import store from '@/store'
+import { getDirectPushList } from '@/config/mine'
 export default {
+  name: 'DirectPush',
   data() {
     return {
-		getBonusTypeList:[],
-		index:null,
-		dataList:[],
-		userInfo:[],
-		query:{
-			startDate:'',
-			endDate:'',
-			sourceMemberCode:'',
-			sourceMemberName:'',
-			pkBonusItems: ''
-		},
-		page:{
-			pageNum:1,
-			pageSize:50
-		}
+      list: [],
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      status: 'loading', // loading, loadmore, nomore
     }
-  },
-   props:["num","checkRule"],
-  onLoad() {
-
   },
   created() {
-  // this.getType()
-  // this.getInfo()
-  this.getDataList()
-    this.userInfo = uni.getStorageSync('User')
+    this.getDirectPushList()
   },
   methods: {
-	  urlTap() {
-	      uni.navigateTo({ url: '/pages/bonusSource/index' })
-	    },
-	  	getInfo(){
-	  		 api.getInfo().then(res => {
-	  				if (res) {
-	  				 this.userInfo = res.data
-	  				}
-	  			  }).catch(error => {
-	  				reject(error)
-	  			  })  
-	  		},
-	  submit() {
-		this.getDataList()  
-	  },
-	  bindPickerChange(e) {
-		  this.index = e.detail.value
-	  },
-	  bindDateChange(e) {
-		 this.query.startDate = e.detail.value
-	  },
-	  bindDateChange1(e) {
-	     this.query.endDate = e.detail.value
-	  },
-	  getDataList(num) {
-		  this.page.pageNum = num ||1
-		api.parentList(this.page).then(res => {
-		       if (res) {
-		        this.dataList.push(...res.rows)
-		       }
-		     }).catch(error => {
-		       reject(error)
-		     })    
-	  },
-	  submit() {
-		  
-	  },
+    nextPageQuery() {
+      if (this.status === 'nomore' || this.status === 'loading') {
+        return
+      }
+      this.pageNum++
+      this.getDirectPushList()
+    },
+    prevPageQuery() {
+      this.pageNum--
+      this.getDirectPushList()
+    },
+    getDirectPushList() {
+      this.status = 'loading'
+      getDirectPushList({
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+      })
+        .then(res => {
+          this.list = this.list.concat(res.rows)
+          this.total = res.total
+          if (this.list.length >= this.total) {
+            this.status = 'nomore'
+          } else {
+            this.status = 'loadmore'
+          }
+        })
+        .catch(() => {
+          if (this.pageNum > 1) {
+            this.pageNum--
+          }
+          this.status = 'loadmore'
+        })
+    },
   },
 }
 </script>
-<style>
-	.border_s{
-		border-bottom: 1rpx solid #eee;
-		height: 10rpx;
-	}
-	.button{
-		padding: 0 30rpx;
-		/* width: 150rpx; */
-		height: 52rpx;
-		line-height: 52rpx;
-		color: #fff;
-		font-size: 28rpx;
-		text-align: center;
-		background: #005BAC;
-		margin: 30rpx 0 0 0;
-		float: right;
-		border-radius: 24rpx;
-	}
-	.type{
-		color: #005BAC !important;
-	}
-	.flex_s{
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		padding-bottom: 15rpx;
-	}
-	.data-left{
-		color: #999;
-		font-size: 26rpx;
-	}
-	.data-right{
-		color: #333;
-		font-size: 26rpx;
-	}
-	.search-view{
-		/* display: flex; */
-		/* justify-content: space-between; */
-		padding: 30rpx 20rpx 0 20rpx;
-		border-bottom: 20rpx solid #eee;
-		/* border-bottom: 1px solid #eee; */
-		margin:0 ;
-	}
-	.search-list{
-		margin-bottom: 25rpx;
-		background-color: #fff;
-	}
-	.search-content{
-		margin-top: 25rpx;
-	}
-	.text_s{
-		color: #333;
-		font-size: 26rpx;
-	}
-	.search-icon-s{
-		width: 22rpx;
-		height: 22rpx;
-	}
-	.search-icons{
-		width: 47rpx;
-		height: 47rpx;
-		background: #005BAC;
-		border-radius: 50%;
-		margin-left: 20rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin: 30rpx 20rpx 0 0;
-	}
-	.time1{
-		width: 158rpx;
-		height: 75rpx;
-		border-bottom: 1rpx solid #eee;
-		margin: 0 50rpx 30rpx  50rpx;
-		color: #999;
-		text-align: center;
-		font-size: 24rpx;
-		/* margin-bottom: 30rpx; */
-	}
-	.time-text{
-		color: #999;
-		font-size: 26rpx;
-	}
-	.search-bottom{
-		height: 100rpx;
-		line-height: 100rpx;
-		display: flex;
-		margin-left: 20rpx;
-	}
-	.texts{
-		color: #333;
-		font-size: 26rpx;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* width:200rpx; */
-		text-align: right;
-	}
-	.select-text{
-		display: flex;
-		margin-right: 20rpx;
-		font-size: 26rpx;
-		color: #333;
-		position: relative;
-	}
-	.selIcon{
-		width: 20rpx;
-		height: 20rpx;
-		margin-top: 10rpx;
-		margin-left: 5rpx;
-	}
-	.text-s{
-		font-size: 26rpx;
-		color: #999;
-		margin-right: 10rpx;
-	}
-	.place{
-		font-size: 26rpx;
-		color: #999;
-	}
-	.border-colors{
-		border: none;
-		font-size: 26rpx;
-		color: #333;
-		margin-left:30rpx;
-	}
-	page{
-		background-color: #f2f2f2;
-	}
-	.search-icon{
-		width: 25rpx;
-		height: 25rpx;
-		position: absolute;
-		left: 30rpx;
-		top: 12rpx;
-		image{
-			
-		}
-	}
-	.search-bg{
-	
-	}
-	.top{
-		/* height: 200rpx; */
-		background-color: #fff;
-		padding: 20rpx 0 20rpx 0;
-	}
-	.search-tops{
-		display: flex;
-		justify-content: space-between;
-		height: 65rpx;
-		line-height: 65rpx;
-		padding-bottom: 40rpx;
-		border-bottom: 1px solid #eee;
-	}
-	.search-bg{
-		width: 432rpx;
-		height:35rpx;
-		background: #F5F6F8;
-		border-radius: 33rpx;
-		display: flex;
-		position: relative;
-		padding: 20rpx 50rpx;
-		margin-left: 20rpx;
-	}
-</style>
\ No newline at end of file
+
+<style lang="scss" scoped>
+.container {
+  background-color: #f0f2f5;
+  min-height: 100vh;
+  padding-top: 1rpx;
+}
+.list-item {
+  background-color: #ffffff;
+  margin: 16rpx 24rpx;
+  padding: 16rpx 24rpx;
+  border-radius: 8rpx;
+}
+.item-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12rpx 0;
+  font-size: 28rpx;
+  .label {
+    color: #8c8c8c;
+  }
+  .value {
+    color: #303133;
+  }
+}
+.load-more {
+  text-align: center;
+  color: #999;
+  padding: 20rpx 0;
+  font-size: 24rpx;
+}
+</style>
diff --git a/components/distribution/performanceDistribution.vue b/components/distribution/performanceDistribution.vue
index 08bf740..22aae49 100644
--- a/components/distribution/performanceDistribution.vue
+++ b/components/distribution/performanceDistribution.vue
@@ -1,300 +1,339 @@
 <template>
-	<view class="width-auto">
-		<view class="flexs">
-			<view class="select-flexs">
-				<picker :range="selYearList" :value="index" range-key="label" @change="changeYear">
-					<view style="display: flex;	align-items: center;justify-content: space-between;">
-						<view style="margin-right:40rpx;">{{whatYear}}年</view>
-						<u-icon name="arrow-down" color="#999"></u-icon>
-					</view>
-				
-				</picker>
-			
-			</view>
-			<view class="select-flexs">
-				<picker :range="selMounthList" :value="index" range-key="label" @change="bindPickerChange">
-					<view style="display: flex;	align-items: center;justify-content: space-between;">
-						<view style="margin-right:40rpx;">{{whatMounth}}月</view>
-						<u-icon name="arrow-down" color="#999"></u-icon>
-					</view>
-
-				</picker>
-
-			</view>
-			<view class="select-flexs" style="margin-left: 20rpx;" @click="showType=true">
-				<view style="display: flex;	align-items: center;justify-content: space-between;">
-					<view style="margin-right:40rpx;">{{yjName}}</view>
-					<u-icon name="arrow-down" color="#999"></u-icon>
-				</view>
-				<!-- <picker :range="yjTypeList" :value="index2" range-key="label" @confirm="bindType"></picker> -->
-				<u-picker @cancel='showType=false' :show="showType" ref="uPicker" :columns="yjTypeList"
-					@confirm="bindType" keyName='label'></u-picker>
-			</view>
-			<!-- <view class="title">
-				导出明细
-			</view> -->
-		</view>
-		<view class="listrefor bg2">
-
-			<view class="flex_item">
-				<view class="text1">左区业绩</view>
-				<view class="text2">{{ achieveData.leftAchieve || 0 }}</view>
-			</view>
-			<view class="flex_item" style="cursor: pointer;" @click="goDetail(1)">
-				<view class="text1">左区血缘业绩</view>
-				<view class="text2">{{ achieveData.leftDirectAchieve  || 0 }}</view>
-			</view>
-			<view class="flex_item">
-				<view class="text1">左区人数</view>
-				<view class="text2">{{ achieveData.leftCoun || 0 }}</view>
-			</view>
-		</view>
-
-		<view class="listrefor bg3">
-			<view>
-				<view class="text1">血缘业绩</view>
-				<view class="text2">{{ achieveData.directAchieve || 0 }}</view>
-			</view>
-		</view>
-		<view class="listrefor bg2">
-
-			<view class="flex_item">
-				<view class="text1">右区业绩</view>
-				<view class="text2">{{ achieveData.rightAchieve || 0 }}</view>
-			</view>
-
-			<view class="flex_item" style="cursor: pointer;" @click="goDetail(2)">
-				<view class="text1">右区血缘业绩</view>
-				<view class="text2">{{ achieveData.rightDirectAchieve  || 0 }}</view>
-			</view>
-			<view class="flex_item">
-				<view class="text1">右区人数</view>
-				<view class="text2">{{ achieveData.rightCount || 0 }}</view>
-			</view>
-		</view>
-
-
-	</view>
-
+  <view>
+    <view class="date-selector-container">
+      <view class="date-selector-wrapper">
+        <view class="date-selector-header">
+          <text class="date-selector-title">选择查询时间</text>
+        </view>
+        <view class="date-selector-content">
+          <view class="date-picker-item">
+            <picker
+              :range="selYearList"
+              :value="index"
+              range-key="label"
+              @change="changeYear"
+            >
+              <view class="date-picker-display">
+                <view class="date-picker-label">年份</view>
+                <view class="date-picker-value">
+                  <text class="date-text">{{ whatYear }}</text>
+                  <text class="date-unit">年</text>
+                  <u-icon name="arrow-down" color="#005BAC" size="24"></u-icon>
+                </view>
+              </view>
+            </picker>
+          </view>
+          <view class="date-picker-separator"></view>
+          <view class="date-picker-item">
+            <picker
+              :range="selMounthList"
+              :value="index"
+              range-key="label"
+              @change="bindPickerChange"
+            >
+              <view class="date-picker-display">
+                <view class="date-picker-label">月份</view>
+                <view class="date-picker-value">
+                  <text class="date-text">{{ whatMounth }}</text>
+                  <text class="date-unit">月</text>
+                  <u-icon name="arrow-down" color="#005BAC" size="24"></u-icon>
+                </view>
+              </view>
+            </picker>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="width-auto"> </view>
+  </view>
 </template>
 
 <script>
-	import {
-		getPlaceNewAddAchieve,
-		getYjList
-	} from "@/config/distribute.js";
-	export default {
-		
-		data() {
-			return {
-				index: 0,
-				show: false,
-				achieveData: {},
+import { getPlaceNewAddAchieve } from '@/config/distribute.js'
+export default {
+  data() {
+    return {
+      index: 0,
+      show: false,
+      achieveData: {},
 
-				whatMounth: '',
-				yjType: 1,
-				yjName: "全部",
-				showType: false,
-				selMounthList: [],
-				yjTypeList: [],
-				yearShow:false,
-				whatYear:"",
-				selYearList:[{
-					value: 0,
-					label: new Date().getFullYear()-1,
-				},{
-					value: 1,
-					label: new Date().getFullYear(),
-				}],
-				mounthList: [{
-						value: 1,
-						label: 1 + '月',
-					},
-					{
-						value: 2,
-						label: 2 + '月',
-					},
-					{
-						value: 3,
-						label: 3 + '月',
-					},
-					{
-						value: 4,
-						label: 4 + '月',
-					},
-					{
-						value: 5,
-						label: 5 + '月',
-					},
-					{
-						value: 6,
-						label: 6 + '月',
-					},
-					{
-						value: 7,
-						label: 7 + '月',
-					},
-					{
-						value: 8,
-						label: 8 + '月',
-					},
-					{
-						value: 9,
-						label: 9 + '月',
-					},
-					{
-						value: 10,
-						label: 10 + '月',
-					},
-					{
-						value: 11,
-						label: 11 + '月',
-					},
-					{
-						value: 12,
-						label: 12 + '月'
-					},
-				],
-			}
-		},
-		created() {
-			
-			this.getMounth()
-			this.getYjList()
-			setTimeout(() => {
-				this.getPlaceNewAddAchieve()
-			}, 50)
-		},
-		methods: {
-			
-			goDetail(index) {
-				uni.navigateTo({
-					url:'/pages/performanceEchart/index?ifDetail='+index
-				})
-			},
-			getYjList() {
-				getYjList().then(res => {
-					this.yjTypeList = [res.data]
-				})
-			},
-			changeYear(e){
-				this.whatYear =  this.selYearList[e.detail.value].label
-				this.getPlaceNewAddAchieve()
-			},
-			bindPickerChange(e) {
-				this.whatMounth = e.detail.value + 1
-				this.getPlaceNewAddAchieve()
-			},
-			bindType(e) {
-				this.yjType = e.value[0].value
-				this.yjName = e.value[0].label
-				this.showType = false
-				this.getPlaceNewAddAchieve()
-			},
-			// 获取当前年/月
-			getMounth() {
-				this.whatMounth = new Date().getMonth() + 1
-				let selMounth = []
-				this.mounthList.forEach((item) => {
-					// if (item.value <= this.whatMounth) {
-						// selMounth.push(item)
-					// }
-					selMounth.push(item)
-				})
-				this.selMounthList = selMounth
-				this.whatYear = new Date().getFullYear()
-				
-			},
-			getPlaceNewAddAchieve() {
-				getPlaceNewAddAchieve({
-					monthType: this.whatMounth,
-					achievementType: this.yjType,
-					year:this.whatYear
-				}).then((res) => {
-					this.achieveData = res.data;
-				});
-			}
+      whatMounth: '',
+      yjType: 1,
+      showType: false,
+      selMounthList: [],
+      yjTypeList: [],
+      yearShow: false,
+      whatYear: '',
+      selYearList: [
+        {
+          value: 0,
+          label: new Date().getFullYear() - 1,
+        },
+        {
+          value: 1,
+          label: new Date().getFullYear(),
+        },
+      ],
+      mounthList: [
+        {
+          value: 1,
+          label: 1 + '月',
+        },
+        {
+          value: 2,
+          label: 2 + '月',
+        },
+        {
+          value: 3,
+          label: 3 + '月',
+        },
+        {
+          value: 4,
+          label: 4 + '月',
+        },
+        {
+          value: 5,
+          label: 5 + '月',
+        },
+        {
+          value: 6,
+          label: 6 + '月',
+        },
+        {
+          value: 7,
+          label: 7 + '月',
+        },
+        {
+          value: 8,
+          label: 8 + '月',
+        },
+        {
+          value: 9,
+          label: 9 + '月',
+        },
+        {
+          value: 10,
+          label: 10 + '月',
+        },
+        {
+          value: 11,
+          label: 11 + '月',
+        },
+        {
+          value: 12,
+          label: 12 + '月',
+        },
+      ],
+    }
+  },
+  created() {
+    this.getMounth()
+  },
+  methods: {
+    goDetail(index) {
+      uni.navigateTo({
+        url: '/pages/performanceEchart/index?ifDetail=' + index,
+      })
+    },
 
-		},
-	}
+    changeYear(e) {
+      this.whatYear = this.selYearList[e.detail.value].label
+      this.getPlaceNewAddAchieve()
+    },
+    bindPickerChange(e) {
+      this.whatMounth = e.detail.value + 1
+      this.getPlaceNewAddAchieve()
+    },
+
+    // 获取当前年/月
+    getMounth() {
+      this.whatMounth = new Date().getMonth() + 1
+      let selMounth = []
+      this.mounthList.forEach(item => {
+        // if (item.value <= this.whatMounth) {
+        // selMounth.push(item)
+        // }
+        selMounth.push(item)
+      })
+      this.selMounthList = selMounth
+      this.whatYear = new Date().getFullYear()
+    },
+    getPlaceNewAddAchieve() {
+      getPlaceNewAddAchieve({
+        monthType: this.whatMounth,
+        achievementType: this.yjType,
+        year: this.whatYear,
+      }).then(res => {
+        this.achieveData = res.data
+      })
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-	::v-deep .uni-picker {
-		width: 100%;
-	}
+::v-deep .uni-picker {
+  width: 100%;
+}
 
-	.select-flexs {
+// 新的日期选择器样式
+.date-selector-container {
+  // width: 100%;
+  // margin-bottom: 20rpx;
+  padding: 10rpx;
+}
 
-		border: 1rpx solid #EEEEEE;
-		border-radius: 15rpx;
-		// width: 232rpx;
-		padding: 20rpx 19rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
+.date-selector-wrapper {
+  background: linear-gradient(135deg, #005bac 0%, #0074d9 100%);
+  border-radius: 20rpx;
+  padding: 20rpx 20rpx;
+  box-shadow: 0 6rpx 24rpx rgba(0, 91, 172, 0.12);
+  position: relative;
+  overflow: hidden;
+}
 
-	.flexs {
-		display: flex;
-		// justify-content: space-between;
-		border-radius: 30rpx 30rpx 0 0;
-		background-color: #fff;
-	}
+.date-selector-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="60" cy="80" r="2.5" fill="rgba(255,255,255,0.06)"/></svg>')
+    no-repeat;
+  background-size: cover;
+  pointer-events: none;
+}
 
-	.title {
-		padding: 10rpx 0;
-		margin-top: 10rpx;
-	}
+.date-selector-header {
+  margin-bottom: 16rpx;
+}
 
-	.width-auto {
-		background-color: #fff;
-		padding: 0 22rpx;
-		width: 690rpx;
-		margin: 0 auto;
-		padding-bottom: 20rpx;
-	}
+.date-selector-title {
+  color: #ffffff;
+  font-size: 24rpx;
+  font-weight: 600;
+  opacity: 0.9;
+}
 
-	.listrefor {
-		color: #FFFFFF;
-		border-radius: 10rpx;
-		padding: 32rpx 21rpx;
-		margin-top: 25rpx;
-		display: flex;
-		justify-content: space-between;
+.date-selector-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
 
-		.flex_item:nth-child(1) {
-			width: 40%;
-		}
+.date-picker-item {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12rpx;
+  padding: 16rpx 16rpx;
+  backdrop-filter: blur(10rpx);
+  transition: all 0.3s ease;
+}
 
-		.flex_item:nth-child(2) {
-			width: 35%;
-		}
+.date-picker-item:active {
+  transform: scale(0.98);
+  background: rgba(255, 255, 255, 0.9);
+}
 
-		.flex_item:nth-child(3) {
-			width: 25%;
-		}
+.date-picker-separator {
+  width: 20rpx;
+  height: 2rpx;
+  background: rgba(255, 255, 255, 0.6);
+  margin: 0 12rpx;
+  border-radius: 1rpx;
+}
 
-		.text1 {
-			font-size: 28rpx;
-		}
+.date-picker-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+}
 
-		.text2 {
-			font-size: 30rpx;
-			font-weight: bold;
-			margin-top: 30rpx;
-		}
-	}
+.date-picker-label {
+  font-size: 22rpx;
+  color: #666666;
+  font-weight: 500;
+  margin-bottom: 2rpx;
+}
 
-	.bg1 {
-		background: linear-gradient(180deg, #FC7C7C 0%, #F65757 100%);
-	}
+.date-picker-value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4rpx;
+}
 
-	.bg2 {
-		background: linear-gradient(180deg, #FF9354 0%, #FF7F36 100%);
-	}
+.date-text {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #005bac;
+  line-height: 1;
+}
 
-	.bg3 {
-		background: linear-gradient(180deg, #677AF9 0%, #697BF2 100%);
-	}
-</style>
\ No newline at end of file
+.date-unit {
+  font-size: 22rpx;
+  color: #005bac;
+  font-weight: 500;
+  margin-right: 6rpx;
+}
+
+.title {
+  padding: 10rpx 0;
+  margin-top: 10rpx;
+}
+
+.width-auto {
+  background-color: #fff;
+  padding: 0 22rpx;
+  width: 690rpx;
+  margin: 0 auto;
+  padding-bottom: 20rpx;
+}
+
+.listrefor {
+  color: #ffffff;
+  border-radius: 10rpx;
+  padding: 32rpx 21rpx;
+  margin-top: 25rpx;
+  display: flex;
+  justify-content: space-between;
+
+  .flex_item:nth-child(1) {
+    width: 40%;
+  }
+
+  .flex_item:nth-child(2) {
+    width: 35%;
+  }
+
+  .flex_item:nth-child(3) {
+    width: 25%;
+  }
+
+  .text1 {
+    font-size: 28rpx;
+  }
+
+  .text2 {
+    font-size: 30rpx;
+    font-weight: bold;
+    margin-top: 30rpx;
+  }
+}
+
+.bg1 {
+  background: linear-gradient(180deg, #fc7c7c 0%, #f65757 100%);
+}
+
+.bg2 {
+  background: linear-gradient(180deg, #ff9354 0%, #ff7f36 100%);
+}
+
+.bg3 {
+  background: linear-gradient(180deg, #677af9 0%, #697bf2 100%);
+}
+</style>
diff --git a/config/request.js b/config/request.js
index c6d6d7e..780c5e4 100644
--- a/config/request.js
+++ b/config/request.js
@@ -19,7 +19,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'http://192.168.0.86:8080'
+    config.baseURL = 'https://t-bl.beida777.com/prod-api'
     //#endif
 
     //#ifdef QA_SERVER
diff --git a/pages.json b/pages.json
index d7b6ae4..804b09b 100644
--- a/pages.json
+++ b/pages.json
@@ -161,14 +161,6 @@
         "enablePullDownRefresh": true
       }
     },
-    {
-      "path": "pages/mine/directPush/index",
-      "style": {
-        "navigationBarTitleText": "直推列表",
-        "navigationBarBackgroundColor": "#fff",
-        "enablePullDownRefresh": true
-      }
-    },
     {
       "path": "pages/performanceEchart/index",
       "style": {
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index ce94231..3d8b7cb 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -300,6 +300,13 @@ export default {
       payNum: '',
       awards: {},
       otherMenuList: [
+        {
+          url: '/pages/performanceEchart/index',
+          name: '数据查询',
+          imgurl: '../../static/images/mark1.png',
+          menuKey: 'marketDynamics',
+          ifshow: true,
+        },
         {
           url: '1',
           name: '我的钱包',
@@ -350,13 +357,13 @@ export default {
           menuKey: 'addressList',
           ifshow: true,
         },
-        {
-          url: '/pages/mine/directPush/index',
-          name: '直推列表',
-          imgurl: '../../static/images/mark5.png',
-          menuKey: 'directPush',
-          ifshow: false,
-        },
+        // {
+        //   url: '/pages/mine/directPush/index',
+        //   name: '直推列表',
+        //   imgurl: '../../static/images/mark5.png',
+        //   menuKey: 'directPush',
+        //   ifshow: false,
+        // },
         {
           url: '/pages/pickupArea/pickupArea',
           name: '提货专区',
diff --git a/pages/performanceEchart/index.vue b/pages/performanceEchart/index.vue
index 0962881..7a6b275 100644
--- a/pages/performanceEchart/index.vue
+++ b/pages/performanceEchart/index.vue
@@ -1,415 +1,293 @@
 <template>
-	<view class="main">
+  <view class="main">
+    <view class="top-lists">
+      <view
+        v-for="(item, index) in navList"
+        v-show="item.menuKey != ''"
+        :key="index"
+        :class="navIndex == index ? 'styles' : ''"
+        class="nav-view"
+        @click="clickHref(index)"
+      >
+        {{ item.name }}
+      </view>
+    </view>
+    <!-- 业绩分布 !-->
+    <template>
+      <view v-if="navIndex == 0 && navList[0].menuKey != ''">
+        <performanceDistribution />
+      </view>
+    </template>
 
-		<view class="top-lists">
-			<view v-for="(item, index) in navList" v-show="item.menuKey!=''" :key="index"
-				:class="navIndex == index ? 'styles' : ''" class="nav-view" @click="clickHref(index)">
-				{{ item.name }}
-			</view>
-		</view>
-		<view>
-
-		</view>
-		<!-- 业绩分布 !-->
-		<template>
-			<view v-if="navIndex==0 && navList[0].menuKey!=''">
-				<view v-if='ifDetail==0'>
-					<view>
-						<performanceDistribution />
-					</view>
-					<!-- 安置图 -->
-					<view>
-						<placement />
-					</view>
-				</view>
-				<view v-else>
-					<!-- 月度业绩详情 -->
-					<view>
-						<monthPvDetail :placeDept='ifDetail' />
-					</view>
-
-				</view>
-			</view>
-		</template>
-		<!-- 安置图 !-->
-		<!-- <template>
-			<view v-if="navIndex==1">
-
-
-			</view>
-		</template> -->
-		<!-- 月度新增统计 !-->
-		<template>
-			<!-- <view v-if="navIndex==1">
-
-			</view> -->
-		</template>
-		<!-- 月度新增业绩 / 数据查询 !-->
-		<template>
-			<view v-if="navIndex==1" style="padding-bottom: 20rpx;">
-				<!-- 首购新增业绩 !-->
-				<view>
-					<fistAddPv />
-				</view>
-				<!-- 首购业绩分布 !-->
-				<view>
-					<firstPv></firstPv>
-				</view>
-				<!-- 复购新增业绩 !-->
-				<!-- <view>
-					<repAddPv />
-				</view> -->
-				<!-- 复购业绩分布 !-->
-				<!-- <view>
-					<secondPv></secondPv>
-				</view> -->
-				<!-- 奖衔业绩分布 !-->
-				<!-- <view>
-					<placementPerformance />
-				</view> -->
-				<!-- 真实业绩分布  !-->
-				<!-- <view>
-					<realPerformances />
-				</view> -->
-				<!-- 首购新增业绩对比 !-->
-				<view>
-					<mounthPvCompare />
-				</view>
-				<!-- 活跃会员对比 !-->
-				<view>
-					<activeMembers></activeMembers>
-				</view>
-
-
-				<!-- 推荐小区分布 !-->
-				<!-- <view>
-					<recommendedCommunity />
-				</view> -->
-
-
-				<!-- 推荐平均用时 -->
-				<!-- <view>
-					<recommendTime />
-				</view> -->
-
-			</view>
-		</template>
-
-		<!-- 直推业绩 !-->
-		<template>
-			<view v-if="navIndex==2">
-				<view class="height-auto-s">
-					<view style="font-size: 28rpx;">{{'直推业绩'}}</view>
-					<view class="flex-ss">
-						<view class="time1">
-							<picker :value="query.startDate" fields='month' mode="date" @change="bindDateChange">
-								<view v-if="query.startDate!=''" class="uni-inputs">{{query.startDate}}</view>
-								<view v-else class="uni-input">{{'开始日期'}}</view>
-							</picker>
-						</view>
-						<!-- <view class="text_s">{{'至'}}</view>
-						<view class="time1" style="margin-right: 0;">
-							<picker :value="query.endDate" mode="date" @change="bindDateChange1">
-								<view v-if="query.endDate!=''" class="uni-inputs">{{query.endDate}}</view>
-								<view v-else class="uni-input">{{'结束日期'}}</view>
-							</picker>
-						</view> -->
-					</view>
-				</view>
-				<!-- 推荐业绩分布 !-->
-				<view>
-					<recommendPerformance ref="recommends" />
-				</view>
-				<!-- 等级业绩 !-->
-				<view>
-					<gradePerformance ref="recommends1" />
-				</view>
-			</view>
-		</template>
-		<!-- 推荐列表 !-->
-		<template>
-			<view v-if="navIndex==3">
-				<directList ref="sgsyData" />
-			</view>
-		</template>
-
-	</view>
+    <!-- 推荐列表 !-->
+    <template v-if="navIndex == 1">
+      <view>
+        <directList ref="sgsyData" />
+      </view>
+    </template>
+  </view>
 </template>
 
 <script>
-	import * as api from '@/config/login.js'
-	import * as apis from '@/config/market.js'
-	import {
-		setToken
-	} from '@/config/auth.js'
-	import store from '@/store'
-	import placement from '@/components/distribution/placement.vue'
-	import placementPerformance from '@/components/distribution/placementPerformance.vue'
-	import fistAddPv from '@/components/distribution/fistAddPv.vue'
-	import mounthPvCompare from '@/components/distribution/mounthPvCompare.vue'
-	import activeMembers from '@/components/distribution/activeMembers.vue'
-	import repAddPv from '@/components/distribution/repAddPv.vue'
-	import recommendedCommunity from '@/components/distribution/recommendedCommunity.vue'
-	import firstPv from '@/components/distribution/firstPv.vue'
-	import secondPv from '@/components/distribution/secondPv.vue'
-	import realPerformances from '@/components/distribution/realPerformances.vue'
-	import realPerformance from '@/components/distribution/realPerformance.vue'
-	import directList from '@/components/distribution/directList.vue'
-	import recommendTime from '@/components/distribution/recommendTime.vue'
-	import gradePerformance from '@/components/distribution/gradePerformance.vue'
-	import recommendPerformance from '@/components/distribution/recommendPerformance.vue'
-	import performanceDistribution from '@/components/distribution/performanceDistribution.vue'
-	import monthPvDetail from '@/components/distribution/monthPvDetail.vue'
-	export default {
+import * as api from '@/config/login.js'
+import * as apis from '@/config/market.js'
+import { setToken } from '@/config/auth.js'
+import store from '@/store'
+import placement from '@/components/distribution/placement.vue'
+import placementPerformance from '@/components/distribution/placementPerformance.vue'
+import mounthPvCompare from '@/components/distribution/mounthPvCompare.vue'
+import activeMembers from '@/components/distribution/activeMembers.vue'
+import repAddPv from '@/components/distribution/repAddPv.vue'
+import recommendedCommunity from '@/components/distribution/recommendedCommunity.vue'
+import firstPv from '@/components/distribution/firstPv.vue'
+import secondPv from '@/components/distribution/secondPv.vue'
+import realPerformances from '@/components/distribution/realPerformances.vue'
+import realPerformance from '@/components/distribution/realPerformance.vue'
+import directList from '@/components/distribution/directList.vue'
+import recommendTime from '@/components/distribution/recommendTime.vue'
+import gradePerformance from '@/components/distribution/gradePerformance.vue'
+import recommendPerformance from '@/components/distribution/recommendPerformance.vue'
+import performanceDistribution from '@/components/distribution/performanceDistribution.vue'
+import monthPvDetail from '@/components/distribution/monthPvDetail.vue'
+export default {
+  components: {
+    placement,
+    realPerformances,
+    placementPerformance,
+    realPerformance,
+    directList,
+    recommendTime,
+    gradePerformance,
+    recommendPerformance,
+    performanceDistribution,
+    recommendedCommunity,
+    mounthPvCompare,
+    activeMembers,
+    monthPvDetail,
+  },
+  data() {
+    return {
+      index: null,
+      userInfo: [],
+      query: {
+        startDate: '',
+      },
+      marketList: [
+        {
+          text: '奖金来源',
+          id: 3,
+          path: '/marketDynamics',
+          name: 'bonusSource',
+          isShow: false,
+        },
+      ],
+      navList: [
+        {
+          name: '月度业绩',
+          menuKey: '',
+          value: 'ConsanguinityCheck',
+        },
+        {
+          name: '推荐列表',
+          menuKey: '',
+          value: 'recommendList',
+        },
 
-		components: {
-			placement,
-			realPerformances,
-			placementPerformance,
-			realPerformance,
-			directList,
-			recommendTime,
-			gradePerformance,
-			recommendPerformance,
-			performanceDistribution,
-			fistAddPv,
-			repAddPv,
-			recommendedCommunity,
-			firstPv,
-			secondPv,
-			mounthPvCompare,
-			activeMembers,
-			monthPvDetail
-		},
-		data() {
-			return {
-				index: null,
-				userInfo: [],
-				query: {
-					startDate: '',
-				},
-				marketList: [{
-					text: '奖金来源',
-					id: 3,
-					path: "/marketDynamics",
-					name: 'bonusSource',
-					isShow: false,
-				}, ],
-				navList: [{
-						name: '月度业绩',
-						menuKey: "",
-						value: "ConsanguinityCheck"
-					},
-					{
-						name: '数据查询',
-						menuKey: "",
-						value: "monthlyPerformance"
-					},
-					{
-						name: '直推业绩',
-						menuKey: "",
-						value: "recommendPerformance"
-					},
-					{
-						name: '推荐列表',
-						menuKey: "",
-						value: "recommendList"
-					},
+        // {
+        // 	name: "最末节点",
+        // 	menuKey: "",
+        // 	value: "placementChart"
+        // },
+        // {
+        // 	name: "月度新增统计",
+        // 	menuKey: "",
+        // 	value: "monthlyChart"
+        // },
 
-					// {
-					// 	name: "最末节点",
-					// 	menuKey: "",
-					// 	value: "placementChart"
-					// },
-					// {
-					// 	name: "月度新增统计",
-					// 	menuKey: "",
-					// 	value: "monthlyChart"
-					// },
+        // {
+        // 	name: '推荐平均用时',
+        // 	menuKey: "",
+        // 	value: "recommendTime"
+        // },
+      ],
+      navIndex: 0,
+      page: {
+        pageSize: 50,
+        pageNum: 1,
+      },
+      ifDetail: '0',
+    }
+  },
+  onLoad(val) {
+    this.query.startDate = this.getStartTime()
+    this.ifDetail = val.ifDetail || '0'
+    // this.query.endDate = this.getEndTime()
+    this.getMenuLists()
+  },
+  methods: {
+    getStartTime() {
+      let date = new Date()
+      date.setDate(1) // 将当前时间的日期设置成第一天
+      let year = date.getFullYear() // 得到当前年份
+      let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
+      month = month > 9 ? month : '0' + month // 补零
+      // return year + '-' + month + '-' + day
+      return year + '-' + month
+    },
+    // getEndTime() {
+    // 	var date = new Date();
+    // 	var year = date.getFullYear() // 年
+    // 	var month = date.getMonth() + 1; // 月
+    // 	var day = date.getDate() > 1 ? date.getDate() - 1 : date.getDate(); // 日
+    // 	var hour = date.getHours(); // 时
+    // 	var minutes = date.getMinutes(); // 分
+    // 	var seconds = date.getSeconds() //秒
+    // 	// 给一位数的数据前面加 “0”
+    // 	if (month >= 1 && month <= 9) {
+    // 		month = "0" + month;
+    // 	}
+    // 	if (day >= 0 && day <= 9) {
+    // 		day = "0" + day;
+    // 	}
+    // 	if (hour >= 0 && hour <= 9) {
+    // 		hour = "0" + hour;
+    // 	}
+    // 	if (minutes >= 0 && minutes <= 9) {
+    // 		minutes = "0" + minutes;
+    // 	}
+    // 	if (seconds >= 0 && seconds <= 9) {
+    // 		seconds = "0" + seconds;
+    // 	}
+    // 	// return year + "-" + month + "-" + day + " "
+    // 	return year + "-" + month
+    // },
+    bindDateChange(e) {
+      this.query.startDate = e.detail.value
+      this.$refs.recommends.upDateCover2(this.query)
+      this.$refs.recommends1.upDateCover2(this.query)
+    },
 
-					// {
-					// 	name: '推荐平均用时',
-					// 	menuKey: "",
-					// 	value: "recommendTime"
-					// },
-
-				],
-				navIndex: 0,
-				page: {
-					pageSize: 50,
-					pageNum: 1,
-				},
-				ifDetail: "0"
-			}
-		},
-		onLoad(val) {
-
-			this.query.startDate = this.getStartTime()
-			this.ifDetail = val.ifDetail || "0"
-			// this.query.endDate = this.getEndTime()
-			this.getMenuLists()
-		},
-		methods: {
-			getStartTime() {
-				let date = new Date()
-				date.setDate(1) // 将当前时间的日期设置成第一天
-				let year = date.getFullYear() // 得到当前年份
-				let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
-				month = month > 9 ? month : '0' + month // 补零
-				// return year + '-' + month + '-' + day
-				return year + "-" + month
-			},
-			// getEndTime() {
-			// 	var date = new Date();
-			// 	var year = date.getFullYear() // 年
-			// 	var month = date.getMonth() + 1; // 月
-			// 	var day = date.getDate() > 1 ? date.getDate() - 1 : date.getDate(); // 日
-			// 	var hour = date.getHours(); // 时
-			// 	var minutes = date.getMinutes(); // 分
-			// 	var seconds = date.getSeconds() //秒
-			// 	// 给一位数的数据前面加 “0”
-			// 	if (month >= 1 && month <= 9) {
-			// 		month = "0" + month;
-			// 	}
-			// 	if (day >= 0 && day <= 9) {
-			// 		day = "0" + day;
-			// 	}
-			// 	if (hour >= 0 && hour <= 9) {
-			// 		hour = "0" + hour;
-			// 	}
-			// 	if (minutes >= 0 && minutes <= 9) {
-			// 		minutes = "0" + minutes;
-			// 	}
-			// 	if (seconds >= 0 && seconds <= 9) {
-			// 		seconds = "0" + seconds;
-			// 	}
-			// 	// return year + "-" + month + "-" + day + " "
-			// 	return year + "-" + month
-			// },
-			bindDateChange(e) {
-				this.query.startDate = e.detail.value
-				this.$refs.recommends.upDateCover2(this.query)
-				this.$refs.recommends1.upDateCover2(this.query)
-			},
-
-			async onReachBottom() {
-				if (this.navIndex == 6) {
-					this.page.pageNum + 1
-					this.$refs.sgsyData.getDataList(this.page.pageNum += 1);
-				}
-			},
-			bindPickerChange(e) {
-				this.index = e.detail.value
-			},
-			clickHref(index) {
-				// let that= this;
-				this.navIndex = index
-				this.ifDetail = "0"
-			},
-			getMenuLists() {
-				api.menuList().then((res) => {
-					res.data.forEach((item) => {
-						this.navList.forEach((items) => {
-							if (item.menuKey == items.value) {
-								items.menuKey = item.menuKey
-							}
-						})
-						if (this.marketList[0].name == item.menuKey) {
-							this.marketList[0].isShow = true
-						}
-					})
-				})
-			},
-		},
-	}
+    async onReachBottom() {
+      if (this.navIndex == 1) {
+        this.$refs.sgsyData.nextPageQuery()
+      }
+    },
+    bindPickerChange(e) {
+      this.index = e.detail.value
+    },
+    clickHref(index) {
+      // let that= this;
+      this.navIndex = index
+      this.ifDetail = '0'
+    },
+    getMenuLists() {
+      api.menuList().then(res => {
+        res.data.forEach(item => {
+          this.navList.forEach(items => {
+            if (item.menuKey == items.value) {
+              items.menuKey = item.menuKey
+            }
+          })
+          if (this.marketList[0].name == item.menuKey) {
+            this.marketList[0].isShow = true
+          }
+        })
+      })
+    },
+  },
+}
 </script>
 <style lang="scss">
-	.uni-inputs {
-		color: #333;
-	}
+.uni-inputs {
+  color: #333;
+}
 
-	.text_s {
-		font-size: 24rpx;
-		color: #333;
-	}
+.text_s {
+  font-size: 24rpx;
+  color: #333;
+}
 
-	.height-auto-s {
-		background-color: #fff;
-		display: flex;
-		justify-content: space-between;
-		margin-top: 20rpx;
-		padding: 25rpx 60rpx 0 60rpx;
-		// line-height: 75rpx;
-	}
+.height-auto-s {
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+  padding: 25rpx 60rpx 0 60rpx;
+  // line-height: 75rpx;
+}
 
-	.flex-ss {
-		display: flex;
-	}
+.flex-ss {
+  display: flex;
+}
 
-	.time1 {
-		width: 158rpx;
-		// height: 75rpx;
-		// border-bottom: 1rpx solid #eee;
-		margin: 0 20rpx 30rpx 20rpx;
-		color: #999;
-		text-align: center;
-		font-size: 24rpx;
-		/* margin-bottom: 30rpx; */
-	}
+.time1 {
+  width: 158rpx;
+  // height: 75rpx;
+  // border-bottom: 1rpx solid #eee;
+  margin: 0 20rpx 30rpx 20rpx;
+  color: #999;
+  text-align: center;
+  font-size: 24rpx;
+  /* margin-bottom: 30rpx; */
+}
 
+.texts {
+  color: #333;
+  font-size: 26rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  /* width:200rpx; */
+  text-align: right;
+}
 
+.select-text {
+  display: flex;
+  margin-right: 20rpx;
+  font-size: 26rpx;
+  color: #333;
+  position: relative;
+}
 
-	.texts {
-		color: #333;
-		font-size: 26rpx;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* width:200rpx; */
-		text-align: right;
-	}
+.selIcon {
+  width: 30rpx;
+  height: 30rpx;
+  margin: 5rpx 0 0 20rpx;
+}
 
-	.select-text {
-		display: flex;
-		margin-right: 20rpx;
-		font-size: 26rpx;
-		color: #333;
-		position: relative;
-	}
+page {
+  background-color: #f2f2f2;
+}
 
-	.selIcon {
-		width: 30rpx;
-		height: 30rpx;
-		margin: 5rpx 0 0 20rpx;
-	}
+.styles {
+  color: #005bac !important;
+  background: #fff !important;
+  border-bottom: 4rpx solid #005bac !important;
+}
 
-	page {
-		background-color: #f2f2f2;
-	}
+.top-lists {
+  display: flex;
+  background-color: #fff;
+  border-bottom: 2rpx solid #f0f0f0;
+  margin-bottom: 10rpx;
 
-	.styles {
-		border: none !important;
-		color: #fff !important;
-		background: #d61820;
-	}
+  .nav-view {
+    flex: 1;
+    padding: 30rpx 20rpx;
+    font-size: 28rpx;
+    text-align: center;
+    color: #666;
+    position: relative;
+    border-bottom: 4rpx solid transparent;
+    transition: all 0.3s ease;
 
-	.top-lists {
-		display: flex;
-		flex-wrap: nowrap;
-		overflow-x: auto;
-		background-color: #fff;
-		padding: 20rpx 0;
-		margin-bottom: 20rpx;
+    &:not(:last-child) {
+      border-right: 1rpx solid #f0f0f0;
+    }
 
-		.nav-view {
-			min-width: 110rpx;
-			padding: 5rpx 26rpx;
-			border-radius: 10rpx;
-			border: 2rpx solid #999999;
-			font-size: 28rpx;
-			text-align: center;
-			margin: 0 10rpx;
-			color: #999;
-		}
-	}
+    &:active {
+      background-color: #f8f8f8;
+    }
+  }
+}
 </style>