'左侧抽屉内容和样式修改'

components/drawer/threeLineDrawer.vue

@@ -1,38 +1,46 @@
 <template>
-	<view>
+	<view class="container">
 		<!-- 抽屜 -->
 		<uni-drawer :visible="drawerIsShow" :width="width" @close="closeDrawer">
-		    <view style="padding:0rpx;">
+			<view style="padding:0rpx; background-color:#1A1A1A;">
 				<view class="picture">
-					<image src="../../static/picture/fengji.png" style="width: 100%;height: 200px;"></image>
-				</view>
-		        <uni-list>
-					<view class="list">
-										
-						<view class="item" v-for="(item,index) in drawerList" :key="index">
-							<view class="itemIcon">
-								<view class="icon text-black" :class="['cuIcon-' + inconList[index]]" style="font-size: 20px;margin-top: 10px;margin-left: 20px;">
-								</view>
-							</view>	
-							<uni-list-item :title="item" style="margin-left: 40px;"/>
-						</view>
-						
+					<view class="sisGroup">监视功能分组
+					<view class="iconImgage">
+					</view>
 					</view>
-		        			        	
-		        </uni-list>
-				<view class="cu-bar tabbar bg-white">
+					
+					<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/WindMonitor')">
+								{{item.name}}
+								</div>
+								<div v-if="(index==4)"@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: -32px;">
+					<view class="action" style="margin-left: 30px;">
 						<view class="icon cuIcon-command text-black">
 						</view>
 						<view class="text-black">修改密码</view>
-					</view>					
+					</view>
 				</view>
-		    </view>
+			</view>
 		</uni-drawer>
 	</view>
 </template>
