Browse Source

全部页面导航替换样式

lizaixun 4 years ago
parent
commit
3a2c89c323
4 changed files with 348 additions and 109 deletions
  1. 87 27
      pages/analysis/Analysis.vue
  2. 86 27
      pages/forecast/Forecast.vue
  3. 87 27
      pages/mine/Mine.vue
  4. 88 28
      pages/task/Task.vue

+ 87 - 27
pages/analysis/Analysis.vue

@@ -1,39 +1,91 @@
 <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: 18px;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" style="margin-top: 10px;">
+		<cu-custom bgColor="bg-blacks" :isBack="false">
+		    <block slot="right">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
+			</block>
+			<block slot="right">	
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+						<view class="cu-tag looknumber" style="margin-top: -2%;">
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-				</view>
-				<view class="textWindpowerstation">{{address}}</view>
-			</view>
-			<view class="plus" @tap="showModal" data-target="viewModal">+</view>
-		</view>
+			</block>
+			<block slot="right">
+					
+			</block>
+		    <block slot="content">{{address}}</block>
+			<block slot="right">
+				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+			</block>
+		</cu-custom>
 		<!-- 抽屉组件 -->
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<div class="plusDrawer" @tap="hideModal">
+			<plusDrawer ref="plusDrawer"></plusDrawer>
+		</div>
 	</view>
 </template>
 
 <script>
+	import res from '../../common/data.json';
 	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import plusDrawer from '../../components/drawer/plusDrawer.vue';
