首页样式修改

pages/index/Index.vue

@@ -11,7 +11,7 @@
 							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
 						</view>
 					</view>
-				</view>				
+				</view>
 				宁夏新能源公司
 			</view>
 			<view class="plus">+</view>
@@ -22,47 +22,97 @@
 		</div>
 		<!--时间组件-->
 		<view class="time">
-			<view class="timeText">推荐时间</view>
+			<view class="timeimageshizhong">
+				<image src="../../static/picture/dafeng.png" style="width: 20px;height: 20px;margin-left: 10px;"></image>
+			</view>
+			<view class="timeText">
+				推荐时间：2020年4月15日ㅤ19:31</view>
 			<view class="timeIcon">
-				
+				<image src="../../static/picture/qingwhite.png" style="width: 25px;height: 25px;margin-left: 54px;"></image>
 			</view>
 		</view>
 		<!--电量卡片-->
 		<view class="electricityCard">
-			<view class="allDayLong">安全天数:</view>
-			<view class="installedCapacity">装机容量:</view>
-			<view class="preissue">预测发电量:</view>
-			<view class="dayHair">日发电量:</view>
-			<view class="internet">上网电量:</view>
+			<view class="cardinstallgreenSecurity">
+				<view class="cardinstalltitle">安全天数</view>
+				<view class="cardinstallnumber">17mA</view>
+				<!-- <view class="comment">安全天数 17mA</view> -->
+			</view>
+			<view class="cardinstallgreenEquipment">
+				<view class="cardinstalltitle">装机容量</view>
+				<view class="cardinstallnumber">350w</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="averageSpeed">
-				<view class="averageSpeedText">平均风速</view>
-				<view class="averageSpeedmaxmin">
-					<view class="averageSpeedmin">min</view>
-					<view class="averageSpeedmax">max</view>
+			<view class="cardinstallgreenSpeed">
+				<view class="cardinstalltitlegreen">平均风速</view>
+				<view class="cardinstallnumbergreen">5km/h</view>
+				<view class="cardinstallnumbergreenmin">
+					<view class="greenMinText">5km/h</view>
+				</view>
+				<view class="cardinstallnumbergreenmax">
+					<view class="greenMaxText">25km/h</view>
 				</view>
 			</view>
-			<view class="forecastSpeed">
-				<view class="forecastSpeedText">预测风速</view>
-				<view class="forecastSpeedmaxmin">
-					<view class="forecastSpeedmin">min</view>
-					<view class="forecastSpeedmax">max</view>
+			<view class="cardinstallgreenSpeed">
+				<view class="cardinstalltitlegreen">预测风速</view>
+				<view class="cardinstallnumbergreen">48km/h</view>
+				<view class="cardinstallnumbergreenmin">
+					<view class="greenMinText">4km/h</view>
+				</view>
+				<view class="cardinstallnumbergreenmax">
+					<view class="greenMaxText">26km/h</view>
 				</view>
 			</view>
-			<view class="actualPower">
-				<view class="actualPowerText">实际功率</view>
-				<view class="actualPowermaxmin">
-					<view class="actualPowermin">min</view>
-					<view class="actualPowermax">max</view>
+			<view class="cardinstallredSpeed">
+				<view class="cardinstalltitlegreen">实际功率</view>
+				<view class="cardinstallnumberred">15kw</view>
+				<view class="cardinstallnumberredmin">
+					<view class="redMinText">566kw</view>
+				</view>
+				<view class="cardinstallnumberredmax">
+					<view class="redMaxText">656kw</view>
 				</view>
 			</view>
-			<view class="theoreticalPower">
-				<view class="theoreticalPowerText">理论功率</view>
-				<view class="theoreticalPowermaxmin">
-					<view class="theoreticalPowermin">min</view>
-					<view class="theoreticalPowermax">max</view>
+			<view class="cardinstallredSpeed">
+				<view class="cardinstalltitlegreen">理论功率</view>
+				<view class="cardinstallnumberred">14kw</view>
+				<view class="cardinstallnumberredmin">
+					<view class="redMinText">589kw</view>
+				</view>
+				<view class="cardinstallnumberredmax">
+					<view class="redMaxText">674kw</view>
 				</view>
 			</view>
 		</view>
@@ -73,266 +123,305 @@
 </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"],
