'更新首页代码，加上横向滚动'

pages/index/Index.vue

@@ -197,6 +197,20 @@
 				</view>
 			</view>
 		</view>
+		<scroll-view scroll-x class="horizontalSlider">
+			<view class="slide">
+			<view class="monthlyUtilizationHours">月利用小时（h）：13</view>
+			<view class="yearlyUtilizationHours">年利用小时（h）：13</view>
+			<view class="comprehensiveServicePowerConsumptionRate">综合厂用电率(%)：20</view>
+			<view class="equipmentAvailability">设备可利用率(%)：90</view>
+			<view class="sulfurDioxideEmissionReduction">减排二氧化硫(吨)：21</view>
+			<view class="carbonDioxideReduction">减排二氧化碳(吨)：5</view>
+			<view class="waterSaving">节约用水(吨)：15</view>
+			<view class="saveStandardCoal">节约标煤(吨)：35</view>
+			<view class="mttr">mttr(h)：22</view>
+			<view class="mtbf">mtbf(h)：24</view>
+			</view>
+		</scroll-view>
 		<!--折线图-->
 		<view class="lineChart">
 			<view class="qiun-charts">
@@ -508,7 +522,145 @@
 		margin-left: 9px;
 		font-size: 11px;
 	}
-
+	.monthlyUtilizationHours{
+		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: 5px;
+	}
+	.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: 5px;
+	}
+	.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: 5px;
+		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: 5px;
+		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: 5px;
+		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: 5px;
+		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: 5px;
+			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: 5px;
+			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: 5px;
+			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: 5px;
+			float: left;
+		}
+.horizontalSlider{
+	white-space: nowrap;
+	width: 100%;
+	height: 100px;
+	background-color: #242424;
+	margin-top: 540px;
+}
+.slide{
+	width: 920px;
+	height: 100px;
+	background-color: #242424;
+}
 	.qiun-charts {
 		width: 750upx;
 		height: 500upx;