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.
182 lines
5.6 KiB
182 lines
5.6 KiB
<template>
|
|
<view class="collection-detail">
|
|
<view class="cd-address">当前所在门店：欧轩智能羽毛球场馆永泰店</view>
|
|
<view class="cd-overview">
|
|
<picker>
|
|
<view class="co-time">
|
|
<text>8月5日</text>
|
|
<view></view>
|
|
</view>
|
|
</picker>
|
|
<view class="co-total">
|
|
<view>共139笔</view>
|
|
<view>收入 ¥ 10899.34</view>
|
|
<view>退款 ¥ 99.34</view>
|
|
</view>
|
|
</view>
|
|
<view class="cd-tab">
|
|
<view class="active">全部</view>
|
|
<view>退款</view>
|
|
</view>
|
|
<view class="cd-list">
|
|
<view class="cl-item" v-for="e in 10" :key="e">
|
|
<image></image>
|
|
<view class="ci-info">
|
|
<view>场馆订购</view>
|
|
<view>唐浩宗</view>
|
|
<view>20:05:41</view>
|
|
</view>
|
|
<view class="ci-price">
|
|
<view class="active">-20.00</view>
|
|
<view>退款成功</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../../style/public.scss";
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.collection-detail{
|
|
.cd-address{
|
|
height: 64upx;
|
|
line-height: 64upx;
|
|
padding: 0 24upx;
|
|
font-size: 24upx;
|
|
color: #1a1a1a;
|
|
}
|
|
.cd-overview{
|
|
padding: 24upx 24upx 0;
|
|
height: 144upx;
|
|
background-color: #f2f2f7;
|
|
.co-time{
|
|
margin-bottom: 16upx;
|
|
@include centerFlex(flex-start);
|
|
>text{
|
|
font-size: 32upx;
|
|
line-height: 44upx;
|
|
color: #1a1a1a;
|
|
}
|
|
>view{
|
|
flex-shrink: 0;
|
|
margin-left: 10upx;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 10upx solid transparent;
|
|
border-right: 10upx solid transparent;
|
|
border-top: 10upx solid #1a1a1a;
|
|
}
|
|
}
|
|
.co-total{
|
|
@include centerFlex(center);
|
|
>view{
|
|
flex-grow: 1;
|
|
font-size: 24upx;
|
|
color: #1a1a1a;
|
|
@include textHide(1);
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cd-tab{
|
|
height: 110upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(center);
|
|
>view{
|
|
margin: 0 92upx;
|
|
height: 108upx;
|
|
width: 120upx;
|
|
line-height: 108upx;
|
|
text-align: center;
|
|
font-size: 32upx;
|
|
color: #9C9C9F;
|
|
}
|
|
.active{
|
|
position: relative;
|
|
color: $themeColor;
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -2upx;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 8upx;
|
|
border-radius: 4upx;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
.cd-list{
|
|
padding: 0 30upx 20upx;
|
|
.cl-item{
|
|
padding: 30upx 0;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
display: flex;
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-right: 30upx;
|
|
width: 64upx;
|
|
height: 64upx;
|
|
border-radius: 10upx;
|
|
background-color: #e8e9eb;
|
|
}
|
|
>view{
|
|
flex-grow: 1;
|
|
min-width: 30%;
|
|
}
|
|
.ci-info{
|
|
>view{
|
|
@include textHide(1);
|
|
&:first-child{
|
|
margin-bottom: 8upx;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
}
|
|
&+view{
|
|
margin-bottom: 6upx;
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9c9c9f;
|
|
}
|
|
}
|
|
}
|
|
.ci-price{
|
|
>view{
|
|
text-align: right;
|
|
@include textHide(1);
|
|
&:first-child{
|
|
margin-bottom: 8upx;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
}
|
|
&+view{
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
font-weight: 500;
|
|
color: #9c9c9f;
|
|
}
|
|
}
|
|
.active{
|
|
color: #F6843E !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|