hookehuyr

fix 海报边框显示调整

1 <template> 1 <template>
2 <div class="poster-page"> 2 <div class="poster-page">
3 - <div style="position: fixed; right: 5px; top: 10px; z-index: 9;"> 3 + <div @click="goToIndex" style="position: fixed; right: 5px; top: 10px; z-index: 9;">
4 <img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;"> 4 <img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;">
5 </div> 5 </div>
6 <div class="poster-contain-wrapper"> 6 <div class="poster-contain-wrapper">
7 - <div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1.5px solid #9C8882; "> 7 + <div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;">
8 + <div ref="canvasRef" class="poster-contain" style="">
8 <div class="poster-text-boxer"> 9 <div class="poster-text-boxer">
9 <div class="poster-text"> 10 <div class="poster-text">
10 <span class="name">{{ tree_data?.name }}</span> 11 <span class="name">{{ tree_data?.name }}</span>
...@@ -27,7 +28,8 @@ ...@@ -27,7 +28,8 @@
27 </div> 28 </div>
28 29
29 </div> 30 </div>
30 - <div v-if="imgUrl"> 31 + </div>
32 + <div v-if="imgUrl" :style="{border: '1.5px solid #9C8882', boxShadow: '8px 8px 8px 0px rgba(156,136,130,1)', height: ref_height}">
31 <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }"> 33 <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
32 </div> 34 </div>
33 </div> 35 </div>
...@@ -88,7 +90,7 @@ onMounted(async () => { ...@@ -88,7 +90,7 @@ onMounted(async () => {
88 ref_width.value = canvasDom.offsetWidth + 'px'; 90 ref_width.value = canvasDom.offsetWidth + 'px';
89 ref_height.value = canvasDom.offsetHeight + 'px'; 91 ref_height.value = canvasDom.offsetHeight + 'px';
90 }); 92 });
91 - // createImage(); 93 + createImage();
92 }); 94 });
93 95
94 const resizePoster = () => { // 重置海报 96 const resizePoster = () => { // 重置海报
...@@ -104,6 +106,12 @@ const resizePoster = () => { // 重置海报 ...@@ -104,6 +106,12 @@ const resizePoster = () => { // 重置海报
104 createImage(); 106 createImage();
105 }; 107 };
106 108
109 +const goToIndex = () => { // 返回首页
110 + $router.push({
111 + path: '/',
112 + });
113 +}
114 +
107 const posterPrev = () => { // 上一个 115 const posterPrev = () => { // 上一个
108 if (posterIndex.value > 0) { 116 if (posterIndex.value > 0) {
109 posterIndex.value--; 117 posterIndex.value--;
......