提交一下

1

src/components/col-header/index.css

@@ -1,18 +1,38 @@
-
 .el-menu-item {
-    @apply my-0 mx-4 px-0 !important;
-  }
+  @apply my-0 mx-4 px-0 !important;
+}
+
 .topNav {
   @apply bg-black/[.2]
   /* background: rgba(0, 0, 0, 0.2); */
 }
+
 .logoWrap {
   @apply w-28
 }
+.navWrap {
 
+}
 .activeItem {
-  @apply text-white  border-b-[3px] border-b-transparent hover:text-[#1FF0C9] hover:border-b-[3px] hover:border-b-[#1FF0C9]
+  color: #1FF0C9 !important;
+  font-weight: 600;
 }
+
+.activeItem::after {
+  position: absolute;
+  content: "";
+  top: 95%;
+  left: 25%;
+  width: 50%;
+  height: 3px;
+  background-color: #1FF0C9;
+  z-index: 100;
+  transform: scaleX(1);
+  transform-origin: left;
+}
+
 .itemCenter {
+  position: relative;
   @apply text-lg h-full flex items-center box-border
+
 }

src/components/col-header/index.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
             <div class="logoWrap">
               <img class="w-full" src={logo} alt="" />
             </div>
-            <div class="flex space-x-[76px] md:space-x-16 ml-28 sm:ml-20 h-full">
+            <div class="flex space-x-[76px] md:space-x-16 ml-28 sm:ml-20 h-full navWrap">
               {this.navigator.map((item: any) => (
                 <a
                   href={item.href}
@@ -40,7 +40,7 @@ export default defineComponent({
                     item.current = true
                   }}
                   class={[
-                    item.current
+                    item.                        
                       ? 'text-[#1FF0C9] border-b-[3px] border-b-[#1FF0C9]'
                       : 'activeItem',
                     'itemCenter'