inital commit

src/content/ImageContent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="right-column">
+    <img :src="currentImage" alt="Cross" />
+  </div>
+</template>
+
+<script>
+import { menuData } from '../../config/menuData';
+
+export default {
+  name: 'ImageContent',
+  data() {
+    return {
+      defaultImage: '/images/homepage1.png',
+      currentImage: '/images/homepage1.png'
+    };
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler() {
+        this.updateImage();
+      }
+    }
+  },
+  methods: {
+    updateImage() {
+      const routePath = this.$route.path;
+      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 {
+  background-color: #d9e2f3;
+}
+
+.right-column h2 {
+  text-align: center;
+  color: #000;
+}
+
+.right-column img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  height: auto;
+}
+</style>