tnbapp/src/components/layout/NavBar.vue

<template>
  <div>
    <el-row id="navbar" class="main">
      <!--logo-->
      <el-col :md="2" class="right">
        <a href="/" class="tit">
          <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
          <span>bili</span>
        </a>
      </el-col>
      <el-col :md="1" class="right">
        <a href="/status/11011" class="tit">
          <span>状态</span>
        </a>
      </el-col>
      <el-col :md="1" class="right">
        <a href="/video" class="tit">
          <span>视频</span>
        </a>
      </el-col>
      <el-col :md="1" class="right">
        <a href="/audio" class="tit">
          <span>音频</span>
        </a>
      </el-col>
      <el-col :md="1" class="right">
        <a href="/image" class="tit">
          <span>图片</span>
        </a>
      </el-col>
      <el-col :md="1" class="right">
        <a href="/article" class="tit">
          <span>文章</span>
        </a>
      </el-col>
      <!--搜索框-->
      <el-col :md="9" class="search">
        <search-box />
      </el-col>
      <el-col :md="2" class="logo">
        <a href="/message">
          <el-badge :value="120" :max="99">
            <span class="el-icon-bell logo" />
          </el-badge>
        </a>
      </el-col>
      <el-col :md="2" class="right logo">
        <a href="/user/post/publish" class="tit logo">
          <span class="el-icon-upload logo" />
        </a>
      </el-col>
      <!--用户信息-->
      <el-col :md="4" class="user-info">
        <!--头像-->
        <img
          v-if="!user"
          src="@/assets/img/icon/avatar.png"
          title="点击登录"
          class="el-avatar--medium"
          style="cursor: pointer"
          alt=""
          @click="login"
        >
        <img
          v-else
          :src="user.avatarUrl"
          class="el-avatar--circle el-avatar--medium"
          alt=""
        >
        <!--下拉菜单-->
        <el-dropdown class="drop">
          <span class="el-dropdown-link">
            <span v-if="user">{{ user.username }}</span>
            <span
              v-else
              title="点击登录"
              @click="login"
            >登录</span>
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu /><!--防止该标签隐藏的时候控制台会报错-->
          <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
            <el-dropdown-item
              icon="el-icon-user-solid"
              class="size"
              @click.native="goToProfile"
            >个人资料</el-dropdown-item>
            <el-dropdown-item
              icon="el-icon-star-on"
              class="size"
              @click.native="goToCollection"
            >我的收藏
            </el-dropdown-item>
            <el-dropdown-item
              icon="el-icon-video-camera-solid"
              class="size"
              @click.native="goToHistory"
            >播放历史
            </el-dropdown-item>
            <el-dropdown-item
              icon="el-icon-error"
              class="size"
              @click.native="goToLogout"
            >退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <!--防止下面的盒子上移动，nav-bar脱离了标准流-->
    <div style="height: 50px" />
    <!--登录弹窗-->
    <el-dialog
      title="用户登录"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-input
        v-model="userLogin.username"
        placeholder="请输入手机号或邮箱"
        style="width: 70%; padding-right: 2px"
        clearable
      />
      <br>
      <br>
      <el-input
        v-model="userLogin.password"
        placeholder="请输入验证码"
        style="width: 45%; padding-right: 2px"
      />
      <el-button :disabled="isBtn" @click="fetchVerifyCode">{{ code }}</el-button>
      <br>
      <br>
      <el-image :src="captchaCode" @click="getCaptcha" />
      <el-input
        v-model="userLogin.captchaCode"
        placeholder="请输入图形验证码"
        style="width: 45%; padding-right: 2px"
      />
      <br>
      <br>
      <span
        class="register"
      >账号不存在会自动注册</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="isLoading"
          @click.native="loginBtn"
        >登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchBox from '@/components/layout/SearchBox'
import { userMixin } from 'assets/js/mixin'
import { getMyInfo } from '@/api/user'

export default {
  name: 'NavBar',
  components: { SearchBox },
  mixins: [userMixin],
  data() {
    return {
      user: null,
      drawer: false
    }
  },
  created() {
    getMyInfo().then(res => {
      if (res.code === 0) {
        this.user = res.data
      }
    })
  },
  methods: {
    login() {
      this.fetchPubkey()
      this.dialogVisible2 = false
      this.dialogVisible = true
    },
    register() {
      this.fetchPubkey()
      this.dialogVisible2 = false
      this.dialogVisible = true
    },
    goToStatus() {
      this.$router.push('/status')
    }
  }
}
</script>

<style scoped>
#navbar {
  height: 50px;
  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9;
}

.navmenu {
  height: 50px;
  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9;
}

.main {
  padding-left: 1%;
  padding-right: 1%;
}

.search-icon {
  display: none;
}

@media screen and (max-width: 768px) {
  .main {
    padding-left: 1%;
    padding-right: 1%;
  }

  .search,
  .user-info {
    display: none;
  }

  .search-icon {
    display: inline;
    cursor: pointer;
    font-size: 30px;
    align-content: flex-end;
  }
}

.right {
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tit {
  display: block;
  font-weight: 700;
  height: 45px;
  text-decoration: none;
  color: #333;
}

.tit span {
  margin-left: 5px;
}

.logo {
  width: 30px;
  position: relative;
  top: 5px;
}

.search {
  text-align: center;
  padding-top: 6px;
}

.user-info {
  padding-top: 6px;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}

.drop {
  cursor: pointer;
  position: relative;
  font-size: 16px;
  bottom: 10px;
  left: 5px;
}

.size {
  font-size: 16px;
}
.avatar-name {
  text-align: center;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
</style>