diff --git a/pages/rankList/compontents/masterHand.vue b/pages/rankList/compontents/masterHand.vue
index 8db99d4..bcd36ca 100644
--- a/pages/rankList/compontents/masterHand.vue
+++ b/pages/rankList/compontents/masterHand.vue
@@ -14,14 +14,28 @@
 		<view class="u-page">
 			<u-list @scrolltolower="scrolltolower" style="height: 560px;">
 				<u-list-item v-for="(item, index) in indexList" :key="index">
-					<!-- 					<u-cell :title="`${index + 1}`">
-						<u-list-cell>1111</u-list-cell>
-						<u-list-cell>2222</u-list-cell>
-					</u-cell> -->
 					<u-cell>
+						<template #icon>
+							<view class="table-left">
+								<span>{{`${index+1}`}}</span>
+								<u-avatar shape="circle" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0"></u-avatar>
+							</view>
+						</template>
 						<template #title>
-								<span>{{`${index+1}`}}</span> 
-							<!-- <u-avatar shape="square" size="35" :src="item.url"></u-avatar> -->
+							<view class="table-right">
+								<view class="right-name">
+									<span>{{item.name}}</span>
+								</view>
+								<view class="right-content">
+									<span style="font-size: 10px; color: #c6c6c6;">{{'排位分: 30'}}</span>
+									<view class="content-left">
+										<span class="content-text">{{'二连胜'}}</span>
+									</view>
+									<view class="content-right">
+										<span class="content-text">{{'100%'}}</span>
+									</view>
+								</view>
+							</view>
 						</template>
 					</u-cell>
 				</u-list-item>
@@ -78,6 +92,11 @@
 		console.log(indexList.value);
 	};
 
+	const tabsChange = () => {
+		console.log('切换了');
+	}
+
+
 	onMounted(() => {
 		onLoad()
 	})
@@ -89,4 +108,68 @@
 		background-color: #fff;
 		border-radius: 10rpx 10rpx 0 0;
 	}
