69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
|
<img :src="currentImage" />
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
name: 'ImageContent',
|
|
data() {
|
|
return {
|
|
defaultImage: '/images/homepage1.png',
|
|
currentImage: '/images/homepage1.png'
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['menuData']),
|
|
},
|
|
watch: {
|
|
$route: {
|
|
immediate: true,
|
|
handler() {
|
|
this.updateImage();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
updateImage() {
|
|
const routePath = this.$route.path;
|
|
const menuData = this.menuData;
|
|
const menuItem = this.findMenuItemByPath(menuData, routePath);
|
|
if (menuItem && menuItem.image) {
|
|
this.currentImage = `/images/${menuItem.image}`;
|
|
} else {
|
|
this.currentImage = this.defaultImage;
|
|
}
|
|
},
|
|
findMenuItemByPath(menu, path) {
|
|
for (let item of menu) {
|
|
if (item.link === path) {
|
|
return item;
|
|
}
|
|
if (item.submenu) {
|
|
const subItem = this.findMenuItemByPath(item.submenu, path);
|
|
if (subItem) {
|
|
return subItem;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.right-column h2 {
|
|
text-align: center;
|
|
color: #000;
|
|
}
|
|
|
|
.right-column img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|