<template>
	<view :style="{height:more?'':height}" class="_divmore">
		<slot></slot>
		<view v-if="!more" class="_mark" @tap="showall" :style="{background:maskbg?'linear-gradient(0deg, '+maskbg+', transparent)':''}">
			<view class="itm">»</view>
		</view>
	</view>
</template>

<style scoped>
	._divmore {
		overflow: hidden;
		display: block;
		position: relative;
	}

	._mark {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0;
		margin: 0;
		z-index: 1;
		height: 3em;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	._mark>.itm {
		font-size: 2em;
		color:var(--txt1);
		animation: _slideDown 3s ease-in infinite;
	}
	
	@keyframes _slideDown {
	  0% {
		transform: rotate(75deg) translateX(-1em);
		opacity: 0;
	  }
	  12% {
		transform: rotate(90deg) translateX(0);
		opacity: 1;
	  }
	  95% {
		transform: rotate(90deg) translateX(0);
		opacity: 1;
	  }
	  100% {
		transform: rotate(110deg) translateX(0.5em);
		opacity: 0;
	  }
	}
</style>

<script>
	export default {
		emits: ['change'],
		props: {
			height: {
				type: String,
				default: '10em'
			},
			maskbg: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				more: false,
			};
		},
		watch: {},
		computed: {},
		mounted() {},
		methods: {
			showall(){
				this.more = true;
				this.$emit('change', true);
			}
		}
	}
</script>