From bf95e4d3b3e96e9f6ac87a572bcbd223de50e637 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 07 五月 2025 09:14:25 +0800
Subject: [PATCH] product css update
---
src/components/pdf/PdfViewerFull.vue | 46 ++++++++++++++++++++++++++++++++++++++++++++--
src/types/pdfjs-worker.d.ts | 5 +++++
src/pages/Product.vue | 6 +++---
3 files changed, 52 insertions(+), 5 deletions(-)
diff --git a/src/components/pdf/PdfViewerFull.vue b/src/components/pdf/PdfViewerFull.vue
index 07e2992..27c7d69 100644
--- a/src/components/pdf/PdfViewerFull.vue
+++ b/src/components/pdf/PdfViewerFull.vue
@@ -6,10 +6,9 @@
</div>
</template>
-<script setup lang="ts">
+<!-- <script setup lang="ts">
import { ref, onMounted, watch ,nextTick } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
-import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
@@ -45,6 +44,49 @@
}
onMounted(renderAllPages)
+</script> -->
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick } from 'vue'
+import * as pdfjsLib from 'pdfjs-dist'
+
+// ✅ 正确设置 worker 路径（Vite 项目用这种方式）
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+ 'pdfjs-dist/build/pdf.worker.min.js',
+ import.meta.url
+).toString()
+
+const props = defineProps<{
+ src: string
+ scale?: number
+}>()
+
+const canvasRefs: HTMLCanvasElement[] = []
+const canvases = ref<number[]>([])
+const pdfDoc = ref<any>(null)
+const scale = props.scale ?? 1.2
+
+const renderAllPages = async () => {
+ const loadingTask = pdfjsLib.getDocument(props.src)
+ pdfDoc.value = await loadingTask.promise
+ const numPages = pdfDoc.value.numPages
+ canvases.value = Array.from({ length: numPages }, (_, i) => i + 1)
+
+ await nextTick()
+
+ for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+ const page = await pdfDoc.value.getPage(pageNum)
+ const viewport = page.getViewport({ scale })
+ const canvas = canvasRefs[pageNum - 1]
+ if (!canvas) continue
+ const context = canvas.getContext('2d')
+ canvas.height = viewport.height
+ canvas.width = viewport.width
+ await page.render({ canvasContext: context!, viewport }).promise
+ }
+}
+
+onMounted(renderAllPages)
</script>
<style scoped>
diff --git a/src/pages/Product.vue b/src/pages/Product.vue
index f7494fb..19157c6 100644
--- a/src/pages/Product.vue
+++ b/src/pages/Product.vue
@@ -88,19 +88,19 @@
<h1 class="text-3xl font-bold mb-6 text-black">云游四方操作系统</h1>
<div class="row justify-content-center d-flex align-items-stretch p-1 ">
<!-- Left Image (1 column) -->
- <div class="col-12 col-md-2 mb-4">
+ <div class="col-2 col-md-2 mb-4">
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景.png"
alt="图1" class="w-100 h-100 object-cover rounded-lg" />
</div>
<!-- Middle Image (3 columns) -->
- <div class="col-12 col-md-8 mb-4">
+ <div class="col-8 col-md-8 mb-4">
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景2.png"
alt="图2" class="w-100 h-100 object-cover rounded-lg" />
</div>
<!-- Right Image (1 column) -->
- <div class="col-12 col-md-2 mb-4">
+ <div class="col-2 col-md-2 mb-4">
<img src="https://portal2.tos-cn-beijing.volces.com/portal/product-center/产品背景图3.jpg"
alt="图3" class="w-100 h-100 object-cover rounded-lg" />
</div>
diff --git a/src/types/pdfjs-worker.d.ts b/src/types/pdfjs-worker.d.ts
new file mode 100644
index 0000000..1d1855b
--- /dev/null
+++ b/src/types/pdfjs-worker.d.ts
@@ -0,0 +1,5 @@
+declare module 'pdfjs-dist/build/pdf.worker.entry' {
+ const workerSrc: string;
+ export default workerSrc;
+ }
+
\ No newline at end of file
--
Gitblit v1.9.3