Showing
3 changed files
with
57 additions
and
2 deletions
7.02 KB
6.16 KB
| ... | @@ -10,14 +10,20 @@ | ... | @@ -10,14 +10,20 @@ |
| 10 | </div> | 10 | </div> |
| 11 | <div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;"> | 11 | <div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;"> |
| 12 | <div ref="canvasRef" class="poster-contain" style=""> | 12 | <div ref="canvasRef" class="poster-contain" style=""> |
| 13 | - <div v-if="tree_data?.name" class="poster-text-boxer"> | 13 | + <!-- <div v-if="tree_data?.name" class="poster-text-boxer"> |
| 14 | <div class="poster-text"> | 14 | <div class="poster-text"> |
| 15 | <div class="name">{{ tree_data?.name }}</div> | 15 | <div class="name">{{ tree_data?.name }}</div> |
| 16 | <div class="nickname">{{ tree_data?.nickname }}</div> | 16 | <div class="nickname">{{ tree_data?.nickname }}</div> |
| 17 | </div> | 17 | </div> |
| 18 | + </div> --> | ||
| 19 | + <div class="poster-img-boxer"> | ||
| 20 | + <div :class="'poster-img' + tree_data?.revision" :style="{ backgroundImage: `url(https://cdn.ipadbiz.cn/xfPark/post/public/title/${tree_data?.revision}.png)` }"></div> | ||
| 18 | </div> | 21 | </div> |
| 19 | <div style="position: relative;"> | 22 | <div style="position: relative;"> |
| 20 | <img :src="imgSrc"> | 23 | <img :src="imgSrc"> |
| 24 | + <div style="position: absolute; left: 5px; bottom: 5px;"> | ||
| 25 | + <img src="https://cdn.ipadbiz.cn/xfPark/post/public/home_qrcode.1.png" style=" width: 2.5rem; height: 2.5rem;"> | ||
| 26 | + </div> | ||
| 21 | <div style="position: absolute; right: 5px; bottom: 5px;"> | 27 | <div style="position: absolute; right: 5px; bottom: 5px;"> |
| 22 | <img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;"> | 28 | <img src="https://cdn.ipadbiz.cn/xfPark/post/public/logo.1713241695.png" style=" width: 4rem; height: 5rem;"> |
| 23 | </div> | 29 | </div> |
| ... | @@ -187,13 +193,14 @@ const createImage = () => { | ... | @@ -187,13 +193,14 @@ const createImage = () => { |
| 187 | // canvas: canvas, | 193 | // canvas: canvas, |
| 188 | useCORS: true,//配置允许跨域 | 194 | useCORS: true,//配置允许跨域 |
| 189 | scale: DPR(), | 195 | scale: DPR(), |
| 196 | + // scale: 10, | ||
| 190 | // windowWidth: document.body.scrollWidth, | 197 | // windowWidth: document.body.scrollWidth, |
| 191 | // windowHeight: document.body.scrollHeight, | 198 | // windowHeight: document.body.scrollHeight, |
| 192 | // x: 0, | 199 | // x: 0, |
| 193 | // y: window.pageYOffset, | 200 | // y: window.pageYOffset, |
| 194 | // allowTaint: true, | 201 | // allowTaint: true, |
| 195 | // background: "#d21f2c", // 一定要添加背景颜色,否则出来的图片,背景全部都是透明的 | 202 | // background: "#d21f2c", // 一定要添加背景颜色,否则出来的图片,背景全部都是透明的 |
| 196 | - // dpi: 300 // 处理模糊问题 | 203 | + dpi: 500 // 处理模糊问题 |
| 197 | }; | 204 | }; |
| 198 | // console.log("获取指定的宽高", width, height, canvas); | 205 | // console.log("获取指定的宽高", width, height, canvas); |
| 199 | html2canvas(canvasDom, options) | 206 | html2canvas(canvasDom, options) |
| ... | @@ -340,6 +347,54 @@ const afterRead = async (res) => { | ... | @@ -340,6 +347,54 @@ const afterRead = async (res) => { |
| 340 | } | 347 | } |
| 341 | } | 348 | } |
| 342 | } | 349 | } |
| 350 | + .poster-img-boxer { | ||
| 351 | + z-index: 10; | ||
| 352 | + position: absolute; | ||
| 353 | + top: 3rem; | ||
| 354 | + left: 2rem; | ||
| 355 | + .poster-img1 { | ||
| 356 | + position: relative; | ||
| 357 | + background-repeat: no-repeat; | ||
| 358 | + background-size: contain; | ||
| 359 | + width: 4.5rem; | ||
| 360 | + height: 6rem; | ||
| 361 | + } | ||
| 362 | + .poster-img2 { | ||
| 363 | + position: relative; | ||
| 364 | + background-repeat: no-repeat; | ||
| 365 | + background-size: contain; | ||
| 366 | + width: 4.5rem; | ||
| 367 | + height: 6rem; | ||
| 368 | + } | ||
| 369 | + .poster-img3 { | ||
| 370 | + position: relative; | ||
| 371 | + background-repeat: no-repeat; | ||
| 372 | + background-size: contain; | ||
| 373 | + width: 4.5rem; | ||
| 374 | + height: 6rem; | ||
| 375 | + } | ||
| 376 | + .poster-img4 { | ||
| 377 | + position: relative; | ||
| 378 | + background-repeat: no-repeat; | ||
| 379 | + background-size: contain; | ||
| 380 | + width: 6rem; | ||
| 381 | + height: 9rem; | ||
| 382 | + } | ||
| 383 | + .poster-img5 { | ||
| 384 | + position: relative; | ||
| 385 | + background-repeat: no-repeat; | ||
| 386 | + background-size: contain; | ||
| 387 | + width: 8rem; | ||
| 388 | + height: 13rem; | ||
| 389 | + } | ||
| 390 | + .poster-img6 { | ||
| 391 | + position: relative; | ||
| 392 | + background-repeat: no-repeat; | ||
| 393 | + background-size: contain; | ||
| 394 | + width: 4.5rem; | ||
| 395 | + height: 6rem; | ||
| 396 | + } | ||
| 397 | + } | ||
| 343 | img { | 398 | img { |
| 344 | width: 100%; | 399 | width: 100%; |
| 345 | height: 70vh; | 400 | height: 70vh; | ... | ... |
-
Please register or login to post a comment