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
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 class="poster-text-boxer"> 8 + <div ref="canvasRef" class="poster-contain" style="">
9 - <div class="poster-text"> 9 + <div class="poster-text-boxer">
10 - <span class="name">{{ tree_data?.name }}</span> 10 + <div class="poster-text">
11 - <div class="nickname">{{ tree_data?.nickname }}</div> 11 + <span class="name">{{ tree_data?.name }}</span>
12 + <div class="nickname">{{ tree_data?.nickname }}</div>
13 + </div>
12 </div> 14 </div>
13 - </div> 15 + <div style="position: relative;">
14 - <div style="position: relative;"> 16 + <img :src="imgSrc">
15 - <img :src="imgSrc"> 17 + <div style="position: absolute; right: 5px; bottom: 5px;">
16 - <div style="position: absolute; right: 5px; bottom: 5px;"> 18 + <img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;">
17 - <img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;"> 19 + </div>
18 - </div>
19 - </div>
20 - <div class="poster-mission">
21 - <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
22 - {{ tree_data?.mission_title }}
23 </div> 20 </div>
24 - <div style="font-size: 0.9rem; margin-bottom: 0.5rem;"> 21 + <div class="poster-mission">
25 - {{ tree_data?.mission_note }} 22 + <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
23 + {{ tree_data?.mission_title }}
24 + </div>
25 + <div style="font-size: 0.9rem; margin-bottom: 0.5rem;">
26 + {{ tree_data?.mission_note }}
27 + </div>
26 </div> 28 </div>
27 - </div>
28 29
30 + </div>
29 </div> 31 </div>
30 - <div v-if="imgUrl"> 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--;
......