点那个高亮那个

点击那个高亮那个 动态类名

 <div class="bottom_box">
          <div class="manage1" :class="{ fontColor: showPage == 'page1' }">
            <el-icon>
              <HelpFilled />
            </el-icon>
            <span @click="pageOneshow">
              1
            </span>
          </div>
          <div class="manage2" :class="{ fontColor: showPage == 'page2' }">
            <el-icon>
              <SetUp />
            </el-icon>
            <span @click="pageTwoshow">
             2
            </span>
          </div>
          <div class="manage3" :class="{ fontColor: showPage == 'page3' }">
            <el-icon>
              <MapLocation />
            </el-icon>
            <span @click="pageThreeshow">
              3
            </span>
          </div>
          <div class="manage4" id="manage4">
            <span @click="go4">
              4
            </span>
          </div>
        </div>

事件

// 点击日常管理场景
const showPage = ref(showPages.page1);
function pageOneshow() {
  // pageoneshow.value = true;
  showPage.value = 'page1'
}
// 点击调度配置场景
function pageTwoshow() {
  showPage.value = 'page2'
}
// 点击调度配置场景
function pageThreeshow() {
  showPage.value = 'page3'
}
// 返回主菜单
function go4() {
}

高亮

.fontColor {
  // color: #fff;
  background-color: rgba(0, 0, 0, 0); //黑色背景：黑
  color: white; //字体颜色：白
  text-shadow: 0 0 10px rgb(0, 255, 242), 0 0 20px rgb(0, 255, 255), 0 0 30px rgb(0, 255, 221), 0 0 40px rgb(0, 217, 255); //设置发光效果
}