cloudfile-ui/src/components/TopTabs/index.vue

<template>
  <div class="useBox">
    <!-- table切换 -->
    <div
      style="
        width: 100%;
        height: 24px;
        background-color: #7084b4;
        line-height: 20px;
      "
    >
      <template :key="item" v-for="(item, index) in menuList">
        <span
          @click="tableChange(item, index)"
          :class="['tables', { tableLis: selectedIndex === index }]"
        >
          {{ item.name }}
          <img
            v-if="selectedIndex === index ? true : false"
            style="position: absolute; top: 4px; right: 4px"
            src="../../assets/images/close.png"
            @click="shotdown(item)"
          />
        </span>
      </template>
    </div>
    <!-- 面包屑功能栏 -->
    <div class="breadBox">
      <!-- 左侧 -->
      <div
        style="
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <!-- 前进后退 -->
        <div
          style="
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img
            style="display: block; width: 11px; height: 11px"
            :src="blueLeft"
            alt=""
          />
          <img
            style="display: block; width: 16px; height: 16px"
            :src="grayRight"
            alt=""
          />
        </div>
        <!-- 面包屑 -->
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item style="font-size: 12px"
              >homepage</el-breadcrumb-item
            >
            <el-breadcrumb-item style="font-size: 12px"
              >promotion management</el-breadcrumb-item
            >
            <el-breadcrumb-item style="font-size: 12px"
              >promotion detail</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
      </div>
      <!-- 右侧 -->
      <div>
        <img :src="sort" alt="" />
        <img :src="squre" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import blueLeft from "../../assets/images/blueLeft.png";
import grayRight from "../../assets/images/grayRight.png";
let selectedIndex = ref(0);
let menuList = ref([
  {
    name: "标签1",
    choose: "1",
  },
  {
    name: "标签2",
    choose: "2",
  },
]);
// tableMenu切换
function tableChange(row, num) {
  this.selectedIndex = num;
}
// x图标事件
function shotdown(row) {
  this.menuList = this.menuList.filter((item) => item.name !== row.name);
}
</script>

<style lang="scss" scoped>
.useBox {
  width: 100%;
}
.tables {
  display: inline-block;
  width: 112px;
  height: 22px;
  border-radius: 4px;
  line-height: 21px;
  text-align: center;
  font-size: 12px;
  margin-left: 5px;
  position: relative;
}

.tableLis {
  display: inline-block;
  width: 112px;
  height: 22px;
  border-radius: 4px;
  background-color: #ebeff6;
  line-height: 21px;
  text-align: center;
  font-size: 12px;
  margin-left: 5px;
  position: relative;
}

.manyUse {
  width: 100%;
  height: 48px;
  /* background-color: gray; */
  line-height: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-dropdown-link {
  color: white;
}

.breadBox {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #d9e0f0;
}

::v-deep .el-collapse-item__header {
  height: 24px !important;
  background-color: #ebeff6 !important;
}
</style>