|  |  | 
 |  |  |         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"> | 
 |  |  | 
 |  |  | 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' | 
 |  |  |   }; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | 
 |  |  |         fullPath: tagPath, | 
 |  |  |         path: tagPath, | 
 |  |  |         name: route.name, | 
 |  |  |         meta: { ...route.meta } | 
 |  |  |         meta: { ...route.meta }, | 
 |  |  |         isHover: false | 
 |  |  |       }) | 
 |  |  |     } | 
 |  |  |     if (route.children) { | 
 |  |  | 
 |  |  |       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; | 
 |  |  | 
 |  |  |  | 
 |  |  |       &: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; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } |