‘风场卡片详情页面样式修改’

components/windStationCardDetail/WindStationCardDetail.vue

@@ -2,45 +2,75 @@
 	<view>
 		<!--导航栏-->
 		<view  @tap="closeFrame">
-			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
+			<cu-custom bgColor="#020202" :isBack="true">
 				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;">返回</view></block>
 				<block slot="content">{{ windStationName }}</block>
 			</cu-custom>
 		</view>
 		<!--电量卡片-->
-		<view class="InformationCard" @tap="closeFrame">
+		<view class="InformationCard" @tap="frameShow">
+			
 			<view class="informationCardAll">
+				
 				<view class="informationCardTextOne">
 					<view class="informationCardText">
-						<view class="textSilver">安全天数</view>
+						<view class="textSilverDay">安全天数</view>
 						<view class="textWhite">(天)</view>
-						:15
+						<a class="value">:15</a>
 					</view>
 					<view class="informationCardTextzj">
 						<view class="textSilver">装机容量</view>
-						<view class="textWhite">(MV)</view>
-						:15
+						<view class="textWhite">(mv)</view>
+						<a class="rightValue">:15</a>
 					</view>
 				</view>
 				<view class="informationCardTextTwo">
 					<view class="informationCardText2">
 						<view class="textSilver">日发电量</view>
 						<view class="textWhite">(kwh)</view>
-						:150
+						<a class="value">:15</a>
 					</view>
-					<view class="informationCardText2">
+					<view class="informationCardText3">
 						<view class="textSilver">预测发电量</view>
 						<view class="textWhite">(kwh)</view>
-						:15
+						<a class="value">:15</a>
 					</view>
-					<view class="informationCardText2">
+					<view class="informationCardText4">
+						
 						<view class="textSilver">上网电量</view>
 						<view class="textWhite">(kwh)</view>
-						:15
+						
+						<a class="rightValue">:15</a>
+						<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>
 		</view>
+		
+		
+		
 		<!--风速卡片-->
 		<view class="speedPower" @tap="closeFrame">
 			<view class="cardinstallredSpeed">
@@ -80,35 +110,7 @@
 				<view class="cardinstallnumberredmax"><view class="redMaxText">max: 674</view></view>
 			</view>
 		</view>
-		<!-- 指标卡片 -->
-		<view class="quatoCardAndFrame">
-			<view class="quatoCardContainer" @tap="frameShow">
-				<!-- <view class="quatoCard">mttr</view>
-				<view class="quatoCard">月利用小时</view>
-				<view class="quatoCardLast">综合场用电率</view>
-				<view class="quatoCard">mtbf</view>
-				<view class="quatoCard">年利用小时</view>
-				<view class="quatoCardLast">设备可利用率</view>
-				<view class="quatoCard">减排二氧化硫</view>
-				<view class="quatoCard">节约用水</view>
-				<view class="quatoCardLast">减排二氧化碳</view>
-				<view class="quatoCard">节约标煤</view> -->
-				<view :class="sanJiao"></view>
-			</view>
-			<!-- 弹框 -->
-			<view class="frame" v-show="isFrameShow">							
-				<view class="frameCard">mttr(h):15</view>
-				<view class="frameCard">月利用小时(h):15</view>
-				<view class="frameCardLast">综合场用电率(%):15</view>
-				<view class="frameCard">mtbf(h):15</view>
-				<view class="frameCard">年利用小时(h):15</view>
-				<view class="frameCardLast">设备可利用率(%):15</view>
-				<view class="frameCard">减排二氧化硫(吨):15</view>
-				<view class="frameCard">节约用水(吨):15</view>
-				<view class="frameCardLast">减排二氧化碳(吨):15</view>
-				<view class="frameCard">节约标煤(吨):15</view>
-			</view>
-		</view>
+
 		<!-- 曲线图 -->
 		<view class="lineChart" @tap="closeFrame">
 			<view class="qiun-charts">
