product css update

tj

2025-05-07 bf95e4d3b3e96e9f6ac87a572bcbd223de50e637

product css update

 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>

 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>

 src/types/pdfjs-worker.d.ts

对比新文件
@@ -0,0 +1,5 @@
declare module 'pdfjs-dist/build/pdf.worker.entry' {
    const workerSrc: string;
    export default workerSrc;
  }