|
|
@@ -1,157 +1,101 @@
|
|
|
<template>
|
|
|
- <el-row class="el-menu-demo">
|
|
|
- <el-col :md="2">
|
|
|
- <ul role="menubar" class="el-menu--horizontal el-menu">
|
|
|
- <li role="menuitem" class="el-menu-item">
|
|
|
- <a href="/" style="color: #007bff;text-decoration-line: none">
|
|
|
- <img src="@/assets/img/logo.png" class="logo" alt="img">
|
|
|
- tnbapp
|
|
|
+ <div class="header-wrapper">
|
|
|
+ <div class="nav-bar-container">
|
|
|
+ <el-row type="flex" align="middle" class="nav-content">
|
|
|
+ <el-col :xs="3" :sm="2" :md="3" class="logo-wrapper">
|
|
|
+ <a href="/" class="logo-link">
|
|
|
+ <img src="@/assets/img/logo.png" class="logo-img" alt="logo">
|
|
|
+ <span class="logo-text hidden-xs-only">TNBAPP</span>
|
|
|
</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
- <el-col :md="8">
|
|
|
- <el-menu
|
|
|
- mode="horizontal"
|
|
|
- >
|
|
|
- <el-menu-item index="1">
|
|
|
- <a href="/video" style="text-decoration-line: none">
|
|
|
- <span style="color: #007bff">分区</span>
|
|
|
- </a>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="2">
|
|
|
- <a href="/shortvideo" style="text-decoration-line: none">
|
|
|
- <span style="color: #007bff">短视频</span>
|
|
|
- </a>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="3">
|
|
|
- <a href="/playlist" style="text-decoration-line: none">
|
|
|
- <span style="color: #007bff">播放列表</span>
|
|
|
- </a>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
- </el-col>
|
|
|
- <el-col :md="6">
|
|
|
- <ul class="el-menu--horizontal el-menu">
|
|
|
- <li class="el-menu-item">
|
|
|
- <el-autocomplete
|
|
|
- v-model="keyword"
|
|
|
- :fetch-suggestions="querySearchAsync"
|
|
|
- :placeholder="searchHint"
|
|
|
- clearable
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- size="medium"
|
|
|
- :debounce="1000"
|
|
|
- @keyup.enter.native="onSearch"
|
|
|
- @select="onSearch"
|
|
|
- />
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
- <el-col :md="8">
|
|
|
- <ul class="el-menu--horizontal el-menu">
|
|
|
- <li class="el-menu-item">
|
|
|
- <el-dropdown v-if="user">
|
|
|
- <img
|
|
|
- :src="user.avatarUrl"
|
|
|
- class="el-avatar--circle el-avatar--medium"
|
|
|
- alt=""
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :sm="6" :md="7" class="hidden-xs-only">
|
|
|
+ <div class="nav-links">
|
|
|
+ <router-link to="/video" class="nav-item-link">分区</router-link>
|
|
|
+ <router-link to="/shortvideo" class="nav-item-link">短视频</router-link>
|
|
|
+ <router-link to="/playlist" class="nav-item-link">播放列表</router-link>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="15" :sm="8" :md="6">
|
|
|
+ <div class="search-wrapper">
|
|
|
+ <el-autocomplete
|
|
|
+ v-model="keyword"
|
|
|
+ :fetch-suggestions="querySearchAsync"
|
|
|
+ :placeholder="searchHint"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ class="custom-search"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="onSearch"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="6" :sm="8" :md="8" class="user-actions">
|
|
|
+ <div class="action-icons hidden-xs-only">
|
|
|
+ <div class="icon-item-wrapper" @click="goToTimeline">
|
|
|
+ <el-badge :value="statusCount" :max="99" :hidden="statusCount <= 0" class="badge-item">
|
|
|
+ <i class="el-icon-video-camera-solid custom-icon"></i>
|
|
|
+ </el-badge>
|
|
|
+ <span class="icon-label">动态</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="icon-item-wrapper" @click="goToMessage">
|
|
|
+ <el-badge :value="msgCount" :max="99" :hidden="msgCount <= 0" class="badge-item">
|
|
|
+ <i class="el-icon-message-solid custom-icon"></i>
|
|
|
+ </el-badge>
|
|
|
+ <span class="icon-label">消息</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="user-profile-wrapper">
|
|
|
+ <el-dropdown v-if="user" trigger="hover" placement="bottom" class="user-dropdown-trigger">
|
|
|
+ <div class="avatar-wrapper">
|
|
|
+ <img :src="user.avatarUrl" class="user-avatar" alt="avatar">
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="user-dropdown-menu">
|
|
|
+ <div class="user-name-header">{{ user.screenName || '用户' }}</div>
|
|
|
+ <el-dropdown-item icon="el-icon-collection" @click.native="goToPlaylist">收藏列表</el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="el-icon-collection" @click.native="goToHistory">历史记录</el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="el-icon-collection" @click.native="goToBackground">进入后台</el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="el-icon-switch-button" divided @click.native="goToLogout">退出登录</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+
|
|
|
+ <el-button v-else type="text" class="login-btn-text" @click="login">登录</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="upload-btn-blue hidden-xs-only"
|
|
|
+ @click="goToPublish"
|
|
|
>
|
|
|
- <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-s-home"
|
|
|
- class="size"
|
|
|
- @click.native="goToUserHome"
|
|
|
- >我的主页</el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-collection"
|
|
|
- class="size"
|
|
|
- @click.native="goToPlaylist"
|
|
|
- >播放列表</el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-s-data"
|
|
|
- class="size"
|
|
|
- @click.native="goToHistory"
|
|
|
- >历史记录
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-menu"
|
|
|
- class="size"
|
|
|
- @click.native="goToBackground"
|
|
|
- >进入后台</el-dropdown-item>
|
|
|
- <el-dropdown-item
|
|
|
- icon="el-icon-error"
|
|
|
- class="size"
|
|
|
- @click.native="goToLogout"
|
|
|
- >登出</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- <span
|
|
|
- v-else
|
|
|
- style="color: #007bff"
|
|
|
- @click="login"
|
|
|
- >登入</span>
|
|
|
- </li>
|
|
|
- <li class="el-menu-item" @click="goToTimeline">
|
|
|
- <el-badge class="item" :value="statusCount" :max="99">
|
|
|
- <span class="el-icon-view" style="color: #007bff">状态</span>
|
|
|
- </el-badge>
|
|
|
- </li>
|
|
|
- <li class="el-menu-item" @click="goToMessage">
|
|
|
- <el-badge class="item" :value="msgCount" :max="99">
|
|
|
- <span class="el-icon-bell" style="color: #007bff">消息</span>
|
|
|
- </el-badge>
|
|
|
- </li>
|
|
|
- <li class="el-menu-item">
|
|
|
- <el-button size="mini" type="upload" icon="el-icon-upload" @click="goToPublish">投稿</el-button>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!--登入弹窗-->
|
|
|
- <el-dialog
|
|
|
- title="用户登入"
|
|
|
- append-to-body
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="30%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-form ref="form" :model="userLogin">
|
|
|
- <el-form-item label="帐号">
|
|
|
- <el-input
|
|
|
- v-model="userLogin.principal"
|
|
|
- placeholder="请输入手机号或邮箱"
|
|
|
- style="width: 70%; padding-right: 2px"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码">
|
|
|
- <el-input
|
|
|
- v-model="userLogin.credential"
|
|
|
- placeholder="请输入验证码"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <el-button :disabled="isBtn" @click="loginVerifyCode">{{ code }}</el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="图形验证码" label-width="90px">
|
|
|
- <el-image :src="captchaCode" @click="getCaptcha" />
|
|
|
- <el-input
|
|
|
- v-model="userLogin.captchaCode"
|
|
|
- placeholder="请输入图形验证码"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :loading="isLoading"
|
|
|
- @click.native="loginBtn"
|
|
|
- >登 入</el-button>
|
|
|
- <el-button type="plain" @click="register">注册/忘记密码?</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- </el-row>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <span>投稿</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <nav class="bottom-nav hidden-sm-and-up">
|
|
|
+ <router-link to="/" class="bottom-nav-item" exact-active-class="is-active">
|
|
|
+ <i class="el-icon-house"></i>
|
|
|
+ <span>首页</span>
|
|
|
+ </router-link>
|
|
|
+ <router-link to="/video" class="bottom-nav-item" active-class="is-active">
|
|
|
+ <i class="el-icon-menu"></i>
|
|
|
+ <span>分区</span>
|
|
|
+ </router-link>
|
|
|
+ <router-link to="/shortvideo" class="bottom-nav-item" active-class="is-active">
|
|
|
+ <i class="el-icon-video-camera"></i>
|
|
|
+ <span>短视频</span>
|
|
|
+ </router-link>
|
|
|
+ <router-link :to="user ? `/user/${user.userIdStr}` : '/login'" class="bottom-nav-item" active-class="is-active">
|
|
|
+ <i class="el-icon-user"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </router-link>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -168,15 +112,12 @@ export default {
|
|
|
user: null,
|
|
|
restaurants: [],
|
|
|
searchHint: '想要搜点神马呢',
|
|
|
- searchType: '1',
|
|
|
keyword: '',
|
|
|
statusCount: 0,
|
|
|
msgCount: 0
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- /* const userdata = Vue.$cookies.get('USERDATA')
|
|
|
- const userId = userdata.split(':')[0]*/
|
|
|
const userInfo = getAuthedUser()
|
|
|
if (userInfo !== null) {
|
|
|
this.user = userInfo
|
|
|
@@ -188,163 +129,263 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSelect(key, keyPath) {
|
|
|
- console.log(key, keyPath)
|
|
|
- },
|
|
|
- // ****************************************************************************************************************
|
|
|
- // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
|
|
|
- // queryString 为输入框中的值。cb为返回显示列表的回调函数
|
|
|
querySearchAsync(queryString, cb) {
|
|
|
- if (queryString === '') {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
+ if (!queryString) return
|
|
|
setTimeout(() => {
|
|
|
keywordSuggest(queryString).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.restaurants = res.data.map((item) => {
|
|
|
- return {
|
|
|
- value: item.keyword,
|
|
|
- rank: 1
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- // 如果 cb 返回一个空数组, 那么模糊搜索输入建议的下拉选项会因为 length 为 0 而消失
|
|
|
- // cb([])
|
|
|
- cb(this.restaurants)
|
|
|
- // eslint-disable-next-line no-empty
|
|
|
- } else {
|
|
|
+ const results = res.data.map(item => ({ value: item.keyword }))
|
|
|
+ cb(results)
|
|
|
}
|
|
|
})
|
|
|
- }, 500)
|
|
|
+ }, 300)
|
|
|
},
|
|
|
- // select 事件或 enter 键事件
|
|
|
onSearch() {
|
|
|
- console.log('回车事件')
|
|
|
- // 正则去空格
|
|
|
- if (this.keyword.replace(/\s*/g, '')) {
|
|
|
+ if (this.keyword.trim()) {
|
|
|
this.toSearchPage()
|
|
|
} else {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: '不能为空！',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
+ this.$message.warning('不能为空！')
|
|
|
}
|
|
|
},
|
|
|
- // 跳转搜索页面，传递搜索框的参数
|
|
|
toSearchPage() {
|
|
|
- const currentPath = this.$route.path
|
|
|
- if (currentPath === '/search') {
|
|
|
- this.$router.push({
|
|
|
- path: '/search',
|
|
|
- query: {
|
|
|
- searchType: 1,
|
|
|
- keyword: this.keyword,
|
|
|
- pn: 1
|
|
|
- }
|
|
|
- })
|
|
|
- this.$router.go(0)
|
|
|
+ const query = { searchType: 1, keyword: this.keyword, pn: 1 }
|
|
|
+ if (this.$route.path === '/search') {
|
|
|
+ this.$router.push({ path: '/search', query }).catch(() => {})
|
|
|
} else {
|
|
|
- const routeUrl = this.$router.resolve({
|
|
|
- path: '/search',
|
|
|
- query: {
|
|
|
- searchType: 1,
|
|
|
- keyword: this.keyword,
|
|
|
- pn: 1
|
|
|
- }
|
|
|
- })
|
|
|
+ const routeUrl = this.$router.resolve({ path: '/search', query })
|
|
|
window.open(routeUrl.href, '_blank')
|
|
|
}
|
|
|
},
|
|
|
- // ****************************************************************************************************************
|
|
|
login() {
|
|
|
- const path = '/login'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
+ this.$router.push('/login').catch(() => {})
|
|
|
},
|
|
|
- register() {
|
|
|
- console.log('帐号注册')
|
|
|
- },
|
|
|
- // ****************************************************************************************************************
|
|
|
- goToUserHome() {
|
|
|
- const path = '/user/' + this.user.userIdStr
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToPlaylist() {
|
|
|
- const path = '/bg/my/album'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToHistory() {
|
|
|
- const path = '/bg/my/history'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToBackground() {
|
|
|
- const path = '/bg'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToTimeline() {
|
|
|
- const path = '/timeline'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToMessage() {
|
|
|
- const path = '/bg/account/message'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- },
|
|
|
- goToPublish() {
|
|
|
- const path = '/bg/post/video'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
- }
|
|
|
+ goToUserHome() { this.$router.push('/user/' + this.user.userIdStr) },
|
|
|
+ goToPlaylist() { this.$router.push('/bg/my/album') },
|
|
|
+ goToHistory() { this.$router.push('/bg/my/history') },
|
|
|
+ goToBackground() { this.$router.push('/bg') },
|
|
|
+ goToTimeline() { this.$router.push('/timeline') },
|
|
|
+ goToMessage() { this.$router.push('/bg/account/message') },
|
|
|
+ goToPublish() { this.$router.push('/bg/post/video') }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 变量定义 */
|
|
|
+$primary-blue: #00a1d6;
|
|
|
+$hover-blue: #00b5e5;
|
|
|
+$text-main: #18191c;
|
|
|
+$text-second: #61666d;
|
|
|
+$bg-grey: #f1f2f3;
|
|
|
+
|
|
|
+/* 1. 顶部主容器 */
|
|
|
+.nav-bar-container {
|
|
|
+ position: fixed; /* 强制固定 */
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 2000; /* 提高层级，确保在弹窗之下但在内容之上 */
|
|
|
+ height: 64px;
|
|
|
+ background: #fff;
|
|
|
+ /* 如果想要毛玻璃效果，取消下面两行的注释 */
|
|
|
+ /* background: rgba(255, 255, 255, 0.9); */
|
|
|
+ /* backdrop-filter: blur(10px); */
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
-.logo {
|
|
|
- width: 30px;
|
|
|
- position: relative;
|
|
|
+.nav-content {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
-.size {
|
|
|
- font-size: 16px;
|
|
|
+/* 2. Logo 样式 */
|
|
|
+.logo-link {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-decoration: none;
|
|
|
+ .logo-img { width: 30px; height: 30px; }
|
|
|
+ .logo-text {
|
|
|
+ color: $primary-blue;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.item {
|
|
|
- margin-top: 10px;
|
|
|
- margin-right: 10px;
|
|
|
+/* 3. PC端菜单链接 */
|
|
|
+.nav-links {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ .nav-item-link {
|
|
|
+ text-decoration: none;
|
|
|
+ color: $text-main;
|
|
|
+ font-size: 15px;
|
|
|
+ transition: color 0.2s;
|
|
|
+ &:hover { color: $primary-blue; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 4. 搜索框美化 */
|
|
|
+.custom-search {
|
|
|
+ width: 100%;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: $bg-grey;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ padding-left: 35px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ &:focus {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: $primary-blue;
|
|
|
+ box-shadow: 0 0 8px rgba(0, 161, 214, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 5. 右侧操作区总布局 */
|
|
|
+.user-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图标组 (动态/消息) */
|
|
|
+.action-icons {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .icon-item-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ .custom-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ color: $text-second;
|
|
|
+ transition: color 0.2s;
|
|
|
+ }
|
|
|
+ .icon-label {
|
|
|
+ font-size: 11px;
|
|
|
+ color: $text-second;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ .custom-icon, .icon-label { color: $primary-blue; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 头像与按钮包装 */
|
|
|
+.user-profile-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.user-avatar {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ object-fit: cover;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ transition: all 0.3s;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ border-color: $primary-blue;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.login-btn-text {
|
|
|
+ color: $primary-blue;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 蓝色投稿按钮 */
|
|
|
+.upload-btn-blue {
|
|
|
+ background-color: $primary-blue !important;
|
|
|
+ border: none !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ height: 34px;
|
|
|
+ padding: 0 16px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px !important;
|
|
|
+ transition: all 0.3s !important;
|
|
|
+
|
|
|
+ i { font-size: 16px; margin-right: 4px; }
|
|
|
+ span { font-size: 14px; }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: $hover-blue !important;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 161, 214, 0.2);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 6. 移动端底部导航 */
|
|
|
+.bottom-nav {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 56px;
|
|
|
+ background: rgba(255, 255, 255, 0.96);
|
|
|
+ backdrop-filter: blur(15px);
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #f1f2f3;
|
|
|
+ z-index: 2000;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+
|
|
|
+ .bottom-nav-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-decoration: none;
|
|
|
+ color: $text-second;
|
|
|
+ i { font-size: 20px; margin-bottom: 2px; }
|
|
|
+ span { font-size: 10px; }
|
|
|
+ &.is-active { color: $primary-blue; i { font-weight: bold; } }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 7. 移动端适配补丁 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .nav-bar-container { padding: 0 10px; height: 56px; }
|
|
|
+ .user-profile-wrapper { margin-right: 5px; }
|
|
|
+ .logo-wrapper { flex: 0 0 auto; width: 40px; }
|
|
|
+ .custom-search {
|
|
|
+ ::v-deep .el-input__inner { height: 32px; line-height: 32px; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 下拉菜单修饰 */
|
|
|
+.user-dropdown-menu {
|
|
|
+ .user-name-header {
|
|
|
+ padding: 12px 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $text-main;
|
|
|
+ border-bottom: 1px solid #f1f2f3;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
