修改搜索的显示

v1.0.0
于肖磊 2024-09-27 17:01:01 +08:00
parent 702d7347c1
commit f9cbb3057d
4 changed files with 37 additions and 34 deletions

View File

@ -1,33 +1,31 @@
<template>
<div :style="style_container">
<div :style="style" class="flex-row align-c">
<div class="search w re">
<div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<div class="img-box">
<image-empty v-model="form.icon_img[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
</div>
</template>
<template v-else>
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<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>
</div>
<div v-if="form.is_search_show == '1'" class="abs search-botton h flex align-c jc-c" :style="search_button">
<template v-if="form.search_type === 'text'">
<div :class="['ptb-3 size-12', props.isPageSettings ? 'plr-12' : 'plr-16']">{{ 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="['ptb-3 size-12', props.isPageSettings ? 'plr-12' : 'plr-16']">
<el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
<div class="search w re" :style="style">
<div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
<template v-if="form.is_icon_show == '1'">
<template v-if="form.icon_img.length > 0">
<div class="img-box">
<image-empty v-model="form.icon_img[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
</div>
</template>
</div>
<template v-else>
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<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>
</div>
<div v-if="form.is_search_show == '1'" class="abs search-botton h flex align-c jc-c" :style="search_button">
<template v-if="form.search_type === 'text'">
<div :class="['ptb-3 size-12', props.isPageSettings ? 'plr-12' : 'plr-16']">{{ 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="['ptb-3 size-12', props.isPageSettings ? 'plr-12' : 'plr-16']">
<el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
</div>
</template>
</div>
</div>
</div>

View File

@ -7,11 +7,16 @@
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_icon_show == '1'" class="mt-10 w">
<el-col :span="24">
<upload v-model="form.icon_img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-col>
</el-row>
<template v-if="form.is_icon_show == '1'">
<el-row class="mt-10 w">
<el-col :span="24">
<upload v-model="form.icon_img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-col>
</el-row>
<el-row class="mt-10 w">
<el-col :span="24"><url-value v-model="form.icon_src"></url-value></el-col>
</el-row>
</template>
</el-form-item>
<el-form-item label="提示文字">
<el-row class="w">

View File

@ -49,7 +49,7 @@
<color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
<el-form-item label="热词文字">
<color-picker v-model="form.hot_words_color" default-color="#000"></color-picker>
<color-picker v-model="form.hot_words_color"></color-picker>
</el-form-item>
<el-form-item label="搜索框线">
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>

View File

@ -9,7 +9,7 @@ interface defaultSearch {
content: {
is_center: string;
is_icon_show: string;
icon_src: string;
icon_src: object;
icon_img: uploadList[];
icon_class: string;
search_botton_img: uploadList[];
@ -40,7 +40,7 @@ const defaultSearch: defaultSearch = {
content: {
is_center: '0',
is_icon_show: '1',
icon_src: '',
icon_src: {},
icon_img: [],
icon_class: '',
search_botton_img: [],