Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
commit
282eb0c1ff
|
|
@ -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,
|
||||
}
|
||||
});
|
||||
// 初始化表单数据
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '基础组件',
|
||||
|
|
|
|||
Loading…
Reference in New Issue