12/src/views/menu/IntroductionUpdate.vue

<template>
  <div class="parent-container">
    <div class="button-group">
      <el-button
        v-for="(button, index) in buttons"
        :key="index"
        type="primary"
        :class="{ 'is-active': currentTargetId === parseInt(button.targetId) }"
        @click="showComponent(parseInt(button.targetId))"
      >
        {{ button.label }}
      </el-button>
    </div>
    <IntroUpdateModal
      :targetId="currentTargetId"
      :isVisible="!!currentTargetId"
      @updateSuccess="handleUpdateSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import IntroUpdateModal from './IntroUpdateModal.vue';

const buttons = [
  { label: '软件简介更新', targetId: '1' },
  { label: '项目简介更新', targetId: '2' },
  { label: '研究成果更新', targetId: '3' },
  { label: '团队信息更新', targetId: '4' }
];

const currentTargetId = ref<number | null>(null);

const showComponent = (id: number) => {
  currentTargetId.value = id;
};

const handleUpdateSuccess = () => {
  console.log('子组件更新成功事件已接收');
};

// 页面加载时默认选中第一个按钮
onMounted(() => {
  showComponent(parseInt(buttons[0].targetId));
});
</script>

<style scoped>
.parent-container {
  padding: 10px;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  background: #f0f8ff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.button-group {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.el-button {
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: #e0f2ff; /* 正常状态背景色 */
  color: #007bff; /* 正常状态文字颜色 */
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.el-button:hover {
  background-color: #b3d9ff; /* 悬停状态背景色 */
  color: #0056b3; /* 悬停状态文字颜色 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.is-active {
  background-color: #007bff; /* 选中状态背景色 */
  color: white; /* 选中状态文字颜色 */
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}
</style>