修改头部搜索的显示

v1.1.0
于肖磊 2024-12-06 14:09:57 +08:00
parent 907b128d43
commit e6f3576e49
4 changed files with 18 additions and 12 deletions

View File

@ -7,7 +7,7 @@
<template v-if="item.type == 'select'">
<template v-if="+item?.config?.is_level == 1">
<div class="flex-row gap-10">
<el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" clearable class="w h" collapse-tags popper-class="filter-form-cascader" :placement="item?.config?.is_level.toString() == '1' ? 'left' : 'bottom'" :props="{ 'expandTrigger': 'hover', 'multiple': +item?.config?.is_multiple == 1, 'checkStrictly': true, 'emitPath': false, 'value': item?.data_key || 'id', 'label': item?.data_name || 'name', 'children': item?.config?.children || '' }" :options="selectData(item)" />
<el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" clearable class="w h" collapse-tags popper-class="filter-form-cascader" :placement="+item?.config?.is_level == 1 && props.direction == 'vertical' ? 'left' : 'bottom'" :props="{ 'expandTrigger': 'hover', 'multiple': +item?.config?.is_multiple == 1, 'checkStrictly': true, 'emitPath': false, 'value': item?.data_key || 'id', 'label': item?.data_name || 'name', 'children': item?.config?.children || '' }" :options="selectData(item)" />
<template v-if="+item?.config?.is_multiple == 1">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="父级选中包含所有子级" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>

View File

@ -16,7 +16,7 @@
</template>
</div>
</div>
<div class="flex-1 h flex-row align-c gap-10">
<div :class="'flex-1 h flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<div class="img-box">
@ -27,11 +27,11 @@
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
<div v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'" :style="form.is_center == '1' ? `min-width:100px;` : 'width:100%;'">
<el-carousel :key="carouselKey" class="flex-1" indicator-position="none" :interval="interval_list.time" arrow="never" height="32px" direction="vertical" :autoplay="interval_list.is_roll == '1'">
<el-carousel-item v-for="(item, index) in form.hot_word_list" :key="index" class="flex align-c" :style="{ 'color': !isEmpty(item.color) ? item.color : !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : '#999' }">{{ item.value }}</el-carousel-item>
</el-carousel>
</template>
</div>
<template v-else>
<span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
</template>
@ -106,9 +106,9 @@ const style_img_container = computed(() => props.isPageSettings ? '' : common_im
//
const box_style = computed(() => {
let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
if (form.value.is_center == '1') {
style += `justify-content: center;`;
} else {
if (form.value.positioning_name_float == '1' && props.searchType == 'header') {
style += `padding-left: ${ new_style.value.search_padding_left }px;`;
} else if (form.value.is_center != '1') {
style += `padding-left: ${ new_style.value.search_padding_left }px;`;
}
return style;
@ -186,7 +186,11 @@ watchEffect(() => {
max-width: 10rem;
}
}
.tips-float {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
.model-head-location {
:deep(.el-image) {

View File

@ -38,9 +38,11 @@
<el-form-item v-if="search_content.is_tips_show" label="提示文字">
<color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
<el-form-item label="左内边距">
<slider v-model="form.search_padding_left" :min="1" :max="200"></slider>
</el-form-item>
<template v-if="search_content.is_center != '1'">
<el-form-item label="左内边距">
<slider v-model="form.search_padding_left" :min="1" :max="200"></slider>
</el-form-item>
</template>
<el-form-item label="搜索框线">
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>
</el-form-item>

View File

@ -96,7 +96,7 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
search_padding_left: 10,
search_padding_left: 15,
// 热词轮播
is_roll: '1',
interval_time: 3,