提交 bc44bbe7 编写于 作者: KK's avatar KK

搜索栏样式调整

上级 e620a851
.app-seach-history{ .app-seach-history {
.record{ .record {
font-size: 30px; font-size: 30px;
padding: 10px 0; padding: 10px 0;
ion-icon{ ion-icon {
text-align: center; text-align: center;
background: #5475ab; background: #5475ab;
border-radius: 50%; border-radius: 50%;
padding: 7px; padding: 7px;
color: #fff; color: #fff;
}
.record_icon {
text-align: center;
padding: 10px;
border-radius: 50%;
width: 70px;
height: 70px;
margin: 0 auto;
line-height: 70px;
}
.speaking {
background: #c6dfcc;
}
.record_text {
font-size: 12px;
text-align: center;
}
} }
.record_icon { .history {
text-align: center; .hisText {
padding: 10px; display: flex;
border-radius: 50%; justify-content: space-between;
width: 70px; font-size: 15px;
height: 70px; color: #777777;
margin: 0 auto; margin: 2px 15px;
line-height: 70px; .van-icon {
margin-top: 2px;
}
}
.hisItems {
margin: 5px 15px;
.van-tag {
margin-right: 15px;
margin-top: 6px;
}
}
} }
.speaking{ .filter-btn {
background: #c6dfcc; position: relative;
top: 5px;
} }
.record_text{ }
font-size: 12px;
text-align: center;
}
}
.history{
.hisText{
display: flex;
justify-content: space-between;
font-size: 15px;
color: #777777;
margin:2px 15px;
.van-icon{
margin-top: 2px;
}
}
.hisItems{
margin: 5px 15px;
.van-tag{
margin-right: 15px;
margin-top: 6px;
}
}
}
}
\ No newline at end of file
<template> <template>
<div class="app-seach-history"> <div class="app-seach-history">
<ion-toolbar> <ion-toolbar>
<ion-searchbar style="height: 36px; padding-bottom: 0;" :placeholder="$t('app.fastsearch')" debounce="500" @ionChange="quickValueChange($event)" show-cancel-button="focus" :cancel-button-text="$t('app.button.cancel')" @ionFocus="searchbarFocus" @ionBlur="searchbarBlur" @search="searchVal" ref="searchbar"></ion-searchbar> <ion-searchbar style="height: 36px; padding-bottom: 0;" :placeholder="$t('app.fastsearch')" debounce="500" @ionChange="quickValueChange($event)" @ionFocus="searchbarFocus" @ionBlur="searchbarBlur" @search="searchVal" ref="searchbar"></ion-searchbar>
<ion-button v-if="showfilter" class="filter-btn" size="small" slot="end" @click="openSearchform"><ion-icon slot="end" name="filter-outline"></ion-icon>过滤</ion-button> <ion-button v-if="showfilter" class="filter-btn" size="small" slot="end" @click="openSearchform"><ion-icon slot="end" name="filter-outline"></ion-icon>过滤</ion-button>
</ion-toolbar> </ion-toolbar>
<div class="history" v-if="hasHistory && (searchbarIsFocus || isSpeaking ) "> <div class="history" v-if="hasHistory && (searchbarIsFocus || isSpeaking ) ">
<div class="hisText"><div>最近搜索</div> <van-icon name="delete" @click="clearHistory"/></div> <div class="hisText"><div>最近搜索</div> <van-icon name="delete" @click="clearHistory"/></div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册