<template>
	<view class="first_main">
		<nav-bar title='车辆服务' ></nav-bar>
		
		<view class="content">
			<view class="list_scoll">
				<view class="car_item" v-for="(item,index) in listData" :key="index" :style="{backgroundImage: `url(${item.logAddress})`}" @click="jumpDetail(item)">
					<view class="car_item_txt" :style="{color: item.color}">{{item.serviceType}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {callbackRequest} from '@/common/util.js';
	import {carSerList} from '@/common/api.js';
	import navBar from "@/components/navBar/index.vue";
	export default {
		components: {
			navBar
		},
		data() {
			return {
				listData: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			
			jumpDetail(item) {
				uni.navigateTo({
					url: `/pages/device/synopsis?tle=${item.serviceType}&id=${item.id}&type=2`
				})
			},
			getData() {
				let params = {
				  method:carSerList,
					currentPage: 1,
					isDeleted: "0",
					limit: 1000,
					serviceType: ""
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						this.listData = res.returnData.records
					}else{
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	height: calc(100% - 100rpx);
	width: 100%;
	background-image: url('@/static/firstaid/carSer.png');
	background-size: 100% 490rpx;
	background-repeat: no-repeat;
}
.content::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
.first_main {
	height: 100vh;
	width: 100vw;
  background-color: #F2F6FA;
	padding-top: 100rpx;
}
.first_main::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
.list_scoll {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 470rpx;
	width: 100%;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	overflow: auto;
	width: 702rpx;
	height: calc(100% - 500rpx);
	background: #FFFFFF;
	border-radius: 22px 22px 0px 0px;
}
.car_item {
	width: 100%;
	height: 194rpx;
	border-radius: 20rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	padding: 0 48rpx;
	margin-bottom: 28rpx;
	.car_item_txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		font-style: normal;
		text-transform: none;
	}
}
</style>
