<template>
	<u-popup :show="show" mode="bottom"  @close="onClose" :round="20">
        <view class="box">
            <view class="header flex">
				<span>更多</span>
				<u-icon name="close" @click="onClose"></u-icon>
			</view>
            <view class="flex">
				<view v-for="(item,index) in datalist" :key="index+''" class="flex-col">
					<image :src="item.url" style="width:60rpx;border: 1px solid grey;height: 60rpx;" mode="widthFix"></image>
					<span class="mt-1">{{item.title}}</span>
				</view>
			</view>
        </view>
	</u-popup>
</template>
<script>
  export default {
	name:"more",
	props:["show"],
    data() {
      return {
        datalist:[
			{title:"私聊" , url:"../../../static/images/IM.png"},
			{title:"线路切换" , url:"../../../static/images/skip.png"},
			{title:"直播类型" , url:"../../../static/images/type.png"},
		]
      }
    },
    methods: {
      onClose(){
		  this.$emit("moreClose");
	  },
    }
  }
</script>

<style lang="scss" scoped>
	.mt-1{
		margin-top: 10rpx;
	}
	.flex{
		display: flex;
	}
	.flex-col{
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		width: 20%;
		color: #777777;
		font-size: 28rpx;
	}
	.text-center{
		text-align: center;
	}
	.header{
		justify-content: space-between;
		padding: 32rpx 40rpx;
	}
	.box{
		height: 440rpx;
	}
</style>