chore: update preview

JunaYa · Dec 1, 2024 · b0a2aaf · b0a2aaf
1 parent 9ea2939
commit b0a2aaf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/public/mac_os_bg.jpg b/public/mac_os_bg.jpg
diff --git a/src/pages/preview/App.vue b/src/pages/preview/App.vue
@@ -8,7 +8,7 @@ import { LazyStore } from '@tauri-apps/plugin-store'
 import { useElementHover } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
 import Button from '~/components/Button.vue'
-import PictureReview from '~/components/PictureReview.vue'
+import PictureReview from './PictureReview.vue'
 // Import Pintura styles
 import '@pqina/pintura/pintura.css'
 
@@ -88,6 +88,9 @@ onMounted(async () => {
 </template>
 
 <style>
+:root {
+  background-color: transparent !important;
+}
 /* bright / dark mode */
 .pintura-editor {
   --color-background: 255, 255, 255;

diff --git a/src/components/PictureReview.vue → src/pages/preview/PictureReview.vue b/src/components/PictureReview.vue → src/pages/preview/PictureReview.vue
@@ -57,15 +57,23 @@ onMounted(loadImage)
     </div>
 
     <!-- Image display -->
-    <div v-else class="h-48 w-58 flex flex-center overflow-hidden rounded-md">
-      <img
-        :src="imageUrl"
-        :alt="imagePath"
-        class="h-full w-full rounded-md object-contain"
-      >
+    <div v-else class="mac_os_bg relative h-48 w-58 flex flex-center overflow-hidden overflow-hidden rounded-md">
+      <div class="h-full w-full px-4 py-8">
+        <img
+          :src="imageUrl"
+          :alt="imagePath"
+          class="h-full w-full rounded-md object-contain"
+        >
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.mac_os_bg {
+  background-image: url(./mac_os_bg.jpg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
 </style>