plugins/filter/CFilter.vue | ●●●●● patch | view | raw | blame | history | |
plugins/filter/cFilter.scss | ●●●●● patch | view | raw | blame | history |
plugins/filter/CFilter.vue
@@ -1,17 +1,8 @@ /** * CFilter - 页面筛选 * @author Tevin */ /** * CFilter - 页面筛选 * @author Tevin */ <template> <view class="c-filter" ref="filter" > <view class="c-filter-bar" v-if="bar" > <view class="c-filter" ref="filter"> <view class="c-filter-bar" v-if="bar"> <CFilterSelect v-if="bar.type==='select'" type="bar" @@ -28,6 +19,13 @@ :value="filterRes[bar.name]" :onChange="evt=>handleBarChange(bar.name, evt)" /> <CFilterInput v-if="bar.type === 'input'" type="bar" :label="bar.label" :value="filterRes[bar.name]" :onChange="evt => handleItemChange(bar.name, evt)" /> </view> <view class="c-filter-more" @@ -43,15 +41,8 @@ :show="drawerShow" :onClose="evt => handleFinish()" > <scroll-view class="c-filter-drawer-list" :scrollY="true" > <view class="box" v-for="(item,index) in items" :key="index" > <scroll-view class="c-filter-drawer-list" :scrollY="true"> <view class="box" v-for="(item, index) in items" :key="index"> <CFilterSelect v-if="item.type==='select'" type="item" @@ -85,16 +76,12 @@ </view> </scroll-view> <view class="c-filter-drawer-btn"> <AtButton type="primary" :circle="false" :onClick="evt => handleClean()" >重置</AtButton> <AtButton type="primary" :circle="false" :onClick="evt => handleFinish()" >完成</AtButton> <AtButton type="primary" :circle="false" :onClick="evt => handleClean()" >重置</AtButton > <AtButton type="primary" :circle="false" :onClick="evt => handleFinish()" >完成</AtButton > </view> </CDrawer> </view> plugins/filter/cFilter.scss
@@ -3,7 +3,7 @@ * @author Tevin */ @import "../../common/sassMixin"; @import '../../common/sassMixin'; .c-filter { width: 100%; @@ -23,6 +23,13 @@ &:active { background-color: #f2f2f2; } .c-filter-input { display: flex; align-items: center; .at-input { margin-left: 14px; } } } .c-filter-more { float: right; @@ -30,8 +37,8 @@ height: 100%; box-sizing: border-box; text-align: center; border-left: 1PX solid #d6e4ef; transition: background-color .3s; border-left: 1px solid #d6e4ef; transition: background-color 0.3s; &:active { background-color: #f2f2f2; } @@ -43,7 +50,7 @@ @include position(absolute, 20px n n 35px); width: 12px; height: 12px; content: " "; content: ' '; background-color: $colorDanger; border-radius: 50%; } @@ -55,12 +62,12 @@ .c-filter-drawer { .c-filter-drawer-list { height: calc(100% - 90px); border-top: 1PX solid #eee; border-top: 1px solid #eee; box-sizing: border-box; .box { min-height: 20px; padding: 30px 0 10px 30px; border-bottom: 1PX solid #eee; border-bottom: 1px solid #eee; &:active { background-color: #f2f2f2; }