排行样式

pages/ranking/ranking.vue

@@ -32,12 +32,12 @@
 							</view>
 						</uni-td>
 						<uni-td>
-							<view style="position: relative;" class="">
+							<view style="position: relative;" class="floatBlck">
 								<view style="width:150rpx;position: relative;" class="td" @click="show" :data-e="index">
 									{{i.schoolName}}
-									
+
 								</view>
-								<view class="floatTd" v-show="floatTd==index">
+								<view :class="floatTd>9?'floatTd2':'floatTd'" v-if="floatTd==index">
 									{{i.schoolName}}
 								</view>
 							</view>
@@ -77,7 +77,7 @@
 					title: '排行',
 					btn: 0
 				},
-				floatTd:-1,
+				floatTd: -1,
 				arrlist: [],
 				adv: {},
 				topNum: 0
@@ -143,12 +143,12 @@
 				})
 			},
 			show(e) {
-				if(this.floatTd!=-1) return
+				if (this.floatTd != -1) return
 				let data = e.currentTarget.dataset.e
-				console.log(data);
-				this.floatTd=data
-				setTimeout(()=>{
-					this.floatTd=-1
+				// console.log(data);
+				this.floatTd = data
+				setTimeout(() => {
+					this.floatTd = -1
 				}, 1500);
 				// uni.showToast({
 				// 	title: data,
@@ -197,7 +197,7 @@
 			this.getAdv()
 		},
 		onShow() {
-			this.floatTd=-1
+			this.floatTd = -1
 			// this.getMag()
 			this.getAllMessage() // 调用app.js中的方法
 			this.getdata()
@@ -290,17 +290,34 @@
 		box-sizing: border-box;
 		border-right: 1px #ebeef5 solid;
 		border-bottom: 1px #ebeef5 solid;
+
+	}
+
+	.floatTd {
+		position: absolute;
+		top: 0;
+		left: 0;
+		min-height: 100%;
+		width: 350rpx;
+		white-space: wrap;
+		display: flex;
+		align-items: center;
+		z-index: 999;
+		background-color: #ccc;
+		padding: 0 5px;
 		
 	}
-	.floatTd{
+
+	.floatTd2 {
 		position: absolute;
-		top: 0%;
+		bottom: 0;
 		left: 0;
-		height: 100%;
-		width: auto;
+		min-height: 100%;
+		width: 350rpx;
+		display: flex;
+		align-items: center;
 		z-index: 999;
-		white-space: nowrap;
-		line-height: 40px;
+		white-space: wrap;
 		background-color: #ccc;
 		padding: 0 5px;
 	}