jp-charge/pagesFinance/user/deviceList.vue

<template>
	<view>
		<u-navbar title="我的设备"></u-navbar>
		<view class="deviceDropdown">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="充电桩类型" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="所属站点" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="运行状态" :options="options3"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="deviceList">
			<view class="deviceList-item deviceList-bg1">
				<view class="deviceList-head">荆鹏软件园充电站</view>
				<view class="deviceList-main">A0001</view>
				<view class="deviceList-foot">
					<view class="deviceList-label">直流快充</view>
					<view class="deviceList-label">正常运行</view>
					<view class="deviceList-label">市场服务 70%</view>
				</view>
			</view>
			<view class="deviceList-item deviceList-bg2">
				<view class="deviceList-head">荆鹏软件园充电站</view>
				<view class="deviceList-main">A0001</view>
				<view class="deviceList-foot">
					<view class="deviceList-label">直流快充</view>
					<view class="deviceList-label">正常运行</view>
					<view class="deviceList-label">市场服务 70%</view>
				</view>
			</view>
			<view class="deviceList-item deviceList-bg3">
				<view class="deviceList-head">荆鹏软件园充电站</view>
				<view class="deviceList-main">A0001</view>
				<view class="deviceList-foot">
					<view class="deviceList-label">直流快充</view>
					<view class="deviceList-label">正常运行</view>
					<view class="deviceList-label">市场服务 70%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options3: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
		methods: {

		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.deviceDropdown{
		background-color: #fff;
	}
	.deviceList-item{
		margin: 16px;
		border-radius: 8px;
		.deviceList-head{
			font-size: 16px;
			padding: 8px 16px;
		}
		.deviceList-main{
			font-size: 28px;
			padding: 0px 16px;
			font-weight: bold;
		}
		.deviceList-foot{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 16px;
			.deviceList-label{
				background-color: #F0F2F4 ;
				padding: 4px 10px;
				margin-right: 8px;
				border-radius: 4px;
			}
		}
	}
	.deviceList-bg1{
		background:url(../../assets/img/charging_type_fast.png) no-repeat #fff;
		background-size:100%;
	}
	.deviceList-bg2{
		background:url(../../assets/img/charging_type_slow.png) no-repeat #fff;
		background-size:100%;
	}
	.deviceList-bg3{
		background:url(../../assets/img/charging_type_bike.png) no-repeat #fff;
		background-size:100%;
	}
</style>