ghjg-digital-twin/src/views/home/cpns/MiForChange.vue

<template>
  <div>
    <div id="MiForChange">
      <ul>
        <li v-for="item,index in hightLightSomeOne" :class="{'highlight'  : item.status}">
          <span @click="showMi(item,index)">{{ item.name }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  name: 'MiForChange'
}
</script>

<script setup>
import 'element-plus/es/components/date-picker/style/css'
import {
  ueCallChangeMi
} from '@/utils/UIInteractions'
import {reactive} from "vue";

const hightLightSomeOne = reactive([
  // { name: '50m', status: false },
  { name: '100m', status: false }
])

// eslint-disable-next-line no-unused-vars
function showMi(mi,index){
  hightLightSomeOne[index].status= !hightLightSomeOne[index].status
  hightLightSomeOne.forEach((item,indexs)=>{
    if (index!=indexs) {
      item.status = false
    }
  })

  ueCallChangeMi(mi.name)
}

</script>

<style lang="scss" scoped>
#MiForChange {
  position: absolute;
  height: 40px;
  bottom: -37px;
  left: 63%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  ul li{
    ransform: translateX(-50%);
    list-style: none;
    float: left;
    margin-right: 10px;
    font-size: 18px;
    font-weight: bold;}

   ul .highlight{
         span {
           color: #f0d60d;
         }

  }

}


</style>