-			minaverageSpeed:'12',
-			maxaverageSpeed:'25'
-		}
-	},
-	methods:{
-		openDrawer:function(){
-			this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
+	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	export default {
+		components: {
+			"drawer": drawer
+		},
+		data: function() {
+			return {
+				badge: 22,
+				drawerList: ["状态监视", "矩阵监视", "风场监视", "人员监视"],
+				inconList: ["form", "favor", "question", "edit"],
+				minaverageSpeed: '12',
+				maxaverageSpeed: '25'
+			}
 		},
-		closeDrawer:function(){
-			this.drawerIsShow=false;
+		methods: {
+			openDrawer: function() {
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
+			},
+			closeDrawer: function() {
+				this.drawerIsShow = false;
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style>
-page {
-}
-.top {
-	width: 100%;
-	height: 95upx;
-	padding-top: 5upx;
-	background-color: #E93131;
-}
-.threeLine {
-	width: 50px;
-	height: 45px;
-	float: left;
-}
-.text {
-	width: calc(100% - 100px);
-	height: 45px;
-	float: left;
-	color: white;
-	line-height: 45px;
-	text-align: center;
-	font-size: 18px;
-}
-.notice{
-	width: 50px;
-	height: 45px;
-	float: left;
-}
-.plus {
-	width: 50px;
-	height: 45px;
-	float: right;
-	color: white;
-	font-size: 35px;
-	line-height: 45px;
-	text-align: center;
-}
-.time{
-	margin-top: 10px;
-	width: 100%;
-	height: 50px;
-	float: left;
-	background-color: white;
-}
-.timeText{
-	width: 70%;
-	height: 50px;
-	float: left;
-	line-height: 50px;
-	text-align: center;
-	font-size: 15px;
-	margin-left: 7px;
-}
-.timeIcon{
-	width: 25%;
-	height: 50px;
-	float: left;
-	margin-left: 5px;
-}
-.electricityCard{
-	width: 100%;
-	height: 90px;
-	background-color: white;
-	float: left;
-	margin-top: 20rpx;
-}
-.allDayLong{
-	width: 47%;
-	height: 35px;
-	margin: 5px;
-	background-color: white;
-	line-height: 35px;
-	float: left;
-	font-size: 13px;
-}
-.installedCapacity{
-	width: 47%;
-	height: 35px;
-	margin: 5px;
-	background-color: white;
-	line-height: 35px;
-	float: left;
-	font-size: 13px;
-}
-.preissue{
-	width: 35%;
-	height: 35px;
-	margin: 5px;
-	background-color: white;
-	line-height: 35px;
-	float: left;
-	font-size: 13px;
-}
-.dayHair{
-	width: 28%;
-	height: 35px;
-	margin: 5px;
-	background-color: white;
-	line-height: 35px;
-	float: left;
-	font-size: 13px;
-}
-.internet{
-	width: 28%;
-	height: 35px;
-	margin: 5px;
-	background-color: white;
-	line-height: 35px;
-	float: left;
-	font-size: 13px;
-}
-.speedPower{
-	margin-top: 10px;
-	width: 100%;
-	height: 90px;
-	float: left;
-}
-.averageSpeed{
-	margin-left: 3px;
-	width: 24%;
-	height: 90px;
-	float: left;
-	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
-	box-shadow: 2px 2px 2px #bbb;
-	border-radius: 3px;
-	text-align: left;
-}
-.forecastSpeed{
-	margin-left: 3px;
-	width: 24%;
-	height: 90px;
-	float: left;
-	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
-	box-shadow: 2px 2px 2px #bbb;
-	border-radius: 3px;
-	text-align: left;
-}
-.actualPower{
-	margin-left: 3px;
-	width: 24%;
-	height: 90px;
-	float: left;
-	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
-	box-shadow: 2px 2px 2px #bbb;
-	border-radius: 3px;
-	text-align: left;
-}
-.theoreticalPower{
-	margin-left: 3px;
-	width: 24%;
-	height: 90px;
-	float: left;
-	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
-	box-shadow: 2px 2px 2px #bbb;
-	border-radius: 3px;
-	text-align: left;
-}
-.averageSpeedText{
-	width: 100%;
-	height: 50px;
-	text-align: center;
-	line-height: 50px;
-}
-.forecastSpeedText{
-	width: 100%;
-	height: 50px;
-	text-align: center;
-	line-height: 50px;
-}
-.actualPowerText{
-	width: 100%;
-	height: 50px;
-	text-align: center;
-	line-height: 50px;
-}
-.theoreticalPowerText{
-	width: 100%;
-	height: 50px;
-	text-align: center;
-	line-height: 50px;
-}
-.averageSpeedmin{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.averageSpeedmax{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.forecastSpeedmin{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.forecastSpeedmax{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.actualPowermin{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.actualPowermax{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.theoreticalPowermin{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
-.theoreticalPowermax{
-	width: 50%;
-	height: 30px;
-	float: left;
-	line-height: 30px;
-	text-align: center;
-}
+	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;
+	}
+
+	.top {
+		width: 100%;
+		height: 95upx;
+		padding-top: 5upx;
+		background-color: #1F1F1F;
+	}
+
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		color: white;
+		line-height: 45px;
+		text-align: center;
+		font-size: 18px;
+	}
+
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+
+	.plus {
+		width: 50px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: center;
+	}
+
+	.time {
+		margin-top: 10px;
+		width: 100%;
+		height: 30px;
+		float: left;
+	}
+
+	.timeimageshizhong {
+		width: 30px;
+		height: 20px;
+		margin-top: 5px;
+		float: left;
+	}
+
+	.timeText {
+		width: 62%;
+		height: 30px;
+		float: left;
+		line-height: 30px;
+		font-size: 15px;
+		margin-left: 15px;
+		color: white;
+	}
+
+	.timeIcon {
+		width: 21%;
+		height: 30px;
+		float: left;
+		margin-left: 5px;
+	}
+
+	.timeIconImage {
+		width: 100%;
+		height: 25px;
+		margin-top: 1px;
+	}
+
+	.timeIconText {
+		width: 100%;
+		height: 25px;
+		text-align: center;
+		font-size: 12px;
+	}
+	.cardinstallgreenSecurity{
+		margin: 9px;
+		width: 30%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		border-radius: 5px;
+		float: left;
+		/* font-family: "STKaiti"; */
+	}
+	.cardinstalltitle{
+		width: 100%;
+		height: 40px;
+		text-align: center;
+		font-size: 14px;
+		color: white;
+		line-height: 40px;
+		float: left;
+		
+	}
+	.cardinstallnumber{
+		/* font-weight: bold; */
+		width: 100%;
+		height: 40px;
+		text-align: center;
+		font-size: 16px;
+		color: white;
+		/* color: #449618; */
+		line-height: 40px;
+	}
+	.cardinstallgreenEquipment{
+		margin: 9px;
+		width: 30%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		border-radius: 5px;
+		float: right;
+		/* font-family: "STKaiti"; */
+	}
+	.cardinstallgreen{
+		margin-left: 9px;
+		width: 30%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		border-radius: 5px;
+		float: left;
+	}
+	.cardinstallred{
+		margin-left: 10px;
+		width: 30%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(159,131,111,0.1)0%,rgba(193,94,21,0.2)100%);
+		border-radius: 5px;
+		float: left;
+	}
+	.cardinstalltitlegreen{
+		width: 100%;
+		height: 25px;
+		text-align: center;
+		font-size: 14px;
+		color: white;
+		line-height: 25px;
+		float: left;
+	}
+	.cardinstallnumbergreen{
+		width: 100%;
+		height: 25px;
+		text-align: center;
+		font-size: 16px;
+		color: white;
+		/* color: #449618; */
+		line-height: 25px;
+		float: left;
+	}
+	.cardinstallnumbergreenmin{
+		margin-left: 2px;
+		width: 45%;
+		height: 20px;
+		color: white;
+		/* color: #449618; */
+		float: left;
+	}
+	.cardinstallnumbergreenmax{
+		/* font-weight: bold; */
+		margin-right: 2px;
+		width: 45%;
+		height: 20px;
+		color: white;
+		/* color: #449618; */
+		float: right;
+	}
+	.greenMinText{
+		line-height: 20px;
+		float: right;
+	}
+	.greenMaxText{
+		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;
+		/* color: #E93131; */
+		line-height: 25px;
+		float: left;
+	}
+	.cardinstallnumberredmin{
+		margin-left: 2px;
+		width: 45%;
+		height: 20px;
+		color: white;
+		/* color: #E93131; */
+		float: left;
+	}
+	.cardinstallnumberredmax{
+		margin-right: 2px;
+		width: 45%;
+		height: 20px;
+		color: white;
+		/* color: #E93131; */
+		float: right;
+	}
+	.redMinText{
+		line-height: 20px;
+		float: right;
+	}
+	.redMaxText{
+		line-height: 20px;
+		float: left;
+	}
+	.electricityCard {
+		width: 100%;
+		height: 190px;
+		background-color: #242424;
+		/* height: 185px; */
+		float: left;
+		margin-top: 20rpx;
+	}
+	.speedPower{
+		width: 100%;
+		height: 190px;
+		background-color: #242424;
+		float: left;
+		margin-top: 20rpx;
+	}
+	.cardinstallgreenSpeed{
+		margin-top: 5px;
+		margin-left: 9px;
+		width: 46%;
+		height: 78px;
+		background: -webkit-linear-gradient(top, rgba(133,145,132,0.1)0%,rgba(66,130,61,0.2)100%);
+		border-radius: 5px;
+		float: left;
+	}
+	.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%);
+		border-radius: 5px;
+		float: left;
+	}
 </style>