Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
commit
fddabf7f3e
|
|
@ -34,10 +34,7 @@
|
|||
<card-container class="h">
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-radio-group v-model="form.border_show">
|
||||
<el-radio value="1">显示</el-radio>
|
||||
<el-radio value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
|
|
|
|||
|
|
@ -83,10 +83,7 @@
|
|||
<card-container>
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-radio-group v-model="form.border_show">
|
||||
<el-radio value="1">显示</el-radio>
|
||||
<el-radio value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
|
|
|
|||
|
|
@ -231,3 +231,8 @@
|
|||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clear-selection {
|
||||
cursor: pointer;
|
||||
color: $cr-main;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<slider v-model="center_height" :max="3000">组件高度</slider>
|
||||
</card-container>
|
||||
<card-container class="h selected">
|
||||
<div class="mb-12 flex-row align-c jc-sb">已选组件<el-button @click="cancel">清除选中</el-button></div>
|
||||
<div class="mb-12 flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel">清除选中</span></div>
|
||||
<div class="assembly">
|
||||
<div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
|
||||
<div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs == '1' }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
|
||||
|
|
@ -368,6 +368,10 @@ const end_drag = (event: MouseEvent) => {
|
|||
init_drag_style.value = ``;
|
||||
if (rect_end.value.width > 16 && rect_end.value.height > 16) {
|
||||
hot_list.data = [{ name: '热区' + (hot_list.data.length + 1), link: {}, drag_start: cloneDeep(rect_start.value), drag_end: cloneDeep(rect_end.value) }];
|
||||
diy_data.value.forEach((item: any) => {
|
||||
item.show_tabs = '0';
|
||||
});
|
||||
emits('rightUpdate', {});
|
||||
}
|
||||
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
|
||||
rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
|
||||
|
|
@ -565,6 +569,79 @@ const rect_style = computed(() => {
|
|||
});
|
||||
//#endregion
|
||||
//#region 绑定上下左右事件
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
let key_code = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
// 键盘控制
|
||||
if (e.key === 'ArrowUp') { //上键
|
||||
y = -1;
|
||||
} else if (e.key === 'ArrowDown') { // 下键
|
||||
y = 1;
|
||||
} else if (e.key === 'ArrowLeft') { //左键
|
||||
x = -1;
|
||||
} else if (e.key === 'ArrowRight') { //右键
|
||||
x = 1;
|
||||
}
|
||||
e.preventDefault();
|
||||
// 只有是点击上下左右的时候才会生效
|
||||
if (key_code.includes(e.key)) {
|
||||
data_handling(x, y);
|
||||
}
|
||||
};
|
||||
const data_handling = (x: number, y: number) => {
|
||||
// 遍历对象,内部容器更新
|
||||
if (hot_list.data.length > 0) {
|
||||
// 更新热区位置
|
||||
const { drag_start, drag_end } = hot_list.data[0];
|
||||
if (isWithinBounds(drag_start.x + x, drag_end.width, 390)) {
|
||||
hot_list.data[0].drag_start.x += x;
|
||||
}
|
||||
if (isWithinBounds(drag_start.y + y, drag_end.height, center_height.value)) {
|
||||
hot_list.data[0].drag_start.y += y;
|
||||
}
|
||||
// 按下按钮的时候判断当前包含哪些组件, 避免后续包裹的或者没有手动拖拽过的无法更新其中组件的内容
|
||||
const rect1 = { x: drag_start.x, y: drag_start.y, width: drag_end.width, height: drag_end.height }
|
||||
diy_data.value.forEach(item => {
|
||||
const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height };
|
||||
// 如果交集或者包裹,返回为1,否则为0
|
||||
if (isRectangleIntersecting(rect1, rect2) == '1') {
|
||||
// x 轴不小于0 并且不大于容器宽度
|
||||
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) {
|
||||
item.location.x += x;
|
||||
}
|
||||
// Y轴不小于0 并且不大于容器高度
|
||||
if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) {
|
||||
item.location.y += y;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
diy_data.value.forEach(item => {
|
||||
// 只更新选中的数据
|
||||
if (item.show_tabs == '1') {
|
||||
// x 轴不小于0 并且不大于容器宽度
|
||||
if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) {
|
||||
item.location.x += x;
|
||||
}
|
||||
// Y轴不小于0 并且不大于容器高度
|
||||
if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) {
|
||||
item.location.y += y;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// coordinate 新的坐标 current_size 当前坐标对应的组件大小(指的是组件的宽高) max_size 容器的最大大小
|
||||
const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size;
|
||||
onMounted(() => {
|
||||
// 监听键盘事件
|
||||
document.addEventListener('keyup', handleKeyUp);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 移除监听事件
|
||||
document.removeEventListener('keyup', handleKeyUp);
|
||||
});
|
||||
//#endregion
|
||||
defineExpose({
|
||||
diy_data,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div v-if="!isEmpty(form.data_source_content)" class="flex-row mt-20 gap-20">
|
||||
<div class="re flex align-c">
|
||||
<image-empty v-model="form.data_source_content[form.img_key]" fit="contain" style="width: 10rem;height: 10rem" error-img-style="width: 3rem; height: 3rem;"></image-empty>
|
||||
<div class="plr-10 bg-f abs replace-data size-10 box-shadow-sm" @click="replace_data">替换数据</div>
|
||||
<div class="plr-10 bg-f abs replace-data size-10" @click="replace_data">替换数据</div>
|
||||
</div>
|
||||
<div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
|
||||
</div>
|
||||
|
|
@ -230,8 +230,9 @@ const replace_data = () => {
|
|||
height: 2.4rem;
|
||||
bottom: 0.5rem;
|
||||
left: 2.1rem;
|
||||
line-height: 2.4rem;
|
||||
line-height: 2.2rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const base_list = reactive({
|
|||
],
|
||||
product_list: [
|
||||
{ name: '指定商品', value: '0' },
|
||||
{ name: '选择商品', value: '1' },
|
||||
{ name: '筛选商品', value: '1' },
|
||||
],
|
||||
product_category_list: [] as select_1[],
|
||||
product_brand_list: [] as select_1[],
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="搜索按钮" class="align-s">
|
||||
<el-row class="w">
|
||||
<el-col :span="24"><el-switch v-model="form.is_search_show"></el-switch></el-col>
|
||||
<el-col :span="24"><el-switch v-model="form.is_search_show" active-value="1" inactive-value="0"></el-switch></el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.is_search_show" class="mt-10 w">
|
||||
<el-row v-if="form.is_search_show == '1'" class="mt-10 w">
|
||||
<el-col :span="24">
|
||||
<el-radio-group v-model="form.search_type" class="mb-10">
|
||||
<el-radio value="img-icon">图片/图标</el-radio>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,7 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="滑动置顶">
|
||||
<el-radio-group v-model="form.tabs_top_up">
|
||||
<el-radio value="1">启用</el-radio>
|
||||
<el-radio value="0">不启用</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,14 @@
|
|||
<url-value v-model="form.title_link"></url-value>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否居中">
|
||||
<el-radio-group v-model="form.is_title_center">
|
||||
<el-radio :value="0">默认</el-radio>
|
||||
<el-radio :value="1">居中</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.is_title_center" active-value="1" inactive-value="0"/>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">关键字设置</div>
|
||||
<el-form-item label="关键字">
|
||||
<el-radio-group v-model="form.keyword_show">
|
||||
<el-radio value="1">显示</el-radio>
|
||||
<el-radio value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.keyword_show" active-value="1" inactive-value="0"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.keyword_show == '1'">
|
||||
<drag :data="form.keyword_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
|
||||
|
|
@ -48,10 +42,7 @@
|
|||
<card-container>
|
||||
<div class="mb-12">更多设置</div>
|
||||
<el-form-item label="右侧按钮">
|
||||
<el-radio-group v-model="form.right_show">
|
||||
<el-radio value="1">显示</el-radio>
|
||||
<el-radio value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.right_show" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="form.right_show == '1'">
|
||||
<el-form-item label="右侧文字">
|
||||
|
|
|
|||
|
|
@ -45,10 +45,7 @@
|
|||
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头按钮">
|
||||
<el-radio-group v-model="form.is_arrows_show">
|
||||
<el-radio value="1">显示</el-radio>
|
||||
<el-radio value="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.is_arrows_show" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -59,9 +56,7 @@
|
|||
</template>
|
||||
<card-container>
|
||||
<el-form-item label="底部导航">
|
||||
<el-radio-group v-model="form.bottom_navigation_show">
|
||||
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{item.name }}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.bottom_navigation_show" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</el-form>
|
||||
|
|
@ -82,11 +77,7 @@ const base_list = reactive({
|
|||
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
|
||||
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
|
||||
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
|
||||
],
|
||||
bottom_navigation: [
|
||||
{ name: '显示', value: '1' },
|
||||
{ name: '隐藏', value: '0' },
|
||||
],
|
||||
]
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:change-theme']);
|
||||
|
|
|
|||
|
|
@ -42,16 +42,10 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
|
||||
<el-radio-group v-model="form.immersive_style">
|
||||
<el-radio value="1">开启</el-radio>
|
||||
<el-radio value="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="上滑展示">
|
||||
<el-radio-group v-model="form.up_slide_display">
|
||||
<el-radio value="1">保留</el-radio>
|
||||
<el-radio value="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
|
||||
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
|
||||
|
|
|
|||
|
|
@ -264,19 +264,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1680px) {
|
||||
.main .acticons .el-button {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1560px) {
|
||||
.siderbar {
|
||||
width: 32rem;
|
||||
}
|
||||
.drawer-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.seat {
|
||||
background: transparent;
|
||||
height: 0.2rem;
|
||||
|
|
@ -372,3 +359,18 @@
|
|||
transform: rotate(12deg) scale(1.05) translateY(0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1680px) {
|
||||
.main .acticons .el-button {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1560px) {
|
||||
.siderbar {
|
||||
width: 32rem;
|
||||
}
|
||||
.drawer-container, .layout-toggle-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue