wxThird/pages/index/onlineBooking.vue

<template>
	<view class="box">
		<view class="top">
			<view class="shopTop">
				<swiper class="swiper" circular  :autoplay="false" :interval="interval"
								:duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/A9157023-4939-48B7-BB49-D9D8113EF953.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/1057BA84-E59D-47B7-9F66-73E3491A443E.jpg" alt="">
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 门店详情 -->
			<view class="newshopNames">
			  <view class="newshopDstop">
			    <view class="newshopDname">连锁一号</view>
			    <view class="newshopDtime">
			      营业时间： <span>08:00 - 17:00</span>
			    </view>
			    <view class="newshopDbqbox" >
			      <view class="newshopDbqline" v-for="(item,index) in 5">大众</view>
			    </view>
			  </view>
			  <view class="newshopDadressBpx">
			    <view class="newshopDaleft">
			      <view class="newshopDaleftTop">
			        <img src="../../static/timg/icon_coordinate@2x.png" alt="" class="shopaddressIcon">
			        <span class="shopDdistance" v-if="Number(distance)>1">距离{{distance}}km</span>
			        <span class="shopDdistance" v-else-if="Number(distance)">距离{{distance*1000}}m</span>
			        <span class="shopDdistance" v-else>距离--km</span>
			      </view>
			      <view class="newshopDadressName">金智源</view>
			    </view>
			    <view class="newshopDaright">
			      <view class="newshopDrline" @click="goLocation()">
			        <img src="../../static/timg/icon_map@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">地图</view>
			      </view>
			      <view class="newshopDRsx"></view>
			      <view class="newshopDrline" @click="phones()">
			        <img src="../../static/timg/icon_phone@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">电话</view>
			      </view>
			    </view>
			  </view>
			
			</view>
		</view>
	  <!-- 预约详情-->
	  <view class="yuyue-container">
	  	<view class="yuyueLeft">
	  		<view class="yuyueleftLine" v-for="(item,index) in 6" @click="listItemWxInfo(item,index)" :class="{leftActive:leftIndex==index}">汽车</view>
	  	</view>
		<view class="yuyueRight">
			<view class="yuyueRightTitle">维修</view>
			<view class="yrTop">
				 <view class="ItemName">轮毂去污护理（4支）</view>
				 <image src="../../static/timg/ickno.png" mode="" class="yrTopImg"></image>
				 <image src="../../static/timg/icon_checked@2x.png" mode="" v-if="false" class="yrTopImg"></image>
			</view>
			
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interval:2000,
				distance:0.05,
				leftIndex:0,
			}
		},
		methods: {
			goLocation(){
				
			},
			phones(){
				
			},
			listItemWxInfo(item,index){
				this.leftIndex=index
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.swiper-item img{
	width: 750rpx;
	height: 500rpx;
}
.swiper-item{
	height: 500rpx;
}
.swiper{
	height: 500rpx;
}
.newshopNames{
	width: 702rpx;
	margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: -60rpx;
	position: relative;
}
.newshopDname{
	color: #333333;font-size: 30rpx;
	padding-left: 20rpx;
	padding-top: 23rpx;
	font-weight: 500;
}
.newshopDtime{
	color: #999999;
	font-size: 24rpx;
	padding-left: 20rpx;
	padding-top: 10rpx;
	font-weight: 400;
}
.newshopDstop{
	padding-bottom: 21rpx;
	border-bottom: 1px solid #EEEEEE;
}
.newshopDetailtop{
	margin-bottom: 20rpx;
}
.newshopDbqbox{
	display: flex;
	flex-wrap: wrap;
	padding-left: 20rpx;
}
.newshopDbqline{
	line-height: 30rpx;
	height: 30rpx;
	border-radius: 4rpx;
	border: 1px solid #FF7D30;
	color: #FF7D30;
	font-size: 22rpx;
	padding: 0 8rpx;
	margin-right: 16rpx;
	margin-top: 10rpx;
}
.newshopDbqbox{
	padding-top: 5rpx;
}
.shopaddressIcon{
	width: 22rpx;
	height: 30rpx;
}
.shopDdistance{
	color: #3C3C3C;font-size: 24rpx;line-height: 30rpx;padding-left: 16rpx;
	font-weight: 500;
}
.newshopDaleftTop{
	display: flex;
}
.newshopDadressBpx{
  display: flex;
  padding: 30rpx 20rpx;
  background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
  background-size: 100% 100%;
}
.newshopDadressName{
	color: #999999;padding-top: 16rpx;
	font-size: 24rpx;line-height: 24rpx;
	width: 480rpx;font-weight: 400;
}
.newshopDrlineimg{
	width: 44rpx;
	height: 44rpx;
}
.newshopDrlineTxt{
	color: #999999;
	font-size: 22rpx;
	text-align: center;
	padding-top: 7rpx;
	font-weight: 400;
}
.newright-item .yuyue-item{
	padding-top: 20rpx;
}
.newshopDRsx{
	width: 2rpx;
	height: 71rpx;
	background: #EEEEEE;
}
.newshopDaright{
	display: flex;
	justify-content: space-between;
	width: 150rpx;
	padding-left: 20rpx;
}
.yrTopImg{
	width: 36rpx;
	height: 36rpx;
}
.yuyue-container{
	display: flex;
	margin-top: 20rpx;
}
.yuyueLeft{
	background: #F5F5F5;
	width: 154rpx;
	
}
.yuyueRight{
	width: 596rpx;
	background: #FFFFFF;
}
.yuyueleftLine{
	font-size: 26rpx;
	padding:30rpx 24rpx;
	color: #3C3C3C;
	font-weight: 400;
}
.leftActive{
	background: #FFFFFF;
	font-weight: 500;
}
</style>