11 changed files with 767 additions and 0 deletions
-
17src/pages.json
-
87src/subpackage/income/components/details_item/details_item.vue
-
8src/subpackage/income/js/api.js
-
10src/subpackage/income/js/server.js
-
561src/subpackage/income/pages/details_record/details_record.vue
-
84src/subpackage/income/pages/search/search.vue
-
BINsrc/subpackage/income/static/images/bot_arrow.png
-
BINsrc/subpackage/income/static/images/calendar.png
-
BINsrc/subpackage/income/static/images/close.png
-
BINsrc/subpackage/income/static/images/filter.png
-
BINsrc/subpackage/income/static/images/search.png
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="dl-item"> |
|||
<view class="di-name">{{ incomeInfo.source || '-' }}</view> |
|||
<view class="di-top-line"> |
|||
<view class="dtl-view">{{ incomeInfo.desc || '-' }}</view> |
|||
<view :class="[ 'dtl-view', incomeInfo.amount > 0 ? 'orange' : '' ]">{{ incomeInfo.amount || '-' }}</view> |
|||
</view> |
|||
|
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.operator_text || '-' }}</view> |
|||
<view class="dbl-view" v-if="incomeInfo.amount < 0">{{ incomeInfo.refund_desc || '-' }}</view> |
|||
</view> |
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.order_no || '-' }}</view> |
|||
</view> |
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.created_at || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
incomeInfo: { |
|||
default: {}, |
|||
type: Object, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.dl-item{ |
|||
padding: 30upx 40upx 30upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.di-name{ |
|||
margin-bottom: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
.di-top-line{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(space-between); |
|||
>.dtl-view{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
max-width: 50%; |
|||
} |
|||
&+.dtl-view{ |
|||
font-weight: 500; |
|||
text-align: right; |
|||
&.orange{ |
|||
color: #F6843E; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.di-bot-line{ |
|||
@include centerFlex(space-between); |
|||
>.dbl-view{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9C9C9F; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include textHide(1); |
|||
|
|||
} |
|||
&+.dbl-view{ |
|||
margin-left: 16upx; |
|||
flex-shrink: 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
import { ORIGIN } from '../../../js/api'; |
|||
|
|||
export const INCOME_API = { |
|||
consumeCountDetailList:`${ORIGIN}/admin/stadium/consumeCountDetail/list`, // 收款明细列表
|
|||
consumeRecordSceneLs:`${ORIGIN}/consumeRecordScene/list`, // 收款明细列表
|
|||
} |
|||
|
|||
export default { ORIGIN, INCOME_API }; |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '../../../js/server'; |
|||
|
|||
class Servers extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new Servers(); |
|||
@ -0,0 +1,561 @@ |
|||
<template> |
|||
<view class="details-record"> |
|||
<view class="dr-header"> |
|||
<view class="dh-filter"> |
|||
<view class="df-date"> |
|||
<view class="df-name">收款日期</view> |
|||
<picker mode="date" @change="dateChange"> |
|||
<view class="dd-frame"> |
|||
<input disabled :value="incomeTime" v-if="!isFilterModal" /> |
|||
<view></view> |
|||
<image mode="aspectFit" src="/subpackage/income/static/images/calendar.png"></image> |
|||
</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
<view class="df-right"> |
|||
<view class="df-name" @click="filterShow">筛选</view> |
|||
<view class="dr-icons"> |
|||
<image @click="filterShow" mode="aspectFit" src="/subpackage/income/static/images/filter.png"></image> |
|||
<view></view> |
|||
<image @click="toSearch" mode="aspectFit" src="/subpackage/income/static/images/search.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="type-bar"> |
|||
<view |
|||
v-for="(e, i) in incomeTypeLs" :key="i" |
|||
:class="['tb-item', e.eng == incomeTypeInfo.eng ?'ti-active': '']" |
|||
@click="incomeTypeChange(e)" |
|||
>{{ e.name || '-' }}</view> |
|||
</view> |
|||
<view class="tab-bar"> |
|||
<view :class="[ 'tb-item', type == '全部'? 'tb-active' : '' ]" @click="typeChange('全部')"><view>全部</view></view> |
|||
<view :class="[ 'tb-item', type == '退款'? 'tb-active' : '' ]" @click="typeChange('退款')"><view>退款</view></view> |
|||
</view> |
|||
<view class="dh-total"> |
|||
收款{{ incomeMes.income_num || 0 }}笔（<text>￥{{ incomeMes.income_amount || 0 }}</text>） ， |
|||
退款{{ incomeMes.refund_num || 0 }}笔（<text>￥{{ incomeMes.refund_amount || 0 }}</text>） |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="dr-ls"> |
|||
<details-item |
|||
v-for="(e, i) in incomeLs" |
|||
:key="i" |
|||
:income-info="e" |
|||
></details-item> |
|||
</view> |
|||
|
|||
<view class="dr-mask" v-if="isFilterModal" @touchmove.stop.prevent='_=>false' @click="isFilterModal = false"> |
|||
<view class="dm-content" @click.stop="_=>false"> |
|||
<image |
|||
class="dc-close" |
|||
mode="aspectFit" |
|||
src="/subpackage/income/static/images/close.png" |
|||
@click="isFilterModal = false" |
|||
></image> |
|||
<view class="dc-header" id="dcheader"> |
|||
<view class="dc-tit">筛选</view> |
|||
<view class="dc-stadium"> |
|||
<view class="ds-name">门店</view> |
|||
<picker> |
|||
<view class="ds-frame"> |
|||
<input /> |
|||
<image mode="aspectFit" src="/subpackage/income/static/images/bot_arrow.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="dc-scene-name">收款场景（{{ incomeTypeInfo.name || '-' }}）</view> |
|||
</view> |
|||
<scroll-view class="dc-scroll" scroll-y :style="modalScrollViewHeight?('height:'+ modalScrollViewHeight + 'px;'): ''"> |
|||
<view class="dc-scene-ls"> |
|||
<view class="dsl-item" v-for="(e, i) in sceneLs" :key="i">{{ e.name || '-' }}</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="dc-btn-bar" id="dcbotbar"> |
|||
<view class="dbb-btns"> |
|||
<view>重置</view> |
|||
<view>确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import details_item from '../../components/details_item/details_item.vue'; |
|||
import util from '../../../../utils/util'; |
|||
import { INCOME_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
let incomeTypeLs = [ |
|||
{ |
|||
name: '线上收款', |
|||
eng: 'online', |
|||
}, |
|||
{ |
|||
name: '线下收款', |
|||
eng: 'offline' |
|||
}, |
|||
{ |
|||
name: '联营收款', |
|||
eng: ' joint' |
|||
}, |
|||
]; |
|||
export default { |
|||
components: { |
|||
'details-item': details_item |
|||
}, |
|||
data(){ |
|||
return { |
|||
modalScrollViewHeight: '', |
|||
isFilterModal: false, |
|||
incomeTime: '', |
|||
|
|||
incomeLs: [], |
|||
incomeMes: {}, |
|||
page: 1, |
|||
|
|||
type: '全部', // 全部/退款 |
|||
incomeTypeLs, |
|||
incomeTypeInfo: {}, // online 线上收款 offline 线下收款 joint 联营 |
|||
|
|||
sceneLs: [], |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
let _timeStr = util.formatDate({}); |
|||
this.incomeTime = _timeStr; |
|||
this.incomeTypeInfo = incomeTypeLs[0]; |
|||
this.refreshPage(); |
|||
}, |
|||
methods: { |
|||
filterShow(){ |
|||
let { incomeTypeInfo } = this; |
|||
this.isFilterModal = true; |
|||
this.$nextTick(_=>{ |
|||
this.initFilterScrollView(); |
|||
this.getSceneLs({ |
|||
income_type: incomeTypeInfo.eng || '' |
|||
}) |
|||
}); |
|||
|
|||
}, |
|||
getSceneLs({ |
|||
brand_id = '', |
|||
stadium_id = '', |
|||
income_type = '', |
|||
}){ |
|||
server.get({ |
|||
url: INCOME_API.consumeRecordSceneLs, |
|||
data: { |
|||
brand_id, |
|||
stadium_id, |
|||
income_type, |
|||
}, |
|||
failMsg: '加载场景列表失败！' |
|||
}) |
|||
.then(res=>{ |
|||
this.sceneLs = res || []; |
|||
}) |
|||
}, |
|||
incomeTypeChange(incomeTypeInfo){ |
|||
this.incomeTypeInfo = incomeTypeInfo || {}; |
|||
this.refreshPage(); |
|||
}, |
|||
typeChange(type){ |
|||
this.type = type; |
|||
this.refreshPage(); |
|||
}, |
|||
dateChange(e){ |
|||
let _time = e.detail.value || '' |
|||
this.incomeTime = _time; |
|||
this.refreshPage(); |
|||
}, |
|||
refreshPage(){ |
|||
this.$nextTick(_=>{ |
|||
let { incomeTime, type, incomeTypeInfo } = this; |
|||
this.page = 1; |
|||
this.incomeLs = []; |
|||
this.incomeMes = {}; |
|||
this.getRecordLs({ |
|||
type: type || '', |
|||
time_str: incomeTime || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
}); |
|||
}) |
|||
}, |
|||
getRecordLs({ |
|||
brand_id = '', |
|||
stadium_id = '', // 空字符全部 -1品牌收款 其他门店id |
|||
time_str = '', // 日期y-m-d |
|||
scene = '', // 场景 int |
|||
type = '全部', // 全部/退款 |
|||
income_type = '', // 收款类型 online 线上收款 offline线下收款 joint联营 |
|||
page = 1, |
|||
page_size = 20, |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: INCOME_API.consumeCountDetailList, |
|||
data: { |
|||
brand_id, |
|||
stadium_id, |
|||
time_str, |
|||
page, |
|||
page_size, |
|||
scene, |
|||
type, |
|||
income_type, |
|||
}, |
|||
failMsg: '加载失败！', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let { list, ...data } = res; |
|||
this.incomeMes = data || {}; |
|||
let _ls = list || []; |
|||
if(page == 1)return this.incomeLs = _ls; |
|||
if(!_ls || !_ls.length)return util.showNone('没有更多！'); |
|||
this.incomeLs = [ ...this.incomeLs, ..._ls ]; |
|||
this.page = page; |
|||
|
|||
}) |
|||
}, |
|||
|
|||
toSearch(){ |
|||
util.routeTo(`/subpackage/income/pages/search/search`, 'nT'); |
|||
}, |
|||
|
|||
async initFilterScrollView(){ |
|||
try{ |
|||
let _header = await util.getNodeMes('#dcheader'); |
|||
let _botBar = await util.getNodeMes('#dcbotbar'); |
|||
let _sysInfo = uni.getSystemInfoSync(); |
|||
this.modalScrollViewHeight = (_sysInfo.windowHeight || 0) - ((_header.height || 0) + (_botBar.height || 0)) |
|||
}catch(err){ |
|||
console.warn('initFilterScrollView err -->', err); |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.dr-header{ |
|||
margin-bottom: 24upx; |
|||
background-color: #fff; |
|||
.dh-filter{ |
|||
padding: 26upx 24upx; |
|||
@include centerFlex(space-between); |
|||
.df-name{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.df-date{ |
|||
@include centerFlex(flex-start); |
|||
.dd-frame{ |
|||
flex-shrink: 0; |
|||
padding: 0 20upx; |
|||
margin-left: 20upx; |
|||
width: 286upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
>view{ |
|||
flex-shrink: 0; |
|||
margin: 0 20upx; |
|||
height: 40upx; |
|||
width: 1px; |
|||
background-color: #B2B2B2; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
} |
|||
} |
|||
.df-right{ |
|||
flex-shrink: 0; |
|||
@include centerFlex(flex-end); |
|||
.dr-icons{ |
|||
margin-left: 12upx; |
|||
flex-shrink: 0; |
|||
flex-wrap: nowrap; |
|||
@include centerFlex(center); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin: 0 30upx; |
|||
height: 40upx; |
|||
width: 1px; |
|||
background-color: #B2B2B2; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
.type-bar{ |
|||
padding: 20upx 0; |
|||
@include centerFlex(center); |
|||
.tb-item{ |
|||
margin: 0 16upx; |
|||
padding: 0 28upx; |
|||
line-height: 72upx; |
|||
text-align: center; |
|||
font-size: 36upx; |
|||
font-weight: 500; |
|||
border-radius: 36upx; |
|||
color: #1A1A1A; |
|||
&.ti-active{ |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tab-bar{ |
|||
@include centerFlex(center); |
|||
border-top: 2upx solid #D8D8D8; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.tb-item{ |
|||
margin: 0 92upx; |
|||
padding: 0 28upx; |
|||
&.tb-active{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 8upx; |
|||
border-radius: 4upx; |
|||
background-color: $themeColor; |
|||
} |
|||
>view{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
>view{ |
|||
line-height: 110upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
} |
|||
.dh-total{ |
|||
padding: 0 48upx; |
|||
line-height: 110upx; |
|||
font-size: 24upx; |
|||
color: #9C9C9F; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #F6843E; |
|||
} |
|||
} |
|||
} |
|||
.dr-ls{ |
|||
padding-bottom: 120upx; |
|||
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
padding-left: 40upx; |
|||
background-color: #fff; |
|||
.dl-item{ |
|||
padding: 30upx 40upx 30upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.di-name{ |
|||
margin-bottom: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
.di-top-line{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
max-width: 50%; |
|||
} |
|||
&+view{ |
|||
font-weight: 500; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
.di-bot-line{ |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9C9C9F; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include textHide(1); |
|||
|
|||
} |
|||
&+view{ |
|||
margin-left: 16upx; |
|||
flex-shrink: 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
.dr-mask{ |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
background-color: rgba($color: #000000, $alpha: .5); |
|||
.dm-content{ |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
|
|||
width: 600upx; |
|||
background-color: #fff; |
|||
.dc-header{ |
|||
padding-top: 36upx; |
|||
padding-bottom: 40upx; |
|||
} |
|||
.dc-close{ |
|||
position: absolute; |
|||
right: 34upx; |
|||
top: 20upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
.dc-tit{ |
|||
margin-bottom: 20upx; |
|||
text-align: center; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.dc-stadium{ |
|||
margin-bottom: 20upx; |
|||
padding: 26upx 30upx; |
|||
@include centerFlex(space-between); |
|||
.ds-name{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.ds-frame{ |
|||
padding: 0 20upx; |
|||
width: 476upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-left: 12upx; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
} |
|||
} |
|||
.dc-scene-name{ |
|||
|
|||
padding-left: 34upx; |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #1A1A1A; |
|||
} |
|||
.dc-scroll{ |
|||
width: 100%; |
|||
height: 600upx; |
|||
.dc-scene-ls{ |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.dsl-item{ |
|||
margin: 14upx 10upx; |
|||
width: 164upx; |
|||
height: 64upx; |
|||
line-height: 64upx; |
|||
text-align: center; |
|||
background-color: #F2F2F7; |
|||
border-radius: 10upx; |
|||
font-size: 24upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.dc-btn-bar{ |
|||
padding: 20upx 30upx; |
|||
padding-bottom: calc( 20upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 20upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
.dbb-btns{ |
|||
height: 80upx; |
|||
border: 2upx solid $themeColor; |
|||
background-color: $themeColor; |
|||
border-radius: 40upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
text-align: center; |
|||
line-height: 76upx; |
|||
width: 50%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #fff; |
|||
border-radius: 40upx; |
|||
&:first-child{ |
|||
background-color: #fff; |
|||
color: $themeColor; |
|||
border-top-right-radius: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<view class="income-search"> |
|||
<view class="is-search-bar"> |
|||
<view class="isb-frame"> |
|||
<image class="if-search-icon"></image> |
|||
<input /> |
|||
<image class="if-close-icon"></image> |
|||
</view> |
|||
</view> |
|||
<view class="is-main"> |
|||
<view class="im-null" v-if="false"> |
|||
<image></image> |
|||
</view> |
|||
<view class="im-ls"> |
|||
<details-item v-for="i in 20" :key="i"></details-item> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import details_item from '../../components/details_item/details_item.vue'; |
|||
export default { |
|||
components: { |
|||
'details-item': details_item |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.is-search-bar{ |
|||
padding: 30upx 24upx; |
|||
.isb-frame{ |
|||
padding: 0 24upx; |
|||
height: 72upx; |
|||
border: 2upx solid $themeColor; |
|||
border-radius: 36upx; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 68upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
background-color: skyblue; |
|||
} |
|||
.if-search-icon{ |
|||
margin-right: 24upx; |
|||
} |
|||
.if-close-icon{ |
|||
margin-left: 24upx; |
|||
} |
|||
} |
|||
} |
|||
.is-main{ |
|||
border-top: 24upx solid #f2f1f6; |
|||
.im-null{ |
|||
padding-top: 106upx; |
|||
>image{ |
|||
margin: 0 auto; |
|||
display: block; |
|||
width: 370upx; |
|||
height: 370upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
|
|||
.im-ls{ |
|||
padding-bottom: 120upx; |
|||
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
padding-left: 40upx; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 56 | Height: 56 | Size: 401 B |
|
After Width: 80 | Height: 80 | Size: 430 B |
|
After Width: 64 | Height: 72 | Size: 769 B |
|
After Width: 80 | Height: 80 | Size: 483 B |
|
After Width: 80 | Height: 80 | Size: 660 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue