<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">同比分析</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content">
			<dl class="returnChart">
				<dt>
					<span>每月用电量(kW·h)</span>
				</dt>
				<dd>
					
				</dd>
			</dl>
			<dl class="returnChart">
				<dt>
					<span>每小时用电量(kW·h)</span>
					<div class="returnChart-drop">
						<p>今日</p>
						<i class="mui-icon mui-icon-arrowdown"></i>
					</div>
				</dt>
				<dd>
					
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
</script>

<style>

	.returnTable{
		background-color: #EEF0F3;
		border-radius: 8px;
		padding: 16px;
		margin: 16px;
	}
	.returnTable table{
		width: 100%;
		background: none;
		text-align: center;
	}
	.returnTable table td{
		padding: 5px 0;
	}
	.tableft{
		text-align: left;
	}
	.returnChart {
		/* 	//padding: 0 16px; */
		background-color: #fff;
		margin: 0;
		margin-bottom: 16px;
	}

	.returnChart dt {
		padding: 16px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.returnChart-drop {
		display: flex;
		align-items: center;
	}

	.returnChart-drop p {
		font-size: 14px;
		margin-right: 3px;
	}

	.returnChart dt span {
		position: relative;
		padding-left: 15px;
		font-size: 18px;
	}

	.returnChart dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #1677FF;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}

	.returnChart dd {
		padding-bottom: 16px;
		margin: 0;

	}
</style>
