数据中心详情增加tab切换

xiangpei

2024-09-05 60e02bf7ed31843874d31c711f0befba994be826

数据中心详情增加tab切换

 src/views/system/data-manage/data-detail/index.vue

@@ -1,5 +1,9 @@
<template>
  <div class="app-container">
    <div style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px">
      <div @click="allData(0)" class="tab" :class="{tabActive: 0 === selected, tabInactive: 0 !== selected}">全部</div>
      <div @click="provinceData(1)" class="tab" :class="{tabActive: 1 === selected, tabInactive: 1 !== selected}">省厅考核</div>
    </div>
    <el-card class="box-card" v-show="index !== 'image_resource_security'">
      <el-row style="display: flex; flex-direction: row; align-items: center" justify="space-between">
        <div style="font-size: 18px;min-width: 200px;height: 80px;display: flex;align-items: center">{{ruleName}}</div>
@@ -160,6 +164,7 @@
  },
  data() {
    return {
      selected: 0,
      // 导入参数
      upload: {
        // 是否显示弹出层
@@ -277,6 +282,12 @@
    this.getList();
  },
  methods: {
    allData(active) {
      this.selected = active
    },
    provinceData(active) {
      this.selected = active
    },
    showListPD(item) {
      if (!this.showList) {
        return true
@@ -399,11 +410,31 @@
};
</script>
<style scoped>
.tab {
  padding: 5px 15px;
}
.tab:hover {
  cursor: pointer;
  user-select: none;
}
.tabActive {
  color: white;
  background-color: #409eff;
  border: none;
  border-radius: 1px;
}
.tabInactive {
  background-color: #edf2f6;
  color: #409eff;
}
.tabInactive:hover {
  background-color: #edf2f6;
}
.box-card {
  background-color: #F5F9FE;
  width: 100%;
  margin-bottom: 20px;
  height: 120px
  height: 160px
}

.icon-container {