<template>
	<a-card :bordered="true" title="欢迎">
		<div class="welcome">
			<div class="logo">
				<img src="/favicon.ico" alt="logo">
				<h2>VueAdmin</h2>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon"><MenuOutlined /></div>
					<div class="tips-item-message">这里是项目控制台，你可以点击右上方的"自定义"按钮来添加移除或者移动部件。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><RocketOutlined /></div>
					<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><CoffeeOutlined /></div>
					<div class="tips-item-message">项目目的：让前端工作更快乐</div>
				</div>
			</div>
		</div>
	</a-card>
</template>

<script setup>
import { MenuOutlined, RocketOutlined, CoffeeOutlined } from '@ant-design/icons-vue'

// 定义组件名称
defineOptions({
	name: 'WelcomeWidget',
})
</script>

<style scoped lang="scss">
.welcome {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.welcome .logo {
	text-align: center;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;

	img {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	h2 {
		font-size: 30px;
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}
}

.tips {
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tips-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7.5px 0;
}

.tips-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	margin-right: 20px;
	color: #1890ff;
	background: rgba(24, 144, 255, 0.1);
}

.tips-item-message {
	flex: 1;
	font-size: 14px;
}
</style>
