jp-charge/pagesFinance/user/pileManagement.vue

<template>
	<view>
		<u-navbar title="电桩管理">
			<view class="delete">删除</view>
		</u-navbar>
		<view class="details">
			<view class="name">
				大润发顶楼停车场01号直流80kW
			</view>
			<view class="info">
				<view class="info-text">
					<p>2015国标 |<text class="dc-fast"> 直流快充 </text> | 80kW</p>
					<p class="tag-items">
						<view class="tag">
							对外开放
						</view>
						<view class="tag">
							可预约
						</view>
						<view class="tag">
							设备在线
						</view>
					</p>
				</view>
				<view class="info-img">
					<img src="../../assets/img/电桩管理.png" alt="">
				</view>
			</view>

			<view class="station-address">
				<img src="../../assets/img/Frame 201.png" alt="">
				<view class="address-text">
					湖北省荆州市沙市区江津东路附155号
				</view>

				<view class="navigation">
					<view class="iconfont address-font">
						&#xe60c;

					</view>
					<view class="view-map">导航</view>

				</view>

			</view>
			
			<u-cell-group  >
				<u-cell-item title="联系人" :arrow="false" value="李先生 15500001111"></u-cell-item>
				<u-cell-item  title="电价" :arrow="false" value="1.25元/度(12:00-14:00)"> </u-cell-item>
				<view class="price-detail">
					价格详情
				</view>
				<u-cell-item  title="停车费" :arrow="false" value="新能源车2小时停车费"></u-cell-item>
			</u-cell-group>

		</view>

<!-- 充电枪选项 -->
<view class="gun-options">
	<u-tabs :list="list1" :is-scroll="false" :current="current" @change="change" bar-width="125" inactive-color="#777777" active-color="#101010"></u-tabs>
	<view class="tab-equipment" v-show="current==0">
		<view class="equipment-top">
			<text class="name">1号充电枪</text>  
			<text class="switch"><u-switch v-model="checked" size="40" active-color="#FF7300"></u-switch></text>
			<text class="radio"> 	
			开启共享</text>
		</view>
		<view class="state">
			<view class="state-item">
				工作状态：充电中 <text class="bot1"></text>
			</view>
			<view class="state-item">
				工作状态：正常 <text class="bot1 bot2"></text>
			</view>
			<view class="state-item">
				工作状态：故障 <text class="bot1 bot2"></text>
			</view>
			<view class="state-item">
				工作状态：联网 <text class="bot1 bot2"></text>
			</view>
			<view class="iconfont more"><text class="set" >设置</text>&#xe600;</view>
		</view>
		
	</view>	
	
	<view class="tab-equipment"  v-show="current==0">
		<view class="equipment-top">
			<text class="name">2号充电枪</text>  
			<text class="switch"><u-switch v-model="checked" size="40" active-color="#FF7300"></u-switch></text>
			<text class="radio"> 	
			开启共享</text>
		</view>
		<view class="state">
			<view class="state-item">
				工作状态：空闲 <text class="bot1 bot2"></text>
			</view>
			<view class="state-item">
				工作状态：正常 <text class="bot1 bot2"></text>
			</view>
			<view class="state-item">
				工作状态：故障 <text class="bot1 bot2"></text>
			</view>
			<view class="state-item">
				工作状态：联网 <text class="bot1 bot2"></text>
			</view>
			<view class="iconfont more"><text class="set" >设置</text>&#xe600;</view>
		</view>
		
	</view>
	<!-- 分润比例 -->
	<view class="share" v-show="current==1">
		<view class="title" >
			<text class="line"></text>分润比列
		</view>
		<view class="item">
			<view >
				投资方
			</view>
			<view >
				93% 
			</view>
		</view>
		<view class="item">
			<view >
				平台收益
			</view>
			<view >
				7%
			</view>
		</view>
		
	</view>
	<!-- 设备信息 -->
	<view class="equipment-info" v-show="current==2">
	  <view class="title" >
	  	<text class="line"></text>设备相关信息
	  </view>
	  <view class="item">
		  <view class="">
		  	设备型号
		  </view>
		  <view class="">
		  	HCD0001-A
		  </view>
	  	
	  </view>
	  <view class="item">
	  		  <view class="">
	  		  	初次安装时间
	  		  </view>
	  		  <view class="">
	  		  	2022-04-1
	  		  </view>
	  	
	  </view>
	  <view class="item">
	  		  <view class="">
	  		  	输出功率范围(瓦)
	  		  </view>
	  		  <view class="">
	  		  	100-400
	  		  </view>
	  	
	  </view>
	

	</view>
	
