webHead up

src/components/webHead/index.vue

@@ -2,29 +2,97 @@
   <div class="webHead">
     <el-row>
       <el-col :span="8">
-        <img src="../../assets/logo.png" class="logo">
+        <img src="../../assets/logo.png" class="logo" />
       </el-col>
       <el-col :span="16">
         <ul class="menu">
           <li class="menu-item1">
-            <div class="menu-item-tit">首页</div>
+            <div
+              class="menu-item-tit"
+              :class="pagePath == '' ? 'active' : ''"
+              @click="handlePath('')"
+            >
+              首页
+            </div>
+          </li>
+          <li class="menu-item1 solution">
+            <div
+              class="menu-item-tit"
+              :class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
+            >
+              解决方案
+            </div>
+            <div class="show_box">
+              <div
+                class="pointer"
+                :class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
+                @click="handlePath('/solution/small')"
+              >
+                中小型企业服务
+              </div>
+              <div
+                class="pointer"
+                :class="pagePath == '/solution/large' ? 'x_blue _active' : ''"
+                @click="handlePath('/solution/large')"
+              >
+                大型企业服务
+              </div>
+              <div
+                class="pointer"
+                :class="
+                  pagePath == '/solution/government' ? 'x_blue _active' : ''
+                "
+                @click="handlePath('/solution/government')"
+              >
+                政府区域服务
+              </div>
+              <div
+                class="pointer"
+                :class="
+                  pagePath == '/solution/scientific' ? 'x_blue _active' : ''
+                "
+                @click="handlePath('/solution/scientific')"
+              >
+                科研区域服务
+              </div>
+            </div>
           </li>
           <li class="menu-item1">
-            <div class="menu-item-tit">解决方案</div>
+            <div
+              class="menu-item-tit"
+              :class="pagePath == '/innovate' ? 'active' : ''"
+              @click="handlePath('/innovate')"
+            >
+              创新服务
+            </div>
           </li>
           <li class="menu-item1">
-            <div class="menu-item-tit">创新服务</div>
+            <div
+              class="menu-item-tit"
+              :class="pagePath == '/activity' ? 'active' : ''"
+              @click="handlePath('/activity')"
+            >
+              活动报名
+            </div>
           </li>
           <li class="menu-item1">
-            <div class="menu-item-tit">活动报名</div>
+            <div
+              class="menu-item-tit"
+              :class="pagePath == '/about' ? 'active' : ''"
+              @click="handlePath('/about')"
+            >
+              关于我们
+            </div>
           </li>
           <li class="menu-item1">
-            <div class="menu-item-tit">关于我们</div>
+            <div
+              class="menu-item-tit"
+              :class="pagePath == '/login' ? 'active' : ''"
+              @click="handlePath('/login')"
+            >
+              登录注册
+            </div>
           </li>
-          <li class="menu-item1">
-            <div class="menu-item-tit active">登录注册</div>
-          </li>
-
         </ul>
       </el-col>
     </el-row>
@@ -32,11 +100,25 @@
 </template>
 
 <script setup>
-import { defineComponent, onMounted, reactive } from "vue";
+import { defineComponent, onMounted, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 let state = reactive({});
+let pagePath = ref("");
+const route = useRoute();
+const router = useRouter();
+watch(
+  () => route.path,
+  (newVal, oldVal) => {
+    pagePath.value = newVal;
+  }
+);
 onMounted(() => {
-  console.log("onmunted");
+  pagePath.value = route.path;
 });
+function handlePath(path) {
+  pagePath.value = path;
+  router.push(path);
+}
 </script>
 
 <style lang="scss">
@@ -55,6 +137,7 @@ dt {
 }
 .webHead {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
@@ -69,9 +152,34 @@ dt {
   }
   .menu {
     display: flex;
+    .solution {
+      position: relative;
+      .show_box {
+        display: none;
+        position: absolute;
+        z-index: 2001;
+        bottom: -170px;
+        width: 100%;
+        text-align: center;
+        background-color: red;
+        div {
+          height: 42px;
+          line-height: 42px;
+          background-color: #f2f6ff;
+        }
+        ._active {
+          background-color: #fff;
+        }
+      }
+      &:hover {
+        .show_box {
+          display: block;
+        }
+      }
+    }
     .menu-item1 {
       flex: 1;
-      text-align: right;
+      text-align: center;
       .menu-item-tit {
         display: inline-block;
         padding: 25px 0;