aircraft-web/src/views/mainContent/rightaside/analyzeWork.vue

<template>
  <!-- 分析工况 -->
  <div style="height: 100%;">
    <el-card class="custom-card">
      <template #header>
        <span>分析工况</span>
      </template>
      <el-space style="height: 100%;">
        <div v-for="item in btninfo">
          <el-button
            :key="item.name"
            class="work-btn"
            @click="handleWorkClick(item.name)"
          >
            <img
              :src="selectedWork === item.name ? item.highlightImg : item.img"
              alt="work icon"
            />
            <!-- {{ item.name }} -->
          </el-button>
        </div>
      </el-space>
    </el-card>
  </div>
</template>

<script setup>


import qidong from '@/assets/img/qidong.png'
import jiegou from '@/assets/img/jiegou.png'
import qitan from '@/assets/img/qitan.png'
import qidong1 from '@/assets/img/qidong1.png'
import jiegou1 from '@/assets/img/jiegou1.png'
import qitan1 from '@/assets/img/qitan1.png'

const selectedWork = ref('气动')

const btninfo = ref([
  { name: '气动', img: qidong, highlightImg: qidong1 },
  { name: '结构', img: jiegou, highlightImg: jiegou1 },
  { name: '气弹', img: qitan, highlightImg: qitan1 },
])

const handleWorkClick = (name) => {
  selectedWork.value = name
}

</script>

<style scoped>
.custom-card {
  width: 100%;
  height: 100%;
}
.work-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: transparent;
  border: none;
}

</style>