From 0743d47eca07827e1ade3554db67b1f6fde4aae1 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期三, 16 十月 2024 18:25:37 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/paint/index.vue | 22 ++++++++++++++++------ 1 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue index 11f9075..75e7a89 100644 --- a/src/components/paint/index.vue +++ b/src/components/paint/index.vue @@ -1,9 +1,9 @@ <template> <div class="paint"> - <canvas width="600" height="800" id="canvas"></canvas> + <canvas id="canvas" width="400" :height="canvasHeight"></canvas> <!-- 鎿嶄綔鎸夐挳 --> <ul class="paint-btn"> - <li class="btn-box"> + <li class="paint-btn-box"> <button @click="changeDrawMode"> {{ isDraw ? "妗嗛�夋ā寮�" : "缁樺浘妯″紡" }} </button> @@ -122,6 +122,10 @@ type: Number, default: 1, }, + canvasHeight:{ + type:Number, + default:380 + } }, mounted() { this.init(); @@ -237,7 +241,7 @@ this.canvas.renderAll.bind(this.canvas), { // 鍙互璁剧疆鍥惧儚鐨勬牱寮忥紝姣斿涓嶉�忔槑搴� - opacity: 0.5, + // opacity: 0.5, } ); // 娓叉煋鐢诲竷 @@ -358,20 +362,26 @@ </script> <style lang="less" scoped> +.paint { + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: center; +} #canvas { border: 1px solid #ccc; } .paint-btn { + width: 96%; margin-top:40px; padding:20px; border:1px solid #ededed; - width:max-content; li { margin-bottom:6px; } } -.btn-box { +.paint-btn-box { display:flex; - justify-content:space-between; + justify-content:space-evenly; } </style> -- Gitblit v1.9.1