Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-08-28 18:23:02 +08:00
commit 282eb0c1ff
3 changed files with 27 additions and 12 deletions

View File

@ -28,13 +28,13 @@
<el-form-item label="内边距">
<padding :value="form" @update:value="padding_change"></padding>
</el-form-item>
<el-form-item label="外边距">
<el-form-item v-if="isMargin" label="外边距">
<margin :value="form" @update:value="margin_change"></margin>
</el-form-item>
<el-form-item label="圆角">
<el-form-item v-if="isRadius" label="圆角">
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
<el-form-item label="阴影设置">
<el-form-item v-if="isShadow" label="阴影设置">
<div class="flex-col gap-10 w">
<el-form-item label="颜色" label-width="45">
<color-picker v-model="form.box_shadow_color" @update:value="box_shadow_color_event"></color-picker>
@ -63,6 +63,18 @@ const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
isMargin: {
type: Boolean,
default: true,
},
isRadius: {
type: Boolean,
default: true,
},
isShadow: {
type: Boolean,
default: true,
}
});
//

View File

@ -52,7 +52,7 @@
</el-form-item>
</card-container>
</el-form>
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">
@ -79,8 +79,5 @@ const mult_color_picker_event = (arry: string[], type: number) => {
<style lang="scss" scoped>
.styles {
width: 100%;
.styles-height {
min-height: calc(100vh - 16.8rem);
}
}
</style>

View File

@ -41,7 +41,7 @@
<el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
</div>
<div class="plug-in-name">{{ item.name }}</div>
<div class="main-content" :class="{ 'plug-in-close': !item.is_enable }">
<div class="main-content" :class="{ 'plug-in-close': !item.is_enable }" :style="main_content_style">
<!-- 基础组件 -->
<!-- 视频 -->
<template v-if="item.key == 'video'">
@ -145,7 +145,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, get_math, gradient_computer } from '@/utils';
import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import defaultSettings from './index';
@ -170,7 +170,6 @@ const props = defineProps({
const diy_data = ref(props.diyData);
const page_data = ref(props.header);
const footer_nav = ref(props.footer);
const content_style = ref('');
//
watch(
() => props.diyData,
@ -188,9 +187,15 @@ watch(
);
const top_padding = ref(90);
const top_margin = ref(0);
const content_style = ref('');
const main_content_style = ref('');
watchEffect(() => {
if (page_data.value.com_data) {
const { immersive_style, up_slide_display } = page_data.value.com_data.style;
const new_style = page_data.value.com_data.style;
content_style.value = gradient_computer(new_style.common_style) + background_computer(new_style.common_style);
main_content_style.value = padding_computer(new_style.common_style);
const { immersive_style, up_slide_display } = new_style;
//
if (immersive_style || !up_slide_display) {
top_padding.value = 2;
@ -205,6 +210,7 @@ watchEffect(() => {
}
}
});
watch(
() => props.footer,
(newValue) => {
@ -214,7 +220,7 @@ watch(
//
const emits = defineEmits(['rightUpdate']);
const activeNames = reactive(['1', '2']);
const activeNames = reactive(['1', '2', '3']);
const components = reactive([
{
title: '基础组件',