<template>
	<a-layout class="layout-box" style="background: #fff; height: 100%;">
		<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible
			style="background: #19be6b; overflow-y: auto;, height: '100vh', left: 0">
			<div class="logo" v-if="collapsed">
				<img src="@/static/images/logo_1.jpg" alt="" style="width: 100%;height: 100%;">
			</div>
			<div class="logo" v-else>
				<img src="@/static/images/logo.png" alt="" style="width: 100%;height: 100%;" >
			</div>
			<a-sider></a-sider>
		</a-layout-sider>
		<a-layout>
			<a-layout-header style="background: #fff; padding: 0 16px">
				<a-header></a-header>
			</a-layout-header>
			<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
				<router-view></router-view>
			</a-layout-content>
			<a-layout-footer style="text-align: center;padding: 0 0 8px 0;">
				技术支持：中山安域
			</a-layout-footer>
		</a-layout>
	</a-layout>
</template>
<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { store } from '@/store';
	import ASider from './sider/aSider.vue';
	import AHeader from './header/aHeader.vue';
	import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue';
	
	const collapsed = computed(() => {
		return store.state.collapsed
	})
	
	
</script>
<style lang="less">
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	.logo {
		height: 32px;
		margin: 16px;
	}

	.site-layout .site-layout-background {
		background: #fff;
	}
</style>