Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b10048f2 1 parent 33cd1943

fix 海报边框显示调整

Inline Side-by-side
Showing 1 changed file with 29 additions and 21 deletions
<template>
<div class="poster-page">
<div style="position: fixed; right: 5px; top: 10px; z-index: 9;">
<div @click="goToIndex" style="position: fixed; right: 5px; top: 10px; z-index: 9;">
<img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;">
</div>
<div class="poster-contain-wrapper">
<div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1.5px solid #9C8882; ">
<div class="poster-text-boxer">
<div class="poster-text">
<span class="name">{{ tree_data?.name }}</span>
<div class="nickname">{{ tree_data?.nickname }}</div>
<div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;">
<div ref="canvasRef" class="poster-contain" style="">
<div class="poster-text-boxer">
<div class="poster-text">
<span class="name">{{ tree_data?.name }}</span>
<div class="nickname">{{ tree_data?.nickname }}</div>
</div>
</div>
</div>
<div style="position: relative;">
<img :src="imgSrc">
<div style="position: absolute; right: 5px; bottom: 5px;">
<img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;">
</div>
</div>
<div class="poster-mission">
<div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
{{ tree_data?.mission_title }}
<div style="position: relative;">
<img :src="imgSrc">
<div style="position: absolute; right: 5px; bottom: 5px;">
<img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;">
</div>
</div>
<div style="font-size: 0.9rem; margin-bottom: 0.5rem;">
{{ tree_data?.mission_note }}
<div class="poster-mission">
<div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
{{ tree_data?.mission_title }}
</div>
<div style="font-size: 0.9rem; margin-bottom: 0.5rem;">
{{ tree_data?.mission_note }}
</div>
</div>
</div>
</div>
</div>
<div v-if="imgUrl">
<div v-if="imgUrl" :style="{border: '1.5px solid #9C8882', boxShadow: '8px 8px 8px 0px rgba(156,136,130,1)', height: ref_height}">
<img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
</div>
</div>
......@@ -88,7 +90,7 @@ onMounted(async () => {
ref_width.value = canvasDom.offsetWidth + 'px';
ref_height.value = canvasDom.offsetHeight + 'px';
});
// createImage();
createImage();
});
const resizePoster = () => { // 重置海报
......@@ -104,6 +106,12 @@ const resizePoster = () => { // 重置海报
createImage();
};
const goToIndex = () => { // 返回首页
$router.push({
path: '/',
});
}
const posterPrev = () => { // 上一个
if (posterIndex.value > 0) {
posterIndex.value--;
......