更新搜索显示逻辑
于肖磊
parent
76f3222273
commit
f9c189ee3b
|
|
@ -48,18 +48,20 @@
|
|||
<el-icon :class="`iconfont ${ 'icon-' + form.right_icon_class } size-14 mr-10`" :style="`color:${new_style.right_icon_color};`" />
|
||||
</template>
|
||||
</template>
|
||||
<div v-if="form.is_search_show == '1'" class="h flex align-c jc-c" :style="search_button">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<div class="size-12" :style="search_button_style">{{ form.search_tips }}</div>
|
||||
</template>
|
||||
<template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
|
||||
<image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="size-12" :style="search_button_style">
|
||||
<el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="form.is_search_show == '1'" class="h flex align-c jc-c" :style="search_button_style">
|
||||
<div class="oh" :style="search_button_img_style">
|
||||
<template v-if="form.search_type === 'text'">
|
||||
<div class="size-12">{{ form.search_tips }}</div>
|
||||
</template>
|
||||
<template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
|
||||
<image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_height" error-img-style="width: 4rem;height: 2.8rem;" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="size-12">
|
||||
<el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,7 +69,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math, padding_computer, old_padding } from '@/utils';
|
||||
import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math, padding_computer, old_padding, margin_computer, old_margin } from '@/utils';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -125,14 +127,9 @@ const box_style = computed(() => {
|
|||
}
|
||||
return style;
|
||||
});
|
||||
// 搜索按钮圆角
|
||||
const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
|
||||
const search_button_style = computed(() => {
|
||||
return padding_computer(new_style.value?.search_botton_padding || old_padding);
|
||||
});
|
||||
const search_button = computed(() => {
|
||||
let style = search_button_radius.value;
|
||||
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = new_style.value;
|
||||
let style = radius_computer(new_style.value.search_button_radius);
|
||||
const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_botton_margin = old_margin, search_botton_border_show = '0', search_botton_border_size = old_padding, search_botton_border_style = 'solid', search_botton_border_color = '' } = new_style.value;
|
||||
if (form.value.search_type != 'img') {
|
||||
const data = {
|
||||
color_list: search_botton_color_list,
|
||||
|
|
@ -140,10 +137,29 @@ const search_button = computed(() => {
|
|||
background_img: search_botton_background_img,
|
||||
background_img_style: search_botton_background_img_style,
|
||||
}
|
||||
style += gradient_computer(data) + background_computer(data) + `color: ${ new_style.value.button_inner_color };`;
|
||||
style += gradient_computer(data) + margin_computer(search_botton_margin) + `color: ${ new_style.value.button_inner_color };`;
|
||||
}
|
||||
return style;
|
||||
let border = ``;
|
||||
if (new_style.value.search_botton_border_show == '1') {
|
||||
border += `border-width: ${search_botton_border_size.padding_top}px ${search_botton_border_size.padding_right}px ${search_botton_border_size.padding_bottom}px ${search_botton_border_size.padding_left}px;border-style: ${ search_botton_border_style };border-color: ${search_botton_border_color};`
|
||||
}
|
||||
const height = 28 - search_botton_margin.margin_top - search_botton_margin.margin_bottom;
|
||||
return style + border + `height: ${height}px;line-height: ${height}px;`;
|
||||
})
|
||||
const search_button_height = computed(() => {
|
||||
const { search_botton_border_size = old_padding, search_botton_padding } = new_style.value;
|
||||
const height = 28 - search_botton_border_size.padding_top - search_botton_border_size.padding_bottom - search_botton_padding.padding_top - search_botton_padding.padding_bottom;
|
||||
return `height: ${height}px !important;line-height: ${height}px;`;
|
||||
});
|
||||
// 搜索按钮圆角
|
||||
const search_button_img_style = computed(() => {
|
||||
const { search_botton_background_img_style, search_botton_background_img} = new_style.value;
|
||||
const data = {
|
||||
background_img: search_botton_background_img,
|
||||
background_img_style: search_botton_background_img_style,
|
||||
}
|
||||
return background_computer(data) + padding_computer(new_style.value?.search_botton_padding || old_padding);
|
||||
});
|
||||
// 轮播图key值
|
||||
const carouselKey = ref('0');
|
||||
// 记录当前显示的轮播图的数据
|
||||
|
|
|
|||
|
|
@ -25,9 +25,14 @@
|
|||
<el-form-item label="按钮圆角">
|
||||
<radius :value="form.search_button_radius"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="content.search_type != 'img'" label="内间距">
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.search_botton_padding"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="外边距">
|
||||
<margin :value="form.search_botton_margin"></margin>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-model:show="form.search_botton_border_show" v-model:color="form.search_botton_border_color" v-model:style="form.search_botton_border_style" v-model:size="form.search_botton_border_size" :type-list="['color', 'style', 'size']" default-color="#FF3F3F"></border-config>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -132,6 +132,23 @@ const default_data = {
|
|||
padding_right: 12,
|
||||
padding_bottom: 3,
|
||||
},
|
||||
search_botton_margin: {
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_right: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
},
|
||||
search_botton_border_size: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_right: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
},
|
||||
search_botton_border_show: '0',
|
||||
search_botton_border_color: '#FF3F3F',
|
||||
search_botton_border_style: 'solid',
|
||||
search_padding_left: 15,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,11 @@ interface DefaultFooterNav {
|
|||
search_botton_background_img: uploadList[];
|
||||
search_button_radius: object;
|
||||
search_botton_padding: paddingStyle;
|
||||
search_botton_margin: marginStyle,
|
||||
search_botton_border_show: string,
|
||||
search_botton_border_color: string,
|
||||
search_botton_border_style: string,
|
||||
search_botton_border_size: paddingStyle;
|
||||
location_direction: string;
|
||||
location_color_list: color_list[],
|
||||
location_background_img_style: string,
|
||||
|
|
@ -256,6 +261,23 @@ const defaultFooterNav: DefaultFooterNav = {
|
|||
padding_right: 12,
|
||||
padding_bottom: 3,
|
||||
},
|
||||
search_botton_margin: {
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_right: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
},
|
||||
search_botton_border_size: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_right: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
},
|
||||
search_botton_border_show: '0',
|
||||
search_botton_border_color: '#FF3F3F',
|
||||
search_botton_border_style: 'solid',
|
||||
// 搜索按钮显示样式
|
||||
button_inner_color: '#fff',
|
||||
search_botton_color_list: [
|
||||
|
|
|
|||
|
|
@ -38,6 +38,11 @@ interface defaultSearch {
|
|||
search_botton_background_img: uploadList[];
|
||||
search_button_radius: object;
|
||||
search_botton_padding: paddingStyle;
|
||||
search_botton_margin: marginStyle,
|
||||
search_botton_border_show: string,
|
||||
search_botton_border_color: string,
|
||||
search_botton_border_style: string,
|
||||
search_botton_border_size: paddingStyle;
|
||||
search_padding_left: number;
|
||||
tips_color: string;
|
||||
hot_words_color: string;
|
||||
|
|
@ -104,6 +109,23 @@ const defaultSearch: defaultSearch = {
|
|||
padding_right: 16,
|
||||
padding_bottom: 3,
|
||||
},
|
||||
search_botton_margin: {
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_right: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
},
|
||||
search_botton_border_size: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_right: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
},
|
||||
search_botton_border_show: '0',
|
||||
search_botton_border_color: '#FF3F3F',
|
||||
search_botton_border_style: 'solid',
|
||||
// 搜索提示颜色
|
||||
tips_color: '#ccc',
|
||||
// 搜索热词颜色
|
||||
|
|
|
|||
Loading…
Reference in New Issue