sisMobilePhone/pages/index/Index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="threeLine" @tap="openDrawer">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
			</view>
			<view class="text">
				<view class="notice">
					<view class="icon cuIcon-notice text-white" v-if="badge != 0">
						<view class="cu-tag looknumber">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
				</view>
				宁夏新能源公司
			</view>
			<view class="plus">+</view>
		</view>
		<!-- 抽屉组件 -->
		<div>
			<drawer ref="drawer"></drawer>
		</div>
		<!--时间组件-->
		<view class="time">
			<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="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="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>
		</view>
		<!--风速卡片-->
		<view class="speedPower">
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">平均风速<view class="textWhitekuangSpeed">(km/h)</view></view>
				<view class="cardinstallnumbergreen">5</view>
				<view class="cardinstallnumbergreenmin">
					<view class="greenMinText">min: 5</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: 25</view>
				</view>
			</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">min: 4</view>
				</view>
				<view class="cardinstallnumbergreenmax">
					<view class="greenMaxText">max: 26</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">实际功率<view class="textWhitekuang">(kw)</view></view>
				<view class="cardinstallnumberred">15</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: 566</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: 656</view>
				</view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">理论功率<view class="textWhitekuang">(kw)</view></view>
				<view class="cardinstallnumberred">14</view>
				<view class="cardinstallnumberredmin">
					<view class="redMinText">min: 589</view>
				</view>
				<view class="cardinstallnumberredmax">
					<view class="redMaxText">max: 674</view>
				</view>
			</view>
		</view>
	</view>
</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);
			},
			closeDrawer: function() {
				this.drawerIsShow = false;
			}
		}
	};
</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; 
	 }
	
	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;
		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;
	}

	.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 {
		background-color: #242424;
		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;
		user-select: text;
		   -webkit-user-select: text;
		   -moz-user-select: text;
		   -ms-user-select: text;
		color: silver;
	}

	.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-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%);
		border-radius: 5px;
		float: left;
		/* font-family: "STKaiti"; */
	}
	.cardinstalltitle{
		width: 100%;
		height: 40px;
		text-align: center;
		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;
		
	}
	.cardinstallnumber{
		/* font-weight: bold; */
		width: 100%;
		height: 40px;
		text-align: center;
		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-right: 11px;
		margin-top: 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: 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;
	}
	.cardinstallblue{
		margin-top: 9px;
		margin-left: 9px;
		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: 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;
		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;
	}
	.cardinstallnumbergreen{
		width: 100%;
		height: 25px;
		text-align: center;
		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;
	}
	.cardinstallnumbergreenmin{
		margin-left: 2px;
		width: 45%;
		height: 20px;
		user-select: text;
		   -webkit-user-select: text;
		   -moz-user-select: text;
		   -ms-user-select: text;
		font-size:12px;
		color: silver;
		/* color: #449618; */
		float: left;
	}
	.cardinstallnumbergreenmax{
		/* font-weight: bold; */
		margin-right: 2px;
		width: 45%;
		height: 20px;
		user-select: text;
		   -webkit-user-select: text;
		   -moz-user-select: text;
		   -ms-user-select: text;
		font-size:12px;
		color: silver;
		/* color: #449618; */
		float: right;
	}
	.greenMinText{
		line-height: 20px;
		float: right;
	}
	.greenMaxText{
		line-height: 20px;
		float: left;
	}

	.cardinstallnumberred{
		width: 100%;
		height: 25px;
		text-align: center;
		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;
	}
	.cardinstallnumberredmin{
		margin-left: 2px;
		width: 45%;
		height: 20px;
		user-select: text;
		   -webkit-user-select: text;
		   -moz-user-select: text;
		   -ms-user-select: text;
		font-size:12px;
		color: silver;
		/* color: #E93131; */
		float: left;
	}
	.cardinstallnumberredmax{
		margin-right: 2px;
		width: 45%;
		height: 20px;
		user-select: text;
		   -webkit-user-select: text;
		   -moz-user-select: text;
		   -ms-user-select: text;
		font-size:12px;
		color: silver;
		/* color: #E93131; */
		float: right;
	}
	.redMinText{
		line-height: 20px;
		float: right;
	}
	.redMaxText{
		line-height: 20px;
		float: left;
	}
	.electricityCard {
		width: 100%;
		height: 100px;
		background-color: #242424;
		/* height: 185px; */
		float: left;
		margin-top: 20rpx;
		
	}
	.speedPower{
		width: 100%;
		height: 180px;
		background-color: #242424;
		float: left;
		margin-top: 20rpx;
	}
	.cardinstallgreenSpeed{
		margin-top: 9px;
		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>