iot-platform-app/components/commons-header/index.vue

<template>
	<view class="header-banner-warp">
		<view class="header-banner">
			<view class="back">
				<uni-icons type="back" @click="backFn" size="30"></uni-icons>
			</view>
			<view class="center-title">
				菜单
			</view>
			<view class="right-menu" @click="openMenu">
				<uni-icons type="bars" size="30"></uni-icons>
			
			</view>
		</view>
		<view class="menu-modal" v-if="menuModalType">
			<ul class="left-banner">
				<li class="active">嘻嘻嘻嘻嘻</li>
				<li>嘻嘻嘻嘻嘻</li>
				<li>嘻嘻嘻嘻嘻</li>
				<li>嘻嘻嘻嘻嘻</li>
				<li>嘻嘻嘻嘻嘻</li>
				<li>嘻嘻嘻嘻嘻</li>
			</ul>
			<view class="right-banner">
				<uni-collapse ref="collapse" v-model="value">
					<uni-collapse-item title="功能模块" :border="false">
						<view class="right-banner-box">
							<view class="">
								12312
							</view>
							<view class="">
								12312
							</view>
							<view class="">
								12312
							</view>
							<view class="">
								12312
							</view>
							<view class="">
								12312
							</view>
							<view class="">
								12312
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="功能模块" :border="false">
						<view class="content">
							<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="功能模块" :border="false">
						<view class="content">
							<text class="text">禁用状态内容主体，页面上是看不到这段话的。</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				value:null,
				menuModalType:false,
			}
		},
		methods: {
			backFn(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			},
			toRouter(j) {
				console.log(j)
				uni.navigateTo({
					url: '/pages/' + j.menuKey + '/' + j.menuKey
				})
			},
			openMenu() {
				this.menuModalType = !this.menuModalType
				console.log(this.menuModalType)
			},
		},
	}
</script>

<style lang="less">
	.uni-collapse-item{
		// height: 120rpx!important;
	}
	.header-banner-warp{
		background-color: #fff;
		padding-top: 40rpx;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		z-index: 10;
		border-bottom: 1rpx solid #dddddd;
		overflow: hidden;
		font-size: 32rpx;
		.header-banner {
			height: 88rpx;
			line-height: 88rpx;
			
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			background-color: #fff;
			
		}
	}
	

	.menu-modal {
		position: fixed;
		top: 129rpx;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		z-index: 1;
		.left-banner {
			width: 200rpx;
			background-color: #e9e9e9;
			font-size: 28rpx;

			li {
				height: 120rpx;
				line-height: 120rpx;
				color: #666666;
				text-align: center;
			}

			.active {
				background-color: #fff;
				color: #3370FF;
				position: relative;
			}

			.active::before {
				display: block;
				content: " ";
				width: 8rpx;
				height: 48rpx;
				position: absolute;
				left: 0rpx;
				top: 36rpx;
				background-color: #3370FF;
			}
		}

		.right-banner {
			width: calc(~ '100% - 200rpx');
			background-color: #ffffff;
			.right-banner-box{
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap:wrap;
				view{
					width: 32%;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					background-color: #F1F1F1;
					color: #333333;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>