<template>
	<div style="position: relative;">
		<el-image :style="{ width: '100%', height: (device === 'desktop'?'480px':'auto')}" 
			fit="cover" :src="data.imgSrc"></el-image>
		<div class="bannerTxt">{{ data.title }}</div>
		<div class="bannerTxt" v-if="data.text" style="left: auto;right: 20px;font-size: 14px;">{{ data.text }}</div>
	</div>
</template>

<script setup>
	const store = useStore();
	const device = computed(() => store.state.app.device);
	const props = defineProps({
		data: {
			type: Object,
			default: {
				imgSrc: "",
				title: ""
			}
		}
	});
	
	const { data } = toRefs(props);
	
</script>

<style>
</style>