2 changed files with 209 additions and 0 deletions
@ -0,0 +1,203 @@ |
|||||
|
<template> |
||||
|
<view class="collection-info"> |
||||
|
<view class="ci-header"> |
||||
|
<view class="ch-stadium"> |
||||
|
<view class="cs-txt">当前门店</view> |
||||
|
<picker> |
||||
|
<view class="cs-picker"> |
||||
|
<input /> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
|
||||
|
</view> |
||||
|
<view class="ch-date-scene"> |
||||
|
<view class="cds-item"> |
||||
|
<view class="ci-txt">日期</view> |
||||
|
<view class="ci-frame ci-date"> |
||||
|
<input /> |
||||
|
<view></view> |
||||
|
<picker> |
||||
|
<image></image> |
||||
|
</picker> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="cds-item"> |
||||
|
<view class="ci-txt">场景</view> |
||||
|
<view class="ci-frame ci-scene"> |
||||
|
<picker class="cs-picker"> |
||||
|
<view class="cp-picker-frame"> |
||||
|
<input /> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ch-tab"> |
||||
|
<view class="ct-item"> |
||||
|
<view>全部</view> |
||||
|
</view> |
||||
|
<view class="ct-item"> |
||||
|
<view>退款</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~style/public.scss"; |
||||
|
page{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.collection-info{ |
||||
|
.ci-header{ |
||||
|
padding: 0 24upx; |
||||
|
.ch-stadium{ |
||||
|
padding: 26upx 0; |
||||
|
@include centerFlex(space-between); |
||||
|
|
||||
|
.cs-txt{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
margin-right: 20upx; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
picker{ |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
.cs-picker{ |
||||
|
padding: 0 20upx; |
||||
|
height: 92upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #f2f1f6; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
image{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ch-date-scene{ |
||||
|
margin-bottom: 30upx; |
||||
|
@include centerFlex(space-between); |
||||
|
.cds-item{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
@include centerFlex(flex-start); |
||||
|
.ci-txt{ |
||||
|
margin-right: 16upx; |
||||
|
line-height: 34upx; |
||||
|
font-size: 24upx; |
||||
|
color: #9c9c9f; |
||||
|
} |
||||
|
.ci-frame{ |
||||
|
height: 64upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #f2f1f6; |
||||
|
} |
||||
|
.ci-date{ |
||||
|
padding: 0 16upx; |
||||
|
width: 240upx; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 24upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
>view{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin: 0 14upx; |
||||
|
height: 32upx; |
||||
|
width: 2upx; |
||||
|
background-color: #B2B2B2; |
||||
|
} |
||||
|
picker{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
image{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
display: block; |
||||
|
height: 40upx; |
||||
|
width: 40upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.ci-scene{ |
||||
|
.cs-picker{ |
||||
|
|
||||
|
} |
||||
|
.cp-picker-frame{ |
||||
|
padding: 0 20upx; |
||||
|
width: 264upx; |
||||
|
@include centerFlex(space-between); |
||||
|
input{ |
||||
|
flex-grow: 1; |
||||
|
height: 64upx; |
||||
|
font-size: 24upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
image{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
margin-left: 16upx; |
||||
|
height: 28upx; |
||||
|
width: 28upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.ch-tab{ |
||||
|
@include centerFlex(center); |
||||
|
.ct-item{ |
||||
|
flex-grow: 1; |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
line-height: 110upx; |
||||
|
height: 110upx; |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 8upx; |
||||
|
border-radius: 4upx; |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue