🪄 移动端不显示烟花

src/layout/main.vue

@@ -16,7 +16,7 @@
         v-if="enableInnerSearch"
       />
     </div>
-    <template v-if="config.nazhua.showFireworks">
+    <template v-if="showFireworks">
       <fireworks />
     </template>
     <template v-if="config.nazhua.showLantern">
@@ -29,7 +29,10 @@
 /**
  * LayoutMain
  */
-import { computed } from 'vue';
+import {
+  ref,
+  computed,
+} from 'vue';
 import config from '@/config';
 import Fireworks from '@/components/fireworks.vue';
 import Lantern from '@/components/lantern.vue';
@@ -37,6 +40,8 @@ import LayoutHeader from './components/header.vue';
 import LayoutFooter from './components/footer.vue';
 import SearchBox from './components/search-box.vue';
 
+const windowWidth = ref(window.innerWidth);
+
 const layoutGroupStyle = computed(() => {
   const style = {};
   if (config.nazhua.lightBackground) {
@@ -54,7 +59,23 @@ const layoutBGStyle = computed(() => {
   return style;
 });
 
-const enableInnerSearch = computed(() => config.nazhua.enableInnerSearch);
+const showFireworks = computed(() => {
+  if (windowWidth.value < 800) {
+    return false;
+  }
+  return config.nazhua.showFireworks;
+});
+
+const enableInnerSearch = computed(() => {
+  if (typeof config.nazhua.enableInnerSearch === 'undefined') {
+    return true;
+  }
+  return config.nazhua.enableInnerSearch;
+});
+
+window.addEventListener('resize', () => {
+  windowWidth.value = window.innerWidth;
+});
 </script>
 
 <style lang="scss" scoped>