zhengbasai/pages/rongyu/index.vue

<template>
	<div class="ry">

		<div class="top">
			<div class="card">
				<div class="child zs" @click="curModel=1">
					<image src="../../static/images/rongyu/icon_1.png" mode="" class="icon"></image>
					<div class="text">我的证书</div>
				</div>
				<div class="child pm" @click="curModel=2">
					<image src="../../static/images/rongyu/icon_2.png" mode="" class="icon"></image>
					<div class="text">榜单排名</div>
				</div>
			</div>
			<div class="card">
				<div class="child cj" @click="curModel=3">
					<image src="../../static/images/rongyu/icon_3.png" mode="" class="icon"></image>
					<div class="text">我的成就</div>
				</div>
				<div class="child bd" @click="curModel=4">
					<image src="../../static/images/rongyu/icon_4.png" mode="" class="icon"></image>
					<div class="text">学霸榜单</div>
				</div>
			</div>
		</div>
		<u-gap height="22" bg-color="#F5F5F5"></u-gap>
		<ZhengShuVue v-if="curModel==1" />
		<BangDan v-if="curModel==2" />
		<JiangZhuang v-if="curModel==3" />
		<BangDanXb v-if="curModel==4" />
	</div>
	</div>
</template>

<script>
	import ZhengShuVue from './components/ZhengShu.vue'
	import JiangZhuang from './components/JiangZhuang.vue'
	import BangDan from './components/BangDan.vue'
	import BangDanXb from './components/BangDanXb.vue'
	export default {
		components: {
			ZhengShuVue,
			BangDan,
			BangDanXb,
			JiangZhuang,
		},
		data() {
			return {
				curTab: 0,
				curModel: 1
			}
		},
		methods: {
			zsDetail() {
				uni.navigateTo({
					url: '/pages/rongyu/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 15px;
	}

	.card {

		display: flex;
		align-items: center;
		justify-content: space-around;

		.child {
			display: flex;
			align-items: center;
			padding: 6px 20px;

			border-radius: 5px;
			margin-bottom: 6px;

			.icon {
				width: 39px;
				height: 39px;
				margin-right: 10px;
			}

			.text {
				font-size: 19px;
				color: #fff;
			}
		}

		.zs {
			background: linear-gradient(90deg, #1170FF 0%, #65A5FF 100%);
		}

		.pm {
			background: linear-gradient(90deg, #FF9C00 0%, #FEC034 100%);
		}

		.cj {
			background: linear-gradient(90deg, #FF3131 0%, #FF893A 100%);

		}

		.bd {
			background: linear-gradient(90deg, #9214FF 0%, #FF00B2 100%);
		}

	}
</style>