sign-stream/src/views/workinfo/index.vue

<script setup>
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { showImagePreview } from 'vant';
import axios from 'axios';
const info = ref({
  title: "",
  image: "",
  artist: "",
  size: "",
  year: "",
  type: "",
  material: "",
  appreciation: ""
});
const route = useRoute();
onMounted(() => {             
    if(route.query.info){
        axios({
        method: 'post',
        url: `${import.meta.env.VITE_ERP_API_BASE_URL}exhibition/get-info-byUuid`,
        data: { 
            uuid: decodeURIComponent(route.query.info)
        }
    }).then(res => {
        if(res.data.code === 0){
            info.value = res.data.data;
        }
    });
    }
    

});
</script>
<template>
    <div class="w-100vw h-100vh flex flex-col overflow-hidden">
        <div class="w-100vw h-33px">
            <img src="@/assets/images/20250407155136.png" class="w-100vw object-fill" alt="">
        </div>
        <div class="grow-1 flex overflow-hidden">
            <div class="w-33px h-full shrink-0">
                <img src="@/assets/images/20250407155213.png" class="w-33px h-full object-fill" alt="">
            </div>
            <div
                class="grow-1 bg-no-repeat  bg-center bg-cover wrap1 overflow-y-auto flex flex-col items-center pt-32px px-26px">
                <!-- 其他内容 -->
                <div class="text-20px text-#010101 font-bold mb-22px">{{ info.title }}</div>
                <div class="bg-[rgba(0,0,0,0.1)] w-255px h-346px mb-13px" @click="showImagePreview([info.image])">
                    <img :src="info.image" class="object-contain w-full h-full" alt="">
                </div>
                <div class="font-bold text-16px mb-45px">{{ info.artist }}</div>
                <div class="text-12px w-full">
                    <div class="flex mb-9px">
                        <div class="font-bold">尺寸：</div>
                        <div>{{ info.size }}</div>
                    </div>
                    <div class="flex mb-9px">
                        <div class="font-bold">年份：</div>
                        <div>{{ info.year }}</div>
                    </div>
                    <div class="flex mb-9px">
                        <div class="font-bold">类型：</div>
                        <div>{{ info.type }}</div>
                    </div>
                    <div class="flex mb-5px">
                        <div class="font-bold">材质：</div>
                        <div>{{ info.material }}</div>
                    </div>
                    <div class="flex mb-9px">
                        <div class="font-bold whitespace-nowrap translate-y-5px">画作赏析：</div>
                        <div class="leading-22px">{{ info.appreciation }}</div>
                    </div>
                </div>
            </div>
            <div class="w-33px h-full shrink-0">
                <img src="@/assets/images/20250407155213.png" class="w-33px h-full object-fill" alt="">
            </div>
        </div>
        <div class="w-100vw h-33px">
            <img src="@/assets/images/20250407155204.png" class="w-100vw object-fill" alt="">
        </div>
    </div>
</template>
<style scoped>
.wrap1 {
    background-image: url('../../assets/images/20250407155229.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    overflow-y: auto;
}
</style>