@@ -42,67 +50,115 @@
 	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{
+	export default {
 		components: {
 			uniDrawer,
 			uniList,
 			uniListItem,
 			uniIcons
 		},
-		data:function(){
-			return{
-				drawerIsShow:false,
-				drawerList:[],
-				width:250,
-				inconList:[]
+		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;
+		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;
 			},
-			closeDrawer:function(){
-				this.drawerIsShow=false;
+			goToIndex:function(){
+				uni.switchTab({
+				     url: '/pages/index/Index'
+				    });
 			}
 		}
 	}
 </script>
 
 <style>
-	.picture{
-		width: 100%;
-		height: 200px;
+	.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;
 	}
-	.cu-bar{
+
+	.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{
+
+	.icon {
 		float: left;
 	}
-	.text-black{
+
+	.text-black {
 		float: left;
 		line-height: 28px;
 		font-size: 15px;
+		background-color: #1A1A1A;
+		color: silver;
+		
 	}
-	.list{
-		width: 100%;
-		height: 100%;
+	.iconImgage{
+		width: 29px;
+		height: 35px;
+		background-color: red;
+		margin-left: 82px;
+		margin-top: -25px;
+		background-image: url(../../static/picture/i.jpg);
 	}
-	.item{
-		width: 100%;
-		height: 100%;
-		float: right;
-		margin-right: 10px;
-		/* border-bottom: 1px solid black; */
-	}
-	.itemIcon{
-		width: 20px;
-		height: 20px;
-		float: left;
+	.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>

components/monitor/MatrixMonitor.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<view class="threeLine" @tap="openDrawer">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
+			</view>
+			<view class="text">
+				<view class="notice">
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
+						<view class="cu-tag looknumber">
+							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+						</view>
+					</view>
+				</view>
+				宁夏新能源公司
+			</view>
+			<view class="plus">+</view>
+		</view>
+		<!-- 抽屉组件 -->
+		<div>
+			<drawer ref="drawer"></drawer>
+		</div>
+		</view>
+</template>
+
+<script>
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	export default {
+		components: {
+			"drawer": drawer,
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: [
+					{"name":"首页"},
+					{"name":"状态监视"}, 
+					{"name":"矩阵监视"}, 
+					{"name":"风场监视"},
+					{"name":"人员监视"} ,
+					],
+					}
+					},
+					methods: {
+						openDrawer: function() {
+							this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+						},
+						closeDrawer: function() {
+							this.drawerIsShow = false;
+						},
+						},
+						}
+</script>
+
+<style>
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
+	page {
+		background-color: #1F1F1F;
+		overflow-x: hidden;
+	}
+	
+	.top {
+		width: 100%;
+		height: 95upx;
+		padding-top: 5upx;
+		background-color: #1F1F1F;
+	}
+	
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		line-height: 45px;
+		text-align: center;
+		font-size: 18px;
+	}
+	
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.plus {
+		width: 50px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: center;
+	}
+</style>

components/monitor/PersonalMonitor.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<view class="threeLine" @tap="openDrawer">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
+			</view>
+			<view class="text">
+				<view class="notice">
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
+						<view class="cu-tag looknumber">
+							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+						</view>
+					</view>
+				</view>
+				宁夏新能源公司
+			</view>
+			<view class="plus">+</view>
+		</view>
+		<!-- 抽屉组件 -->
+		<div>
+			<drawer ref="drawer"></drawer>
+		</div>
+		</view>
+</template>
+
+<script>
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	export default {
+		components: {
+			"drawer": drawer,
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: [
+					{"name":"首页"},
+					{"name":"状态监视"}, 
+					{"name":"矩阵监视"}, 
+					{"name":"风场监视"},
+					{"name":"人员监视"} ,
+					],
+					}
+					},
+					methods: {
+						openDrawer: function() {
+							this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+						},
+						closeDrawer: function() {
+							this.drawerIsShow = false;
+						},
+						},
+						}
+</script>
+
+<style>
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
+	page {
+		background-color: #1F1F1F;
+		overflow-x: hidden;
+	}
+	
+	.top {
+		width: 100%;
+		height: 95upx;
+		padding-top: 5upx;
+		background-color: #1F1F1F;
+	}
+	
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		line-height: 45px;
+		text-align: center;
+		font-size: 18px;
+	}
+	
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.plus {
+		width: 50px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: center;
+	}
+</style>

components/monitor/StatusMonitor.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<view class="threeLine" @tap="openDrawer">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
+			</view>
+			<view class="text">
+				<view class="notice">
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
+						<view class="cu-tag looknumber">
+							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+						</view>
+					</view>
+				</view>
+				宁夏新能源公司
+			</view>
+			<view class="plus">+</view>
+		</view>
+		<!-- 抽屉组件 -->
+		<div>
+			<drawer ref="drawer"></drawer>
+		</div>
+		</view>
+</template>
+
+<script>
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	export default {
+		components: {
+			"drawer": drawer,
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: [
+					{"name":"首页"},
+					{"name":"状态监视"}, 
+					{"name":"矩阵监视"}, 
+					{"name":"风场监视"},
+					{"name":"人员监视"} ,
+					],
+					}
+					},
+					methods: {
+						openDrawer: function() {
+							this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+						},
+						closeDrawer: function() {
+							this.drawerIsShow = false;
+						},
+						},
+						}
+</script>
+
+<style>
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
+	page {
+		background-color: #1F1F1F;
+		overflow-x: hidden;
+	}
+	
+	.top {
+		width: 100%;
+		height: 95upx;
+		padding-top: 5upx;
+		background-color: #1F1F1F;
+	}
+	
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		line-height: 45px;
+		text-align: center;
+		font-size: 18px;
+	}
+	
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.plus {
+		width: 50px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: center;
+	}
+</style>

components/monitor/WindMonitor.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<view class="threeLine" @tap="openDrawer">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
+			</view>
+			<view class="text">
+				<view class="notice">
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
+						<view class="cu-tag looknumber">
+							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+						</view>
+					</view>
+				</view>
+				宁夏新能源公司
+			</view>
+			<view class="plus">+</view>
+		</view>
+		<!-- 抽屉组件 -->
+		<div>
+			<drawer ref="drawer"></drawer>
+		</div>
+		</view>
+</template>
+
+<script>
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	export default {
+		components: {
+			"drawer": drawer,
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: [
+					{"name":"首页"},
+					{"name":"状态监视"}, 
+					{"name":"矩阵监视"}, 
+					{"name":"风场监视"},
+					{"name":"人员监视"} ,
+					],
+					}
+					},
+					methods: {
+						openDrawer: function() {
+							this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+						},
+						closeDrawer: function() {
+							this.drawerIsShow = false;
+						},
+						},
+						}
+</script>
+
+<style>
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
+	page {
+		background-color: #1F1F1F;
+		overflow-x: hidden;
+	}
+	
+	.top {
+		width: 100%;
+		height: 95upx;
+		padding-top: 5upx;
+		background-color: #1F1F1F;
+	}
+	
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		line-height: 45px;
+		text-align: center;
+		font-size: 18px;
+	}
+	
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+	
+	.plus {
+		width: 50px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: center;
+	}
+</style>

pages.json

@@ -36,7 +36,23 @@
 		{
 			"path" : "components/windStationCardDetail/WindStationCardDetail",
 			"style" : {}
-		}
+		},
+		{
+		   "path":"components/monitor/MatrixMonitor",
+		   "style":{}
+		  },
+		  {
+		   "path":"components/monitor/PersonalMonitor",
+		   "style":{}
+		  },
+		  {
+		   "path":"components/monitor/StatusMonitor",
+		   "style":{}
+		  },
+		  {
+		   "path":"components/monitor/WindMonitor",
+		   "style":{}
+		  }
         
     ],
 	"globalStyle": {

pages/index/Index.vue

@@ -527,7 +527,13 @@ export default {
 	data: function() {
 		return {
 			badge: 22,
-			drawerList: ['状态监视', '矩阵监视', '风场监视', '人员监视'],
+			drawerList: [
+					{"name":"首页"},
+					{"name":"状态监视"}, 
+					{"name":"矩阵监视"}, 
+					{"name":"风场监视"},
+					{"name":"人员监视"} ,
+					],
 			inconList: ['form', 'favor', 'question', 'edit'],
 			minaverageSpeed: '12',
 			maxaverageSpeed: '25',
@@ -556,7 +562,9 @@ export default {
 		this.windStationCardCHeight = 150;
 		this.getWindStationCardData();
 	},
-
+		onHide() {
+			this.$refs.drawer.closeDrawer();
+		},
 	methods: {
 		openDrawer: function() {
 			this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);