feat: change theme for mobile site is ready

This commit is contained in:
RockYang
2024-04-30 18:57:15 +08:00
parent 8b40ac5b5c
commit 0d733c0be0
17 changed files with 203 additions and 81 deletions

View File

@@ -1,13 +1,14 @@
<template>
<van-config-provider :theme="getMobileTheme()">
<van-config-provider :theme="theme">
<div class="mobile-home">
<router-view/>
<van-tabbar route v-model="active" @change="onChange">
<van-tabbar route v-model="active">
<van-tabbar-item to="/mobile/index" name="home" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/mobile/chat" name="chat" icon="chat-o">对话</van-tabbar-item>
<van-tabbar-item to="/mobile/image" name="image" icon="photo-o">绘图</van-tabbar-item>
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的
</van-tabbar-item>
</van-tabbar>
</div>
@@ -17,9 +18,10 @@
<script setup>
import {ref} from "vue";
import {getMobileTheme} from "@/store/system";
import {getMobileTheme, setMobileTheme} from "@/store/system";
import {useRouter} from "vue-router";
import {isMobile} from "@/utils/libs";
import bus from '@/store/eventbus'
const router = useRouter()
if (!isMobile()) {
@@ -27,9 +29,12 @@ if (!isMobile()) {
}
const active = ref('home')
const onChange = (index) => {
console.log(index)
}
const theme = ref(getMobileTheme())
bus.on('changeTheme', (value) => {
theme.value = value
setMobileTheme(theme.value)
})
</script>