From 60e02bf7ed31843874d31c711f0befba994be826 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 05 九月 2024 20:19:45 +0800
Subject: [PATCH] 数据中心详情增加tab切换
---
src/views/system/data-manage/data-detail/index.vue | 33 ++++++++++++++++++++++++++++++++-
1 files changed, 32 insertions(+), 1 deletions(-)
diff --git a/src/views/system/data-manage/data-detail/index.vue b/src/views/system/data-manage/data-detail/index.vue
index ff10466..79edc9f 100644
--- a/src/views/system/data-manage/data-detail/index.vue
+++ b/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 {
--
Gitblit v1.8.0