Bläddra i källkod

修改首页、风场详情页面、详情页面样式修改

limiao 4 år sedan
förälder
incheckning
3d22e56f0e

+ 11 - 6
components/detail/Detail.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="contentike">
 		<view class="fixed" style="color: #FFFDEF;">
-			<cu-custom bgColor="background-color: #1f1f1f;" :isBack="true">
+			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
 				<block slot="backText">
-					<view style="height: 80rpx;line-height: 80rpx; color: #FFFDEF;" @tap="goToIndex()">返回</view>
+					<view style="height: 80rpx;line-height: 80rpx; color: #FFFDEF;font-size: 18px;" @tap="goToIndex()">返回</view>
 					<view class="addressName">{{address}}</view>
 				</block>
 				
@@ -305,9 +305,16 @@ created: function() {
 	}
 </script>
 <style>
+	@font-face {
+		font-family:'方正兰亭细黑_GBK';
+		src: url(../../static/方正兰亭细黑_GBK.TTF);
+	}
 	page {
 		/* background-color: #FFFFFF; */
 		font-family:'方正兰亭细黑_GBK';
+		background-color:#1f1f1f;
+		color: silver;
+		font-size: 14px;
 	}
 
 	body {
@@ -316,10 +323,7 @@ created: function() {
 		font-size: 14px;
 		color: silver;
 	}
-@font-face {
-	font-family:'方正兰亭细黑_GBK';
-	src: url(../../static/方正兰亭细黑_GBK.TTF);
-}
+
 	.addressName {
 		/* width: 100%; */
 		/* background-color: white; */
@@ -327,6 +331,7 @@ created: function() {
 		line-height: 80rpx;
 		margin-left: 100px;
 		color: #FFFDEF;
+		font-size: 18px;
 	}
 
 	.target_dianLiang {

+ 6 - 6
components/monitor/MatrixMonitor.vue

@@ -1951,16 +1951,16 @@ page {
 	font-size: 13px;
 	margin-right: 1px;
 }
-.center-popup {
+/* .center-popup {
 		
-		/* // #ifdef H5 */
-		/* /deep/.s-popup-wrapper {
+		// #ifdef H5
+		/deep/.s-popup-wrapper {
 			width: 500rpx;
 			height: 500rpx;
 			background-color: #f0f0f0;
-		} */
-		/* // #endif */
-	}
+		}
+		// #endif
+	} */
 	.s-popup-wrapper {
 		width: 500rpx;
 		background-color: #f0f0f0;

+ 231 - 217
components/windStationCardDetail/WindStationCardDetail.vue

@@ -1,76 +1,96 @@
 <template>
 	<view>
 		<!--导航栏-->
-		<view  @tap="closeFrame">
+		<view @tap="closeFrame">
 			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
 				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view></block>
-				<block slot="content"><view style="color: silver;">{{ windStationName }}</view></block>
+				<block slot="content">
+					<view style="color: silver;">{{ windStationName }}</view>
+				</block>
 			</cu-custom>
 		</view>
 		<!--电量卡片-->
 		<view class="InformationCard" @tap="frameShow">
-			
 			<view class="informationCardAll">
-				
 				<view class="informationCardTextOne">
 					<view class="informationCardText">
-						<view class="textSilverDay">安全天数</view>
-						<view class="textWhite">(天)</view>
-						<a class="value">:15</a>
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">安全天数(&nbsp;天&nbsp;)&nbsp;:</view>
+						<view class="textWhite">15</view>
 					</view>
 					<view class="informationCardTextzj">
-						<view class="textSilver">装机容量</view>
-						<view class="textWhite">(mv)</view>
-						<a class="rightValue">:15</a>
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">装机容量(MV):</view>
+						<view class="textWhite">15</view>
 					</view>
 				</view>
 				<view class="informationCardTextTwo">
-					<view class="informationCardText2">
-						<view class="textSilver">日发电量</view>
-						<view class="textWhite">(kwh)</view>
-						<a class="value">:15</a>
+					<view class="informationCardTextNo1">
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">日发电量(kwh):</view>
+						<view class="textWhite">150</view>
 					</view>
 					<view class="informationCardText3">
-						<view class="textSilver">预测发电量</view>
-						<view class="textWhite">(kwh)</view>
-						<a class="value">:15</a>
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">预测发电量(kwh):</view>
+						<view class="textWhite2">15</view>
 					</view>
-					<view class="informationCardText4">
-						
-						<view class="textSilver">上网电量</view>
-						<view class="textWhite">(kwh)</view>
-						
-						<a class="rightValue">:15</a>
+					<view class="informationCardText2">
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">上网电量(kwh):</view>
+						<view class="textWhite">15</view>
 						<view class="img"></view>
 					</view>
 				</view>
 			</view>
-			
 		</view>
 		<!-- 指标卡片 -->
 		<view class="quatoCardAndFrame">
 			<view class="quatoCardContainer" @tap="frameShow">
 				<view :class="sanJiao"></view>
-				
+
 				<!-- <view class="icon cuIcon-unfold"></view> -->
 			</view>
 			<!-- 弹框 -->
-			<view class="frame" v-show="isFrameShow">							
-				<view class="frameCardLeft">mttr(h): <a class="frameCardLeftValue">15</a></view>
-				<view class="frameCardMiddle">月利用小时(h):<a class="frameCardMiddleValue">15</a></view>
-				<view class="frameCardRight">综合场用电率(%):<a class="frameCardRightValue">15</a></view>
-				<view class="frameCardLeft">mtbf(h):<a class="frameCardLeftValue">15</a></view>
-				<view class="frameCardMiddle">年利用小时(h):<a class="frameCardMiddleValue">15</a></view>
-				<view class="frameCardRight">设备可利用率(%):<a class="frameCardRightValue">15</a></view>
-				<view class="frameCardLeft">节约标煤(吨):<a class="frameCardLeftValue">15</a></view>
-				<view class="frameCardMiddle">节约用水(吨):<a class="frameCardMiddleValue">15</a></view>
-				<view class="frameCardRight">减排二氧化碳(吨):<a class="frameCardRightValue">15</a></view>
-				<view class="frameCardLeft">减排二氧化硫(吨):<a class="frameCardLeftValue">15</a></view>
+			<view class="frame" v-show="isFrameShow">
+				<view class="frameCardLeft">
+					mttr(h):
+					<a class="frameCardLeftValue">15</a>
+				</view>
+				<view class="frameCardMiddle">
+					月利用小时(h):
+					<a class="frameCardMiddleValue">15</a>
+				</view>
+				<view class="frameCardRight">
+					综合场用电率(%):
+					<a class="frameCardRightValue">15</a>
+				</view>
+				<view class="frameCardLeft">
+					mtbf(h):
+					<a class="frameCardLeftValue">15</a>
+				</view>
+				<view class="frameCardMiddle">
+					年利用小时(h):
+					<a class="frameCardMiddleValue">15</a>
+				</view>
+				<view class="frameCardRight">
+					设备可利用率(%):
+					<a class="frameCardRightValue">15</a>
+				</view>
+				<view class="frameCardLeft">
+					节约标煤(吨):
+					<a class="frameCardLeftValue">15</a>
+				</view>
+				<view class="frameCardMiddle">
+					节约用水(吨):
+					<a class="frameCardMiddleValue">15</a>
+				</view>
+				<view class="frameCardRight">
+					减排二氧化碳(吨):
+					<a class="frameCardRightValue">15</a>
+				</view>
+				<view class="frameCardLeft">
+					减排二氧化硫(吨):
+					<a class="frameCardLeftValue">15</a>
+				</view>
 			</view>
 		</view>
-		
-		
-		
+
 		<!--风速卡片-->
 		<view class="speedPower" @tap="closeFrame">
 			<view class="cardinstallredSpeed">
@@ -118,11 +138,19 @@
 				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
 			</view>
 		</view>
-		<!--柱状图-->		
+		<!--柱状图-->
 		<view class="Histogram" @tap="closeFrame">
 			<view class="qiun-charts">
-		   <view class="PowerColunm">发电量柱状图</view>
-		   <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
+				<view class="PowerColunm">发电量柱状图</view>
+				<canvas
+					canvas-id="canvasColumn"
+					id="canvasColumn"
+					class="charts"
+					disable-scroll="true"
+					@touchstart="touchColumn"
+					@touchmove="moveColumn"
+					@touchend="touchEndColumn"
+				></canvas>
 			</view>
 		</view>
 	</view>
@@ -143,7 +171,7 @@ export default {
 			cHeight: '',
 			pixelRatio: 1,
 			serverData: '',
-			sanJiao:"sanJiaoDown"
+			sanJiao: 'sanJiaoDown'
 		};
 	},
 	onLoad(option) {
@@ -158,17 +186,17 @@ export default {
 			this.count = this.count + 1;
 			if (this.count % 2 == 0) {
 				this.isFrameShow = false;
-				this.sanJiao="sanJiaoDown";
+				this.sanJiao = 'sanJiaoDown';
 			} else {
 				this.isFrameShow = true;
-				this.sanJiao="sanJiaoUp";
+				this.sanJiao = 'sanJiaoUp';
 			}
 		},
 		closeFrame: function() {
 			this.count = this.count + 1;
 			if (this.isFrameShow) {
 				this.isFrameShow = false;
-				this.sanJiao="sanJiaoDown";
+				this.sanJiao = 'sanJiaoDown';
 			}
 		},
 		getServerData() {
@@ -261,7 +289,7 @@ export default {
 				$this: _self,
 				canvasId: canvasId,
 				type: 'line',
-		
+
 				fontSize: 11,
 				legend: {
 					show: true,
@@ -312,7 +340,7 @@ export default {
 							titleFontColor: 'silver'
 						}
 					],
-		
+
 					gridColor: '#2E2E2E',
 					splitNumber: 4,
 					gridType: 'solid',
@@ -343,40 +371,18 @@ export default {
 			canvaLineA.scroll(e);
 		},
 		getColumnServerData() {
-			let Column={
-			    "categories": ['0',
-					'1',
-					'2',
-					'3',
-					'4',
-					'5',
-					'6',
-					'7',
-					'8',
-					'9',
-					'10',
-					'11',
-					'12',
-					'13',
-					'14',
-					'15',
-					'16',
-					'17',
-					'18',
-					'19',
-					'20',
-					'21',
-					'22',
-					'23',
-					'24'],
-			    "series": [{
-					"legendShape": "circle",
-					"name": "发电量",
-					"data": [10, 20, 30, 40, 20, 15,20,10, 20, 30, 40, 20, 15,20,10, 20, 30, 40, 20, 15,20,20, 15,20,10],
-					"textColor":"#ffffff",
-					"color": "#2fc25b"
-			      }]
-			    }
+			let Column = {
+				categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
+				series: [
+					{
+						legendShape: 'circle',
+						name: '发电量',
+						data: [10, 20, 30, 40, 20, 15, 20, 10, 20, 30, 40, 20, 15, 20, 10, 20, 30, 40, 20, 15, 20, 20, 15, 20, 10],
+						textColor: '#ffffff',
+						color: '#2fc25b'
+					}
+				]
+			};
 			// res.data.data = res.data;
 			// let Column = {
 			// 	categories: [],
@@ -386,8 +392,8 @@ export default {
 			// Column.categories = res.data.data.ColumnB.categories;
 			// Column.series = res.data.data.ColumnB.series;
 			// _self.textarea = JSON.stringify(res.data.data.ColumnB);
-			this.showColumn("canvasColumn", Column);	
-		},			
+			this.showColumn('canvasColumn', Column);
+		},
 		showColumn(canvasId, chartData) {
 			var _self = this;
 			canvaColumn = new uCharts({
@@ -398,11 +404,11 @@ export default {
 					show: true,
 					fontSize: 12,
 					padding: 5,
-					fontColor: "silver",
-					itemGap: "4",
+					fontColor: 'silver',
+					itemGap: '4',
 					// margin:0,
-					position: "top",
-					float: "right"
+					position: 'top',
+					float: 'right'
 				},
 				fontSize: 11,
 				background: '#121212',
@@ -410,16 +416,16 @@ export default {
 				animation: true,
 				categories: chartData.categories,
 				series: chartData.series,
-				enableScroll:true,
+				enableScroll: true,
 				xAxis: {
 					// disabled:true,
 					rotateLabel: false,
 					disableGrid: true,
 					axisLineColor: '#2D2D2D',
-					fontColor: "#ffffff",
-					itemCount:10,
+					fontColor: '#ffffff',
+					itemCount: 10,
 					// labelCount:10,
-					scrollShow:false,
+					scrollShow: false
 					// gridColor:'#2D2D2D',
 				},
 				yAxis: {
@@ -431,19 +437,21 @@ export default {
 					splitNumber: 5,
 					min: 0,
 					max: 40,
-					data: [{
-						min: 0,
-						max: 40,
-						position: 'left',
-						axisLine: false,
-						fontColor: "silver",
-						title: "            发电量:(kw/h)",
-						titleFontColor: "silver",
-						titleFontSize: 11,
-						format: (val) => {
-							return val.toFixed(0) + ''
-						},
-					}]
+					data: [
+						{
+							min: 0,
+							max: 40,
+							position: 'left',
+							axisLine: false,
+							fontColor: 'silver',
+							title: '            发电量:(kw/h)',
+							titleFontColor: 'silver',
+							titleFontSize: 11,
+							format: val => {
+								return val.toFixed(0) + '';
+							}
+						}
+					]
 				},
 				dataLabel: true,
 				width: _self.cWidth * _self.pixelRatio,
@@ -454,32 +462,30 @@ export default {
 						// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
 						width: 12,
 						lineStyle: {
-							width: 5,
+							width: 5
 						}
 					}
 				}
 			});
-				
-		},			
+		},
 		touchEndColumn(e) {
 			canvaColumn.scrollEnd(e);
 			canvaColumn.showToolTip(e, {
 				format: function(item, category) {
 					if (typeof item.data === 'object') {
-						return category + ' ' + item.name + ':' + item.data.value
+						return category + ' ' + item.name + ':' + item.data.value;
 					} else {
-						return category + ' ' + item.name + ':' + item.data
+						return category + ' ' + item.name + ':' + item.data;
 					}
 				}
 			});
 		},
-		touchColumn(e){
-		    canvaColumn.scrollStart(e);
+		touchColumn(e) {
+			canvaColumn.scrollStart(e);
 		},
 		moveColumn(e) {
-		    canvaColumn.scroll(e);
-		},		
-		
+			canvaColumn.scroll(e);
+		}
 	}
 };
 </script>
@@ -492,38 +498,44 @@ body {
 	background: #020202;
 }
 @font-face {
-	font-family:'方正兰亭细黑_GBK';
+	font-family: '方正兰亭细黑_GBK';
 	src: url(../../static/方正兰亭细黑_GBK.TTF);
 }
 page {
-	background-color:#1f1f1f;
-	font-family:'方正兰亭细黑_GBK';
+	background-color: #1f1f1f;
+	font-family: '方正兰亭细黑_GBK';
 	color: silver;
 }
 .InformationCard {
-	/* margin-top: 10px; */
+	margin-top: 10px;
 	width: 100%;
-	height: 85px;
-	background-color:#242424;
+	height: 90px;
+	background-color: #242424;
 	float: left;
-	color: #A1A1A1;
 }
+
 .informationCardAll {
-	width: calc(100% - 18px);
+	width: 100%;
 	margin-top: 10px;
-	margin-left: 9px;
 	height: 60px;
 	float: left;
-	color: #A1A1A1;
 }
+
 .informationCardTextOne {
 	width: 100%;
 	height: 35px;
 	float: left;
-	color: #A1A1A1;
+}
+.informationCardTextNo1 {
+	margin-left: 2%;
+	width: 115px;
+	height: 35px;
+	font-size: 13px;
+	line-height: 35px;
+	float: left;
 }
 .informationCardText {
-	/* margin-left: 15px; */
+	margin-left: 2%;
 	width: 115px;
 	height: 35px;
 	line-height: 35px;
@@ -531,62 +543,65 @@ page {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: #A1A1A1;
-	font-size: 12px;
+	color: silver;
+	font-size: 13px;
 	float: left;
 }
 .informationCardTextzj {
-	/* margin-left: 140px; */
-	margin-right: 9px;
-	width: 120px;
+	/* margin-left: 43%; */
+	width: 115px;
 	height: 35px;
 	line-height: 35px;
 	user-select: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: #A1A1A1;
-	font-size: 14px;
+	color: silver;
+	font-size: 13px;
 	float: right;
+	margin-right: 1%;
 }
 .informationCardTextTwo {
 	width: 100%;
-	height: 27px;
+	height: 35px;
 	float: left;
 	user-select: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: #A1A1A1;
+	color: silver;
 }
 .informationCardText2 {
-	/* margin-left: 15px; */
+	/* margin-left: 6%; */
+	margin-left: calc(48% - 175px);
 	width: 115px;
 	height: 35px;
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 35px;
 	float: left;
 }
-.informationCardText3{
-	width: 130px;
+.informationCardText3 {
+	/* margin-left: 6%; */
+	margin-left: calc(48% - 175px);
+	width: 120px;
 	height: 35px;
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 35px;
 	float: left;
-	margin-left: 11px;
 }
 .textWhite {
-	color: #A1A1A1;
+	color: white;
 	float: left;
+	width: 24px;
+	text-align: right;
 }
 .textSilver {
 	user-select: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: #A1A1A1;
+	color: silver;
 	float: left;
-	font-size: 14px;
 }
 .speedPower {
 	width: 100%;
@@ -595,7 +610,6 @@ page {
 	float: left;
 	margin-top: 20rpx;
 	margin-bottom: 10px;
-
 }
 .cardinstallredSpeed {
 	margin-top: 8px;
@@ -779,7 +793,7 @@ page {
 	clear: both;
 	width: 0;
 	height: 0;
-/* 	border-right: 20px solid transparent;
+	/* 	border-right: 20px solid transparent;
 	border-left: 20px solid transparent;
 	border-bottom: 15px solid #E47369; */
 	margin-left: calc(50% - 20px);
@@ -788,70 +802,71 @@ page {
 	clear: both;
 	width: 0;
 	height: 0;
-/* 	border-right: 20px solid transparent;
+	/* 	border-right: 20px solid transparent;
 	border-left: 20px solid transparent;
 	border-top: 15px solid #E47369; */
 	margin-left: calc(50% - 20px);
 }
 .frame {
-	width: 100%;
+	width: calc(100% - 18px);
+	margin-left: 9px;
 	height: 150px;
 	position: absolute;
 	/* top: 20px; */
 	left: 0px;
 	z-index: 20;
 	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
-	background-color:#242424;	
+	background-color: #242424;
 	border-top: 0.5px solid #242424;
 }
-.frameCardLeft{
-	width: 33%;
-	height:10px;
+.frameCardLeft {
+	width: 34%;
+	height: 10px;
 	float: left;
 	/* margin-right: 1.5%; */
 	margin-bottom: 8px;
 	/* text-align: center; */
 	line-height: 30px;
 	font-size: 13px;
-	color: #A1A1A1;
+	color: #a1a1a1;
 	margin-top: 15px;
 }
-.frameCardLeftValue{
+.frameCardLeftValue {
 	float: right;
-	color: #FFFFFF;
+	color: #ffffff;
 	/* margin-left: 20px; */
 }
-.frameCardMiddleValue{
+.frameCardMiddleValue {
 	float: right;
-	color: #FFFFFF;
+	color: #ffffff;
 }
-.frameCardRightValue{
+.frameCardRightValue {
 	float: right;
-	color: #FFFFFF;
+	color: #ffffff;
 }
-.frameCardMiddle{
-	width: 28%;
+.frameCardMiddle {
+	width: 29%;
 	height: 10px;
 	float: left;
 	/* margin-right: 1.5%; */
-	margin-left: 3%;
+	margin-left: 1.5%;
 	margin-bottom: 8px;
 	/* text-align: center; */
 	line-height: 30px;
 	font-size: 13px;
-	color: #A1A1A1;
+	color: #a1a1a1;
 	margin-top: 15px;
 }
-.frameCardRight{
-	width: 33%;
+.frameCardRight {
+	width: 34%;
 	height: 10px;
 	float: left;
 	/* text-align: center; */
 	line-height: 30px;
 	margin-bottom: 8px;
 	font-size: 13px;
-	color: #A1A1A1;
-	margin-left: 3%;
+	color: #a1a1a1;
+	margin-left: 1.5%;
 	margin-top: 15px;
 }
 .speedPowerDiagram {
@@ -893,60 +908,59 @@ page {
 	margin-bottom: 20px;
 }
 .PowerColunm {
-  width: 130px;
-  height: 30px;
-/* user-select: text;
+	width: 130px;
+	height: 30px;
+	/* user-select: text;
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text; */
-  color: silver;
-  float: left;
-  margin-top: 18px;
-  margin-left: 10px;
-  font-size: 11px;
-  position: relative;
-  z-index: 20;
-  /* overflow:auto; */
- }
-.img{
-	 width: 18px;
-	 height: 20px;
+	color: silver;
+	float: left;
+	margin-top: 18px;
+	margin-left: 10px;
+	font-size: 11px;
+	position: relative;
+	z-index: 20;
+	/* overflow:auto; */
+}
+.img {
+	width: 18px;
+	height: 20px;
 	float: right;
 	background-color: #242424;
 	/* background-color: red; */
 	margin-top: -10px;
-	 margin-right: -10px;
-	 /* margin-top: -15px; */
-background-image: url(../../static/picture/zuizhongsanjiao2.png);
-
- }
- .value{
-	 color: #FFFFFF;
-	 font-size: 14px;
-	 float: right;
- }
- .rightValue{
-	 color: #FFFFFF;
-	 font-size: 14px;
-	 float: right;
- }
- .informationCardText4{
-	 width: 120px;
-	 height: 35px;
-	 font-size: 14px;
-	 line-height: 35px;
-	 float: right;
-	 /* margin-left: 4px; */
-	 margin-right: 9px;
- }
- .textSilverDay{
-	 user-select: text;
-	 -webkit-user-select: text;
-	 -moz-user-select: text;
-	 -ms-user-select: text;
-	 color: silver;
-	 float: left;
-	 font-size: 14px;
-	 margin-left: 2%;
- }
+	margin-right: -10px;
+	/* margin-top: -15px; */
+	background-image: url(../../static/picture/zuizhongsanjiao2.png);
+}
+.value {
+	color: #ffffff;
+	font-size: 14px;
+	float: right;
+}
+.rightValue {
+	color: #ffffff;
+	font-size: 14px;
+	float: right;
+}
+.informationCardText4 {
+	width: 120px;
+	height: 35px;
+	font-size: 14px;
+	line-height: 35px;
+	float: right;
+	/* margin-left: 4px; */
+	margin-right: 9px;
+}
+.textSilverDay {
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	float: left;
+	font-size: 14px;
+	margin-left: 2%;
+}
 </style>

+ 193 - 185
pages/index/Index.vue

@@ -39,7 +39,7 @@
 			<view class="informationCardAll">
 				<view class="informationCardTextOne">
 					<view class="informationCardText">
-						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">安全天数(&nbsp;天&nbsp;)&nbsp;&nbsp;:</view>						
+						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">安全天数(&nbsp;天&nbsp;)&nbsp;:</view>						
 						<view class="textWhite">15</view>
 					</view>
 					<view class="informationCardTextzj">
@@ -54,12 +54,11 @@
 					</view>
 					<view class="informationCardText3">
 						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">预测发电量(kwh):</view>
-						<view class="textWhite">15</view>			
+						<view class="textWhite2">15</view>			
 					</view>
 					<view class="informationCardText2">
 						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">上网电量(kwh):</view>
 						<view class="textWhite">15</view>
-						
 					</view>
 				</view>
 			</view>
@@ -202,19 +201,19 @@
 			</view>
 		</view>
 		<scroll-view scroll-x class="horizontalSlider">
-			<view class="slide">
-							<view class="monthlyUtilizationHours" @tap="common.navTo('/components/detail/Detail')">月利用小时(h):13</view>
-							<view class="yearlyUtilizationHours" @tap="common.navTo('/components/detail/Detail')">年利用小时(h):13</view>
-							<view class="comprehensiveServicePowerConsumptionRate" @tap="common.navTo('/components/detail/Detail')">综合厂用电率(%):20</view>
-							<view class="equipmentAvailability" @tap="common.navTo('/components/detail/Detail')">设备可利用率(%):90</view>
-							<view class="sulfurDioxideEmissionReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化硫(吨):21</view>
-							<view class="carbonDioxideReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化碳(吨):5</view>
-							<view class="waterSaving" @tap="common.navTo('/components/detail/Detail')">节约用水(吨):15</view>
-							<view class="saveStandardCoal" @tap="common.navTo('/components/detail/Detail')">节约标煤(吨):35</view>
-							<view class="mttr" @tap="common.navTo('/components/detail/Detail')">mttr(h):22</view>
-							<view class="mtbf" @tap="common.navTo('/components/detail/Detail')">mtbf(h):24</view>
-						</view>
-		</scroll-view>
+		   <view class="slide">
+		       <view class="monthlyUtilizationHours" @tap="common.navTo('/components/detail/Detail')">月利用小时(h):13</view>
+		       <view class="yearlyUtilizationHours" @tap="common.navTo('/components/detail/Detail')">年利用小时(h):13</view>
+		       <view class="comprehensiveServicePowerConsumptionRate" @tap="common.navTo('/components/detail/Detail')">综合厂用电率(%):20</view>
+		       <view class="equipmentAvailability" @tap="common.navTo('/components/detail/Detail')">设备可利用率(%):90</view>
+		       <view class="sulfurDioxideEmissionReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化硫(吨):21</view>
+		       <view class="carbonDioxideReduction" @tap="common.navTo('/components/detail/Detail')">减排二氧化碳(吨):5</view>
+		       <view class="waterSaving" @tap="common.navTo('/components/detail/Detail')">节约用水(吨):15</view>
+		       <view class="saveStandardCoal" @tap="common.navTo('/components/detail/Detail')">节约标煤(吨):35</view>
+		       <view class="mttr" @tap="common.navTo('/components/detail/Detail')">mttr(h):22</view>
+		       <view class="mtbf" @tap="common.navTo('/components/detail/Detail')">mtbf(h):24</view>
+		      </view>
+		  </scroll-view>
 		<!--折线图-->
 		<view class="lineChart">
 			<view class="qiun-charts">
@@ -2124,165 +2123,165 @@
 	}
 
 	.monthlyUtilizationHours {
-		width: 160px;
-		height: 30px;
-		margin-top: 15px;
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 20px;
-		text-align: center;
-		padding-top: 7px;
-		font-size: 12px;
-	}
-
-	.yearlyUtilizationHours {
-		width: 160px;
-		height: 30px;
-		margin-top: 10px;
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 20px;
-		text-align: center;
-		padding-top: 7px;
-		font-size: 12px;
-	}
-
-	.comprehensiveServicePowerConsumptionRate {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 200px;
-		margin-top: -70px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.equipmentAvailability {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 200px;
-		margin-top: -30px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.sulfurDioxideEmissionReduction {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 380px;
-		margin-top: -70px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.carbonDioxideReduction {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 380px;
-		margin-top: -30px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.waterSaving {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 560px;
-		margin-top: -70px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.saveStandardCoal {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 560px;
-		margin-top: -30px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.mttr {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 740px;
-		margin-top: -70px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.mtbf {
-		width: 160px;
-		height: 30px;
-		/* margin-top: 10px; */
-		/* background-color: #161616; */
-		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
-		color: silver;
-		margin-left: 740px;
-		margin-top: -30px;
-		text-align: center;
-		padding-top: 7px;
-		float: left;
-		font-size: 12px;
-	}
-
-	.horizontalSlider {
-		white-space: nowrap;
-		width: 100%;
-		height: 100px;
-		background-color: #242424;
-		clear: both;
-		margin-top: 510px;
-	}
-
-	.slide {
-		width: 920px;
-		height: 100px;
-		background-color: #242424;
-	}
+			width: 160px;
+			height: 30px;
+			margin-top: 20px;
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 20px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+		}
+	
+		.yearlyUtilizationHours {
+			width: 160px;
+			height: 30px;
+			margin-top: 10px;
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 20px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+		}
+	
+		.comprehensiveServicePowerConsumptionRate {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 200px;
+			margin-top: -70px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.equipmentAvailability {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 200px;
+			margin-top: -30px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.sulfurDioxideEmissionReduction {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 380px;
+			margin-top: -70px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.carbonDioxideReduction {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 380px;
+			margin-top: -30px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.waterSaving {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 560px;
+			margin-top: -70px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.saveStandardCoal {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 560px;
+			margin-top: -30px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.mttr {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 740px;
+			margin-top: -70px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.mtbf {
+			width: 160px;
+			height: 30px;
+			/* margin-top: 10px; */
+			/* background-color: #161616; */
+			background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+			color: silver;
+			margin-left: 740px;
+			margin-top: -30px;
+			text-align: center;
+			padding-top: 7px;
+			font-size: 12px;
+			float: left;
+		}
+	
+		.horizontalSlider {
+			white-space: nowrap;
+			width: 100%;
+			height: 100px;
+			background-color: #242424;
+			clear: both;
+			/* margin-top: 540px; */
+		}
+	
+		.slide {
+			width: 920px;
+			height: 100px;
+			background-color: #242424;
+		}
 
 	.qiun-charts {
 		width: 750upx;
@@ -2536,7 +2535,8 @@
 	.cardinstalltitlegreen {
 		width: 100%;
 		height: 25px;
-		margin-left: 37px;
+		text-align: center;
+		/* margin-left: 37px; */
 		user-select: text;
 		-webkit-user-select: text;
 		-moz-user-select: text;
@@ -2544,7 +2544,7 @@
 		font-size: 14px;
 		color: silver;
 		line-height: 25px;
-		float: left;
+		/* float: left; */
 	}
 
 	.cardinstallnumbergreen {
@@ -2694,7 +2694,8 @@
 	.cardinstalltitleRed {
 		width: 100%;
 		height: 25px;
-		margin-left: 45px;
+		text-align: center;
+		/* margin-left: 45px; */
 		user-select: text;
 		-webkit-user-select: text;
 		-moz-user-select: text;
@@ -2702,7 +2703,7 @@
 		font-size: 14px;
 		color: silver;
 		line-height: 25px;
-		float: left;
+		/* float: left; */
 	}
 
 	.textWhitekuangSpeed {
@@ -2720,6 +2721,13 @@
 	.textWhite {
 		color: white;
 		float: left;
+		width: 24px;
+		text-align: right;
+	}
+	.textWhite2 {
+		color: white;
+		float: left;
+		text-align: right;
 	}
 
 	.textSilver {
@@ -2762,7 +2770,7 @@
 		}
 		.informationCardText {
 			margin-left: 2%;
-			width: 110px;
+			width: 115px;
 			height: 35px;
 			line-height: 35px;
 			user-select: text;
@@ -2776,7 +2784,7 @@
 	
 		.informationCardTextzj {
 			/* margin-left: 43%; */
-			width: 105px;
+			width: 115px;
 			height: 35px;
 			line-height: 35px;
 			user-select: text;
@@ -2786,7 +2794,7 @@
 			color: silver;
 			font-size: 13px;
 			float: right;
-			margin-right: 9px;
+			margin-right: 1%;
 		}
 	
 		.informationCardTextTwo {
@@ -2802,8 +2810,8 @@
 	
 		.informationCardText2 {
 			/* margin-left: 6%; */
-			margin-left: calc(48% - 172.5px);
-			width: 110px;
+			margin-left: calc(48% - 175px);
+			width: 115px;
 			height: 35px;
 			font-size: 13px;
 			line-height: 35px;
@@ -2811,7 +2819,7 @@
 		}
 		.informationCardText3 {
 			/* margin-left: 6%; */
-			margin-left: calc(48% - 172.5px);
+			margin-left: calc(48% - 175px);
 			width: 120px;
 			height: 35px;
 			font-size: 13px;