-
+
-
@@ -91,7 +82,7 @@ const transitionMain = defineComponent({
.app-main {
position: relative;
width: 100%;
- height: calc(100vh - 96px);
+ /* height: calc(100vh - 96px); */
overflow-x: hidden;
/* background: #fff; */
diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
deleted file mode 100644
index e8d8795..0000000
--- a/src/layout/components/tag/index.scss
+++ /dev/null
@@ -1,295 +0,0 @@
-@keyframes schedule-in-width {
- from {
- width: 0;
- }
-
- to {
- width: 100%;
- }
-}
-
-@keyframes schedule-out-width {
- from {
- width: 100%;
- }
-
- to {
- width: 0;
- }
-}
-
-@keyframes rotate {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
-}
-
-@keyframes close {
- from {
- transform: translate(-50%, -50%);
- }
-
- to {
- transform: translate(0, -50%);
- }
-}
-
-.tags-view {
- position: relative;
- display: flex;
- align-items: center;
- width: 100%;
- font-size: 14px;
- color: var(--el-text-color-primary);
- background: #fff;
- box-shadow: 0 0 1px #888;
-
- .scroll-item {
- position: relative;
- display: inline-block;
- height: 28px;
- padding: 0 6px;
- margin-right: 4px;
- line-height: 28px;
- cursor: pointer;
- border-radius: 3px 3px 0 0;
- box-shadow: 0 0 1px #888;
- transition: all 0.4s;
-
- .el-icon-close {
- position: absolute;
- top: 50%;
- font-size: 10px;
- color: var(--el-color-primary);
- cursor: pointer;
- transition: font-size 0.2s;
- transform: translate(-50%, -50%);
-
- &:hover {
- font-size: 13px;
- color: #fff;
- background: #b4bccc;
- border-radius: 50%;
- }
- }
-
- &.is-closable:not(:first-child) {
- &:hover {
- padding-right: 18px;
-
- &:not(.is-active) {
- .el-icon-close {
- animation: close 200ms ease-in forwards;
- }
- }
- }
- }
- }
-
- a {
- padding: 0 4px;
- color: var(--el-text-color-primary);
- text-decoration: none;
- }
-
- .scroll-container {
- position: relative;
- flex: 1;
- padding: 5px 0;
- overflow: hidden;
- white-space: nowrap;
-
- .tab {
- position: relative;
- float: left;
- overflow: visible;
- white-space: nowrap;
- list-style: none;
- transition: transform 0.5s ease-in-out;
-
- .scroll-item {
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-
- &:nth-child(1) {
- margin-left: 5px;
- }
- }
- }
- }
-
- /* 右键菜单 */
- .contextmenu {
- position: absolute;
- padding: 5px 0;
- margin: 0;
- font-size: 13px;
- font-weight: normal;
- color: var(--el-text-color-primary);
- white-space: nowrap;
- list-style-type: none;
- background: #fff;
- border-radius: 4px;
- outline: 0;
- box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
-
- li {
- display: flex;
- align-items: center;
- width: 100%;
- padding: 7px 12px;
- margin: 0;
- cursor: pointer;
-
- &:hover {
- color: var(--el-color-primary);
- }
-
- svg {
- display: block;
- margin-right: 0.5em;
- }
- }
- }
-}
-
-.el-dropdown-menu {
- li {
- display: flex;
- align-items: center;
- width: 100%;
- margin: 0;
- cursor: pointer;
-
- svg {
- display: block;
- margin-right: 0.5em;
- }
- }
-}
-
-.el-dropdown-menu__item:not(.is-disabled):hover {
- color: #606266;
- background: #f0f0f0;
-}
-
-:deep(.el-dropdown-menu__item) i {
- margin-right: 10px;
-}
-
-:deep(.el-dropdown-menu__item--divided) {
- margin: 1px 0;
-}
-
-.el-dropdown-menu__item--divided::before {
- margin: 0;
-}
-
-.el-dropdown-menu__item.is-disabled {
- cursor: not-allowed;
-}
-
-.scroll-item.is-active {
- position: relative;
- color: #fff;
-
- &:not(:first-child) {
- padding-right: 18px;
- }
-
- .el-icon-close {
- transform: translate(0, -50%);
- }
-
- a {
- color: var(--el-color-primary) !important;
- }
-}
-
-.arrow-left,
-.arrow-right,
-.arrow-down {
- position: relative;
- width: 40px;
- height: 38px;
- color: var(--el-text-color-primary);
-
- svg {
- position: absolute;
- left: 50%;
- width: 20px;
- height: 20px;
- transform: translate(-50%, 50%);
- }
-}
-
-.arrow-left {
- box-shadow: 5px 0 5px -6px #ccc;
-
- &:hover {
- cursor: w-resize;
- }
-}
-
-.arrow-right {
- border-right: 0.5px solid #ccc;
- box-shadow: -5px 0 5px -6px #ccc;
-
- &:hover {
- cursor: e-resize;
- }
-}
-
-/* 卡片模式下鼠标移入显示蓝色边框 */
-.card-in {
- color: var(--el-color-primary);
-
- a {
- color: var(--el-color-primary);
- }
-}
-
-/* 卡片模式下鼠标移出隐藏蓝色边框 */
-.card-out {
- color: #666;
- border: none;
-
- a {
- color: #666;
- }
-}
-
-/* 灵动模式 */
-.schedule-active {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 2px;
- background: var(--el-color-primary);
-}
-
-/* 灵动模式下鼠标移入显示蓝色进度条 */
-.schedule-in {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 2px;
- background: var(--el-color-primary);
- animation: schedule-in-width 200ms ease-in;
-}
-
-/* 灵动模式下鼠标移出隐藏蓝色进度条 */
-.schedule-out {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 0;
- height: 2px;
- background: var(--el-color-primary);
- animation: schedule-out-width 200ms ease-in;
-}
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 5957f29..ec3a5c5 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -1,611 +1,143 @@
-
-
-
-
-
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 5a49039..b8215a4 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,7 @@ import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
import AppHeader from "./components/appHeader/index.vue";
import appMain from "./components/appMain.vue";
-
+import tag from "./components/tag/index.vue";
const appWrapperRef = ref();
const pureSetting = useSettingStoreHook();
const { $storage } = useGlobal
();
@@ -56,6 +56,7 @@ onBeforeMount(() => {
@@ -94,4 +95,18 @@ onBeforeMount(() => {
.re-screen {
margin-top: 12px;
}
+.main-container {
+ position: relative;
+ min-width: 1500px;
+ height: 100vh;
+ min-height: 100%;
+
+ /* main-content 属性动画 */
+ transition: margin-left var(--pure-transition-duration);
+
+ .el-scrollbar__wrap {
+ height: 100%;
+ overflow: auto;
+ }
+}
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 3038129..dd63207 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -4,13 +4,13 @@ const { VITE_HIDE_HOME } = import.meta.env;
export const routerArrays: Array