<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<scroll-view scroll-y="true" class="networkDetail" >
		<view class="ding">
			
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-color="rgba(220,192,203,1)"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index">
					<img :src="item" class="img" alt="" />
				</swiper-item>
			</swiper>
		</view>
		<view class="boxs">
			<view class="mapWindow">
				<view class="l">
					<view class="title">
						<text class="t">中山花园洗车点</text><text class="r">正常营业</text>
					</view>
					<view class="c">
						杭州千年舟家居文化创意港
					</view>
					<view class="datas-navigation">
						<view class="left-d">
							<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text class="colors">5.4km|</text>
						</view>
						<view class="left-x">
							<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text class="colors">站点维修</text>
						</view>
					</view>
					<view class="datas-state">
						<view class="sum">
							24小时营业
						</view>
						<view class="surplus">
							出入无忧
						</view>
					</view>
				</view>
				<view class="right-m">
					<view class="box">
						<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
						<view class="txt">
							导航
						</view>
					</view>
				</view>
			</view>
			<view class="nav-title">
				<img class="nav-img-left" src="https://www.jiubaotongxue.love/image/demo7.png" alt="" />
				<text class="t">团购核销入口</text>
				<view class="nav-btn">
					进入
				</view>
			</view>
		</view>
		<view class="state">
			<view class="title">
				<view class="lines">
					
				</view>
				<text class="txt">洗车工位</text>
			</view>
			<view class="machine">
				<view class="machine-flex"  v-for="(item,index) in status" :key="item.id">
					<img class="i" src="https://www.jiubaotongxue.love/image/bannas.png" alt="" />
					<view class="flex-box"  :class="{iSshow1: item.msgCode === 2, iSshow2: item.msgCode === 3 }">
						<view class="show">
							车位{{item.num}}
						</view>
						<view class="shows">
							{{item.msg}}
						</view>
					</view>
				</view>
				<view class="ding">
					
				</view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script setup>
	
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	const titles = ref('网点详情')
	const bgcolor = ref('#aaa')
	const color = ref('#000')
	onLoad(() => {
		titles.value = '网点详情'
		bgcolor.value = '#fff'
		color.value = '#000'
	})
	const banners = ref(['https://www.jiubaotongxue.love/image/bannas.png',
		'https://ts1.cn.mm.bing.net/th/id/R-C.c1c536c60766315effcf7473734265c8?rik=BJnvGw%2fMafvL5w&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2ft_s960x600c5%2fg2%2fM00%2f0E%2f09%2fCg-4WlVsB-GII_QDACASGpf7ol4AAEeNQPDq30AIBIy241.jpg&ehk=rmAXHBKBoEX%2bHmHxwM1UvcjGF3rxRv5booeLLpySEys%3d&risl=&pid=ImgRaw&r=0',
		'https://pic1.zhimg.com/v2-9db7bf3b825f2db103a534ca59c75481_r.jpg?source=1940ef5c'
	])
	const status = ref([{
		id:1,
		msg:"空闲中",
		msgCode:1,
		num:1
	},
	{
		id:2,
		msg:"使用中",
		msgCode:2,
		num:2
	},
	{
		id:3,
		msg:"损坏",
		msgCode:3,
		num:3
	}
	])
</script>

