data-marketing-platform/src/components/ShortcutCard/index.vue

<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>