+	
 	export default {
 		components: {
-			"drawer": drawer
+			"drawer": drawer,
+			plusDrawer: plusDrawer
 		},
 		data:function(){
 			return{
 				badge: 22,
-				drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
-				inconList:["form","favor","question","edit"]
+				inconList:["form","favor","question","edit"],
+				modalName:null,
+				address: '宁夏新能源公司',
+				drawerList: [{
+						"name": "首页"
+					},
+					{
+						"name": "状态监视"
+					},
+					{
+						"name": "矩阵监视"
+					},
+					{
+						"name": "风场监视"
+					},
+					{
+						"name": "人员监视"
+					},
+				],
+				plusDrawerList: [{
+						name: '宁夏新能源公司',
+						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+					},
+					{
+						name: '牛首山风电场',
+						windPowerStationId: 'NSS_FDC'
+					},
+					{
+						name: '香山风电场',
+						windPowerStationId: 'XS_FDC'
+					},
+					{
+						name: '石板泉风电场',
+						windPowerStationId: 'SBQ_FDC'
+					},
+					{
+						name: '青山风电场',
+						windPowerStationId: 'QS_FDC'
+					},
+					{
+						name: '麻黄山风电场',
+						windPowerStationId: 'MHS_FDC'
+					}
+				],
 				
 			}
 		},
@@ -62,6 +114,9 @@
 				uni.getStorageSync('windpowerstationName');
 				return uni.getStorageSync('windpowerstationName');
 			},
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
 			showModal(e) {
 				this.modalName = e.currentTarget.dataset.target;
 				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
@@ -75,17 +130,21 @@
 </script>
 
 <style>
-body {
-			font-family:'方正兰亭细黑_GBK';
-			font-size: 20px;
-			color: silver;
-		}
+	body {
+		font-family: '方正兰亭细黑_GBK';
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
 	@font-face {
-		font-family:'方正兰亭细黑_GBK';
+		font-family: '方正兰亭细黑_GBK';
 		src: url(../../static/fzltxh.TTF);
 	}
-page {
-		font-family:'方正兰亭细黑_GBK';
+	
+	page {
+		background-color: #1f1f1f;
+		font-family: '方正兰亭细黑_GBK';
 		overflow-x: hidden;
 	}
 
@@ -127,15 +186,16 @@ page {
 	}
 
 	.plus {
-		width: 50px;
+		width: 30px;
 		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
 		line-height: 45px;
-		text-align: center;
-		margin-top: 11px;
+		text-align: right;
+		margin-right: 2.5%;
 	}
+	
 	.textWindpowerstation{
 		width: 180px;
 		height: 45px;

+ 86 - 27
pages/forecast/Forecast.vue

@@ -1,39 +1,91 @@
 <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: 18px;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" style="margin-top: 10px;">
+		<cu-custom bgColor="bg-blacks" :isBack="false">
+		    <block slot="right">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
+			</block>
+			<block slot="right">	
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+						<view class="cu-tag looknumber" style="margin-top: -2%;">
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-				</view>
-				<view class="textWindpowerstation">{{address}}</view>
-			</view>
-			<view class="plus" @tap="showModal" data-target="viewModal">+</view>
-		</view>
+			</block>
+			<block slot="right">
+					
+			</block>
+		    <block slot="content">{{address}}</block>
+			<block slot="right">
+				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+			</block>
+		</cu-custom>
 		<!-- 抽屉组件 -->
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<div class="plusDrawer" @tap="hideModal">
+			<plusDrawer ref="plusDrawer"></plusDrawer>
+		</div>
 	</view>
 </template>
 
 <script>
+	import res from '../../common/data.json';
 	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import plusDrawer from '../../components/drawer/plusDrawer.vue';
+	
 	export default {
 		components: {
-			"drawer": drawer
+			"drawer": drawer,
+			plusDrawer: plusDrawer
 		},
 		data:function(){
 			return{
 				badge: 22,
-				drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
-				inconList:["form","favor","question","edit"]
+				inconList:["form","favor","question","edit"],
+				modalName:null,
+				address: '宁夏新能源公司',
+				drawerList: [{
+						"name": "首页"
+					},
+					{
+						"name": "状态监视"
+					},
+					{
+						"name": "矩阵监视"
+					},
+					{
+						"name": "风场监视"
+					},
+					{
+						"name": "人员监视"
+					},
+				],
+				plusDrawerList: [{
+						name: '宁夏新能源公司',
+						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+					},
+					{
+						name: '牛首山风电场',
+						windPowerStationId: 'NSS_FDC'
+					},
+					{
+						name: '香山风电场',
+						windPowerStationId: 'XS_FDC'
+					},
+					{
+						name: '石板泉风电场',
+						windPowerStationId: 'SBQ_FDC'
+					},
+					{
+						name: '青山风电场',
+						windPowerStationId: 'QS_FDC'
+					},
+					{
+						name: '麻黄山风电场',
+						windPowerStationId: 'MHS_FDC'
+					}
+				],
 				
 			}
 		},
@@ -62,6 +114,9 @@
 				uni.getStorageSync('windpowerstationName');
 				return uni.getStorageSync('windpowerstationName');
 			},
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
 			showModal(e) {
 				this.modalName = e.currentTarget.dataset.target;
 				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
@@ -76,19 +131,22 @@
 
 <style>
 	body {
-			font-family:'方正兰亭细黑_GBK';
-			font-size: 20px;
-			color: silver;
-		}
+		font-family: '方正兰亭细黑_GBK';
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
 	@font-face {
-		font-family:'方正兰亭细黑_GBK';
+		font-family: '方正兰亭细黑_GBK';
 		src: url(../../static/fzltxh.TTF);
 	}
-page {
-		font-family:'方正兰亭细黑_GBK';
+	
+	page {
+		background-color: #1f1f1f;
+		font-family: '方正兰亭细黑_GBK';
 		overflow-x: hidden;
 	}
-
 	.top {
 		width: 100%;
 		height: 130upx;
@@ -127,15 +185,16 @@ page {
 	}
 
 	.plus {
-		width: 50px;
+		width: 30px;
 		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
 		line-height: 45px;
-		text-align: center;
-		margin-top: 11px;
+		text-align: right;
+		margin-right: 2.5%;
 	}
+	
 	.textWindpowerstation{
 		width: 180px;
 		height: 45px;

+ 87 - 27
pages/mine/Mine.vue

@@ -1,39 +1,91 @@
 <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: 18px;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" style="margin-top: 10px;">
+		<cu-custom bgColor="bg-blacks" :isBack="false">
+		    <block slot="right">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
+			</block>
+			<block slot="right">	
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+						<view class="cu-tag looknumber" style="margin-top: -2%;">
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-				</view>
-				<view class="textWindpowerstation">{{address}}</view>
-			</view>
-			<view class="plus" @tap="showModal" data-target="viewModal">+</view>
-		</view>
+			</block>
+			<block slot="right">
+					
+			</block>
+		    <block slot="content">{{address}}</block>
+			<block slot="right">
+				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+			</block>
+		</cu-custom>
 		<!-- 抽屉组件 -->
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<div class="plusDrawer" @tap="hideModal">
+			<plusDrawer ref="plusDrawer"></plusDrawer>
+		</div>
 	</view>
 </template>
 
 <script>
+	import res from '../../common/data.json';
 	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import plusDrawer from '../../components/drawer/plusDrawer.vue';
+	
 	export default {
 		components: {
-			"drawer": drawer
+			"drawer": drawer,
+			plusDrawer: plusDrawer
 		},
 		data:function(){
 			return{
 				badge: 22,
-				drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
-				inconList:["form","favor","question","edit"]
+				inconList:["form","favor","question","edit"],
+				modalName:null,
+				address: '宁夏新能源公司',
+				drawerList: [{
+						"name": "首页"
+					},
+					{
+						"name": "状态监视"
+					},
+					{
+						"name": "矩阵监视"
+					},
+					{
+						"name": "风场监视"
+					},
+					{
+						"name": "人员监视"
+					},
+				],
+				plusDrawerList: [{
+						name: '宁夏新能源公司',
+						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+					},
+					{
+						name: '牛首山风电场',
+						windPowerStationId: 'NSS_FDC'
+					},
+					{
+						name: '香山风电场',
+						windPowerStationId: 'XS_FDC'
+					},
+					{
+						name: '石板泉风电场',
+						windPowerStationId: 'SBQ_FDC'
+					},
+					{
+						name: '青山风电场',
+						windPowerStationId: 'QS_FDC'
+					},
+					{
+						name: '麻黄山风电场',
+						windPowerStationId: 'MHS_FDC'
+					}
+				],
 				
 			}
 		},
@@ -62,6 +114,9 @@
 				uni.getStorageSync('windpowerstationName');
 				return uni.getStorageSync('windpowerstationName');
 			},
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
 			showModal(e) {
 				this.modalName = e.currentTarget.dataset.target;
 				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
@@ -75,17 +130,21 @@
 </script>
 
 <style>
-body {
-			font-family:'方正兰亭细黑_GBK';
-			font-size: 20px;
-			color: silver;
-		}
+	body {
+		font-family: '方正兰亭细黑_GBK';
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
 	@font-face {
-		font-family:'方正兰亭细黑_GBK';
+		font-family: '方正兰亭细黑_GBK';
 		src: url(../../static/fzltxh.TTF);
 	}
-page {
-		font-family:'方正兰亭细黑_GBK';
+	
+	page {
+		background-color: #1f1f1f;
+		font-family: '方正兰亭细黑_GBK';
 		overflow-x: hidden;
 	}
 
@@ -127,15 +186,16 @@ page {
 	}
 
 	.plus {
-		width: 50px;
+		width: 30px;
 		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
 		line-height: 45px;
-		text-align: center;
-		margin-top: 11px;
+		text-align: right;
+		margin-right: 2.5%;
 	}
+	
 	.textWindpowerstation{
 		width: 180px;
 		height: 45px;

+ 88 - 28
pages/task/Task.vue

@@ -1,39 +1,91 @@
 <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: 18px;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" style="margin-top: 10px;">
+		<cu-custom bgColor="bg-blacks" :isBack="false">
+		    <block slot="right">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
+			</block>
+			<block slot="right">	
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+						<view class="cu-tag looknumber" style="margin-top: -2%;">
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-				</view>
-				<view class="textWindpowerstation">{{address}}</view>
-			</view>
-			<view class="plus" @tap="showModal" data-target="viewModal">+</view>
-		</view>
+			</block>
+			<block slot="right">
+					
+			</block>
+		    <block slot="content">{{address}}</block>
+			<block slot="right">
+				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+			</block>
+		</cu-custom>
 		<!-- 抽屉组件 -->
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<div class="plusDrawer" @tap="hideModal">
+			<plusDrawer ref="plusDrawer"></plusDrawer>
+		</div>
 	</view>
 </template>
 
 <script>
+	import res from '../../common/data.json';
 	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import plusDrawer from '../../components/drawer/plusDrawer.vue';
+	
 	export default {
 		components: {
-			"drawer": drawer
+			"drawer": drawer,
+			plusDrawer: plusDrawer
 		},
 		data:function(){
 			return{
 				badge: 22,
-				drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
-				inconList:["form","favor","question","edit"]
+				inconList:["form","favor","question","edit"],
+				modalName:null,
+				address: '宁夏新能源公司',
+				drawerList: [{
+						"name": "首页"
+					},
+					{
+						"name": "状态监视"
+					},
+					{
+						"name": "矩阵监视"
+					},
+					{
+						"name": "风场监视"
+					},
+					{
+						"name": "人员监视"
+					},
+				],
+				plusDrawerList: [{
+						name: '宁夏新能源公司',
+						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
+					},
+					{
+						name: '牛首山风电场',
+						windPowerStationId: 'NSS_FDC'
+					},
+					{
+						name: '香山风电场',
+						windPowerStationId: 'XS_FDC'
+					},
+					{
+						name: '石板泉风电场',
+						windPowerStationId: 'SBQ_FDC'
+					},
+					{
+						name: '青山风电场',
+						windPowerStationId: 'QS_FDC'
+					},
+					{
+						name: '麻黄山风电场',
+						windPowerStationId: 'MHS_FDC'
+					}
+				],
 				
 			}
 		},
@@ -62,6 +114,9 @@
 				uni.getStorageSync('windpowerstationName');
 				return uni.getStorageSync('windpowerstationName');
 			},
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
 			showModal(e) {
 				this.modalName = e.currentTarget.dataset.target;
 				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
@@ -75,20 +130,24 @@
 </script>
 
 <style>
-body {
-			font-family:'方正兰亭细黑_GBK';
-			font-size: 20px;
-			color: silver;
-		}
+	body {
+		font-family: '方正兰亭细黑_GBK';
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
 	@font-face {
-		font-family:'方正兰亭细黑_GBK';
+		font-family: '方正兰亭细黑_GBK';
 		src: url(../../static/fzltxh.TTF);
 	}
-page {
-		font-family:'方正兰亭细黑_GBK';
+	
+	page {
+		background-color: #1f1f1f;
+		font-family: '方正兰亭细黑_GBK';
 		overflow-x: hidden;
 	}
-
+	
 	.top {
 		width: 100%;
 		height: 130upx;
@@ -127,15 +186,16 @@ page {
 	}
 
 	.plus {
-		width: 50px;
+		width: 30px;
 		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
 		line-height: 45px;
-		text-align: center;
-		margin-top: 11px;
+		text-align: right;
+		margin-right: 2.5%;
 	}
+	
 	.textWindpowerstation{
 		width: 180px;
 		height: 45px;