+
+	.table-left {
+		width: 17vw;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.table-right {
+		width: 66vw;
+		display: flex;
+		justify-content: space-between;
+
+		.right-name {
+			width: 20vw;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.right-content {
+			width: 50vw;
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+		}
+
+		.content-left {
+			width: 14vw;
+			height: 2.2vh;
+			background-color: #e7b696;
+			position: relative;
+			transform: skewX(-25deg);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			.content-text {
+				position: absolute;
+				transform: skewX(25deg);
+				font-size: 10px;
+				font-weight: 600;
+				color: red;
+			}
+		}
+		.content-right{
+		width: 10vw;
+		height: 2.2vh;
+		background-color: #e7b696;
+		position: relative;
+		transform: skewX(-25deg);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.content-text {
+				position: absolute;
+				transform: skewX(25deg);
+				font-size: 10px;
+				font-weight: 600;
+				color: #fff;
+			}
+		}
+	}
+	:deep(.u-cell__body){
+		padding: 13px 0 13px 15px;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/rankList/compontents/sectSchool.vue b/pages/rankList/compontents/sectSchool.vue
index 5c4fea9..56b3cf7 100644
--- a/pages/rankList/compontents/sectSchool.vue
+++ b/pages/rankList/compontents/sectSchool.vue
@@ -1,9 +1,161 @@
 <template>
-	22222222
+	<view class="football-box" style="margin-top: 5%;">
+		<u-sticky>
+			<u-tabs :list="list" lineColor="#e1b89c" :activeStyle="{
+            color: '#e1b89c',
+            transform: 'scale(1.05)'
+        }" :inactiveStyle="{
+            color: '#606266',
+            transform: 'scale(1)'
+        }" itemStyle="padding-left:20%; padding-right: 20%; height: 34px;" @change="tabsChange">
+			</u-tabs>
+		</u-sticky>
+		<u-line></u-line>
+		<view class="u-page">
+			<u-list @scrolltolower="scrolltolower" style="height: 560px;">
+				<u-list-item v-for="(item, index) in indexList" :key="index">
+					<u-cell>
+
+						<template #title>
+							<view class="tableList">
+								<view class="table-left">
+									<span style="margin-right: 20%;">{{`${index+1}`}}</span>
+									<span style="font-size: 20px; font-weight: 600;">{{item.name}}</span>
+								</view>
+								<view class="table-right">
+									<view class="market" style="margin-right: 2%;">
+										<span class="market-text">{{'净胜120场'}}</span>
+									</view>
+									<view class="grade">
+										<span class="grade-text">{{'得分:150分'}}</span>
+									</view>
+								</view>
+							</view>
+						</template>
+					</u-cell>
+				</u-list-item>
+			</u-list>
+		</view>
+	</view>
 </template>
 
-<script>
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+
+
+	const list = ref([{
+			name: '本月'
+		},
+		{
+			name: '上月'
+		}
+	])
+	const indexList = ref([]);
+	const urls = [
+		'https://cdn.uviewui.com/uview/album/1.jpg',
+		'https://cdn.uviewui.com/uview/album/2.jpg',
+		'https://cdn.uviewui.com/uview/album/3.jpg',
+		'https://cdn.uviewui.com/uview/album/4.jpg',
+		'https://cdn.uviewui.com/uview/album/5.jpg',
+		'https://cdn.uviewui.com/uview/album/6.jpg',
+		'https://cdn.uviewui.com/uview/album/7.jpg',
+		'https://cdn.uviewui.com/uview/album/8.jpg',
+		'https://cdn.uviewui.com/uview/album/9.jpg',
+		'https://cdn.uviewui.com/uview/album/10.jpg',
+	];
+
+	const onLoad = () => {
+		loadmore();
+	};
+
+	const scrolltolower = () => {
+		loadmore();
+	};
+
+	const name = ref('大侠')
+
+	const loadmore = () => {
+		for (let i = 0; i < 30; i++) {
+			indexList.value.push({
+				url: urls[uni.$u.random(0, urls.length - 1)],
+				name: `${name.value}${i}`
+			});
+		}
+		console.log(indexList.value);
+	};
+
+	const tabsChange = () => {
+		console.log('切换了');
+	}
+
+
+	onMounted(() => {
+		onLoad()
+	})
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.football-box {
+		width: 100vw;
+		background-color: #fff;
+		border-radius: 10rpx 10rpx 0 0;
+	}
+
+	.tableList {
+		width: 83vw;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.table-left {
+			width: 30vw;
+		}
+
+		.table-right {
+			width: 70vw;
+			display: flex;
+			justify-content: flex-end;
+			.market{
+				width: 20vw;
+				height: 2.2vh;
+				background-color: #e7b696;
+				position: relative;
+				transform: skewX(-25deg);
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.market-text {
+						position: absolute;
+						transform: skewX(25deg);
+						font-size: 10px;
+						font-weight: 600;
+						color: #fff;
+					}
+			}
+			.grade{
+				width: 20vw;
+				height: 2.2vh;
+				background-color: #e7b696;
+				position: relative;
+				transform: skewX(-25deg);
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.grade-text {
+						position: absolute;
+						transform: skewX(25deg);
+						font-size: 10px;
+						font-weight: 600;
+						color: #fff;
+					}
+			}
+		}
+	}
+
+	:deep(.u-cell__body) {
+		padding: 13px 0 13px 15px;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/rankList/index.vue b/pages/rankList/index.vue
index a8b3dd6..a2bb561 100644
--- a/pages/rankList/index.vue
+++ b/pages/rankList/index.vue
@@ -4,9 +4,13 @@
 	  <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
 	</view>
   <view class="box-y">
-		<view class="Upicker">
-			<u-picker :show="show" :columns="columns"  @confirm="confirm" @cancel="cancel"></u-picker>
-			<u-button @click="show = true">{{ textBtn }}</u-button>
+		<view class="Upicker" v-if='handColor'>
+			<u-picker :show="showHand" :columns="handColumns"  @confirm="confirmHand" @cancel="cancelHand"></u-picker>
+			<u-button @click="showHand = true">{{ handText }}</u-button>
+		</view>
+		<view class="Upicker" v-else>
+			<u-picker :show="showSect" :columns="sectColumns"  @confirm="confirmSect" @cancel="cancelSect"></u-picker>
+			<u-button @click="showSect = true">{{sectText }}</u-button>
 		</view>
 		<view class="box-top">
 			<view class="ball-box" @click="handBtn">
@@ -37,9 +41,15 @@ const { safeAreaInsets } = uni.getSystemInfoSync();
 
 const handColor = ref(true)
 const sectColor = ref(false)
-const show = ref(false);
-const columns = ref([
-  ['总分榜', '总分榜1', '总分榜2']
+const showHand = ref(false);
+const showSect = ref(false);
+let handText = ref('状元榜')
+let sectText = ref('门派得分排行榜')
+const handColumns = ref([
+  ['状元榜', '连中榜', '明灯黑仔榜']
+]);
+const sectColumns = ref([
+  ['门派得分排行榜', '连中榜1', '明灯黑仔榜1']
 ]);
 const handBtn = ()=>{
 	handColor.value = true
@@ -51,18 +61,23 @@ const sectBtn = ()=>{
 	sectColor.value = true
 }
 
-let textBtn = ref('总分榜')
 
-const confirm = (e) => {
-	textBtn.value = e.value[0]
-  show.value = false;
+
+const confirmHand = (e) => {
+	handText.value = e.value[0]
+  showHand.value = false;
+};
+const confirmSect = (e) => {
+	sectText.value = e.value[0]
+  showSect.value = false;
 };
 
-const cancel = ()=>{
+const cancelHand = ()=>{
 	show.value = false;
 }
-const tabsChange = (tabItem)=>{
-	// status.value = tabItem.name
+
+const cancelSect = ()=>{
+	show.value = false;
 }
 </script>