12
This commit is contained in:
parent
14d57febb0
commit
0e259b2bef
@ -12,7 +12,11 @@
|
|||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'FZZhongYaSong';
|
||||||
|
src: url('@/assets/fzzys_GBK.TTF') format('truetype');
|
||||||
|
/* 或其他格式如 woff, woff2 等 */
|
||||||
|
}
|
||||||
.particulars-detail-popup {
|
.particulars-detail-popup {
|
||||||
background: rgba(0, 0, 0, 0.7) !important;
|
background: rgba(0, 0, 0, 0.7) !important;
|
||||||
}
|
}
|
||||||
|
BIN
src/assets/fzzys_GBK.TTF
Normal file
BIN
src/assets/fzzys_GBK.TTF
Normal file
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 5.0 MiB After Width: | Height: | Size: 7.2 MiB |
BIN
src/assets/images/df29@2x.png
Normal file
BIN
src/assets/images/df29@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/image20@2x.png
Normal file
BIN
src/assets/images/image20@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/tc31@2x.png
Normal file
BIN
src/assets/images/tc31@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/zzdf30@2x.png
Normal file
BIN
src/assets/images/zzdf30@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
@ -28,66 +28,93 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="w-100vw h-100vh flex flex-col overflow-hidden">
|
<div class="w-100vw h-100vh flex flex-col overflow-hidden font-[FZZhongYaSong] ">
|
||||||
<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
|
<div
|
||||||
class="grow-1 bg-no-repeat bg-center bg-cover wrap1 overflow-y-auto flex flex-col items-center pt-32px px-26px">
|
class="grow-1 wrap1 flex flex-col items-center pt-97px pb-31px px-26px">
|
||||||
<!-- 其他内容 -->
|
<!-- 其他内容 -->
|
||||||
<div class="text-20px text-#010101 font-bold mb-22px">{{ info.title }}</div>
|
<div class="text-29px text-#010101 font-400 mb-23px">《{{ info.title }}》</div>
|
||||||
<div class="bg-[rgba(0,0,0,0.1)] w-255px h-346px mb-13px" @click="showImagePreview([info.image])">
|
<div class="bg-[rgba(0,0,0,0.1)] w-255px h-346px mb-15px" @click="showImagePreview([info.image])">
|
||||||
<img :src="info.image" class="object-contain w-full h-full" alt="">
|
<img :src="info.image" class="object-contain w-full h-full" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="font-bold text-16px mb-45px">{{ info.artist }}</div>
|
<div class="font-400 text-22px mb-34px">{{ info.artist }}</div>
|
||||||
<div class="text-12px w-full">
|
<div class="text-12px mb-56px w-255px">
|
||||||
<div class="flex mb-9px">
|
<div class="flex mb-9px ">
|
||||||
<div class="font-bold">尺寸:</div>
|
<div class="font-300 flex items-center">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span>【尺寸】</span>
|
||||||
|
</div>
|
||||||
<div>{{ info.size }}</div>
|
<div>{{ info.size }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mb-9px">
|
<div class="flex mb-9px ">
|
||||||
<div class="font-bold">年份:</div>
|
<div class="font-300 flex items-center">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span>【年份】</span>
|
||||||
|
</div>
|
||||||
<div>{{ info.year }}</div>
|
<div>{{ info.year }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mb-9px">
|
<div class="flex mb-9px ">
|
||||||
<div class="font-bold">类型:</div>
|
<div class="font-300 flex items-center">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span>【类型】</span>
|
||||||
|
</div>
|
||||||
<div>{{ info.type }}</div>
|
<div>{{ info.type }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mb-5px">
|
<div class="flex mb-5px ">
|
||||||
<div class="font-bold">材质:</div>
|
<div class="font-300 flex items-center">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span>【材质】</span>
|
||||||
|
</div>
|
||||||
<div>{{ info.material }}</div>
|
<div>{{ info.material }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mb-9px">
|
<div class="flex mb-38px ">
|
||||||
<div class="font-bold whitespace-nowrap translate-y-5px">画作赏析:</div>
|
<div class="font-300 flex pt-4px">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span class="whitespace-nowrap">【笔墨技法】</span>
|
||||||
|
</div>
|
||||||
|
<div class="leading-22px">{{ info.penTechniques }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex mb-38px ">
|
||||||
|
<div class="font-300 flex pt-4px">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span class="whitespace-nowrap">【绘画思想】</span>
|
||||||
|
</div>
|
||||||
|
<div class="leading-22px">{{ info.artIdea }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex mb-38px ">
|
||||||
|
<div class="font-300 flex pt-4px">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span class="whitespace-nowrap">【表达思想】</span>
|
||||||
|
</div>
|
||||||
|
<div class="leading-22px">{{ info.expressIdea }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex mb-38px ">
|
||||||
|
<div class="font-300 flex pt-4px">
|
||||||
|
<img class="w-12px h-13px" src="@/assets/images/image20@2x.png" alt="">
|
||||||
|
<span class="whitespace-nowrap">【画作赏析】</span>
|
||||||
|
</div>
|
||||||
<div class="leading-22px">{{ info.appreciation }}</div>
|
<div class="leading-22px">{{ info.appreciation }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex justify-around w-full">
|
||||||
<div class="w-33px h-full shrink-0">
|
<img class="w-68px h-44px" src="@/assets/images/df29@2x.png" alt="">
|
||||||
<img src="@/assets/images/20250407155213.png" class="w-33px h-full object-fill" alt="">
|
<img class="w-101px h-44px" src="@/assets/images/zzdf30@2x.png" alt="">
|
||||||
|
<img class="w-50px h-34px" src="@/assets/images/tc31@2x.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100vw h-33px">
|
|
||||||
<img src="@/assets/images/20250407155204.png" class="w-100vw object-fill" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.wrap1 {
|
.wrap1 {
|
||||||
background-image: url('../../assets/images/20250407155229.png');
|
background-image: url('../../assets/images/20250407155229.png');
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -15,6 +15,11 @@ export default defineConfig({
|
|||||||
rules: [
|
rules: [
|
||||||
// ...
|
// ...
|
||||||
],
|
],
|
||||||
|
theme: {
|
||||||
|
fontFamily: {
|
||||||
|
zhongya: ['FZZhongYaSong', 'sans-serif']
|
||||||
|
}
|
||||||
|
},
|
||||||
// 添加快捷方式
|
// 添加快捷方式
|
||||||
shortcuts: {
|
shortcuts: {
|
||||||
// ...
|
// ...
|
||||||
|
Loading…
Reference in New Issue
Block a user