JP-ChargeTeam51/components/GroupItem.vue

<template>
	<view class="elseMain">
		<view class="else" @click="setOpen(item)">
					<view class="gun-type" :class="{
			colorCA9DFF:item.device.chargingType=='超充',
			color185AC6:item.device.chargingType=='快充',
			color00B962:item.device.chargingType=='慢充',
		}">
						{{item.device.chargingType}}
		
						<!--  -->
					</view>
					<view class="voltage">
						{{item.device.interfaceType}}
						{{item.device.chargingPower!=null?item.device.chargingPower+'kW':''}}
					</view>
					
					<view  class="voltage" style="color:#4F2AE0"
					 
					 v-if="item.device.groupName" >
						 {{item.device.groupName}}
					</view>
					<view class="more">
		
						<u-icon v-show="openlist.get(item.id)" name="arrow-down" color="#999999"
							size="12"></u-icon>
		
						<u-icon v-show="!openlist.get(item.id)" name="arrow-up" color="#999999"
							size="12"></u-icon>
					</view>
				</view>
				<view  class="parkingNo" v-if="item.parkingNo&&item.device.groupName">车位号：{{item.parkingNo}}
				</view>
	</view>
</template>

<script>
	export default {
		name:"groupItem",
		props: {
			 openlist:{},
			 item:{
				 device:{}
			 }
		},
		data() {
			return {
				
			};
		},
		methods:{
			
			setOpen(item) {
				this.$emit("setOpen",item)
			},
		}
	}
</script>

<style>
	.elseMain{
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
			
	}
	.parkingNo{
		color: #03A9F4;
		font-weight: bold;
	}
.else {
								display: flex;
								align-items: center;
								margin-top: 8rpx;
							
								.gun-type {
									//color: rgba(22, 119, 255, 1);
									
									color: #fff;
									//background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
									    border-radius: 4px;
									    padding: 1px 12rpx;
									    margin-right: 8rpx;
									    font-size: 22rpx;
									  //  height: 32rpx;
								}
							
								.voltage {
									margin: 0 8rpx;
								}
							}
							
							.color185AC6 {
								//color: #185AC6
								background: linear-gradient(90.17deg, rgba(31, 85, 255, 1) -3.73%, rgba(39, 171, 255, 1) 98.97%);
							}
							
							.color00B962 {
								//color: #00B962
								background: linear-gradient(90deg, rgba(0, 146, 77, 1) 0%, rgba(62, 232, 152, 1) 100%);
							}
							
							.colorCA9DFF {
								// color: #8161FF;
								background: linear-gradient(90.17deg, rgba(79, 42, 224, 1) -3.73%, rgba(142, 113, 255, 1) 98.97%) ;
							}
</style>