导航样式修改

colorui/main.css

@@ -3563,6 +3563,12 @@ scroll-view.cu-steps .cu-item {
 	color:white;
 }
 
+.bg-gradual-looknumberblue {
+	background-color: #3D6C8A;
+	color:white;
+}
+
+
 .bg-gradual-orange {
 	background-image: linear-gradient(45deg, #ff9700, #ed1c24);
 	color: #ffffff;
@@ -3929,7 +3935,7 @@ scroll-view.cu-steps .cu-item {
 .cu-tag.looknumber{
  border-radius: 200upx;
  position: absolute;
- top: 60upx;
+ top: 20upx;
  font-size: 20upx;
 /* padding: 0upx 10upx; */
  height: 28upx;

components/detail/Detail.vue

@@ -0,0 +1,219 @@
+<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: 10px;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 class="cu-card case">
+			<view class="cu-list menu-avatar">
+				<view class="operationBar">
+					<view class="operationBarTextLeft">盘面异动</view>
+					<view class="operationBarTextRight">更多 ></view>
+				</view>
+				<view class="qiun-columns">
+					<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
+						<view class="qiun-title-dot-light">基本区域图</view>
+					</view>
+					<view class="qiun-charts">
+						<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+</template>
+
+<script>
+	import uCharts from '../../components/tools/u-charts/u-charts.js';
+	var _self;
+	var canvaArea = null;
+	import drawer from '../../components/drawer/threeLineDrawer.vue';
+	export default {
+		components: {
+			"drawer": drawer
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: ["状态监视", "矩阵监视", "风场监视", "人员监视"],
+				inconList: ["form", "favor", "question", "edit"],
+				cWidth: '',
+				cHeight: '',
+				pixelRatio: 1,
+
+			}
+		},
+		
+		methods: {
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
+			closeDrawer: function() {
+				this.drawerIsShow = false;
+			},
+			getServerData() {
+				let chartData = {
+					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
+					series: [{
+						name: '成交量A',
+						data: [100, 80, 95, 150, 112, 132],
+						color: '#B9D1EC'
+					}]
+				};
+				// chartData.categories=[];
+				// chartData.series[0].data=[];																		
+				this.showArea("canvasArea",chartData);	
+			},
+			showArea(canvasId, chartData) {
+				canvaArea = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'area',
+					fontSize: 11,
+					legend: true,
+					dataLabel: false,
+					dataPointShape: true,
+					background: '#FFFFFF',
+					pixelRatio: _self.pixelRatio,
+					categories: chartData.categories,
+					series: chartData.series,
+					animation: true,
+					xAxis: {
+						type: 'grid',
+						gridColor: '#CCCCCC',
+						gridType: 'dash',
+						dashLength: 8,
+						axisLine:true,//x轴轴线
+					},
+					yAxis: {
+						gridType: 'dash',
+						gridColor: '#CCCCCC',
+						dashLength: 8,
+						splitNumber: 5,
+						min: 10,
+						max: 180,
+					},
+					width: _self.cWidth * _self.pixelRatio,
+					height: _self.cHeight * _self.pixelRatio,
+					extra: {
+						area: {
+							type: 'straight',
+							opacity: 0.2,
+							addLine: true,
+							width: 2
+						}
+					}
+				});
+			},
+			touchArea(e) {
+							canvaArea.showToolTip(e, {
+								format: function (item, category) {
+									return category + ' ' + item.name + ':' + item.data 
+								}
+							});
+						}
+		},
+		onLoad() {
+			_self = this;
+			this.cWidth = uni.upx2px(750);
+			this.cHeight = uni.upx2px(500);
+			this.getServerData();
+		}
+	}
+</script>
+
+<style>
+	page {
+		/* background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2F698E), color-stop(0.15, #5C757C), to(#004C90)); */
+		/* background-color: #108ADA; */
+	}
+
+	.top {
+		width: 100%;
+		height: 105upx;
+		padding-top: 5upx;
+		background-color: #3D6C8A;
+	}
+
+	.threeLine {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+
+	.text {
+		width: calc(100% - 100px);
+		height: 50px;
+		float: left;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		font-size: 18px;
+	}
+
+	.notice {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+
+	.plus {
+		width: 50px;
+		height: 50px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 50px;
+		text-align: center;
+	}
+
+	.operationBar {
+		width: 100%;
+		height: 50px;
+		background-color: white;
+
+	}
+
+	.operationBarTextLeft {
+		margin-left: 20px;
+		line-height: 50px;
+		font-size: 15px;
+		float: left;
+	}
+
+	.operationBarTextRight {
+		margin-right: 20px;
+		line-height: 50px;
+		font-size: 12px;
+		float: right;
+		color: #AAAAAA;
+	}
+	.qiun-charts {
+			width: 750upx;
+			height: 500upx;
+			background-color: #FFFFFF;
+	}
+		
+	.charts {
+			width: 750upx;
+			height: 500upx;
+			background-color: #FFFFFF;
+	}
+</style>

pages.json

@@ -28,7 +28,11 @@
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
-		}				
+		},
+		{
+			"path" : "components/detail/Detail",
+			"style" : {}
+		}
         
     ],
 	"globalStyle": {
@@ -42,7 +46,7 @@
 	    "color": "#DEDFE3",
 	    "selectedColor": "white",
 	    "borderStyle": "black",
-	    "backgroundColor": "#004C90",
+	    "backgroundColor": "#3D6C8A",
 	    "list": [{
 	        "pagePath": "pages/index/Index",
 	        "iconPath": "static/picture/indexGray.png",

pages/analysis/Analysis.vue

@@ -1,8 +1,88 @@
 <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: 10px;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:["状态监视","矩阵监视","风场监视","人员监视"],
+				inconList:["form","favor","question","edit"]
+				
+			}
+		},
+		methods:{
+			openDrawer:function(){
+				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
+			},
+			closeDrawer:function(){
+				this.drawerIsShow=false;
+			}
+		}
+	};
 </script>
 
 <style>
