From 83e34f69b7b5edf713d25bbec164e47f924edb31 Mon Sep 17 00:00:00 2001
From: Junjie <540245094@qq.com>
Date: 星期二, 10 九月 2024 13:30:32 +0800
Subject: [PATCH] #
---
zy-asrs-admin/src/views/IndexView.vue | 42 +++++++++++++++++----
zy-asrs-admin/src/assets/main.css | 66 ++++++++++++++++++++++++++++++---
2 files changed, 94 insertions(+), 14 deletions(-)
diff --git a/zy-asrs-admin/src/assets/main.css b/zy-asrs-admin/src/assets/main.css
index 686402f..db794de 100644
--- a/zy-asrs-admin/src/assets/main.css
+++ b/zy-asrs-admin/src/assets/main.css
@@ -101,13 +101,67 @@
}
.tabs-fixed {
+ width: 100%;
position: relative;
top: -64px;
left: -24px;
display: flex;
}
+.tabs-arrow-left {
+ position: absolute;
+
+ width: 40px;
+ height: 30px;
+ background: #fff;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ padding: 20px 0px;
+ cursor: pointer;
+ margin-right: 5px;
+ user-select: none;
+}
+
+.tabs-arrow-right {
+ position: absolute;
+ right: -54px;
+
+ width: 40px;
+ height: 30px;
+ background: #fff;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ padding: 20px 0px;
+ cursor: pointer;
+ margin-right: 5px;
+ user-select: none;
+}
+
+.tabs-arrow-left {
+ float: left;
+}
+
+.tabs-content {
+ width: 97%;
+ display: flex;
+ margin-left: 45px;
+ margin-right: 25px;
+ overflow-x: scroll;
+ will-change: transform;
+ transition: transform 0.3s;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+}
+
+.tabs-content-item {
+ flex: 10;
+ display: flex;
+}
+
.tabs-item {
+ min-width: 120px;
height: 30px;
background: #fff;
display: flex;
@@ -120,8 +174,8 @@
}
.tabs-item>div:nth-child(1) {
- margin-right: 10px;
- margin-left: 10px;
+ margin-right: 5px;
+ margin-left: 5px;
}
.tabs-item>div:nth-child(1):hover {
@@ -129,13 +183,13 @@
}
.tabs-item>div:nth-child(2) {
- margin-right: 10px;
- margin-left: 10px;
+ margin-right: 5px;
+ margin-left: 5px;
}
.tabs-item>div:nth-child(3) {
- margin-right: 10px;
- margin-left: 10px;
+ margin-right: 5px;
+ margin-left: 5px;
}
.tabs-item>div:nth-child(3):hover {
diff --git a/zy-asrs-admin/src/views/IndexView.vue b/zy-asrs-admin/src/views/IndexView.vue
index 95d73b6..858fcdb 100644
--- a/zy-asrs-admin/src/views/IndexView.vue
+++ b/zy-asrs-admin/src/views/IndexView.vue
@@ -14,6 +14,8 @@
UserOutlined,
TranslationOutlined,
ApartmentOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
} from "@ant-design/icons-vue";
import { formatMessage, loadData } from '@/utils/localeUtils.js';
import AiView from '@/components/ai/index.vue'
@@ -29,6 +31,7 @@
let isRouterAlive = ref(true);
const menuCache = ref([]);
const hostList = ref([]);
+const tabsContent = ref(null);
const components = {
...Icons,
@@ -210,6 +213,16 @@
window.location.reload();
}
+const handleScroll = (data) => {
+ let position = tabsContent.value.scrollLeft;
+ let offset = position * 0.1 + 30;
+ if (data == 'left') {
+ tabsContent.value.scrollLeft = position - offset;
+ } else {
+ tabsContent.value.scrollLeft = position + offset;
+ }
+}
+
</script>
<template>
@@ -303,17 +316,30 @@
</a-layout-header>
<a-layout-content class="content-view">
<div class="tabs-fixed">
- <div v-for="(item, index) in routerCacheList" :key="index" @click="switchTabs(item)" class="tabs-item"
- :class="currentCache == item.name ? 'tabs-item-active' : ''">
- <div :class="currentCache == item.name ? '' : 'tabs-item-reload-none'" @click="reloadTabs" @click.stop>
- <RedoOutlined />
- </div>
- <div>{{ formatMessage(item.languageId, item.name) }}</div>
- <div @click="closeTabs(item)" @click.stop>
- <CloseOutlined />
+ <div class="tabs-arrow-left" @click="handleScroll('left')">
+ <CaretLeftOutlined />
+ </div>
+
+ <div class="tabs-content" ref="tabsContent">
+ <div class="tabs-content-item">
+ <div v-for="(item, index) in routerCacheList" :key="index" @click="switchTabs(item)" class="tabs-item"
+ :class="currentCache == item.name ? 'tabs-item-active' : ''">
+ <div :class="currentCache == item.name ? '' : 'tabs-item-reload-none'" @click="reloadTabs" @click.stop>
+ <RedoOutlined />
+ </div>
+ <div>{{ formatMessage(item.languageId, item.name) }}</div>
+ <div @click="closeTabs(item)" @click.stop>
+ <CloseOutlined />
+ </div>
+ </div>
</div>
</div>
+
+ <div class="tabs-arrow-right" @click="handleScroll('right')">
+ <CaretRightOutlined />
+ </div>
</div>
+
<router-view v-slot="{ Component, route }" v-if="isRouterAlive">
<keep-alive :include="routerCache">
<component :is="Component" @pageReload="reloadTabs" />
--
Gitblit v1.9.1