120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<template>
|
|
<div class="quick-actions">
|
|
<div class="actions-row">
|
|
<button
|
|
v-for="action in actions"
|
|
:key="action.label"
|
|
class="action-item"
|
|
@click="handleClick(action.to)"
|
|
>
|
|
<div class="item-icon" :style="{ background: action.bgColor }">
|
|
<component :is="getIconComponent(action.icon)" :style="{ color: action.color }" />
|
|
</div>
|
|
<span class="item-label">{{ action.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon } from 'tdesign-icons-vue';
|
|
|
|
const iconMap = {
|
|
upload: UploadIcon,
|
|
'cloud-upload': CloudUploadIcon,
|
|
edit: EditIcon,
|
|
bulletpoint: BulletpointIcon,
|
|
};
|
|
|
|
export default {
|
|
name: 'QuickActions',
|
|
components: {
|
|
UploadIcon,
|
|
CloudUploadIcon,
|
|
EditIcon,
|
|
BulletpointIcon,
|
|
},
|
|
data() {
|
|
return {
|
|
actions: [
|
|
{ label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E6F8F0', color: '#344F3D' },
|
|
{ label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E6F8F0', color: '#344F3D' },
|
|
{ label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#E6F8F0', color: '#344F3D' },
|
|
{ label: '资质申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#E6F8F0', color: '#344F3D' },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
getIconComponent(name) {
|
|
return iconMap[name] || UploadIcon;
|
|
},
|
|
handleClick(to) {
|
|
this.$router.push(to);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@green-primary: #48C666;
|
|
@text-dark: #003B1A;
|
|
@text-link: #008CFF;
|
|
@bg-card: #FFFFFF;
|
|
@border-light: #E5E6EB;
|
|
|
|
.quick-actions {
|
|
.actions-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
background: @bg-card;
|
|
border: none;
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
width: calc(33.33% - 6px);
|
|
min-width: 0;
|
|
|
|
&:hover {
|
|
background: #F5F7FA;
|
|
}
|
|
|
|
.item-icon {
|
|
display: flex;
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 16px;
|
|
border-radius: 6px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item-label {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: @text-dark;
|
|
text-align: center;
|
|
line-height: 1.67;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.quick-actions .actions-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.action-item {
|
|
min-width: 33.33%;
|
|
}
|
|
}
|
|
</style>
|