初版页面美化

Zhu Zhonghua

2025-04-11 05e86e6cc5facb8aa059ca1b21eefb0e73db2180

 src/layout/components/TagsView/index.vue

@@ -10,12 +10,15 @@
        class="tags-view-item"
        :style="activeStyle(tag)"
        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent="openMenu(tag, $event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
        </span>
        @contextmenu.prevent="openMenu(tag, $event)">
        <div
          @mouseover.stop="tag.isHover = true"
          @mouseout.stop="tag.isHover = false">
          {{ tag.title }}
          <span v-show="!isAffix(tag) && tag.isHover" @click.prevent.stop="closeSelectedTag(tag)">
            <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
          </span>
        </div>
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
@@ -88,8 +91,10 @@
function activeStyle(tag) {
  if (!isActive(tag)) return {};
  return {
    "background-color": theme.value,
    "border-color": theme.value
    // "background-color": theme.value,
    // "border-color": theme.value
    'border-bottom': '2px solid #409eff',
    color: '#409eff'
  };
}

@@ -122,7 +127,8 @@
        fullPath: tagPath,
        path: tagPath,
        name: route.name,
        meta: { ...route.meta }
        meta: { ...route.meta },
        isHover: false
      })
    }
    if (route.children) {
@@ -272,9 +278,9 @@
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid var(--tags-item-border, #d8dce5);
      color: var(--tags-item-text, #495060);
      background: var(--tags-item-bg, #fff);
      // border: 1px solid var(--tags-item-border, #d8dce5);
      // color: var(--tags-item-text, #495060);
      // background: var(--tags-item-bg, #fff);
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
@@ -286,23 +292,6 @@

      &:last-of-type {
        margin-right: 15px;
      }

      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;

        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: relative;
          margin-right: 5px;
        }
      }
    }
  }