优秀的编程知识分享平台

网站首页 > 技术文章 正文

自定义tab(自定义table表格)

nanyue 2024-07-22 13:55:17 技术文章 10 ℃
<view class="v-float v-tab">
	<view class="v-tab-title" :class="curPagetab == '0' ? 'is-active' : ''" @click="pageTabClick('0')">
		<span>全省排行</span>
	</view>
	<view class="v-tab-title" :class="curPagetab == '1' ? 'is-active' : ''" @click="pageTabClick('1')">
		<span>分公司排行</span>
	</view>
	<view class="v-tab-title" :class="curPagetab == '2' ? 'is-active' : ''" @click="pageTabClick('2')">
		<span>部门排行</span>
	</view>
</view>

<!-- css样式 -->
.v-float {
	display: flex;
	justify-content: space-between;
}

.v-tab {
	width: 668rpx;
	margin: auto;
	height: 68rpx;
	background-color: #e6e6e6;
	/* 设置圆角 */
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	margin-top: 15px;

	.v-tab-title {
		line-height: 68rpx;
		width: 200rpx;
		height: 60rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 12pt;
		color: #757575;
	}

	.is-active {
		height: 54rpx;
		align-self: center;
		text-align: center;
		line-height: 54rpx;
		font-size: 14pt;
		color: #323232;
		background: rgba(255, 255, 255, 0.8);
	}
}

显示结果:

最近发表
标签列表