首页样式修改

pages/index/Index.vue

@@ -32,93 +32,62 @@
 			</view>
 		</view>
 		<!--电量卡片-->
-		<view class="electricityCard">
-			<view class="cardinstallgreenSecurity">
-				<view class="cardinstalltitle">安全天数</view>
-				<view class="cardinstallnumber">17mA</view>
-				<!-- <view class="comment">安全天数 17mA</view> -->
+		<view class="InformationCard">
+			<view class="informationCardAll">
+			<view class="informationCardTextOne">
+				<view class="informationCardText"><view class="textSilver">安全天数</view><view class="textWhite">(天)</view>:15</view>
+				<view class="informationCardTextzj"><view class="textSilver">装机容量</view><view class="textWhite">(MV)</view>:15</view>
 			</view>
-			<view class="cardinstallgreenEquipment">
-				<view class="cardinstalltitle">装机容量</view>
-				<view class="cardinstallnumber">350w</view>
+			<view class="informationCardTextTwo">
+				<view class="informationCardText2"><view class="textSilver">日发电量</view><view class="textWhite">(kwh)</view>:150</view>
+				<view class="informationCardText2"><view class="textSilver">预测发电量</view><view class="textWhite">(kwh)</view>:15</view>
+				<view class="informationCardText2"><view class="textSilver">上网电量</view><view class="textWhite">(kwh)</view>:15</view>
 			</view>
-			<view class="cardinstallgreen">
-				<view class="cardinstalltitlegreen">预发电量</view>
-				<view class="cardinstallnumbergreen">658kwh</view>
-				<view class="cardinstallnumbergreenmin">
-					<view class="greenMinText">25kwh</view>
-				</view>
-				<view class="cardinstallnumbergreenmax">
-					<view class="greenMaxText">35kwh</view>
-				</view>
-			</view>
-			<view class="cardinstallred">
-				<view class="cardinstalltitlegreen">日发电量</view>
-				<view class="cardinstallnumberred">658kwh</view>
-				<view class="cardinstallnumberredmin">
-					<view class="redMinText">25kwh</view>
-				</view>
-				<view class="cardinstallnumberredmax">
-					<view class="redMaxText">35kwh</view>
-				</view>
-			</view>
-			<view class="cardinstallgreen">
-				<view class="cardinstalltitlegreen">预发电量</view>
-				<view class="cardinstallnumbergreen">658kwh</view>
-				<view class="cardinstallnumbergreenmin">
-					<view class="greenMinText">25kwh</view>
-				</view>
-				<view class="cardinstallnumbergreenmax">
-					<view class="greenMaxText">35kwh</view>
-				</view>
 			</view>
 		</view>
 		<!--风速卡片-->
 		<view class="speedPower">
-			<view class="cardinstallgreenSpeed">
-				<view class="cardinstalltitlegreen">平均风速</view>
-				<view class="cardinstallnumbergreen">5km/h</view>
+			<view class="cardinstallredSpeed">
+				<view class="cardinstalltitlegreen">平均风速<view class="textWhitekuangSpeed">(km/h)</view></view>
+				<view class="cardinstallnumbergreen">5</view>
 				<view class="cardinstallnumbergreenmin">
-					<view class="greenMinText">5km/h</view>
+					<view class="greenMinText">min: 5</view>
 				</view>
 				<view class="cardinstallnumbergreenmax">
-					<view class="greenMaxText">25km/h</view>
+					<view class="greenMaxText">max: 25</view>
 				</view>
 			</view>
-			<view class="cardinstallgreenSpeed">
-				<view class="cardinstalltitlegreen">预测风速</view>
-				<view class="cardinstallnumbergreen">48km/h</view>
+			<view class="cardinstallredSpeed">
+				<view class="cardinstalltitlegreen">预测风速<view class="textWhitekuangSpeed">(km/h)</view></view>
+				<view class="cardinstallnumbergreen">48</view>
 				<view class="cardinstallnumbergreenmin">
-					<view class="greenMinText">4km/h</view>
+					<view class="greenMinText">min: 4</view>
 				</view>
 				<view class="cardinstallnumbergreenmax">
