提交 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%;
...@@ -18,31 +18,35 @@ ...@@ -18,31 +18,35 @@
margin: 0 auto; margin: 0 auto;
line-height: 70px; line-height: 70px;
} }
.speaking{ .speaking {
background: #c6dfcc; background: #c6dfcc;
} }
.record_text{ .record_text {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
} }
.history{ .history {
.hisText{ .hisText {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
color: #777777; color: #777777;
margin:2px 15px; margin: 2px 15px;
.van-icon{ .van-icon {
margin-top: 2px; margin-top: 2px;
} }
} }
.hisItems{ .hisItems {
margin: 5px 15px; margin: 5px 15px;
.van-tag{ .van-tag {
margin-right: 15px; margin-right: 15px;
margin-top: 6px; margin-top: 6px;
} }
} }
} }
.filter-btn {
position: relative;
top: 5px;
}
} }
<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 ) ">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册