jp-housekeep-electric/pages/equipmentDataMonitoring/billingRules.vue

<template>
	<view>
		<u-navbar title="计费规则"  title-color="#101010" ></u-navbar>
		<view class="background">
			<!-- 单位 -->
			<view class="unit">
				<view class="title">
					所属收款单位
				</view>
				<view class="value">
					岑河物业公司
				</view>
			</view>
			<!-- 规则 -->
			<view class="rules">
				
				<view class="content">
					<view class="rule1">
						<view class="title">
							用电分类
						</view>
						<view class="value">
							高峰用电
						</view>
						<view class="value">
							谷段用电
						</view>
						<view class="value title3">
							平段用电
						</view>
						<view class="value">
							尖峰用电
						</view>
					</view>
					<view class="rule2">
						<view class="title">
							用电时段
						</view>
						<view class="value">
							09:00-15:00
						</view>
						<view class="value">
							23:00-07:00
						</view>
						<view class="value value3">
							<p>07:00-09:00</p>
							<p>15:00-20:00</p>
							<p>22:00-23:00</p>
						</view>
						<view class="value">
							20:00-22:00
						</view>
					</view>
					<view class="rule3">
						<view class="title">
							电度电价
						</view>
						<view class="value">
							0.99元/度
						</view>
						<view class="value">
							0.37元/度
						</view>
						<view class="value value4">
							0.69元/度
						</view>
						<view class="value">
							1.18元/度
						</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="remark">
					<view class="title">
						备注说明：
					</view>
					<view class="value">
						<view class="item">1.计费规则仅展示租赁合同中的计算方式，最终扣费金额以账单中的实际扣费金额为准。



						</view>
						
						<view class="item">
2.本次租约有效期：2024年2月1日-2024年7月31日
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				
				
				
			}
		},
		
		methods: {
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
		height: 720rpx;
		padding-top: 24rpx;
		.unit{
			background-color: #fff;
			
			border-radius: 8px;
			padding: 32rpx;
			margin: 0 32rpx;
			.title{
				color: rgba(153,153,153,1);
			}
			.value{
				color: rgba(51,51,51,1);
				font-size: 40rpx;
				margin-top: 16rpx;
				font-weight: bold;
			}
		}
	}
  // 规则
  .rules{
	  margin: 24rpx 32rpx 40rpx;
	  background-color: #fff;
	  padding-bottom: 24rpx;
	  border-radius: 8px;
	 
	  .content{
		  padding:24rpx;
		  display: flex;
		  text-align: center;
		  .rule1{
			  width: 200rpx;
			  .title{
				  line-height: 96rpx;
				  color: rgba(51,51,51,1);
				  font-size: 32rpx;
				  font-weight: bold;
			  }
			  .value{
				  color: rgba(51,51,51,1);
				  line-height: 96rpx;
				  font-weight: bold;
			  }
		  }
		  .rule2,.rule3{
			  width: 200rpx;
			  
			  .title{
				  color: rgba(51,51,51,1);
				  font-size: 32rpx;
				  line-height: 96rpx;
				  font-weight: bold;
			  }
			  .value{
				  color: rgba(119,119,119,1);
				  line-height: 96rpx;
			  }
		  }
		  .title3{
			  height: 144rpx;
			  line-height: 144rpx !important;	
		  }
		  .value3{
			  height: 144rpx;
			  p{
				  line-height: 48rpx;
			  }
		  }
		  .value4{
			  height: 144rpx;
			  line-height: 144rpx !important;
		  }
		  
	  }
	  // 备注
	  .remark{
		  padding: 40rpx 32rpx;
		  margin: 0 24rpx;
		  border-radius: 8px;
		  background-color: rgba(242,244,246,1);
		  color: rgba(16,16,16,1);
		  font-size: 24rpx;
		  line-height: 34rpx;
		  .value{
			  margin-top: 16rpx;
		  }
		  .item{
			  margin-bottom: 8rpx;
			  
		  }
	  }
  }
</style>