jp-charge/pagesFinance/user/chargingDetails.vue

<template>
	<view >
		<u-navbar title="充电价格详情"></u-navbar>
		
 <!-- 主体 -->
<!-- 充电桩信息 -->
       <view class="main">
		   
	    <!-- 收费标准 -->
		<view class="rates">
			<view class="rates-title">
				<view class="title-left">
					收费标准
				</view>
				<view class="title-right">
					峰谷平电价计费
				</view>
				
			</view>
			<!-- 时段分类 -->
		<view class="time-rates">
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						00:00-07:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						00:70-09:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						09:00-15:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						15:00-20:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						20:00-22:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						22:00-23:00
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view class="time-part">
				<view class="part-top">
					<view class="time">
						23:00-23:59
					</view>
					<view class="price">
						
						<text class="price-number">1.2500</text>
						<text class="price-unit">元/度</text>
					</view>
				</view>
				<view class="part-bottom">
					<view class="unitPrice-servicePrice">
						充电单价：￥1.0000 | 服务费：￥0.2500
					</view>
				</view>
			</view>
			<view style="
    text-align: center;
    color: #999999;
">*充电费用仅供参考，请以充电桩上的费用为准。</view>
			
		</view>

		</view >
			
		 
	   </view>
<!-- 底部按钮 -->
 
	</view>
	
	
</template>
<script>
	export default {
		data() {
		return{
			
			description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
		}
		}
	}
</script>


<style lang="scss">
	// 头部
	.title {
		width: 100%;
		line-height: 44px;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		border: 1px solid rgba(242, 242, 242, 100);
		position: fixed;
		top: 0;
		
	}
	
	// 主体
	.main{
		width: 100%;
		//margin-top: 44px;
		// margin-bottom: 64px;
		//padding-bottom: 234px;
		.main-detail{
			display: flex;
			justify-content: space-between;
			padding: 14px 16px 0 0;
			height: 48px;
			line-height: 48px;
			background-color: #fff;
			border-bottom: 1px solid rgba(242, 242, 242, 100);
			.detail-name{
               margin-left: 16px;
				height: 20px;
				line-height: 23px;
				color: rgba(102, 102, 102, 100);
				font-size: 14px;
				
			}
			.detail-content{
				height: 23px;
				line-height: 23px;
				color: rgba(51, 51, 51, 100);
				font-size: 14px;
				
			}
		}
		// 收费标准
	   .rates{
		   width: 100%;
		   background-color: #fff;
		   margin-top: 12px;
		   .rates-title{
			   display: flex;
			   justify-content: space-between;
			   height: 48px;
			   line-height: 48px;
			   padding: 0px 16px 0 ;
			   border-bottom: 1px solid rgba(242, 242, 242, 100);
		   }
		   .time-part{
			   width: 100%;
			   .part-top{
				   display: flex;
				   justify-content: space-between;
				   padding: 16px;
				   .time{
					   color: rgba(16, 16, 16, 100);
					   font-size: 16px;
				   }
				   .price{
					   .price-number{
						   color: rgba(255, 61, 0, 100);
						   font-size: 18px;
						   text-align: right;
						   font-family: Roboto-regular;
						   display: inline-block;
						   height: 20px;
						   font-weight: 600;
					   }
					   .price-unit{
						   color: rgba(102, 102, 102, 100);
						   font-size: 14px;
						   text-align: right;
						   margin-left: 4px;
						   display: inline-block;
						   height: 20px;
					   }
				   }
			   }
			   .part-bottom{
				   .unitPrice-servicePrice{
					   eight: 18px;
					   color: rgba(136, 136, 136, 100);
					   font-size: 12px;
					   text-align: right;
					   padding-right: 16px;
					   padding-bottom: 18px;
				   }
			   }
		   }
	   }
	 .tips{
		
		 font-size: 12px;
		 margin-top: 24px;
		 /deep/.u-alert-desc[data-v-4d234687]{
		 			 font-size: 12px
		 }
	 }
	}
	
	// 尾部
	.bottom{
		background-color: #fff;;
		width: 100%;
		height: 64px;
		line-height: 64px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index:999;
		padding: 12px 16px;
		.botton{
			width: 343px;
			height: 40px;
			line-height: 40px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;
			margin: 0 auto;
		}
		
	}
</style>