-					<view class="greenMaxText">26km/h</view>
+					<view class="greenMaxText">max: 26</view>
 				</view>
 			</view>
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitlegreen">实际功率</view>
-				<view class="cardinstallnumberred">15kw</view>
+				<view class="cardinstalltitleRed">实际功率<view class="textWhitekuang">(kw)</view></view>
+				<view class="cardinstallnumberred">15</view>
 				<view class="cardinstallnumberredmin">
-					<view class="redMinText">566kw</view>
+					<view class="redMinText">min: 566</view>
 				</view>
 				<view class="cardinstallnumberredmax">
-					<view class="redMaxText">656kw</view>
+					<view class="redMaxText">max: 656</view>
 				</view>
 			</view>
 			<view class="cardinstallredSpeed">
-				<view class="cardinstalltitlegreen">理论功率</view>
-				<view class="cardinstallnumberred">14kw</view>
+				<view class="cardinstalltitleRed">理论功率<view class="textWhitekuang">(kw)</view></view>
+				<view class="cardinstallnumberred">14</view>
 				<view class="cardinstallnumberredmin">
-					<view class="redMinText">589kw</view>
+					<view class="redMinText">min: 589</view>
 				</view>
 				<view class="cardinstallnumberredmax">
-					<view class="redMaxText">674kw</view>
+					<view class="redMaxText">max: 674</view>
 				</view>
 			</view>
 		</view>
-		<!-- <view class="details">
-			<view class="detailsText" @tap="common.navTo('/components/detail/Detail')"> 详情 〉</view>
-		</view> -->
 	</view>
 </template>
 
@@ -149,21 +118,111 @@
 </script>
 
 <style>
+	.cardinstalltitleRed{
+		width: 100%;
+		height: 25px;
+		margin-left: 45px;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:14px;
+		color: silver;
+		line-height: 25px;
+		float: left;
+	}
+	.textWhitekuangSpeed{
+		color: white;
+		float: right;
+		margin-right: 70px;
+	}
+	.textWhitekuang{
+		color: white;
+		float: right;
+		margin-right: 85px;
+	}
+	.textWhite{
+		color: white;
+		float: left;
+		
+	}
+	.textSilver{
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		float: left;
+	}
+	.InformationCard{
+		margin-top: 10px;
+		width: 100%;
+		height: 70px;
+		background-color: #242424;
+		float: left;
+	}
+	.informationCardAll{
+		width: 100%;
+		margin-top: 10px;
+		height: 60px;
+		float: left;
+	}
+	.informationCardTextOne{
+		width: 100%;
+		height: 35px;
+		float: left;
+	}
+	.informationCardText{
+		margin-left: 15px;
+		width: 110px;
+		height: 35px;
+		line-height: 35px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+	.informationCardTextzj{
+		margin-left: 141px;
+		width: 100px;
+		height: 35px;
+		line-height: 35px;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		font-size: 12px;
+		float: left;
+	}
+	.informationCardTextTwo{
+		width: 100%;
+		height: 35px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+	}
+	.informationCardText2{
+		margin-left: 15px;
+		width: 110px;
+		height: 35px;
+		font-size: 12px;
+		line-height: 35px;
+		float: left;
+	}
 	body{
 	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
 	font-size:20px;
 	color: silver;
 	background: #000; 
 	 }
-	.comment {
-	    user-select: text;
-	    -webkit-user-select: text;
-	    -moz-user-select: text;
-	    -ms-user-select: text;
-	 font-size:20px;
-	 color: silver;
 	
-	}
 	page {
 		background-color: #1F1F1F;
 	}
@@ -185,7 +244,11 @@
 		width: calc(100% - 100px);
 		height: 45px;
 		float: left;
-		color: white;
+		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;
@@ -208,6 +271,7 @@
 	}
 
 	.time {
+		background-color: #242424;
 		margin-top: 10px;
 		width: 100%;
 		height: 30px;
@@ -228,7 +292,11 @@
 		line-height: 30px;
 		font-size: 15px;
 		margin-left: 15px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		color: silver;
 	}
 
 	.timeIcon {
@@ -251,7 +319,9 @@
 		font-size: 12px;
 	}
 	.cardinstallgreenSecurity{
-		margin: 9px;
+		margin-left: 9px;
+		margin-top: 9px;
+		margin-bottom: 9px;
 		width: 30%;
 		height: 78px;
 		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
@@ -263,8 +333,12 @@
 		width: 100%;
 		height: 40px;
 		text-align: center;
-		font-size: 14px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:14px;
+		color: silver;
 		line-height: 40px;
 		float: left;
 		
@@ -274,16 +348,21 @@
 		width: 100%;
 		height: 40px;
 		text-align: center;
-		font-size: 16px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		color: silver;
+		font-size:16px;
 		/* color: #449618; */
 		line-height: 40px;
 	}
 	.cardinstallgreenEquipment{
-		margin: 9px;
+		margin-right: 11px;
+		margin-top: 10px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(193,94,21,0.2)100%);
 		border-radius: 5px;
 		float: right;
 		/* font-family: "STKaiti"; */
