首页

src/components/pageTopBar/pageTopBar.vue

@@ -9,7 +9,15 @@
             :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
             {{
               item.name }}</div>
-          <img src="" class="user-img" alt="">
+          <div class="user-box">
+            <img src="" class="user-img" alt="">
+            <div class="user-out-box">
+              <div class="box-bg dis-f jus-x">
+                <div class="top-box"></div>
+                退出
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="dis-f jus-x al-item">
@@ -68,7 +76,7 @@ watchEffect(() => {
 
     }
     else if (res.name === '求房源') {
-
+      res.path = '/needHousing'
     }
     else if (res.name === '我的') {
 
@@ -86,7 +94,7 @@ let topTabSelect = (type, item) => {
 }
 
 //页面跳转
-const router=useRouter()
+const router = useRouter()
 let tabBtnType = ref('/')
 let changeTabBtnType = (item) => {
   tabBtnType.value = item.path
@@ -248,6 +256,45 @@ tabBtnType.value = route.path
   height: 280px;
 }
 
+.user-box:hover .user-out-box {
+  display: block;
+}
+
+.user-out-box {
+  color: #fff;
+  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 10px;
+  position: absolute;
+  bottom: -35px;
+  display: none;
+}
+
+.user-box {
+  position: relative;
+
+  .top-box {
+    border-radius: 2px;
+    width: 8px;
+    height: 8px;
+    background: #000;
+    position: absolute;
+    top: -4px;
+    transform: rotate(45deg)
+  }
+
+  .box-bg {
+    width: 32px;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 5px;
+    background: #000;
+    text-align: center;
+    position: relative;
+  }
+}
+
 /deep/.el-carousel__arrow {
   border: 2px solid #545454;
   width: 50px;
@@ -287,5 +334,9 @@ tabBtnType.value = route.path
   color: #7F7F7F;
   text-align: left;
 }
+
+.dropdown {
+  background: #000;
+}
 </style>