aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

平铺元素ui更改

Browse Source
This commit is contained in:
李志鹏
2026-01-13 14:41:20 +08:00
parent e1ca896764
commit 6eda04a81e
18 changed files with 1544 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="repeat-setting">
<div class="title">{{ t("Canvas.repeatSetting") }}</div>
<div class="repeat-setting-item">
<span class="label">{{ t("Canvas.angle") }}</span>
<angle-tool
:angle="angle"
@input="(e) => emit('inputFillAngle', e)"
@change="(e) => emit('changeFillAngle', e)"
style-type="2"
/>
</div>
<p></p>
<div class="repeat-setting-item">
<span class="label">{{ t("Canvas.scale") }}</span>
<slider
@@ -22,7 +23,6 @@
@change="changeFillScale"
/>
</div>
<p></p>
<div class="repeat-setting-item">
<span class="label">Gap X</span>
<slider
@@ -36,7 +36,6 @@
@change="(e) => emit('changeFill_Gap', e, gapY)"
/>
</div>
<p></p>
<div class="repeat-setting-item">
<span class="label">Gap Y</span>
<slider
@@ -50,14 +49,23 @@
@change="(e) => emit('changeFill_Gap', gapX, e)"
/>
</div>
<p></p>
<div class="repeat-setting-item">
<span class="label">{{ t("Canvas.offset") }}</span>
<offset-tool
:top="(props.object.fill?.offsetY / props.object.height) * 100"
:left="(props.object.fill?.offsetX / props.object.width) * 100"
:left="offsetX"
:top="offsetY"
@input="(e) => emit('inputFillOffset', e)"
@change="(e) => emit('changeFillOffset', e)"
:show-dish="false"
/>
</div>
<div class="repeat-setting-item offset">
<offset-tool
:left="offsetX"
:top="offsetY"
@input="(e) => emit('inputFillOffset', e)"
@change="(e) => emit('changeFillOffset', e)"
:show-input="false"
/>
</div>
</div>
@@ -88,6 +96,12 @@
});
const gapX = computed(() => props.object.fill_?.gapX || 0);
const gapY = computed(() => props.object.fill_?.gapY || 0);
const offsetX = computed(
() => (props.object.fill?.offsetX / props.object.width) * 100
);
const offsetY = computed(
() => (props.object.fill?.offsetY / props.object.height) * 100
);
const emit = defineEmits([
"inputFillAngle",
"changeFillAngle",
@@ -111,23 +125,36 @@
<style scoped lang="less">
.repeat-setting {
user-select: none;
width: 228px;
> .title {
line-height: 35px;
font-size: 14px;
text-align: center;
margin-top: -12px;
margin-bottom: 3px;
}
> .repeat-setting-item {
display: flex;
align-items: center;
//虚线
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&.offset {
justify-content: center;
}
> .label {
min-width: 50px;
font-size: 14px;
min-width: 68px;
font-size: 12px;
}
> .angle-tool {
&:not(.offset) > div {
width: 120px;
flex: 1;
}
> .slider {
--slider-thumb-color1: #000;
--slider-thumb-color2: #eee;
}
}
> p {
margin: 10px 0;
width: 100%;
height: 0;
border-bottom: 1px dashed #e5e5e5;
}
}
</style>