1.导航组新增图片大小字段
parent
a1ad14ad46
commit
41e003f6ba
|
|
@ -15,6 +15,7 @@ interface nav_group_content {
|
||||||
|
|
||||||
interface nav_group_styles {
|
interface nav_group_styles {
|
||||||
space: number;
|
space: number;
|
||||||
|
img_size: number;
|
||||||
radius: number;
|
radius: number;
|
||||||
radius_top_left: number;
|
radius_top_left: number;
|
||||||
radius_top_right: number;
|
radius_top_right: number;
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,8 @@ onMounted(() => {
|
||||||
newHeight.value = bannerImg.value[0].clientHeight + 'px';
|
newHeight.value = bannerImg.value[0].clientHeight + 'px';
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
// 导航图片大小
|
||||||
|
const img_size = computed(() => (new_style.value?.img_size || '0') + 'px');
|
||||||
// 每个导航所占位置
|
// 每个导航所占位置
|
||||||
const group_width = computed(() => `${100 / (form.value.single_line || 4)}%`);
|
const group_width = computed(() => `${100 / (form.value.single_line || 4)}%`);
|
||||||
// 是否显示文字和图片
|
// 是否显示文字和图片
|
||||||
|
|
@ -169,12 +171,12 @@ const carousel_change = (index: number) => {
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.top-img {
|
.top-img {
|
||||||
height: 3.6rem;
|
height: v-bind(img_size);
|
||||||
width: 3.6rem;
|
width: v-bind(img_size);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
:deep(.image-slot) {
|
:deep(.image-slot) {
|
||||||
height: 3.6rem;
|
height: v-bind(img_size);
|
||||||
width: 3.6rem;
|
width: v-bind(img_size);
|
||||||
img {
|
img {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,9 @@
|
||||||
<el-form-item label="圆角">
|
<el-form-item label="圆角">
|
||||||
<radius :value="form" @update:value="radius_change"></radius>
|
<radius :value="form" @update:value="radius_change"></radius>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="大小">
|
||||||
|
<slider v-model="form.img_size" :max="100"></slider>
|
||||||
|
</el-form-item>
|
||||||
</card-container>
|
</card-container>
|
||||||
<div class="divider-line"></div>
|
<div class="divider-line"></div>
|
||||||
<template v-if="display_style_show">
|
<template v-if="display_style_show">
|
||||||
|
|
@ -56,6 +59,7 @@ interface Props {
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
value: () => ({
|
value: () => ({
|
||||||
space: 0,
|
space: 0,
|
||||||
|
img_size: 0,
|
||||||
radius: 0,
|
radius: 0,
|
||||||
radius_top_left: 0,
|
radius_top_left: 0,
|
||||||
radius_top_right: 0,
|
radius_top_right: 0,
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ interface defaultSearch {
|
||||||
};
|
};
|
||||||
style: {
|
style: {
|
||||||
space: number;
|
space: number;
|
||||||
|
img_size: number;
|
||||||
radius: number;
|
radius: number;
|
||||||
radius_top_left: number;
|
radius_top_left: number;
|
||||||
radius_top_right: number;
|
radius_top_right: number;
|
||||||
|
|
@ -72,6 +73,7 @@ const defaultSearch: defaultSearch = {
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
space: 10,
|
space: 10,
|
||||||
|
img_size: 36,
|
||||||
radius: 0,
|
radius: 0,
|
||||||
radius_top_left: 0,
|
radius_top_left: 0,
|
||||||
radius_top_right: 0,
|
radius_top_right: 0,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue