<!-- 
    filename: ShadowRect.vue
    author: liubin
    date: 2023-12-05 14:28:57
    description: 阴影矩形   
-->

<template>
	<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
		<slot>
			<div
				class="test-data"
				style="flex: 1; display: flex; align-items: center">
				<span
					style="
						flex: 7;
						color: #fff;
						text-align: right;
						font-size: 18px;
						line-height: 1.12;
						letter-spacing: 1px;
						padding-right: 12px;
					">
					窑炉压力碹顶加权
				</span>
				<span
					style="
						flex: 3;
						color: #fff;
						text-align: left;
						font-size: 18px;
						line-height: 1.12;
						padding-right: 8px;
					">
					92Kpa
				</span>
			</div>
		</slot>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: ['rounded'],
	data() {
		return {};
	},
	watch: {
		rounded(val) {
			if (val) {
				console.log('val', val);
			}
		},
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.shadow-rect {
	padding: 8px;
	border-radius: 2px;
	box-shadow: inset 0 0 8px 2px #ccc3;
	color: white;
	display: flex;
	align-items: center;
}
</style>
