From 7c823d93077738368b52a3cab0867ad485678739 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期四, 25 七月 2024 11:00:23 +0800
Subject: [PATCH] 知识库列表页面修改
---
src/views/dmx/knowledgeLib/index.vue | 53 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 49 insertions(+), 4 deletions(-)
diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue
index 7680fec..34a2728 100644
--- a/src/views/dmx/knowledgeLib/index.vue
+++ b/src/views/dmx/knowledgeLib/index.vue
@@ -6,7 +6,7 @@
<div class="lf-container-top">
<a-input-search
:placeholder="$t('cardList.searchInput.placeholder')"
- style="width: 110px;"
+ style="width: 130px;"
/>
<a-button type="primary" @click="add" style="margin-left: 10px">
<template #icon>
@@ -15,7 +15,17 @@
</a-button>
</div>
<div class="lf-container-down">
-
+ <div class="tabs">
+ <div
+ class="tab"
+ v-for="(tab, index) in tabs"
+ :key="index"
+ @click="selectTab(index)"
+ :class="{ 'active': selectedTab === index }"
+ >
+ {{ tab }}
+ </div>
+ </div>
</div>
</div>
<div class="rt-container">
@@ -314,6 +324,12 @@
const size = ref<SizeProps>('medium');
let visible = ref(false)
+ let selectedTab = ref(0)
+ let tabs = reactive(['Tab 1', 'Tab 2', 'Tab 3'])
+
+ const selectTab = (index) => {
+ selectedTab.value= index;
+ }
const basePagination: Pagination = {
current: 1,
@@ -547,9 +563,38 @@
display: flex;
}
.lf-container-down{
- width: 80%;
+ display: flex;
+ flex-direction: column;
+ width: 90%;
height: calc(100% - 5rem);
- border: 1px solid #cccccc;
+ border: 1px solid #eeeeee;
+ overflow: auto;
+ padding: 10px;
+ .tabs .tab {
+ cursor: pointer;
+ box-sizing: border-box;
+ margin: 10px 0;
+ padding:0 10px;
+ color: rgba(0, 0, 0, 0.88);
+ font-size: 14px;
+ height: 40px;
+ line-height: 40px;
+ list-style: none;
+ position: relative;
+ background: #ffffff;
+ border: 1px solid #f0f0f0;
+ border-radius: 8px;
+ }
+ .tabs .tab:hover {
+ border: 1px solid #ffffff;
+ background: #e8e8ea;
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+ }
+ .tabs .tab.active {
+ border: 1px solid #e8e8ea;
+ background: #e8e8ea;
+ cursor: pointer;
+ }
}
}
.rt-container{
--
Gitblit v1.8.0