调整design的moodboard的位置信息和部分修改
This commit is contained in:
@@ -8,9 +8,10 @@
|
||||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
|
||||
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
|
||||
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
|
||||
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
|
||||
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
|
||||
<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
|
||||
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front">front</div>
|
||||
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back">back</div>
|
||||
<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
|
||||
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
|
||||
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
|
||||
</div>
|
||||
@@ -75,8 +76,8 @@ export default defineComponent({
|
||||
let canvasBtn = reactive({
|
||||
canvasState:'move',
|
||||
canvasPencilWidth:{
|
||||
pencil:4,
|
||||
eraser:4,
|
||||
pencil:20,
|
||||
eraser:20,
|
||||
},
|
||||
spreadState:false,
|
||||
})
|
||||
@@ -221,6 +222,7 @@ export default defineComponent({
|
||||
pencilbtnStyle.value.top = parentY+'px'
|
||||
}
|
||||
let setOperation = (str)=>{
|
||||
if(!canvas)return
|
||||
canvasBtn.canvasState = str
|
||||
if(str == 'move'){
|
||||
setMove()
|
||||
@@ -450,6 +452,7 @@ export default defineComponent({
|
||||
input{
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
max-width: 30%;
|
||||
}
|
||||
.icon-xiala{
|
||||
position: absolute;
|
||||
@@ -469,13 +472,16 @@ export default defineComponent({
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen,.editFrontBack_center_btn_colorWhite{
|
||||
width: 10rem;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
height: 3rem;
|
||||
border-radius: 4px;
|
||||
margin: 0 .5rem;
|
||||
cursor: pointer;
|
||||
padding: .5rem 1;
|
||||
border: 1px solid rgba(0,0,0,.5);
|
||||
&.active{
|
||||
border: 2px solid;
|
||||
border-radius: .4rem;
|
||||
@@ -487,6 +493,9 @@ export default defineComponent({
|
||||
.editFrontBack_center_btn_colorGreen{
|
||||
background: rgba(0,255,0);
|
||||
}
|
||||
.editFrontBack_center_btn_colorWhite{
|
||||
background: rgba(255,255,255);
|
||||
}
|
||||
i{
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user