accompany_admin_pc/src/views/home/compoents/SubDashBoardQuick.vue

77 lines
1.5 KiB
Vue
Raw Normal View History

2025-07-05 14:11:07 +08:00
<template>
<header>
<img src="@/assets/icons/mainproject.svg">
<p class="title">快捷跳转</p>
</header>
<main>
<div class="icon__item">
<div class="icon">
<img src="@/assets/icons/order.svg">
</div>
<p>系统菜单</p>
</div>
</main>
</template>
<script setup lang='ts'>
</script>
<style scoped lang='scss'>
header {
height: 40px;
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid $dashLineColor;
gap: 4px;
img {
width: 16px;
height: 16px;
}
.title {
color: $titleTextColor;
font-weight: bold;
}
}
main {
min-height: 40px;
padding: 16px;
display: flex;
gap: 12px;
.icon__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:4px;
cursor: pointer;
&:hover{
p{
color:$primaryColor;
}
}
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background:$primaryColor;
border-radius: 4px;
img{
height: 25px;
width: 25px;
}
}
> p{
font-size: 12px;
font-weight: 400;
color:#666;
}
}
}
</style>