cankao-h5/src/pages/realtimeInfo/pc/components/PageTop.vue

<template>
  <view class="page_top">
    <view class="r_menu">
      <image src="@/assets/images/logo.png" class="logo"></image>
      <view class="r_menu_item" @click="tabChange(1)">
        <text class="menu_item">资讯头条榜</text>
        <view class="line" v-if="tabIndex == 1"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(2)">
        <text class="menu_item">热门行业</text>
        <view class="line" v-if="tabIndex == 2"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(3)">
        <text class="menu_item">风口概念</text>
        <view class="line" v-if="tabIndex == 3"></view>
      </view>

      <view class="r_menu_item" @click="tabChange(4)">
        <text class="menu_item">编辑精选</text>
        <view class="line" v-if="tabIndex == 4"></view>
      </view>
    </view>

    <view @click="logout" v-if="Session.get('token')">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { Session } from "@/utils/storage";

const tabIndex = ref(0);
function tabChange(type) {
  // tabIndex.value = index;

  uni.navigateTo({
    url: "/pages/realtimeInfo/pc/index?type=" + type,
  });
}

function logout() {
  Session.clear();
  window.location.reload();
}

onLoad((e) => {
  if (e.type) tabIndex.value = e.type;
});
</script>

<style scoped lang="scss">
.page_top {
  width: 100vw;
  height: 120rpx;
  background-color: white;
  margin-bottom: 30rpx;
  box-shadow: 0 5rpx 2rpx rgba($color: #6d6d6d, $alpha: 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

  .logo {
    width: 190rpx;
    height: 50rpx;
    margin-right: 50rpx;
  }

  .r_menu {
    width: 55vw;
    min-width: 1250px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .r_menu_item {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-right: 100rpx;
  }

  .menu_item {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #1a1a1a;
  }

  .line {
    width: 64px;
    height: 4px;
    background: #007aff;
    position: absolute;
    bottom: 0;
  }
}
</style>