Merge branch 'dev-sws' into dev-yxl
commit
ab01b2e910
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex-row align-c gap-12">
|
||||
<el-color-picker v-model="color" :predefine="predefine_colors" @change="color_picker_change" />
|
||||
<el-color-picker v-model="color" :predefine="predefine_colors" />
|
||||
<icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,11 +17,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
});
|
||||
|
||||
const color = defineModel({ type: String });
|
||||
const emit = defineEmits(['update:value']);
|
||||
const color_picker_change = (val: string | null) => {
|
||||
emit('update:value', val);
|
||||
};
|
||||
const reset_event = () => {
|
||||
console.log(1);
|
||||
if (color.value == props.defaultColor) {
|
||||
return;
|
||||
} else {
|
||||
|
|
@ -30,7 +27,6 @@ const reset_event = () => {
|
|||
} else {
|
||||
color.value = '';
|
||||
}
|
||||
emit('update:value', color.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<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>
|
||||
<color-picker v-model="form.box_shadow_color"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴" label-width="45">
|
||||
<slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
|
||||
|
|
@ -75,7 +75,7 @@ const props = defineProps({
|
|||
isShadow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
});
|
||||
// 初始化表单数据
|
||||
const init_form = reactive({
|
||||
|
|
@ -135,10 +135,6 @@ const padding_change = (padding: any) => {
|
|||
form = Object.assign(form, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
|
||||
emit('update:value', form);
|
||||
};
|
||||
const box_shadow_color_event = (val: string) => {
|
||||
form.box_shadow_color = val;
|
||||
emit('update:value', form);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.common-styles {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<el-switch v-model="form.bottom_up" />
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 partition-line" />
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container class="h">
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
|
|
@ -131,7 +131,4 @@ watch(
|
|||
width: 3rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.partition-line {
|
||||
height: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="数据字段">
|
||||
<el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="text_change('2')">
|
||||
<el-option v-for="item in options.filter(item => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
|
||||
<el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接">
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<el-switch v-model="form.bottom_up" />
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 partition-line" />
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">容器设置</div>
|
||||
<el-form-item label="容器宽度">
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 partition-line" />
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
|
|
@ -142,7 +142,7 @@ const text_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_id = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
diy_data,
|
||||
|
|
@ -168,7 +168,4 @@ watch(
|
|||
width: 3rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.partition-line {
|
||||
height: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示数量">
|
||||
<el-input v-model="form.number" type="number" min="1" max="50" placeholder="请输入显示数量" clearable />
|
||||
<el-input-number v-model="form.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序类型">
|
||||
<el-radio-group v-model="form.sort">
|
||||
|
|
@ -198,4 +198,9 @@ const url_value_dialog_call_back = (item: any[]) => {
|
|||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.number-show {
|
||||
:deep(.el-input__wrapper .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container class="content-height">
|
||||
<card-container class="content-height mb-8">
|
||||
<div class="mb-12">选项卡设置</div>
|
||||
<div class="nav-list">
|
||||
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示数量">
|
||||
<el-input v-model="row.number" type="number" min="1" max="50" placeholder="请输入显示数量" clearable />
|
||||
<el-input-number v-model="row.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序类型">
|
||||
<el-radio-group v-model="row.sort">
|
||||
|
|
@ -193,7 +193,11 @@ const tabs_list_click = (item: any, index: number) => {
|
|||
};
|
||||
// 选项卡设置
|
||||
const tabs_list_remove = (index: number) => {
|
||||
form.tabs_list.splice(index, 1);
|
||||
if (form.tabs_list.length > 1) {
|
||||
form.tabs_list.splice(index, 1);
|
||||
} else {
|
||||
ElMessage.warning('至少保留一个选项卡');
|
||||
}
|
||||
};
|
||||
const tabs_list_sort = (item: any) => {
|
||||
// 拖拽完成后更新数组
|
||||
|
|
@ -256,4 +260,9 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
|
|||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.number-show {
|
||||
:deep(.el-input__wrapper .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="图标样式" class="align-s">
|
||||
<div class="flex-col w h gap-10">
|
||||
<el-switch v-model="form.is_icon_show"/>
|
||||
<el-switch v-model="form.is_icon_show" />
|
||||
<template v-if="form.is_icon_show">
|
||||
<upload v-model="form.icon_img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
|
||||
</template>
|
||||
|
|
@ -13,16 +13,16 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="提示文字">
|
||||
<div class="flex-col gap-10 w">
|
||||
<el-switch v-model="form.is_tips_show"/>
|
||||
<el-switch v-model="form.is_tips_show" />
|
||||
<el-input v-if="form.is_tips_show" v-model="form.tips" placeholder="请输入提示文字"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.is_tips_show || form.is_icon_show" label="是否居中">
|
||||
<el-switch v-model="form.is_center"/>
|
||||
<el-switch v-model="form.is_center" />
|
||||
</el-form-item>
|
||||
<el-form-item label="搜索按钮" class="align-s">
|
||||
<div class="flex-col w h gap-10">
|
||||
<el-switch v-model="form.is_search_show"/>
|
||||
<el-switch v-model="form.is_search_show" />
|
||||
<template v-if="form.is_search_show">
|
||||
<el-radio-group v-model="form.search_type" class="ml-4">
|
||||
<el-radio value="img-icon">图片/图标</el-radio>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 partition-line" />
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">搜索热词</div>
|
||||
<drag :data="form.hot_word_list" @remove="remove" @on-sort="on_sort">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { get_math } from "@/utils";
|
||||
import { get_math } from '@/utils';
|
||||
interface Props {
|
||||
value: search_content;
|
||||
}
|
||||
|
|
@ -76,13 +76,13 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
id: get_math(), // 唯一标识使用,避免使用index作为唯一标识导致渲染节点出现问题
|
||||
value: '',
|
||||
color: '#000000',
|
||||
}
|
||||
},
|
||||
],
|
||||
})
|
||||
}),
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
form: props.value
|
||||
form: props.value,
|
||||
});
|
||||
// 如果需要解构,确保使用toRefs
|
||||
const { form } = toRefs(state);
|
||||
|
|
@ -100,14 +100,10 @@ const remove = (index: number) => {
|
|||
// 拖拽更新之后,更新数据
|
||||
const on_sort = (new_list: hot_word_list[]) => {
|
||||
form.value.hot_word_list = new_list;
|
||||
}
|
||||
};
|
||||
const search_color_change = (color: string, old_hot_word: hot_word_list) => {
|
||||
const index = form.value.hot_word_list.findIndex(item => item.id == old_hot_word.id);
|
||||
const index = form.value.hot_word_list.findIndex((item) => item.id == old_hot_word.id);
|
||||
(<arrayIndex>form.value.hot_word_list)[index].color = color;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.partition-line {
|
||||
height: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container class="content-height">
|
||||
<card-container class="content-height mb-8">
|
||||
<div class="mb-12">选项卡设置</div>
|
||||
<div class="nav-list">
|
||||
<drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
|
||||
|
|
@ -183,7 +183,11 @@ const tabs_list_click = (item: any, index: number) => {
|
|||
};
|
||||
// 选项卡设置
|
||||
const tabs_list_remove = (index: number) => {
|
||||
form.value.tabs_list.splice(index, 1);
|
||||
if (form.value.tabs_list.length > 1) {
|
||||
form.value.tabs_list.splice(index, 1);
|
||||
} else {
|
||||
ElMessage.warning('至少保留一个选项卡');
|
||||
}
|
||||
};
|
||||
const tabs_list_sort = (item: any) => {
|
||||
form.value.tabs_list = item;
|
||||
|
|
@ -265,7 +269,7 @@ const change_style = (val: any): void => {
|
|||
const is_revise = ref(false);
|
||||
const change_shop_type = () => {
|
||||
is_revise.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<url-value v-model="scoped.row.micro_page_list"></url-value>
|
||||
</template>
|
||||
<template v-else>
|
||||
<url-value v-model="scoped.row.classify" :type="[ 'goods-category' ]"></url-value>
|
||||
<url-value v-model="scoped.row.classify" :type="['goods-category']"></url-value>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
|
@ -59,12 +59,12 @@ const props = defineProps({
|
|||
tabStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
form: props.value,
|
||||
styles: props.tabStyle
|
||||
styles: props.tabStyle,
|
||||
});
|
||||
const { form, styles } = toRefs(state);
|
||||
const add = () => {
|
||||
|
|
@ -76,17 +76,21 @@ const add = () => {
|
|||
classify: {},
|
||||
micro_page: '',
|
||||
micro_page_list: [],
|
||||
category_list: []
|
||||
})
|
||||
}
|
||||
category_list: [],
|
||||
});
|
||||
};
|
||||
const remove = (index: number) => {
|
||||
form.value.tabs_list.splice(index, 1);
|
||||
}
|
||||
if (form.value.tabs_list.length > 1) {
|
||||
form.value.tabs_list.splice(index, 1);
|
||||
} else {
|
||||
ElMessage.warning('至少保留一个选项卡');
|
||||
}
|
||||
};
|
||||
// 拖拽更新之后,更新数据
|
||||
const on_sort = (new_list: nav_group[]) => {
|
||||
form.value.tabs_list = new_list;
|
||||
}
|
||||
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
|
||||
};
|
||||
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
|
||||
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<card-container class="content-height">
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">图标设置</div>
|
||||
<div class="size-12 cr-c mb-20">图片建议宽高80*80;鼠标拖拽左侧圆点可调整导航顺序</div>
|
||||
<div class="nav-list">
|
||||
|
|
@ -61,8 +62,5 @@ const add = () => {
|
|||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
.content-height {
|
||||
min-height: calc(100vh - 38.2rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<el-form :model="form" label-width="70" class="m-h">
|
||||
<card-container class="common-content-height">
|
||||
<card-container>
|
||||
<div class="mb-12">内容设置</div>
|
||||
<el-form-item label="上传视频">
|
||||
<upload v-model="form.video" :limit="1" type="video"></upload>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
<div class="bg-f5 partition-line" />
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<el-form-item label="底部导航">
|
||||
<el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
|
||||
|
|
@ -27,7 +27,7 @@ const props = defineProps({
|
|||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
});
|
||||
const form = reactive(props.value);
|
||||
const base_list = reactive({
|
||||
|
|
@ -46,10 +46,6 @@ const base_list = reactive({
|
|||
});
|
||||
const themeChange = (value: string) => {
|
||||
console.log(value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.partition-line {
|
||||
height: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ const radio = ref('1'); // 创建一个响应式的数字变量,初始值为0
|
|||
.setting-content {
|
||||
height: calc(100vh - 16.8rem);
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1540px) {
|
||||
|
|
|
|||
|
|
@ -248,13 +248,6 @@
|
|||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #c7c9cc;
|
||||
}
|
||||
/*setting content和style的高度控制,仅限只有一块区域的时候使用 */
|
||||
.common-content-height {
|
||||
height: calc(100vh - 16.8rem);
|
||||
}
|
||||
.common-style-height {
|
||||
height: calc(100vh - 36.8rem);
|
||||
}
|
||||
|
||||
.animate-linear {
|
||||
transition: all 0.3s linear;
|
||||
|
|
@ -264,3 +257,9 @@
|
|||
.mask {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// 分割线
|
||||
.divider-line {
|
||||
height: 0.8rem;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue