样式调整

src/layout/personal/navBar.vue

@@ -5,74 +5,79 @@
       density="compact"
       style="padding-left: 0px;height: 50px;font-size: 14px;"
     >
-      <div class="innerBox">
-        <div class="nav-logo">
-          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
-        </div>
-        <div class="nav-city">
-          <p class="nav-city-box">
-            <v-icon color="primary">mdi-map-marker</v-icon>
-            <span class="nav-city-selected">广州</span>
-            <span class="switchover-city nav-city-selected">[切换城市]</span>
-          </p>
-        </div>
-        <div class="nav">
-          <ul>
-            <li v-for="k in list" :key="k.text" class="mt-1">
-              <a :href="k.path" style="font-size: 14px;">{{ k.text }}</a>
-            </li>
-          </ul>
+      <div class="innerBox d-flex justify-space-between">
+        <div>
+          <div class="nav-logo">
+            <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
+          </div>
+          <div class="nav-city">
+            <p class="nav-city-box">
+              <v-icon color="primary">mdi-map-marker</v-icon>
+              <span class="nav-city-selected">广州</span>
+              <span class="switchover-city nav-city-selected">[切换城市]</span>
+            </p>
+          </div>
+          <div class="nav">
+            <ul>
+              <li v-for="k in list" :key="k.text">
+                <a :href="k.path" style="font-size: 14px;">{{ k.text }}</a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="user-nav" v-if="!getToken()">
-          <div class="btns">
+        
+        <div class="d-flex user-nav">
+          <div class="btns d-flex align-center" v-if="!getToken()">
             <span class="nav-resume-tools">
               <a href="">我要找工作</a>
               <a href="">我要招聘</a>
             </span>
             <v-btn class="half-button" border color="primary" size="small" @click="handleLogin">登录/注册</v-btn>
-            <v-menu>
+          </div>
+          <div class="d-flex align-center" v-if="getToken()">
+            <span style="cursor: pointer;">消息</span>
+            <v-menu open-on-hover>
               <template v-slot:activator="{ props }">
-                <v-btn
-                  class="ml-3"
-                  icon="mdi-translate"
-                  size="small"
-                  v-bind="props"
-                >
-                </v-btn>
+                <div class="d-flex ml-5 align-center" v-bind="props">
+                  <v-avatar>
+                    <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
+                  </v-avatar>
+                  <div class="ml-2">游客</div>
+                </div>
               </template>
-              <v-list density="compact">
-                <v-list-item
-                  v-for="item in localeStore.localeMap"
-                  :key="item.name"
-                  :value="item.lang"
-                  :active="localeStore.currentLocale.lang === item.lang"
-                  @click="localeStore.setCurrentLocale(item)"
-                >
-                  <v-list-item-title>{{ item.name }}</v-list-item-title>
+
+              <v-list>
+                <v-list-item v-for="(item, index) in items" :key="index" @click="item.change">
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                 </v-list-item>
               </v-list>
             </v-menu>
           </div>
-        </div>
-        <div v-else class="d-flex user-nav">
-          <span style="cursor: pointer;">消息</span>
-          <v-menu open-on-hover>
+          <v-menu>
             <template v-slot:activator="{ props }">
-              <div class="d-flex ml-5 align-center" v-bind="props">
-                <v-avatar>
-                  <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
-                </v-avatar>
-                <div class="ml-2">游客</div>
-              </div>
+              <v-btn
+                class="ml-3"
+                color="primary"
+                icon="mdi-translate"
+                size="small"
+                v-bind="props"
+              >
+              </v-btn>
             </template>
-
-            <v-list>
-              <v-list-item v-for="(item, index) in items" :key="index" @click="item.change">
-                <v-list-item-title>{{ item.title }}</v-list-item-title>
+            <v-list density="compact">
+              <v-list-item
+                v-for="item in localeStore.localeMap"
+                :key="item.name"
+                :value="item.lang"
+                :active="localeStore.currentLocale.lang === item.lang"
+                @click="localeStore.setCurrentLocale(item)"
+              >
+                <v-list-item-title>{{ item.name }}</v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
         </div>
+        
       </div>
     </v-toolbar>
     <Dialog :visible="show" :footer="true" title="企业注册" widthType="1" @close="show = false">

src/styles/personal/navBar.scss

@@ -87,12 +87,12 @@
   color: var(--v-primary-base);
 }
 .user-nav {
-  position: absolute;
-  right: 0;
+  // position: absolute;
+  // right: 0;
   // display: inline-block;
   color: var(--v-primary-base);
-  height: 49px;
-  line-height: 49px;
+  // height: 49px;
+  // line-height: 49px;
 }
 .user-nav .btns .btn-outline {
   border-radius: 8px;