130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
|
<el-header>
|
|
<div class="logo" @click="goHome">
|
|
<img src="@/assets/images/logo.svg" />
|
|
猕猴桃
|
|
</div>
|
|
<div class="tab">
|
|
<ul>
|
|
<li :class="{ active: actIndex == 0 }" @click="handelClick(0)">公众号</li>
|
|
<!-- <li :class="{ active: actIndex == 1 }" @click="handelClick(1)">视频号</li>
|
|
<li @click="toWebsite">AI私域</li>
|
|
<li :class="{ active: actIndex == 1 }" @click="handelClick(2)">API</li> -->
|
|
<li :class="{ active: actIndex == 3 }" @click="handelClick(3)">AI爆文生成</li>
|
|
</ul>
|
|
</div>
|
|
<Setting></Setting>
|
|
</el-header>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, computed, watch } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { GET_TOKEN } from '@/utils/token';
|
|
import Setting from '@/layout/setting/index.vue'
|
|
import emitter from '@/eventBus'
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const path = computed(() => {
|
|
return route.path
|
|
})
|
|
watch(path, (val) => {
|
|
if(val == '/dash'){
|
|
actIndex.value = 0
|
|
} else if(val == '/aiArticle'){
|
|
actIndex.value = 3
|
|
} else {
|
|
actIndex.value = null
|
|
}
|
|
})
|
|
const goHome = () => {
|
|
router.push('/')
|
|
}
|
|
const toWebsite = () => {
|
|
open('https://7vbot.1024tool.vip/')
|
|
}
|
|
|
|
const actIndex = ref(null)
|
|
const handelClick = (index) => {
|
|
console.log(index)
|
|
if(index == 0){
|
|
if (GET_TOKEN()) {
|
|
actIndex.value = 0
|
|
router.push('/dash')
|
|
} else {
|
|
emitter.emit('userLogin', 1)
|
|
}
|
|
|
|
} else if(index == 1) {
|
|
ElNotification({
|
|
type: 'warning',
|
|
message: ' 视频号开发中，敬请期待!',
|
|
})
|
|
} else if(index == 2){
|
|
open('https://apifox.com/apidoc/shared-a0bce534-8fcf-4b6e-a297-5b670c19a2b4/241940441e0')
|
|
} else if(index == 3){
|
|
|
|
if (GET_TOKEN()) {
|
|
actIndex.value = 3
|
|
router.push('/aiArticle')
|
|
} else {
|
|
emitter.emit('userLogin', 3)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-header {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 70px;
|
|
left: 0;
|
|
top: 0;
|
|
line-height: 70px;
|
|
padding: 0 100px;
|
|
overflow: hidden;
|
|
box-shadow: var(--el-box-shadow-light);
|
|
// background-color: #fff;
|
|
z-index: 9;
|
|
background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
|
|
background-size: 4px 4px;
|
|
backdrop-filter: saturate(50%) blur(8px);
|
|
.logo {
|
|
float: left;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
height: 36px;
|
|
vertical-align: middle
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.tab{
|
|
position: absolute;
|
|
left: 50%;
|
|
// margin-left: -100px;
|
|
transform: translateX(-50%);
|
|
li{
|
|
float: left;
|
|
padding: 0 20px;
|
|
// width: 100px;
|
|
text-align: center;
|
|
line-height: 70px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
&:hover{
|
|
color: var(--el-color-primary-light-3);
|
|
}
|
|
}
|
|
.active{
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|