尾部导航

src/components/WebsiteHeader/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="webHead">
     <el-row>
-      <el-col :span="8">
+      <el-col :span="5">
         <img src="@/assets/logo/logo.png" class="logo" />
       </el-col>
       <el-col :span="16">
@@ -23,6 +23,19 @@
               解决方案
             </div>
             <div class="show_box">
+              <div
+                v-for="item in categoryList"
+                class="pointer"
+                :class="
+                  pagePath == `/solution/${item.id}` ? 'x_blue _active' : ''
+                "
+                @click="handlePath(`/solution/${item.id}?name=${item.name}`)"
+              >
+                {{ item.name }}
+              </div>
+              <!--
+
+             
               <div
                 class="pointer"
                 :class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
@@ -55,6 +68,7 @@
               >
                 科研区域服务
               </div>
+               -->
             </div>
           </li>
           <li class="menu-item1">
@@ -84,7 +98,7 @@
               关于我们
             </div>
           </li>
-          <li class="menu-item1" style="display: flex; justify-content: center">
+          <li class="menu-item1 profile-menu-group" style="display: flex">
             <div
               v-if="!userStore.avatar"
               class="menu-item-tit"
@@ -93,9 +107,39 @@
             >
               登录注册
             </div>
-
-            <el-dropdown
-              v-else
+            <!-- <el-popover
+              
+              placement="bottom"
+              :title="`32`"
+              :width="200"
+              trigger="hover"
+              :content="userStore.nickName"
+            > -->
+            <!-- content="this is content, this is content, this is content" -->
+            <!-- <template #reference> -->
+            <div v-else class="avatar-wrapper">
+              <img :src="userStore.avatar" class="user-avatar" />
+              <i class="el-icon-caret-bottom" />
+            </div>
+            <!-- </template> -->
+            <!-- </el-popover> -->
+            <div
+              v-if="userStore.avatar"
+              class="menu-item-tit"
+              :class="pagePath == '/login' ? 'active' : ''"
+              @click="handlePage"
+            >
+              个人中心
+            </div>
+            <div
+              v-if="userStore.avatar"
+              class="menu-item-tit"
+              :class="pagePath == '/login' ? 'active' : ''"
+              @click="logout"
+            >
+              退出登录
+            </div>
+            <!-- <el-dropdown
               style="margin-top: 20px"
               class="avatar-container right-menu-item hover-effect"
               trigger="click"
@@ -106,17 +150,17 @@
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <!-- <router-link to="/identity/index"> -->
+                 // <router-link to="/identity/index">
                   <el-dropdown-item @click="handlePage"
                     >个人中心</el-dropdown-item
                   >
-                  <!-- </router-link> -->
+                 // </router-link>
                   <el-dropdown-item divided @click="logout">
                     <span>退出登录</span>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
-            </el-dropdown>
+            </el-dropdown> -->
           </li>
         </ul>
       </el-col>
@@ -130,12 +174,20 @@ import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import useUserStore from "@/store/modules/user";
+import { getCategory } from "@/api/website/solution";
 
 const userStore = useUserStore();
 let state = reactive({});
 let pagePath = ref("");
 const route = useRoute();
 const router = useRouter();
+
+const categoryList = ref([]);
+const loadCategoryList = async () => {
+  const { data } = await getCategory();
+  categoryList.value = data;
+};
+loadCategoryList();
 watch(
   () => route.path,
   (newVal, oldVal) => {
@@ -161,7 +213,8 @@ function handlePage() {
 
 function handlePath(path) {
   pagePath.value = path;
-  router.push(path);
+  // router.push(path);
+  window.open(path, "_blank");
 }
 function logout() {
   ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
@@ -211,6 +264,7 @@ dt {
   }
   .menu {
     display: flex;
+    // justify-content: space-between;
     .solution {
       position: relative;
       .show_box {
@@ -221,8 +275,9 @@ dt {
         text-align: center;
         background-color: red;
         div {
-          height: 42px;
-          line-height: 42px;
+          // height: 42px;
+          // line-height: 42px;
+          padding: 8px 0;
           font-size: 14px;
           color: #666666;
           background-color: #f2f6ff;
@@ -259,13 +314,22 @@ dt {
         border-bottom: 2.5px solid #000;
       }
     }
+    .profile-menu-group {
+      height: 71px;
+      flex: 2;
+      justify-content: space-between;
+      align-items: center;
+      // .avatar-wrapper {
+      //   padding-top: 25px;
+      // }
+    }
   }
 }
 </style>
 
 <style lang="scss" scoped>
 .user-avatar {
-  cursor: pointer;
+  // cursor: pointer;
   width: 40px;
   height: 40px;
   border-radius: 50%;