sisMobilePhone/components/drawer/threeLineDrawer.vue

<template>
	<view class="container">
		<!-- 抽屜 -->
		<uni-drawer :visible="drawerIsShow" :width="width" @close="closeDrawer" style="z-index: 99999;">
			<view style="padding:0rpx; background-color:#1A1A1A;">
				<view class="picture">
					<view class="sisGroup">监视功能分组
					<view class="iconImgage">
					</view>
					</view>
					
					<view v-for="(item,index) in drawerList" :class="[changeGary==index?'statusMonitoring':'item']" :key="index" @click="clickChangeColor(index)">
						<div v-if="(index==0)" @tap="goToIndex()">
							{{item.name}}
							</div>
					<div v-if="(index==1)" @tap="common.navTo('/components/monitor/StatusMonitor')">
						{{item.name}}
						</div>
						<div v-if="(index==2)" @tap="common.navTo('/components/monitor/MatrixMonitor')">
							{{item.name}}
							</div>
						<div v-if="(index==3)" @tap="common.navTo('/components/monitor/PersonalMonitor')">
									{{item.name}}
									</div>
					</view>

				</view>
				<view class="cu-bar tabbar bg-black">
					<view class="action">
						<view class="icon cuIcon-repair text-black">
						</view>
						<view class="text-black">设置</view>
					</view>
					<view class="action" style="margin-left: 30px;">
						<view class="icon cuIcon-command text-black">
						</view>
						<view class="text-black">修改密码</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/uni-drawer/uni-drawer.vue"
	import uniList from '@/uni-list/uni-list.vue'
	import uniListItem from '@/uni-list-item/uni-list-item.vue'
	import uniIcons from '@/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniDrawer,
			uniList,
			uniListItem,
			uniIcons
		},
		data: function() {
			return {
				drawerIsShow: false,
				drawerList: [],
				width: 250,
				inconList: [],
				changeGary: -1,
			}
		},
		methods: {
			openDrawer: function(width, drawerList, inconList) {
				this.drawerIsShow = true;
				this.drawerList = drawerList;
				this.width = width;
				this.inconList = inconList;
			},
			closeDrawer: function() {
				this.drawerIsShow = false;
			},
			clickChangeColor: function(index) {
				this.changeGary = index;
			},
			goToIndex:function(){
				uni.switchTab({
				     url: '/pages/index/Index'
				    });
			}
		}
	}
</script>

<style>
	.container{
		
	}
	.sisGroup {
		width: 90%;
		height: 65px;
		color: silver;
		font-size: 13px;
		padding-top: 40px;
		margin-left: 5%;
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
		
	}

	.statusMonitoring {
		background-color: #393939;
		width: 90%;
		margin-left: 5%;
		height: 40px;
		margin-top: 10px;
		/* text-align: center; */
		color: silver;
		font-size: 14px;
		padding-top: 10px;
		padding-left: 10px;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		
		}

	.picture {
		width: 300px;
		height: 700px;
		background-color: #1A1A1A;
		
	}

	.cu-bar {
		position: fixed;
		top: calc(100% - 50px);
		width: 100%;
		background-color: #1A1A1A;
	}

	.icon {
		float: left;
	}

	.text-black {
		float: left;
		line-height: 28px;
		font-size: 15px;
		background-color: #1A1A1A;
		color: silver;
		
	}
	.iconImgage{
		width: 29px;
		height: 35px;
		background-color: red;
		margin-left: 82px;
		margin-top: -25px;
		background-image: url(../../static/picture/i.jpg);
	}
	.item {
		width: 90%;
		height: 40px;
		margin-top: 10px;
		margin-left: 5%;
		/* float: right; */
		/* margin-right: 10px; */
		background-color: #272727;
		/* text-align: center; */
		color: silver;
		font-size: 14px;
		padding-top: 10px;
		padding-left: 10px;
		font-family: Helvetica Neue, Helvetica, sans-serif;
	}
</style>