Merge pull request #11 from OVINC-CN/feat_bg_image

feat(background): support to change background image
OVINC-CN · Nov 3, 2024 · e0f5b9a · e0f5b9a
2 parents 9955f33 + 947a388
commit e0f5b9a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/store/index.js b/src/store/index.js
@@ -37,6 +37,7 @@ const store = createStore({
         miit_filling_url: '',
         gongan_filling_id: '',
         gongan_filling_url: '',
+        background_image: '',
       },
     };
   },

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -4,12 +4,16 @@ import {useStore} from 'vuex';
 
 const store = useStore();
 const metaConfig = computed(() => store.state.metaConfig);
+
+const backgroundUrl = computed(() => metaConfig.value.background_image || '/extra-assets/img/bg-1.webp');
+const backgroundImage = computed(() => `url('${backgroundUrl.value}?imageMogr2/thumbnail/1920x1080/format/webp/interlace/1')`);
 </script>
 
 <template>
   <a-space
     :fill="true"
     id="home"
+    :style="{backgroundImage}"
   >
     <a-space
       id="home-space"
@@ -86,7 +90,6 @@ const metaConfig = computed(() => store.state.metaConfig);
   width: 100%;
   justify-content: center;
   align-items: center;
-  background-image: url('/extra-assets/img/bg-1.webp?imageMogr2/thumbnail/1920x1080/format/webp/interlace/1');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;