@@ -144,7 +146,6 @@ export default {
 	},
 	onLoad(option) {
 		this.windStationName = option.option;
-
 		this.cWidth = uni.upx2px(750);
 		this.cHeight = uni.upx2px(400);
 		this.getServerData();
@@ -402,7 +403,7 @@ export default {
 					float: "right"
 				},
 				fontSize: 11,
-				background: '#242424',
+				background: '#121212',
 				pixelRatio: _self.pixelRatio,
 				animation: true,
 				categories: chartData.categories,
@@ -416,7 +417,7 @@ export default {
 					fontColor: "#ffffff",
 					itemCount:10,
 					// labelCount:10,
-					scrollShow:true,
+					scrollShow:false,
 					// gridColor:'#2D2D2D',
 				},
 				yAxis: {
@@ -434,7 +435,7 @@ export default {
 						position: 'left',
 						axisLine: false,
 						fontColor: "silver",
-						title: "       发电量:(kw)",
+						title: "            发电量:(kw/h)",
 						titleFontColor: "silver",
 						titleFontSize: 11,
 						format: (val) => {
@@ -486,77 +487,92 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
 	font-size: 20px;
 	color: silver;
-	background: #000;
+	background: #020202;
+}
+@font-face {
+	font-family:'方正兰亭细黑_GBK';
+	src: url(../../static/方正兰亭细黑_GBK.TTF);
 }
-
 page {
-	background-color: #1f1f1f;
+	background-color:#020202;
+	font-family:'方正兰亭细黑_GBK';
 	color: silver;
 }
 .InformationCard {
-	margin-top: 10px;
+	/* margin-top: 10px; */
 	width: 100%;
-	height: 70px;
-	background-color: #242424;
+	height: 85px;
+	background-color:#121212;
 	float: left;
+	color: #A1A1A1;
 }
 .informationCardAll {
 	width: 100%;
 	margin-top: 10px;
 	height: 60px;
 	float: left;
+	color: #A1A1A1;
 }
 .informationCardTextOne {
 	width: 100%;
 	height: 35px;
 	float: left;
+	color: #A1A1A1;
 }
 .informationCardText {
-	margin-left: 15px;
-	width: 110px;
+	/* margin-left: 15px; */
+	width: 115px;
 	height: 35px;
 	line-height: 35px;
 	user-select: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: silver;
+	color: #A1A1A1;
 	font-size: 12px;
 	float: left;
 }
 .informationCardTextzj {
-	margin-left: 141px;
-	width: 100px;
+	margin-left: 140px;
+	width: 120px;
 	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;
+	color: #A1A1A1;
+	font-size: 14px;
 	float: left;
 }
 .informationCardTextTwo {
 	width: 100%;
-	height: 35px;
+	height: 27px;
 	float: left;
 	user-select: text;
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: silver;
+	color: #A1A1A1;
 }
 .informationCardText2 {
-	margin-left: 15px;
-	width: 110px;
+	/* margin-left: 15px; */
+	width: 115px;
 	height: 35px;
-	font-size: 12px;
+	font-size: 14px;
+	line-height: 35px;
+	float: left;
+}
+.informationCardText3{
+	width: 130px;
+	height: 35px;
+	font-size: 14px;
 	line-height: 35px;
 	float: left;
+	margin-left: 5px;
 }
 .textWhite {
-	color: white;
+	color: #A1A1A1;
 	float: left;
 }
 .textSilver {
@@ -564,22 +580,25 @@ page {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	-ms-user-select: text;
-	color: silver;
+	color: #A1A1A1;
 	float: left;
+	font-size: 14px;
 }
 .speedPower {
 	width: 100%;
 	height: 180px;
-	background-color: #242424;
+	background-color: #121212;
 	float: left;
-	margin-top: 20rpx;
+	margin-top: 40rpx;
+
 }
 .cardinstallredSpeed {
 	margin-top: 8px;
 	margin-left: 9px;
 	width: 46%;
 	height: 78px;
-	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+	background-color: #242424;
+	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
 	border-radius: 5px;
 	float: left;
 }
@@ -716,20 +735,18 @@ page {
 	line-height: 20px;
 	float: left;
 }
-.quatoCardAndFrame {
+/* .quatoCardAndFrame {
 	clear: both;
-	width: calc(100% - 18px);
-	height: 20px;
-	margin-left: 9px;
-	background-color: #242424;
-	position: relative;
-}
-.quatoCardContainer {
 	width: 100%;
-	height: 20px;
-	/* margin-left: 9px; */
-	background-color: #242424;
-}
+	height: 10px;
+	background-color:red;
+	position: relative;
+} */
+/* .quatoCardContainer {
+	width: 375px;
+	height: 12px;
+	background-color:blue;
+} */
 .quatoCard {
 	width: 32%;
 	height: 30px;
@@ -739,7 +756,7 @@ page {
 	text-align: center;
 	line-height: 30px;
 	font-size: 14px;
-	/* 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(193, 94, 21, 0.2) 100%);
 }
 .quatoCardLast {
 	width: 32%;
@@ -755,50 +772,80 @@ 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;
+	border-bottom: 15px solid #E47369; */
 	margin-left: calc(50% - 20px);
 }
 .sanJiaoDown {
 	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;
+	border-top: 15px solid #E47369; */
 	margin-left: calc(50% - 20px);
 }
 .frame {
 	width: 100%;
 	height: 150px;
 	position: absolute;
-	top: 20px;
+	/* 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:#262424;
+	background-color:#121212;	
+	border-top: 0.5px solid #212121;
 }
-.frameCard{
-	width: 32%;
-	height: 30px;
+.frameCardLeft{
+	width: 33%;
+	height:10px;
 	float: left;
-	margin-right: 1.5%;
+	/* margin-right: 1.5%; */
 	margin-bottom: 8px;
-	text-align: center;
+	/* text-align: center; */
 	line-height: 30px;
-	font-size: 12px;
-	color: white;
+	font-size: 13px;
+	color: #A1A1A1;
+	margin-top: 15px;
 }
-.frameCardLast{
-	width: 32%;
-	height: 30px;
+.frameCardLeftValue{
+	float: right;
+	color: #FFFFFF;
+	/* margin-left: 20px; */
+}
+.frameCardMiddleValue{
+	float: right;
+	color: #FFFFFF;
+}
+.frameCardRightValue{
+	float: right;
+	color: #FFFFFF;
+}
+.frameCardMiddle{
+	width: 28%;
+	height: 10px;
 	float: left;
-	text-align: center;
+	/* margin-right: 1.5%; */
+	margin-left: 3%;
+	margin-bottom: 8px;
+	/* text-align: center; */
+	line-height: 30px;
+	font-size: 13px;
+	color: #A1A1A1;
+	margin-top: 15px;
+}
+.frameCardRight{
+	width: 33%;
+	height: 10px;
+	float: left;
+	/* text-align: center; */
 	line-height: 30px;
 	margin-bottom: 8px;
-	font-size: 12px;
-	color: white;
+	font-size: 13px;
+	color: #A1A1A1;
+	margin-left: 3%;
+	margin-top: 15px;
 }
 .speedPowerDiagram {
 	clear: both;
@@ -821,34 +868,76 @@ page {
 
 .charts {
 	width: 750upx;
-	height: 500upx;
+	height: 400upx;
 }
 
 .lineChart {
 	width: 100%;
 	height: 200px;
-	background-color: #242424;
+	background-color: #121212;
 	margin-top: 10px;
 	float: left;
 }
 .Histogram {
-	clear: both;
+	/* clear: both; */
 	width: 750upx;
-	height: 500upx;
-	margin-top: 20px;
-	background-color: #242424;
+	height: 400upx;
+	margin-top: 420px;
+	background-color: #121212;
 }
 .PowerColunm {
-  width: 130px;
+  width: 375px;
   height: 30px;
-  user-select: text;
+/* user-select: text;
   -webkit-user-select: text;
   -moz-user-select: text;
-  -ms-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: 10px;
+	 height: 15px;
+	float: right;
+	/* background-color: red; */
+	margin-top: -10px;
+/* 	 margin-right: 0px;
+	 margin-top: -15px; */
+	 background-image: url(../../static/picture/zuizhongsanjiao.jpg);
+
+ }
+ .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: left;
+	 margin-left: 4px;
+ }
+ .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>