Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2caa0190 1 parent 44fd9678

分享图片生成样式调整

Inline Side-by-side
Showing 2 changed files with 45 additions and 20 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-26 14:36:57 2 * @Date: 2022-09-26 14:36:57
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-28 18:02:43 4 + * @LastEditTime: 2022-10-31 11:28:15
5 * @FilePath: /swx/src/pages/activityDetail/index.vue 5 * @FilePath: /swx/src/pages/activityDetail/index.vue
6 * @Description: 活动详情页 6 * @Description: 活动详情页
7 --> 7 -->
...@@ -154,6 +154,7 @@ import * as dayjs from 'dayjs' ...@@ -154,6 +154,7 @@ import * as dayjs from 'dayjs'
154 import { infoUserAPI } from '@/api/User/index'; 154 import { infoUserAPI } from '@/api/User/index';
155 import { qrCodeActivityAPI } from '@/api/Activity/index'; 155 import { qrCodeActivityAPI } from '@/api/Activity/index';
156 import icon_share from '@/images/icon/share.png' 156 import icon_share from '@/images/icon/share.png'
157 +import image_line from '@/images/line@2x-2.png'
157 158
158 const nickname = ref(''); 159 const nickname = ref('');
159 const avatar = ref(''); 160 const avatar = ref('');
...@@ -213,20 +214,21 @@ const start = async () => { ...@@ -213,20 +214,21 @@ const start = async () => {
213 backgroundColor: '', 214 backgroundColor: '',
214 debug: false, 215 debug: false,
215 blocks: [ 216 blocks: [
216 - { 217 + { // 上部分canvas画布高度
217 x: 40, 218 x: 40,
218 y: 20, 219 y: 20,
219 width: 950, 220 width: 950,
220 - height: 1200, 221 + height: 950,
221 paddingLeft: 0, 222 paddingLeft: 0,
222 paddingRight: 0, 223 paddingRight: 0,
223 borderWidth: 1, 224 borderWidth: 1,
224 - borderColor: '#D9DCD5', 225 + // borderColor: '#D9DCD5',
226 + borderColor: '#fff',
225 backgroundColor: '#fff', 227 backgroundColor: '#fff',
226 - borderRadius: 16, 228 + // borderRadius: 16,
227 - // borderRadiusGroup: [0, 0, 18, 18], 229 + borderRadiusGroup: [16, 16, 0, 0],
228 }, 230 },
229 - { 231 + { // 活动时间背景图, 写文字撑开长度
230 x: 40, 232 x: 40,
231 y: 730, 233 y: 730,
232 // width: 580, 234 // width: 580,
...@@ -256,7 +258,7 @@ const start = async () => { ...@@ -256,7 +258,7 @@ const start = async () => {
256 // borderRadius: 16, 258 // borderRadius: 16,
257 // zIndex: 100, 259 // zIndex: 100,
258 }, 260 },
259 - { 261 + { // 活动地点背景图, 写文字撑开长度
260 x: 40, 262 x: 40,
261 y: 830, 263 y: 830,
262 // width: 580, 264 // width: 580,
...@@ -286,6 +288,19 @@ const start = async () => { ...@@ -286,6 +288,19 @@ const start = async () => {
286 // borderRadius: 16, 288 // borderRadius: 16,
287 // zIndex: 100, 289 // zIndex: 100,
288 }, 290 },
291 + { // 下部分canvas画布高度
292 + x: 40,
293 + y: 1060,
294 + width: 950,
295 + height: 250,
296 + paddingLeft: 0,
297 + paddingRight: 0,
298 + borderWidth: 1,
299 + borderColor: '#fff',
300 + backgroundColor: '#fff',
301 + // borderRadius: 16,
302 + borderRadiusGroup: [0, 0, 16, 16],
303 + }
289 ], 304 ],
290 texts: [ 305 texts: [
291 { 306 {
...@@ -334,7 +349,7 @@ const start = async () => { ...@@ -334,7 +349,7 @@ const start = async () => {
334 }, 349 },
335 { 350 {
336 x: 300, 351 x: 300,
337 - y: 1080, 352 + y: 1150,
338 text: nickname.value, 353 text: nickname.value,
339 fontSize: 50, 354 fontSize: 50,
340 color: '#333', 355 color: '#333',
...@@ -347,7 +362,7 @@ const start = async () => { ...@@ -347,7 +362,7 @@ const start = async () => {
347 }, 362 },
348 { 363 {
349 x: 300, 364 x: 300,
350 - y: 1150, 365 + y: 1220,
351 text: '邀请你一起来活动！', 366 text: '邀请你一起来活动！',
352 fontSize: 42, 367 fontSize: 42,
353 color: '#8F9399', 368 color: '#8F9399',
...@@ -361,6 +376,16 @@ const start = async () => { ...@@ -361,6 +376,16 @@ const start = async () => {
361 ], 376 ],
362 images: [ 377 images: [
363 { 378 {
379 + url: image_line,
380 + width: 949,
381 + height: 108,
382 + x: 40,
383 + y: 960,
384 + // borderRadius: 0,
385 + // borderWidth: 0,
386 + zIndex: 10,
387 + },
388 + {
364 url: activity.cover, 389 url: activity.cover,
365 width: 950, 390 width: 950,
366 height: 500, 391 height: 500,
...@@ -398,7 +423,7 @@ const start = async () => { ...@@ -398,7 +423,7 @@ const start = async () => {
398 width: 170, 423 width: 170,
399 height: 170, 424 height: 170,
400 x: 80, 425 x: 80,
401 - y: 1030, 426 + y: 1090,
402 borderRadius: 100, 427 borderRadius: 100,
403 borderWidth: 0, 428 borderWidth: 0,
404 zIndex: 10, 429 zIndex: 10,
...@@ -408,21 +433,21 @@ const start = async () => { ...@@ -408,21 +433,21 @@ const start = async () => {
408 width: 170, 433 width: 170,
409 height: 170, 434 height: 170,
410 x: 750, 435 x: 750,
411 - y: 1030, 436 + y: 1090,
412 borderRadius: 100, 437 borderRadius: 100,
413 borderWidth: 0, 438 borderWidth: 0,
414 zIndex: 10, 439 zIndex: 10,
415 }, 440 },
416 ], 441 ],
417 lines: [ 442 lines: [
418 - { 443 + // {
419 - startY: 970, 444 + // startY: 970,
420 - startX: 80, 445 + // startX: 80,
421 - endX: 950, 446 + // endX: 950,
422 - endY: 971, 447 + // endY: 971,
423 - width: 1, 448 + // width: 1,
424 - color: '#8F9399', 449 + // color: '#8F9399',
425 - } 450 + // }
426 ] 451 ]
427 } 452 }
428 startDraw.value = true; 453 startDraw.value = true;
......