</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				list1: [{
					name: '设备列表'
				}, {
					name: '分润比例'
				},{
					name:'设备信息'
				}],
				list2: [{
					name: '是'
				}, {
					name: '否'
				}],
				timeList:[{
					name:"10分钟"
				},
				{
					name:"20分钟"
				},
				{
					name:"30分钟"
				}],
				current: 0,
					checked: false,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 233px;
		background-color: #F6F8F8;
		
	}
	.delete {
		margin-left: 85.3%;
		color: #cccccc;
		font-size: 12px
	}

	.details {
		width: 100%;
		background-color: #fff;
		padding: 16px 0 0px 16px;

		.name {
			height: 20px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px;
			font-weight: 600;
		}

		.info {
			height: 75px;
			line-height: 16px;
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
			margin-top: 12px;
			display: flex;

			// justify-content: space-between;
			.dc-fast {

				color: #CDC0FF;
				margin: 0 4px;
			}

			.info-text {
				width: 69%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tag-items {
					display: flex;
					// justify-content: space-between;
				}

				.tag {
					line-height: 26px;
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 100);
					color: rgba(119, 119, 119, 100);
					text-align: center;
					border: 1px solid rgba(119, 119, 119, 100);
					padding: 0 4px;
					margin-right: 8px;

				}
			}

			.info-img {
				// margin-left: 35px;
			}
		}

		.station-address {
			width: 100%;

			margin-top: 17px;
			position: relative;

			img {
				width: 100%;
				height: 100%;
			}

			.address-text {
				line-height: 40px;
				position: absolute;
				top: 0px;
				left: 0;
				font-size: 16px
			}

			.navigation {
				position: absolute;
				top: 0;
				right: 28px;
			}

			.address-font {
				font-size: 28px;
				color: #4e94ff;


			}

			.view-map {
				font-size: 12px;
				text-align: center;

			}
		}
		/deep/.u-cell__value{
			text-align: left;
			margin-left: 16px;
			color: #101010;
			 font-size: 16px;
		}
		/deep/.u-cell_title{
			width: 15% !important;
		    font-size: 16px;
			color: #777777;
		}
		.u-cell{
			position: relative;
			    padding: 13px 16px 13px 0 ;
		}
		.price-detail{
			width: 56px;
			height: 20px;
			color: rgba(22, 119, 255, 100);
			font-size: 14px;
			position: absolute;
			top: 70px;
			right: 20px;
		}
	}


// 充电枪选项
.gun-options{
	background-color: #fff;
	margin-top: 12px;
	.tab-equipment{
		background-color: #fff;
		padding: 16px 16px 16px 0;
		margin-left: 16px ;
		border-bottom: 1px solid #E5E7EA;
		position: relative;
		.equipment-top{
			line-height: 27px;
			position: relative;
		}
		.name{
			line-height: 20px;
			line-height: 20px;
			font-weight: 600;
			color: rgba(16, 16, 16, 100);
		}
		.radio{
			margin-left: 54px;
			
			
		}
		.switch{
			position:absolute;
			top: 3px;
			left: 21%;
		}
		.state{
			margin-top: 12px;
			display: flex;
			justify-content: space-between;
			width: 75%;
			flex-wrap: wrap;
			.state-item{
				height: 20px;
				line-height: 20px;
				margin-top: 4px;
				color: rgba(16, 16, 16, 100);
				.bot1{
					display: inline-block;
					width: 12px;
					height: 12px;
					margin-left: 2px;
					background-color: rgba(255, 115, 0, 100);
					border-radius: 999px;
					
				}
				.bot2{
					background-color: rgba(0, 185, 98, 100);
				}
				
				
			}
			.more{
				
				line-height: 24px;
				font-size: 24px;
				color: #b3b3b3;
				position: absolute;
				right: 20px;
				top: 16px;
			
				.set{
					display: inline-block;
					width: 30px;
					font-size: 14px;
					color: #1677ff;
			        position: absolute;
					top: 0;
					left: -29px;
					
				}
			}
			
		}
	}
	/deep/.u-tab-bar{
		background-color: #00B962 !important;
	}
.share{
	padding: 16px;
    
}
	
.equipment-info{
	padding: 16px;
}
.title{
	font-size: 16px;
	font-weight: 600;
	.line{
		display: inline-block;
		height:12px;
		width: 4px;
		background-color: #00B962;
		margin-right: 8px;
	}
	
	}
	.item{
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}
}
.bottom{
	width: 100%;
	height: 64px;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	.u-btn{
		width: 91.4%;
		height: 40px;
		margin: auto;
	}
}

</style>