<template>
	<view>
		<u-popup :show="show" @close="close" mode="center" :round="20">
            <view class="content">
                <image class="imageHead" src="@/static/images/service.png" style="width:480rpx;" mode="widthFix"></image>
				<u-icon class="icon" name="close" color="white" @click="close"></u-icon>
				<swiper class="flex-8" indicator-dots>
					<swiper-item class="flex" v-for="item in teacherList" :key="item.teacher">
						<image :src="item.url" style="width: 240rpx;" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</swiper-item>
				</swiper>
				<view class="flex-2 message">{{message}}</view>
            </view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name:"service",
		props:["show"],
      data() {
        return {
			message:"扫码或长按二维码，立即咨询",
			teacherList:[
				{url:"/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",title:"汪老师"},
				{url:"/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",title:"李老师"}
			]
        }
      }, 
      methods: {
        close() {
          this.$emit("onClose")
        }
      }
	}
</script>
<style lang="scss" scoped>
	.message{
		text-align: center;
	}
	.flex{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flex-8{
		flex:9;
	}
	.flex-2{
		flex:1;
	}
	.content{
		width: 480rpx;
		height: 624rpx;
		padding-top: 172rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.imageHead{
			position: absolute;
			top:-60rpx;
			}
	}
	.icon{
		position: absolute;
		right: 24rpx;
		top: 0rpx;
	}
</style>