You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
9.2 KiB
281 lines
9.2 KiB
<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>
|
|
<view class="ci-tab">
|
|
<view class="ct-item">
|
|
<view>全部</view>
|
|
</view>
|
|
<view class="ct-item">
|
|
<view class="active">退款</view>
|
|
</view>
|
|
</view>
|
|
<view class="ci-total">
|
|
收款100笔（<text>￥10000.00</text>) ，退款2笔（<text>￥200.00</text>）
|
|
</view>
|
|
<view class="ci-ls">
|
|
<view class="cl-item">
|
|
<view class="ci-name">
|
|
<view>线上-订购</view>
|
|
<view>+20.00</view>
|
|
</view>
|
|
<view class="ci-line">
|
|
<view>c2021122215468999</view>
|
|
<view>退款成功</view>
|
|
</view>
|
|
<view class="ci-line">
|
|
<view>221-12-12 14:13:25</view>
|
|
<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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.ci-tab{
|
|
@include centerFlex(center);
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
.ct-item{
|
|
flex-grow: 1;
|
|
@include centerFlex(center);
|
|
>view{
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 110upx;
|
|
height: 110upx;
|
|
font-size: 32upx;
|
|
color: #9C9C9F;
|
|
&.active{
|
|
color: $themeColor;
|
|
&::after{
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 200%;
|
|
height: 8upx;
|
|
border-radius: 4upx;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.ci-total{
|
|
padding: 0 24upx;
|
|
line-height: 96upx;
|
|
font-size: 24upx;
|
|
color: #9C9C9F;
|
|
@include textHide(1);
|
|
>text{
|
|
color: #F6843E;
|
|
}
|
|
|
|
}
|
|
.ci-ls{
|
|
padding: 0 30upx;
|
|
.cl-item{
|
|
padding: 30upx 0;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
.ci-name{
|
|
margin-bottom: 8upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
width: 50%;
|
|
@include textHide(1);
|
|
&+view{
|
|
text-align: right;
|
|
font-weight: 500;
|
|
color: #F6843E;
|
|
}
|
|
}
|
|
}
|
|
.ci-line{
|
|
@include centerFlex(space-between);
|
|
|
|
>view{
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9C9C9F;
|
|
@include textHide(1);
|
|
&+view{
|
|
flex-shrink: 0;
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|