<template>
	<view class="root">
		<view class="mask"/>
		<view class="list-container">
			<view 
				class="item"
				v-for="(item,index) in list"
			>
				<view></view>
				<text class="list-text">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default(){
					return	[]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: #000;
		-webkit-backdrop-filter:saturate(150%) blur(8px);
		background-color:rgba(0,0,0,.3);
		z-index: 20;
	}
	.root {
		position: absolute;
		top: 0;
		width: 100%;
		
		font-size: 28rpx;
		background-color: #fff;
		position: absolute;
		z-index: 1;
		.list-container {
			position: relative;
			background-color: #fff;
			width: 100%;
			z-index: 21;
			
			border-radius: 0px 0px 20px 20px;
			.item {
				border-top: 1px solid #EEEEEE;
				font-weight: 500;
				padding-left: 61rpx;
				height: 80rpx;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
	}
</style>