初始化版本，引入智慧食堂模块，第三方模块

src/components/ShortcutCard/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="container">
+		<el-tag :color="randomColor()" class="container-tag">
+			<SvgIcon :name="props.icon" :size="25" color="#ffffff" />
+		</el-tag>
+		<span class="container-span">{{ $t(props.label) }}</span>
+	</div>
+</template>
+
+<script setup name="shortcut">
+const props = defineProps({
+	icon: {
+		type: String,
+		default: () => 'menu-outlined',
+		required: false,
+	},
+	label: {
+		type: String,
+		default: () => '快捷方式',
+		required: false,
+	},
+	color: {
+		type: String,
+		default: () => '',
+		required: false,
+	},
+});
+// 颜色列表
+const colorList = ['#7265E6', '#FFBF00', '#00A2AE', '#F56A00', '#1890FF', '#606D80'];
+// 获取随机颜色
+const randomColor = () => {
+	if (props.color) {
+		return props.color;
+	}
+	return colorList[randomNum(0, colorList.length - 1)];
+};
+// 获取minNum到maxNum内的随机数
+const randomNum = (minNum, maxNum) => {
+	switch (arguments.length) {
+		case 1:
+			return parseInt(Math.random() * minNum + 1, 10);
+			// eslint-disable-next-line no-unreachable
+			break;
+		case 2:
+			return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+			// eslint-disable-next-line no-unreachable
+			break;
+		default:
+			return 0;
+			// eslint-disable-next-line no-unreachable
+			break;
+	}
+};
+</script>
+
+<style scoped>
+.container {
+	height: 60px;
+	/*border:1px solid var(--border-color-split);*/
+	border-radius: 5px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	/*实现渐变（时间变化效果）*/
+	-webkit-transition: all 0.5s;
+	-moz-transition: all 0.5s;
+	-ms-transition: all 0.5s;
+	-o-transition: all 0.5s;
+	transition: all 0.5s;
+}
+.container:hover {
+	background: var(--border-color-split);
+}
+.container-tag {
+	width: 42px;
+	height: 42px;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	margin-left: 10px;
+	font-size: 24px;
+}
+
+.container-span {
+	max-width: 60%;
+	font-weight: 500;
+	margin-left: 10px;
+	color: #6d6b6b;
+}
+</style>