<style lang="scss">
	.networkDetail{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #eeeeee;
		.ding{
			width: 100%;
			height: 11%;
		}
		.uni-margin-wrap {
			position: relative;
			width: 100%;
			height: 560rpx;
		
			.swiper {
				width: 100%;
				height: 100%;
		
				.swiper-item {
					width: 100%;
					height: 100%;
		
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.boxs {
			width: 690rpx;
			height: 410rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			margin-top: -60rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			
			.mapWindow{
				width: 100%;
				height: 266rpx;
				position: relative;
				bottom: 0rpx;
				border-radius: 20rpx;
				display:flex;
				justify-content: space-between;
				background-color: #feffff;
				z-index: 999;
				.l{
					width: 600rpx;
					height: 202rpx;
					.title{
						width: 100%;
						height: 48rpx;
						line-height: 48rpx;
						display:flex;
						margin-top: 30rpx;
						.t{
							display: block;
							font-size: 34rpx;
							font-weight: 600;
							margin-left: 42rpx;
						}
						.r{
							display: block;
							width: 108rpx;
							height: 36rpx;
							background: linear-gradient( 135deg, #FEB44C 0%, #FF8833 100%);
							font-size: 22rpx;
							text-align: center;
							line-height: 36rpx;
							color: white;
							margin-left: 38rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}
					.c{
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						height: 34rpx;
						box-sizing: border-box;
						padding-left:42rpx;
						margin-top: 20rpx;
					}
				.datas-navigation{
					width: 100%;
					height: 38rpx;
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					.left-d{
						// width: 40%;
						height: 38rpx;
						display: flex;
						align-items: center;
						// background-color: rebeccapurple;
						margin-left: 42rpx;
						.i{
							width: 24rpx;
							height: 24rpx;
							// background-color: red;
						}
						.colors{
							font-size: 24rpx;
						}
					}
					.left-x{
						// width: 40%;
						height: 38rpx;
						display: flex;
						align-items: center;
						// background-color: rebeccapurple;
						margin-left: 5rpx;
						.i{
							width: 24rpx;
							height: 24rpx;
							// background-color: red;
						}
						.colors{
							font-size: 24rpx;
						}
					}
				}
				.datas-state{
					width: 100%;
					height: 90rpx;
					position: relative;
					display: flex;
					align-items: center;
					color: white;
					.sum{
						width: 138rpx;
						height: 36rpx;
						color: #4993FF;
						font-size: 22rpx;
						border: 1rpx solid #4993FF;
						text-align: center;
						line-height: 36rpx;
						margin-left: 42rpx;
						border-radius: 7rpx 7rpx 7rpx 7rpx;
					}
					.surplus{
						width: 138rpx;
						height: 36rpx;
						color: #42BE45;
						border: 1rpx solid #42BE45;
						font-size: 22rpx;
						text-align: center;
						line-height: 36rpx;
						margin-left: 20rpx;
						border-radius: 7rpx 7rpx 7rpx 7rpx;
					}
				}
				
					
				}
				.right-m{
					width: 30%;
					height: 266rpx;
					position: relative;
					.box{
						position: absolute;
						top: 50%;
						right: 56rpx;
						transform: translateY(-50%);
						.ic{
							width: 76rpx;
							height: 76rpx;
						}
						.txt{
							width: 76rpx;
							font-size: 24rpx;
							text-align: center;
							color: #3377FF;
						}
					}
				}
			}
		
			.nav-title {
				position: relative;
				width: 630rpx;
				height: 100rpx;
				background: rgba(71, 144, 255, 0.12);
				border-radius: 20rpx;
				margin-left: 50%;
				margin-top: 10rpx;
				transform: translateX(-50%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
		
				.nav-img-left {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-left: 32rpx;
				}
				.t{
					display: block;
					margin-left: 24rpx;
					color: #4D97FF;
					// font-weight: 600;
					font-size: 36rpx;
				}
				.nav-btn {
					width: 112rpx;
					height: 48rpx;
					background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), #D8D8D8;
					border-radius: 8rpx;
					line-height: 48rpx;
					color: white;
					text-align: center;
					margin-left: 156rpx;
				}
			}
	
		}
		.state{
			width: 100%;
			position: relative;
			background-color: #fff;
			margin-top: 20rpx;
			.title{
				width: 100%;
				height:100rpx;
				position: relative;
				display: flex;
				align-items: center;
				.lines{
					width: 10rpx;
					height: 24rpx;
					background-color: #4993FF;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					margin-left: 30rpx;
				}
				.txt{
					display: block;
					margin-left: 20rpx;
					line-height: 100rpx;
					font-size: 36rpx;
					font-weight: 500;
				}
			}
			.machine{
				width: 100%;
				background-color: #fff;
				font-size: 26rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.machine-flex{
					width:330rpx;
					height: 256rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;
					.i{
						width: 330rpx;
						height: 180rpx;
						border-radius: 25rpx 25rpx 25rpx 25rpx;
					}
					.flex-box{
						width: 278rpx;
						height: 60rpx;
						position: relative;
						margin-left: 50%;
						transform: translateX(-50%);
						background-color: #afe3b1;
						text-align: center;
						line-height: 60rpx;
						display: flex;
						margin-top: 16rpx;
						border-radius:65rpx 65rpx 65rpx 65rpx;
						.show{
							width: 139rpx;
							height: 60rpx;
							border-radius:65rpx 0rpx 0rpx 65rpx;
							color: white;
						}
						.shows{
							width: 139rpx;
							height: 55rpx;
							line-height: 55rpx;
							background-color:#ffffff;
							border-radius:65rpx 65rpx 65rpx 65rpx ;
							color:#42BE45;
							margin-top: 4rpx;
						}
					
					
					}
					.iSshow1{
						background-color: #FFA9A9;
						.shows{
							color: #FF3232;
						}
					}
					.iSshow2{
						background-color: #EEC9AC;
						.shows{
							color: #FF953A;
						}
					}
			
				}
				.ding{
					width: 100%;
					height: 100rpx;
				}
			}
		}
	}
</style>
