Skip to content

P
project-online-fi
提交 5ff8b740 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 811b951f
隐藏空白字符变更
内嵌 并排
正在显示 包含 122 行增加 和 116 行删除
src/components/layout/Header.vue
浏览文件 @ 5ff8b740
<script setup lang="ts"> <script setup lang="ts">
import { useWindowScroll } from '@vueuse/core' import { useWindowScroll } from '@vueuse/core'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import AppNav from './Nav.vue' import AppNav from './Nav.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useDevice } from '@/composables/useDevice'
const courseStore = useUserStore() const courseStore = useUserStore()
interface Props { interface Props {
...@@ -11,24 +11,14 @@ interface Props { ...@@ -11,24 +11,14 @@ interface Props {
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const route = useRoute()
const user = useUserStore() const user = useUserStore()
const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}` const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
const REGISTER_URL = `${import.meta.env.VITE_REGISTER_URL}?rd=${encodeURIComponent(location.href)}` const REGISTER_URL = `${import.meta.env.VITE_REGISTER_URL}?rd=${encodeURIComponent(location.href)}`
user.getUser() user.getUser()
// 菜单控制
const menuVisible = ref<boolean>(false)
function toggleMenu() {
menuVisible.value = !menuVisible.value
}
watch(route, () => {
menuVisible.value = false
})
const classNames = computed(() => { const classNames = computed(() => {
return { return {
'has-menu': menuVisible.value, 'is-fixed': props.fixed && !isScrolled.value,
'is-fixed': props.fixed,
'is-scrolled': isScrolled.value 'is-scrolled': isScrolled.value
} }
}) })
...@@ -54,148 +44,161 @@ const handleStudy = () => { ...@@ -54,148 +44,161 @@ const handleStudy = () => {
const handleOrder = () => { const handleOrder = () => {
window.open('https://account-show.ezijing.com/payment') window.open('https://account-show.ezijing.com/payment')
} }
const { mobile } = useDevice()
function handleUser() {
if (user.isLogin) {
window.open('https://account-show.ezijing.com/payment')
} else {
window.open(LOGIN_URL)
}
}
</script> </script>
<template> <template>
<header class="app-header" :class="classNames" ref="header"> <header class="app-header" :class="classNames" ref="header">
<div class="app-header-inner"> <div class="app-header-inner">
<div class="app-header-left"> <div class="app-header-left">
<div class="logo"> <router-link to="/" class="logo"></router-link>
<router-link to="/">
<img src="@/assets/images/logo.png" v-if="isScrolled || !fixed" />
<img src="@/assets/images/logo_white.png" v-else />
</router-link>
</div>
</div> </div>
<div class="app-header-right"> <AppNav></AppNav>
<AppNav></AppNav> <div class="app-header-right" v-if="!mobile">
<div class="menu" @click="toggleMenu"></div>
<div class="study" @click="handleStudy" v-if="user.isLogin">立即学习</div> <div class="study" @click="handleStudy" v-if="user.isLogin">立即学习</div>
</div>
<div class="app-header-right">
<template v-if="user.isLogin"> <template v-if="user.isLogin">
<div @click="handleOrder" style="cursor: pointer">你好，{{ user.userName }}</div> <div @click="handleOrder" style="cursor: pointer">你好，{{ user.userName }}</div>
<div class="app-header-logout" @click="handleLogout"> <div class="app-header-logout" @click="handleLogout">退出</div>
<img src="https://webapp-pub.ezijing.com/project/saas/logout.png" v-if="isScrolled || !fixed" />
<img src="https://webapp-pub.ezijing.com/project_online/fi/logout_white.png" v-else />
退出
</div>
</template> </template>
<template v-else> <template v-else>
<a :href="LOGIN_URL" class="button-default">登录</a> <a :href="LOGIN_URL" class="button-default">登录</a>
<a class="button-primary" :href="REGISTER_URL" target="_blank">注册</a> <a class="button-primary" :href="REGISTER_URL" target="_blank">注册</a>
</template> </template>
</div> </div>
<div class="app-header-right" v-else>
<div class="app-header-user" @click="handleUser"></div>
</div>
</div> </div>
</header> </header>
</template> </template>
<style lang="scss"> <style lang="scss">
.app-header { .is-pc {
position: sticky; .app-header {
top: 0; position: sticky;
left: 0; top: 0;
right: 0;
z-index: 1000;
&.is-fixed {
position: fixed;
left: 0; left: 0;
right: 0; right: 0;
color: #fff; z-index: 1000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
.button-default {
color: #fff;
}
}
&.is-scrolled {
color: #333; color: #333;
background: #fff; background: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); &.is-fixed {
.button-default { position: fixed;
color: #333; left: 0;
right: 0;
color: #fff;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
.logo {
background: url('@/assets/images/logo_white.png') no-repeat;
background-size: contain;
}
.app-header-logout {
background: url('https://webapp-pub.ezijing.com/project_online/fi/logout_white.png') no-repeat left center;
background-size: 18px;
}
.button-default {
color: #fff;
}
}
&.is-scrolled {
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
} }
} }
} .app-header-inner {
.app-header-inner { max-width: 1200px;
max-width: 1200px; margin: 0 auto;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.22rem 0;
}
.app-header-left {
flex: 1;
.logo {
display: flex; display: flex;
align-items: center; align-items: center;
img { justify-content: space-between;
height: 0.5rem; padding: 0.22rem 0;
}
} }
} .app-header-left {
.app-header-right { flex: 1;
.study { .logo {
font-size: 18px; display: block;
line-height: 50px; width: 200px;
margin-right: 30px; height: 50px;
font-weight: 400; background: url('@/assets/images/logo.png') no-repeat;
cursor: pointer; background-size: contain;
}
} }
display: flex; .app-header-right {
.app-header-logout {
// background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;
padding-left: 22px;
margin-left: 40px;
cursor: pointer;
display: flex; display: flex;
img { align-items: center;
width: 18px;
margin-right: 10px; .study {
font-size: 18px;
line-height: 50px;
margin-right: 30px;
font-weight: 400;
cursor: pointer;
} }
}
.button-default { .app-header-logout {
min-width: 72px; background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;
padding: 0 10px; background-size: 18px;
font-size: 14px; padding-left: 32px;
line-height: 24px; margin-left: 40px;
color: #333; cursor: pointer;
text-align: center; display: flex;
border: 1px solid #eaeaea; }
box-sizing: border-box;
} .button-default {
.button-primary { min-width: 72px;
margin-left: 10px; padding: 0 10px;
min-width: 72px; font-size: 14px;
padding: 0 10px; line-height: 24px;
font-size: 14px; color: #333;
line-height: 24px; text-align: center;
color: #fff; border: 1px solid #eaeaea;
text-align: center; box-sizing: border-box;
background: var(--main-color); }
box-sizing: border-box; .button-primary {
margin-left: 10px;
min-width: 72px;
padding: 0 10px;
font-size: 14px;
line-height: 24px;
color: #fff;
text-align: center;
background: var(--main-color);
box-sizing: border-box;
}
} }
} }
.is-h5 { .is-h5 {
.app-header-inner { .app-header-inner {
padding: 0.32rem 0.3rem; display: flex;
box-shadow: 0 0 15px rgb(0 0 0 / 14%); padding: 0.4rem 0.3rem;
} }
.app-header-left {
.menu { flex: 1;
width: 0.36rem; .logo {
height: 0.36rem; display: block;
padding: 5px 10px; width: 2.22rem;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAh1BMVEUAAABAQEBgYGBVVVVgYGBmZmZoaGhgYGBgYGBlZWVlZWVjY2NjY2NmZmZkZGRlZWVkZGRmZmZjY2NmZmZlZWVmZmZmZmZlZWVmZmZlZWVmZmZmZmZlZWVlZWVmZmZmZmZlZWVmZmZlZWVlZWVmZmZmZmZmZmZlZWVmZmZmZmZlZWVmZmZmZmZgwHa9AAAALHRSTlMABAgMEBQbICgrMENIS09TVF9kZ2hrbG9zd3t/l5+jp6uvu8PD09fb3+vv86pHCLIAAACcSURBVBgZ7cHHFoJAEATAhkUx5wCsOYE6//99nvum/TxwmCo4107JuIqCaQaWXk3T5CCFqY4gB1PVIJWpziDhbppnDyxdRMWmA+eca6mwjIptFyx7mObVB4mmOoMcTFWDFKY6gqQ30zQ5WDIq4++qWYBzzrmvDeeKSQBLLqZpcpC1qU4ge1M1IKWpLiDhbpr3ACysdntBkcO5f/kAGgG16eBu+akAAAAASUVORK5CYII=') height: 0.56rem;
no-repeat center; background: url('@/assets/images/logo.png') no-repeat;
background-size: 0.36rem 0.36rem; background-size: contain;
cursor: pointer; }
} }
.has-menu .menu { .app-header-right {
background: url('https://webapp-pub.ezijing.com/www/h5/images/icon_close.png') no-repeat center; display: flex;
background-size: 16px 16px; align-items: center;
}
.app-header-user {
width: 0.3rem;
height: 0.3rem;
background: url('@/assets/images/icon_user.png') no-repeat;
background-size: contain;
cursor: pointer;
} }
} }
</style> </style>
src/components/layout/Index.vue
浏览文件 @ 5ff8b740
...@@ -2,12 +2,15 @@ ...@@ -2,12 +2,15 @@
import AppHeader from './Header.vue' import AppHeader from './Header.vue'
import AppFooter from './Footer.vue' import AppFooter from './Footer.vue'
import RightAside from './RightAside.vue' import RightAside from './RightAside.vue'
const attrs = useAttrs() interface Props {
fixed?: boolean
}
const props = defineProps<Props>()
</script> </script>
<template> <template>
<div class="app-layout"> <div class="app-layout">
<AppHeader v-bind="attrs"></AppHeader> <AppHeader v-bind="props"></AppHeader>
<section class="app-layout-container"> <section class="app-layout-container">
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath"></router-view>
</section> </section>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论