BiKing/pages/index/modules/nav.vue

<template>
	<view class="nav-box">
		<view class="nav-muen">
			<view class="nav-item" v-for="(item , index) in navMuen" :key="`nav_muen_${index}`"  @click.stop="openNav(item)">
				<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
				<text class="nav-name">{{ item.name }}</text>
			</view>
		</view>
		<view class="nav-function">
			<view :class="['function-item' , `function-item_${index}`]" v-for="(item , index) in navFunction"
				:key="`nav_function_${index}`"  @click.stop="openMore(item)">
				<view class="function-content">
					<view class="function-title">{{ item.name }}</view>
					<view class="function-btn">{{ item.btn }}</view>
				</view>
				<image class="function-icon" :src="item.icon" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 暂未开放 -->
		<unopen ref="unopenRef"/>
	</view>
</template>

<script>
	import { ifLogin_ } from "@/utils/common.js"
	export default {
		name: "navModules",
		data() {
			return {
				navMuen: [{
						icon: require("./../../../static/images/nav_01.png"),
						name: '永续合约',
					},
					{
						icon: require("./../../../static/images/nav_02.png"),
						name: '快捷合约',
					},
					{
						icon: require("./../../../static/images/nav_03.png"),
						name: '赠金交易',
					},
					{
						icon: require("./../../../static/images/nav_04.png"),
						name: '模拟合约',
					},
					{
						icon: require("./../../../static/images/nav_05.png"),
						name: '积分商城',
					},
					{
						icon: require("./../../../static/images/nav_06.png"),
						name: 'NFT',
					},
					{
						icon: require("./../../../static/images/nav_07.png"),
						name: '在线客服',
					},
					{
						icon: require("./../../../static/images/nav_08.png"),
						name: '新人指南',
					}
				],
				navFunction: [{
						icon: require("./../../../static/images/nav_09.png"),
						name: '充币',
						btn: '立即赚',
						path:'/pages/content/select-currency',
					},
					{
						icon: require("./../../../static/images/nav_10.png"),
						name: '牛熊对战',
						btn: '立即参与',
					},
					{
						icon: require("./../../../static/images/nav_11.png"),
						name: '跟单社区',
						btn: '跟单玩合约',
					}
				]
			};
		},
		methods:{
			openNav(){
				
				
				this.$nextTick(() => {
					this.$refs.unopenRef.open()
				})
			},
			openMore(item){
				ifLogin_().then(res => {
					uni.navigateTo({
						url: item.path
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		width: 100%;

		background-color: $modules-box-bg;
		padding: 30rpx $pages-padding 20rpx;

		.nav-muen {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.nav-item {
				flex-shrink: 0;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;

				.nav-icon {
					width: 65rpx;
					height: 58rpx;
				}

				.nav-name {
					padding-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #333333;
					line-height: 33rpx;
					letter-spacing: 0.48rpx;
				}
			}
		}

		.nav-function {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.function-item {
				width: calc((100% - 28rpx) / 3);
				height: 122rpx;
				border-radius: 9rpx;
				position: relative;

				.function-icon {
					position: absolute;
					right: 15rpx;
					top: 50%;
					width: 74rpx;
					height: 74rpx;
					transform: translateY(-50%);
					z-index: 1;
				}

				.function-content {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					// width: 100%;
					// height: 100%;
					z-index: 2;
					padding: 0 15rpx;

					// display: flex;
					// flex-direction: column;
					// // align-items: center;
					// justify-content: center;
					.function-title {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1a1a1a;
						line-height: 37rpx;
					}

					.function-btn {

						margin-top: 6rpx;
						border-radius: 6rpx;
						padding: 4rpx 13rpx;
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #ffffff;
						line-height: 30rpx;
						letter-spacing: 0.44rpx;
					}
				}
			}

			.function-item_0 {
				background: linear-gradient(180deg, #fef1d0, #fcf2d3);

				.function-btn {
					background-color: #ffcf6d;
				}
			}

			.function-item_1 {
				background: linear-gradient(180deg, #c9ebfc, #c8ecfc);

				.function-btn {
					background-color: #61C1FE;
				}
			}

			.function-item_2 {
				background: linear-gradient(180deg, #cff0eb, #cdf2ea);

				.function-btn {
					background-color: #63EBC3;
				}
			}
		}
	}
</style>