feat(v-header): 为导航项添加底部栏

- 在导航项底部添加了蓝色横线
- 实现了横线在鼠标悬停时扩展的动画效果
- 优化了导航项的样式和布局

src/views/components/v-header/index.vue

@@ -3,56 +3,78 @@
     <div class="v-container row">
       <div class="cjy-header-logo"></div>
       <div class="cjy-header-nav row">
-        <div class="nav-item" v-for="(item,index) in nav_list" :key="index" @click="gotoPages(item.url)">{{ item.title }}</div>
+        <div class="nav-item" v-for="(item, index) in nav_list" :key="index" @click="gotoPages(item.url)">{{ item.title
+          }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: "index",
-  data() {
-    return {
-      nav_list: []
-    }
-  },
-  mounted() {
-    this.getNavList()
-  },
-  methods: {
-    getNavList() {
-      this.nav_list = [
-        {title: "首页", url: ""},
-        {title: "解决方案", url: ""},
-        {title: "经典案例", url: "/case-list"},
-        {title: "新闻资讯", url: "/news-list"},
-        {title: "关于我们 ", url: "/about-us"}
-      ]
+  export default {
+    name: "index",
+    data() {
+      return {
+        nav_list: []
+      }
+    },
+    mounted() {
+      this.getNavList()
     },
-    // 跳转页面 函数
-    gotoPages(val) {
-      this.$router.push(val)
+    methods: {
+      getNavList() {
+        this.nav_list = [
+          { title: "首页", url: "" },
+          { title: "解决方案", url: "" },
+          { title: "经典案例", url: "/case-list" },
+          { title: "新闻资讯", url: "/news-list" },
+          { title: "关于我们 ", url: "/about-us" }
+        ]
+      },
+      // 跳转页面 函数
+      gotoPages(val) {
+        this.$router.push(val)
+      }
     }
   }
-}
 </script>
 
 <style scoped lang="scss">
-.cjy-header {
-  height: 100px;
-  background-color: #fff;
+  .cjy-header {
+    height: 100px;
+    background-color: #fff;
+
+    .cjy-header-nav {
+      margin-left: 40px;
+      padding-top: 35px;
+
+      .nav-item {
+        margin: 0 30px;
+        color: #2A333D;
+        font-size: 16px;
+        cursor: pointer;
+      }
+
+      .nav-item {
+        position: relative;
+      }
 
-  .cjy-header-nav {
-    margin-left: 40px;
-    padding-top: 35px;
+      .nav-item::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #0B59B3;
+        transform-origin: center;
+        transform: translate(-50%, 0) scaleX(0);
+        transition: transform 0.3s ease-in-out;
+      }
 
-    .nav-item {
-      margin: 0 30px;
-      color: #2A333D;
-      font-size: 16px;
-      cursor: pointer;
+      .nav-item:hover::before {
+        transform: translate(-50%, 0) scaleX(1);
+      }
     }
   }
-}
 </style>