@@ -296,20 +375,34 @@
 		border-radius: 5px;
 		float: left;
 	}
-	.cardinstallred{
-		margin-left: 10px;
+	.cardinstallblue{
+		margin-top: 9px;
+		margin-left: 9px;
 		width: 30%;
 		height: 78px;
-		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(193,94,21,0.2)100%);
+		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(10,82,156,0.2)100%);
 		border-radius: 5px;
 		float: left;
 	}
+	.cardinstallblueright{
+		margin-right: 11px;
+		margin-top: 10px;
+		width: 30%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(10,82,156,0.2)100%);
+		border-radius: 5px;
+		float: right;
+	}
 	.cardinstalltitlegreen{
 		width: 100%;
 		height: 25px;
-		text-align: center;
-		font-size: 14px;
-		color: white;
+		margin-left: 37px;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:14px;
+		color: silver;
 		line-height: 25px;
 		float: left;
 	}
@@ -317,8 +410,12 @@
 		width: 100%;
 		height: 25px;
 		text-align: center;
-		font-size: 16px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:20px;
+		color: silver;
 		/* color: #449618; */
 		line-height: 25px;
 		float: left;
@@ -327,7 +424,12 @@
 		margin-left: 2px;
 		width: 45%;
 		height: 20px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:12px;
+		color: silver;
 		/* color: #449618; */
 		float: left;
 	}
@@ -336,7 +438,12 @@
 		margin-right: 2px;
 		width: 45%;
 		height: 20px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:12px;
+		color: silver;
 		/* color: #449618; */
 		float: right;
 	}
@@ -348,21 +455,17 @@
 		line-height: 20px;
 		float: left;
 	}
-	.cardinstalltitlered{
-		width: 100%;
-		height: 25px;
-		text-align: center;
-		font-size: 14px;
-		color: white;
-		line-height: 25px;
-		float: left;
-	}
+
 	.cardinstallnumberred{
 		width: 100%;
 		height: 25px;
 		text-align: center;
-		font-size: 16px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:20px;
+		color: silver;
 		/* color: #E93131; */
 		line-height: 25px;
 		float: left;
@@ -371,7 +474,12 @@
 		margin-left: 2px;
 		width: 45%;
 		height: 20px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:12px;
+		color: silver;
 		/* color: #E93131; */
 		float: left;
 	}
@@ -379,7 +487,12 @@
 		margin-right: 2px;
 		width: 45%;
 		height: 20px;
-		color: white;
+		user-select: text;
+		   -webkit-user-select: text;
+		   -moz-user-select: text;
+		   -ms-user-select: text;
+		font-size:12px;
+		color: silver;
 		/* color: #E93131; */
 		float: right;
 	}
@@ -393,21 +506,22 @@
 	}
 	.electricityCard {
 		width: 100%;
-		height: 190px;
+		height: 100px;
 		background-color: #242424;
 		/* height: 185px; */
 		float: left;
 		margin-top: 20rpx;
+		
 	}
 	.speedPower{
 		width: 100%;
-		height: 190px;
+		height: 180px;
 		background-color: #242424;
 		float: left;
 		margin-top: 20rpx;
 	}
 	.cardinstallgreenSpeed{
-		margin-top: 5px;
+		margin-top: 9px;
 		margin-left: 9px;
 		width: 46%;
 		height: 78px;
@@ -424,4 +538,5 @@
 		border-radius: 5px;
 		float: left;
 	}
+	
 </style>