+	page {
+	}
+	.top {
+		width: 100%;
+		height: 105upx;
+		padding-top: 5upx;
+		background-color: #3D6C8A;
+	}
+	.threeLine {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.text {
+		width: calc(100% - 100px);
+		height: 50px;
+		float: left;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		font-size: 18px;
+	}
+	.notice{
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.plus {
+		width: 50px;
+		height: 50px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 50px;
+		text-align: center;
+	}
 </style>

pages/forecast/Forecast.vue

@@ -1,8 +1,88 @@
 <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: 10px;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:["状态监视","矩阵监视","风场监视","人员监视"],
+				inconList:["form","favor","question","edit"]
+				
+			}
+		},
+		methods:{
+			openDrawer:function(){
+				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
+			},
+			closeDrawer:function(){
+				this.drawerIsShow=false;
+			}
+		}
+	};
 </script>
 
 <style>
+	page {
+	}
+	.top {
+		width: 100%;
+		height: 105upx;
+		padding-top: 5upx;
+		background-color: #3D6C8A;
+	}
+	.threeLine {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.text {
+		width: calc(100% - 100px);
+		height: 50px;
+		float: left;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		font-size: 18px;
+	}
+	.notice{
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.plus {
+		width: 50px;
+		height: 50px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 50px;
+		text-align: center;
+	}
 </style>

pages/index/Index.vue

@@ -20,6 +20,9 @@
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<!-- <view class="details">
+			<view class="detailsText" @tap="common.navTo('/components/detail/Detail')"> 详情 〉</view>
+		</view> -->
 	</view>
 </template>
 
@@ -53,9 +56,9 @@ page {
 }
 .top {
 	width: 100%;
-	height: 140upx;
-	padding-top: 40upx;
-	background-color: #004C90;
+	height: 105upx;
+	padding-top: 5upx;
+	background-color: #3D6C8A;
 }
 .threeLine {
 	width: 50px;
@@ -85,5 +88,17 @@ page {
 	line-height: 50px;
 	text-align: center;
 }
-
+.details{
+	width: 100%;
+	height: 50px;
+	background-color: #0081FF;
+	float: left;
+}
+.detailsText{
+	line-height: 50px;
+	float: right;
+	margin-right: 20px;
+	font-size: 18px;
+	color: white;
+}
 </style>

pages/mine/Mine.vue

@@ -1,8 +1,88 @@
 <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: 10px;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:["状态监视","矩阵监视","风场监视","人员监视"],
+				inconList:["form","favor","question","edit"]
+				
+			}
+		},
+		methods:{
+			openDrawer:function(){
+				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
+			},
+			closeDrawer:function(){
+				this.drawerIsShow=false;
+			}
+		}
+	};
 </script>
 
 <style>
+	page {
+	}
+	.top {
+		width: 100%;
+		height: 105upx;
+		padding-top: 5upx;
+		background-color: #3D6C8A;
+	}
+	.threeLine {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.text {
+		width: calc(100% - 100px);
+		height: 50px;
+		float: left;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		font-size: 18px;
+	}
+	.notice{
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.plus {
+		width: 50px;
+		height: 50px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 50px;
+		text-align: center;
+	}
 </style>

pages/task/Task.vue

@@ -1,8 +1,88 @@
 <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: 10px;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:["状态监视","矩阵监视","风场监视","人员监视"],
+				inconList:["form","favor","question","edit"]
+				
+			}
+		},
+		methods:{
+			openDrawer:function(){
+				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
+			},
+			closeDrawer:function(){
+				this.drawerIsShow=false;
+			}
+		}
+	};
 </script>
 
 <style>
+	page {
+	}
+	.top {
+		width: 100%;
+		height: 105upx;
+		padding-top: 5upx;
+		background-color: #3D6C8A;
+	}
+	.threeLine {
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.text {
+		width: calc(100% - 100px);
+		height: 50px;
+		float: left;
+		color: white;
+		line-height: 50px;
+		text-align: center;
+		font-size: 18px;
+	}
+	.notice{
+		width: 50px;
+		height: 50px;
+		float: left;
+	}
+	.plus {
+		width: 50px;
+		height: 50px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 50px;
+		text-align: center;
+	}
 </style>