add-pdf-viewer-in-iframe

src/components/RoutePage.vue

@@ -1,4 +1,5 @@
 <template>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <div class="container mx-auto px-4 text-justify mt-16">
         <div v-if="isLoading" class="">
             <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
@@ -10,12 +11,13 @@
                         <div class="flex flex-col place-items-center" v-html="content"></div>
                     </div>
                 </div>
-                <div class="pt-10 flex flex-col justify-start place-items-start" v-if="fileAttached">
-                    <h2>Attachments</h2>
+
+                <div class="pt-2 flex flex-col justify-center place-items-center " v-if="fileAttached">
+                    <h2>{{ page.title }}</h2>
                     <div v-for="file in files" :key="file.id">
-                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
-                            {{ file.filename_download }}
-                        </a>
+                        
+                        <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" class="w-fit sm:w-[400px] md:w-[700px] lg:w-[900px] h-[200px] md:h-[600px] rounded-t-xl shadow-2xl"></iframe>
+                        <!-- <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">{{ file.filename_download }}</a> -->
                         <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
                     </div>
                 </div>
@@ -82,4 +84,7 @@ export default {
         
     }
 }
-</script>
+</script>
+<style>
+
+</style>

src/pages/notice/index.astro

@@ -7,6 +7,10 @@ import NoticePage from "../../components/NoticePage.vue"
 // console.log(data)
 ---
 <Layout title="">
+    <main>
+        <div>
+        </div>
+    </main>
     <NoticePage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">