JiangxiMiniProgram/pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue

<template>
	<view class="main pageBg">
		<view class="swiper-box">
			<view class="navPoz">
				<topNavbar title=" "></topNavbar>
			</view>
			<u-swiper :list="list1" :height="261"></u-swiper>
			<view class="radian">
				<image src="@/static/images/bigImg/radian.png" mode=""></image>
			</view>
		</view>
		<view class="pad traTop">
			<!-- 驾校信息 -->
			<view class="card ">
				<view class="flex">
					<view class="schoolLogo">
						<image src="@/static/images/logo.png" mode=""></image>
					</view>
					<view class="textCon">
						<view class="name">江西海正驾校</view>
						<view class="starBox">
							<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="4" disabled></u-rate>
							<view class="num">4.9分</view>
						</view>
						<view class="evaluate" @click="$goPage('/pages/indexEntry/findShcool/shcoolComment/shcoolComment')">
							<view class="txt">50条评价</view>
							<u-icon name="arrow-right" color="#363A44" size="14"></u-icon>
						</view>
					</view>
					<view class="pozPhone">
						<image src="@/static/images/index/telephone.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 驾校位置 -->
			<view class="shoolPoz">
				<view class="h1">驾校位置</view>
				<pozCard></pozCard>
			</view>
			<!-- 驾校服务 -->
			<view class="severCon">
				<view class="h1">驾校服务</view>
				<view class="navBox">
					<view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: currentNav==item.id}" @click="changeNav(item)">{{ item.text }}</view>
				</view>
			</view>
			<tab1 v-show="currentNav==1"></tab1>
			<tab2 v-show="currentNav==2"></tab2>
			<tab3 v-show="currentNav==3"></tab3>
			<tab4 v-show="currentNav==4"></tab4>
		</view>
	</view>
</template>

<script>
	import tab1 from './comp/tab1.vue'
	import tab2 from './comp/tab2.vue'
	import tab3 from './comp/tab3.vue'
	import tab4 from './comp/tab4.vue'
	export default {
		components: { tab1, tab2, tab3, tab4},
		data() {
			return {
				 list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				navList: [
					{text: '班型', id: 1},
					{text: '场地', id: 2},
					{text: '教练', id: 3},
					{text: '教练车', id: 4},
				],
				currentNav: 1,
			}
		},
		methods: {
			changeNav(item) {
				this.currentNav = item.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navPoz {
		position: absolute;
		top: 0;
		z-index: 9;
		left: 0;
	}
	.main {
		width: 100%;
		min-height: 100vh;
	  .swiper-box {
		  position: relative;
	
	    .radian {
	      position: absolute;
		  width: 100%;
		  height: 84rpx;
		  bottom: 0;
		  left: 0;
		  z-index: 9;
	    }
	  }
	  
	  .traTop {
		  position: relative;
		  top: -120rpx;
		  z-index: 99;
	  }
	  .card {
		  padding: 24rpx;
	    .flex {
			position: relative;
	      .schoolLogo {
	        width: 204rpx;
	        height: 140rpx;
	      }
	
	      .textCon {
			  flex: 1;
			  padding: 0 0 0 36rpx;
	        .name {
				font-size: 32rpx;
				font-weight: 600;
	        }
	
	        .starBox {
				padding: 12rpx 0 6rpx 0;
	        }
	
	        .evaluate {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
	          .txt {
				font-size: 24rpx;
				color: #363A44;
				margin-right: 12rpx;
	          }
	        }
	      }
	
	      .pozPhone {
	        position: absolute;
	        top: 50%;
	        right: 40rpx;
	        width: 72rpx;
	        height: 72rpx;
	        transform: translateY(-50%);
	      }
	    }
	  }
	.h1 {
		line-height: 100rpx;
	}
	  
	
	  .navBox {
		  display: flex;
		  justify-content: space-between;
		  padding: 10rpx 32rpx 20rpx 32rpx;
	    .nav {
			font-size: 28rpx;
			color: #363A44;
			&.active {
				color: $themC;
				font-weight: 600;
				font-size: 32rpx;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					bottom: -18rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 48rpx;
					height: 4rpx;
					background: #1989FA;
					border-radius: 2rpx 2rpx 0px 0px;
				}
			}
	    }
	  }
	}
</style>