72 lines
3.0 KiB
Vue
72 lines
3.0 KiB
Vue
|
<script setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
const info = ref({
|
|||
|
|
title: "家山树几棵",
|
|||
|
|
image: "https://e-cdn.fontree.cn/exhibition/prod/default/国展报名/0737054f-b2c7-4c92-8e75-1100faca19da.png",
|
|||
|
|
artist: "李甜甜02",
|
|||
|
|
size: "2400cmX54656cm",
|
|||
|
|
year: "",
|
|||
|
|
type: "中国画",
|
|||
|
|
material: "宣纸",
|
|||
|
|
appreciation: ""
|
|||
|
|
});
|
|||
|
|
</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">
|
|||
|
|
<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>
|