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="electricityCard">
			<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="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="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="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="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>
		<!-- <view class="details">
			<view class="detailsText" @tap="common.navTo('/components/detail/Detail')"> 详情 〉</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>
	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>