更新仪表盘

src/pages/home/widgets/components/welcome.vue

@@ -0,0 +1,96 @@
+<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>