首页顶部导航

src/components/public/head.vue

@@ -4,7 +4,7 @@
             <div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">
                 {{ item }}</div>
             <img class="header-nav-item header-user-img"
-                src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
+                src="">
         </nav>
         <div class="logo-box flexacenter">
             <img class="logo-icon" src="@/assets/img/edit/logo.png" />
@@ -15,7 +15,15 @@
 
         <nav class="nav-box flexflex">
             <div class="nav-list wid1200 flexflex">
-                <div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
+                <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in tabList"
+                    :key="i">
+                    <el-badge :value="12">
+                        <div class="pd-rl-10">
+                           {{ item.name }} 
+                        </div>
+                    </el-badge>
+
+                </div>
             </div>
         </nav>
     </header>
@@ -140,15 +148,55 @@ const tabList = [{
         transform: translateX(-50%);
         margin: 0 auto;
         width: 100%;
-        height: 43px;
+        height: 50px;
         background: rgba(0, 0, 0, 0.596078431372549);
         border-bottom: 4px solid rgba(78, 144, 204, 1);
 
         .nav-list {
-            background: red;
+            color: #E2EDF7;
+            text-align: center;
             margin: 0 auto;
         }
 
     }
 }
+
+.tab-btn {
+    width: 120px;
+    height: 46px;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 18px;
+    color: #E2EDF7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .pd-rl-10{
+       padding:0 10px;
+    }
+}
+
+.tab-btn-click {
+    background-color: rgba(98, 177, 255, 1);
+    border: none;
+    border-bottom: 0px;
+    border-radius: 8px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 18px;
+    color: #FFFFFF;
+}
+
+.carousel-img {
+    margin: 0 auto;
+    width: 660px;
+    height: 280px;
+}
 </style>