From d859a41bbb1cb5110a34f4147e0d934f3f6842ea Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Wed, 28 Sep 2022 11:44:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=9A=84top=E5=AF=BC=E8=88=AA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PortalHeader.vue        | 39 +++++++-------
 src/layout/components/TopNav/Index.vue | 73 ++++++++++++++++----------
 2 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/src/components/PortalHeader.vue b/src/components/PortalHeader.vue
index f826f43d..8ec44ace 100644
--- a/src/components/PortalHeader.vue
+++ b/src/components/PortalHeader.vue
@@ -151,6 +151,7 @@ export default {
   },
   data() {
     return {
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       findType: '1',
       keyword: '',
       isTiao: false,
@@ -304,7 +305,7 @@ export default {
 }
 .portal-top{
   width: 100%;
-  margin: 0px 30px;
+  margin: 0px 40px;
   display: flex;
   justify-content:space-between;
   .portal-top-left{
@@ -332,7 +333,7 @@ export default {
     justify-content: flex-end;
     align-items: center;
     margin-left: 10px;
-    
+
     .person-action-index{
       //margin-left: 40px;
       font-size: 14px;
@@ -372,6 +373,8 @@ export default {
   position: relative;
 }
 
+//此处理应该移到单独的一个样式中比较好
+
 @media screen and (max-width: 1366px){
   .top-nav {
     padding: 0px 10px;
@@ -439,22 +442,22 @@ export default {
   cursor: pointer;
   color: #000000;
 }
- .uavatar{
-   div{
-     border-radius: 50%;
-     img{
-       border-radius: 50%;
-       width: 30px;
-       height: 30px;
-     }
-   }
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    margin-right: 8px;
-    border-radius: 50%;
-  }
+ // .uavatar{
+ //   div{
+ //     border-radius: 50%;
+ //     img{
+ //       border-radius: 50%;
+ //       width: 30px;
+ //       height: 30px;
+ //     }
+ //   }
+ //    width: 30px;
+ //    height: 30px;
+ //    line-height: 30px;
+ //    font-size: 14px;
+ //    margin-right: 8px;
+ //    border-radius: 50%;
+ //  }
   .user-avatar{
     display: inline-block;
     border-radius: 50%;
diff --git a/src/layout/components/TopNav/Index.vue b/src/layout/components/TopNav/Index.vue
index 54c6dc3e..a116db25 100644
--- a/src/layout/components/TopNav/Index.vue
+++ b/src/layout/components/TopNav/Index.vue
@@ -1,18 +1,17 @@
 <template>
   <div>
     <div class="xtop">
-      <div class="xtop-content xcontent" style="margin:0 40px">
+      <div class="xtop-content">
       <div class="xtop-left">
-        <!-- <div> -->
-          <router-link class="routerLink" to="/index"><img src="../../../assets/logo/logo2.png" style="width:240px;height: 40px;" /></router-link> 
-        <!-- </div> -->
+        <div class="xtop-logo">
+          <router-link class="routerLink" to="/index"><img src="../../../assets/logo/logo2.png" style="width:240px;height: 41px;" /></router-link>
+        </div>
         <div class="xtop-nav">
-          <div><a :href="`${webBaseUrl}/index`">首页</a></div>
-          <div><a :href="`${webBaseUrl}/course`">课程</a></div>
-          
-          <div><a :href="`${webBaseUrl}/article`">文章</a></div>
-          <div><a :href="`${webBaseUrl}/qa`">问答</a></div>
-          <div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/index`">首页</a></div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/course`">课程</a></div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/article`">文章</a></div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/qa`">问答</a></div>
+          <div class="xtop-nav-item">
             <el-dropdown placement="bottom" @command="handleCommand">
               <span class="el-dropdown-link" style="color:#fff;font-size:16px;cursor: pointer;">专区</span>
               <el-dropdown-menu slot="dropdown">
@@ -24,11 +23,11 @@
               </el-dropdown-menu>
             </el-dropdown>
           </div>
-          <div><a :href="`${webBaseUrl}/case`">推荐案例</a></div>
-          <div><a :href="`${webBaseUrl}/follow`">我的关注</a></div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/case`">推荐案例</a></div>
+          <div class="xtop-nav-item"><a :href="`${webBaseUrl}/follow`">我的关注</a></div>
         </div>
       </div>
-      <div class="xtop-right" style="display: flex;justify-content: flex-end;align-items: center;">
+      <div class="xtop-right">
          <!-- <div style="margin-left:250px;margin-right:50px;"> -->
             <!-- <el-input placeholder="搜索" style="width: 260px;border-radius: 20px !important;" @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="keyword" class="input-with-select">
               <el-select  v-model="findType" style="width: 75px;" slot="prepend" placeholder="请选择">
@@ -40,7 +39,7 @@
               <el-button slot="append" icon="el-icon-search" @click="searchJump()" class="input-with-select-btn"></el-button>
             </el-input> -->
           <!-- </div> -->
-        <div>
+          <div>
             <el-badge :value="userMsg" :hidden="userMsg==0" class="message-count">
               <el-link type="primary" :href="`${webBaseUrl}/message`" target="_blank" :underline="false">
                 <svg-icon style="margin-right: 0;font-size:26px;" icon-class="messfff"></svg-icon>
@@ -49,9 +48,9 @@
           </div>
           <el-dropdown class="person-action-index" style="margin-left: 44px;">
               <span class="el-dropdown-link">
-                 <span v-if="current == 'qa'" style="color: #333;">学员</span> 
+                 <span v-if="current == 'qa'" style="color: #333;">学员</span>
                 <span v-else style="color: #fff;">学员</span><i class="el-icon-arrow-down el-icon--right"></i>
-               
+
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>学员</el-dropdown-item>
@@ -337,6 +336,7 @@ export default {
 .xtop {
   height: 72px;
   line-height: 72px;
+  min-width: 1280px;
   background-color: #0078FC;
   position: fixed;
   top: 0px;
@@ -351,18 +351,21 @@ export default {
     width: 100%;
     display: flex;
     justify-content: space-between;
+    margin:0 40px;
+    .xtop-left {
+      display: flex;
+      justify-content: flex-start;
+      .xtop-logo{
+        padding-top: 20px;
+        padding-right: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
   }
 }
-.xtop .xtop-left {
-  display: flex;
-  justify-content: flex-start;
-  .routerLink{
-    padding-right: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
+
 
 .xtop-nav {
   display: flex;
@@ -371,13 +374,27 @@ export default {
     display: inline-block;
   }
 }
-.xtop-nav > div {
+.xtop-nav-item {
   line-height:72px;
-  padding: 0px 24px;
   color: #fff;
 }
 
+@media screen and (max-width: 1366px){
+  .xtop-nav-item{
+    padding: 0px 10px;
+  }
+}
+
+@media screen and (min-width: 1366px){
+  .xtop-nav-item{
+    padding: 0px 24px;
+  }
+}
+
 .xtop .xtop-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
   .person-action{
     display: flex;
     justify-content: flex-end;