|
|
@@ -35,14 +35,20 @@
|
|
|
:span="4"
|
|
|
:xs="8"
|
|
|
class="quick-entrance-items"
|
|
|
- @click="toTarget(card.name)"
|
|
|
+ @click="toTarget(card)"
|
|
|
>
|
|
|
<div class="quick-entrance-item">
|
|
|
<div
|
|
|
class="quick-entrance-item-icon"
|
|
|
- :style="{ backgroundColor: card.bg }"
|
|
|
+ :style="card.image ? {} : { backgroundColor: card.bg }"
|
|
|
>
|
|
|
- <el-icon>
|
|
|
+ <img
|
|
|
+ v-if="card.image"
|
|
|
+ :src="card.image"
|
|
|
+ :alt="card.label"
|
|
|
+ class="quick-entrance-img"
|
|
|
+ />
|
|
|
+ <el-icon v-else>
|
|
|
<component
|
|
|
:is="card.icon"
|
|
|
:style="{ color: card.color }"
|
|
|
@@ -85,6 +91,10 @@ import DashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
|
|
|
import { ref } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { useWeatherInfo } from '@/view/dashboard/weather.js'
|
|
|
+import imgTemplateCreate from '@/assets/模板创建.png'
|
|
|
+import imgMaterialUpload from '@/assets/素材上传.png'
|
|
|
+import imgTemplatePublish from '@/assets/模板发布.png'
|
|
|
+import imgMaterialDesign from '@/assets/素材设计.png'
|
|
|
// import {
|
|
|
// index
|
|
|
// } from '@/api/jixiaoguanli/jitairibaobiao'
|
|
|
@@ -103,55 +113,21 @@ const labelValue1=ref()
|
|
|
const labelValue2=ref()
|
|
|
const labelValue3=ref()
|
|
|
const labelValue4=ref()
|
|
|
+
|
|
|
const toolCards = ref([
|
|
|
- {
|
|
|
- label: '用户管理',
|
|
|
- icon: 'monitor',
|
|
|
- name: 'user',
|
|
|
- color: '#ff9c6e',
|
|
|
- bg: 'rgba(255, 156, 110,.3)'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '角色管理',
|
|
|
- icon: 'setting',
|
|
|
- name: 'authority',
|
|
|
- color: '#69c0ff',
|
|
|
- bg: 'rgba(105, 192, 255,.3)'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '菜单管理',
|
|
|
- icon: 'menu',
|
|
|
- name: 'menu',
|
|
|
- color: '#b37feb',
|
|
|
- bg: 'rgba(179, 127, 235,.3)'
|
|
|
- },
|
|
|
- // {
|
|
|
- // label: '代码生成器',
|
|
|
- // icon: 'cpu',
|
|
|
- // name: 'autoCode',
|
|
|
- // color: '#ffd666',
|
|
|
- // bg: 'rgba(255, 214, 102,.3)'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // label: '表单生成器',
|
|
|
- // icon: 'document-checked',
|
|
|
- // name: 'formCreate',
|
|
|
- // color: '#ff85c0',
|
|
|
- // bg: 'rgba(255, 133, 192,.3)'
|
|
|
- // },
|
|
|
- {
|
|
|
- label: '关于我们',
|
|
|
- icon: 'user',
|
|
|
- name: 'about',
|
|
|
- color: '#5cdbd3',
|
|
|
- bg: 'rgba(92, 219, 211,.3)'
|
|
|
- }
|
|
|
+ { label: '创建模版', image: imgTemplateCreate, path: '/layout/TemplateManagement/CreateTemplate' },
|
|
|
+ { label: '素材上传', image: imgMaterialUpload, path: '#' },
|
|
|
+ { label: '模板发布', image: imgTemplatePublish, path: '/layout/TemplateManagement/TemplateDesign' }
|
|
|
])
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
-const toTarget = (name) => {
|
|
|
- router.push({ name })
|
|
|
+const toTarget = (card) => {
|
|
|
+ if (card.path) {
|
|
|
+ router.push(card.path)
|
|
|
+ } else {
|
|
|
+ router.push({ name: card.name })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@@ -209,7 +185,12 @@ const toTarget = (name) => {
|
|
|
@apply shadow-lg;
|
|
|
}
|
|
|
&-icon {
|
|
|
- @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
|
|
|
+ @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl overflow-hidden;
|
|
|
+ }
|
|
|
+ .quick-entrance-img {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
p {
|
|
|
@apply mt-2.5;
|