<template>
	<div class="fix-wechat" :style="baseStyle">
		<img
			src="https://tsb-yx.oss-cn-guangzhou.aliyuncs.com/leadshop/pageicon/wechat_bg.png"
			width="100%"
			height="100%"
		/>
	</div>
</template>

<script lang="ts" name="fix-wechat" setup>
import { computed, type PropType } from "vue";
import { Form } from "../../types/form";

const props = defineProps({
	styleSpacing: {
		type: Object as PropType<Form.Spacing>,
		default: () => {
			return {
				marginTop: 0,
				marginBottom: 0,
				marginLR: 0,
				padding: 0,
				borderTopLR: 0,
				borderBottomLR: 0
			};
		}
	}
});
const baseStyle = computed(() => {
	return {
		margin: `${props.styleSpacing.marginTop / 2}px ${props.styleSpacing.marginLR / 2}px ${props.styleSpacing.marginBottom / 2}px ${props.styleSpacing.marginLR / 2}px`,
		padding: `${props.styleSpacing.padding / 2}px`,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`
	};
});
</script>

<style lang="scss" scoped>
.fix-wechat {
	box-sizing: border-box;
	overflow: hidden;
	height: 85px;
	width: 100%;
}
</style>
