128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
<template>
|
|
<v-app id="app">
|
|
<!-- 导航栏 -->
|
|
<TopNavBar></TopNavBar>
|
|
<!-- 侧边导航栏 -->
|
|
<SideNavBar></SideNavBar>
|
|
<!-- 内容 -->
|
|
<v-content>
|
|
<router-view :key="$route.fullPath"/>
|
|
</v-content>
|
|
<!-- 页脚 -->
|
|
<Footer></Footer>
|
|
<!-- 返回顶部 -->
|
|
<BackTop></BackTop>
|
|
<!-- 搜索模态框 -->
|
|
<searchModel></searchModel>
|
|
<!-- 登录模态框 -->
|
|
<LoginModel></LoginModel>
|
|
<!-- 注册模态框 -->
|
|
<RegisterModel></RegisterModel>
|
|
<!-- 忘记密码模态框 -->
|
|
<ForgetModel></ForgetModel>
|
|
<!-- 绑定邮箱模态框 -->
|
|
<EmailModel></EmailModel>
|
|
<!-- 音乐播放器 -->
|
|
<Player v-if="blogInfo.websiteConfig.isMusicPlayer == 1 && !isMobile"/>
|
|
<!-- 聊天室 -->
|
|
<ChatRoom v-if="blogInfo.websiteConfig.isChatRoom == 1"></ChatRoom>
|
|
<!--主题切换-->
|
|
<div class="theme-switch" @click="check">
|
|
<v-img v-if="!isSon" width="50" height="50" src="https://s1.ax1x.com/2023/01/16/pSlxa4J.png"
|
|
style="font-size: 40px;"/>
|
|
<v-img v-if="isSon" width="50" height="50" src="https://s1.ax1x.com/2023/01/16/pSljjoQ.png"
|
|
style="font-size: 40px;"/>
|
|
</div>
|
|
<transition name="slide-up">
|
|
<ToggleDay v-show="showAnimation"></ToggleDay>
|
|
</transition>
|
|
</v-app>
|
|
</template>
|
|
<script>
|
|
|
|
import TopNavBar from "./components/layout/TopNavBar";
|
|
import SideNavBar from "./components/layout/SideNavBar";
|
|
import Footer from "./components/layout/Footer";
|
|
import BackTop from "./components/BackTop";
|
|
import searchModel from "./components/model/SearchModel";
|
|
import LoginModel from "./components/model/LoginModel";
|
|
import RegisterModel from "./components/model/RegisterModel";
|
|
import ForgetModel from "./components/model/ForgetModel";
|
|
import EmailModel from "./components/model/EmailModel";
|
|
import Player from "./components/zw-player/player.vue";
|
|
import ChatRoom from "./components/ChatRoom";
|
|
import ToggleDay from "./components/base/toggle_day/ToggleDay.vue";
|
|
export default {
|
|
created() {
|
|
// 获取博客信息
|
|
this.getBlogInfo();
|
|
// 上传访客信息
|
|
this.axios.post("/api/blogInfo/report");
|
|
},
|
|
data: function () {
|
|
return {
|
|
isSon: true,
|
|
showAnimation: false,
|
|
timer: null
|
|
};
|
|
},
|
|
components: {
|
|
TopNavBar,
|
|
Player,
|
|
SideNavBar,
|
|
Footer,
|
|
BackTop,
|
|
searchModel,
|
|
LoginModel,
|
|
RegisterModel,
|
|
ForgetModel,
|
|
EmailModel,
|
|
ChatRoom,
|
|
ToggleDay
|
|
},
|
|
methods: {
|
|
getBlogInfo() {
|
|
this.axios.get("/api/blogInfo").then(({data}) => {
|
|
this.$store.commit("checkBlogInfo", data.data);
|
|
});
|
|
},
|
|
check() {
|
|
clearTimeout(this.timer)
|
|
this.showAnimation = true
|
|
this.timer = null
|
|
this.isSon = !this.isSon;
|
|
new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve()
|
|
}, 300)
|
|
}).then(() => {
|
|
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
|
|
})
|
|
this.timer = setTimeout(() => {
|
|
this.showAnimation = false
|
|
}, 2500)
|
|
}
|
|
},
|
|
computed: {
|
|
blogInfo() {
|
|
return this.$store.state.blogInfo;
|
|
},
|
|
isMobile() {
|
|
const flag = navigator.userAgent.match(
|
|
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
|
);
|
|
return flag;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.theme-switch {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 54px;
|
|
z-index: 999;
|
|
}
|
|
</style>
|