<template>
|
<view class="mx">
|
<view class="index-search" :style="{ top: (statusbarHeight + navHeight) + 'px' }">
|
<view :class="item.id === type ? 'index-search-item active' : 'index-search-item'" v-for="(item, index) in list" :key="index" @click="changeType(item.id)">
|
<text>{{item.name}}</text>
|
<view class="index-search-item-x" v-if="item.id === type"></view>
|
</view>
|
</view>
|
<view class="mx-list">
|
<view class="mx-list-item" v-for="(item, index) in 12" :key="index">
|
<view class="mx-list-item-a">
|
<text>提现到零钱</text>
|
<text>-500.00</text>
|
</view>
|
<view class="mx-list-item-b">
|
<text>交易号：1234567876544</text>
|
<text>已到账</text>
|
</view>
|
<view class="mx-list-item-c">
|
2025-06-30 12:30:20
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
type: 1,
|
list: [
|
{ name: '全部', id: 1 },
|
{ name: '收入', id: 2 },
|
{ name: '支出', id: 3 }
|
],
|
};
|
},
|
methods: {
|
changeType(id) {
|
this.type = id
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mx {
|
width: 100%;
|
.mx-list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.mx-list-item {
|
width: 100%;
|
height: 208rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
border-bottom: 1rpx solid #E5E5E5;
|
.mx-list-item-a {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
.mx-list-item-b {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
}
|
.mx-list-item-c {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
}
|
}
|
.index-search {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
position: sticky;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
.active {
|
text {
|
font-weight: 500 !important;
|
font-size: 32rpx !important;
|
color: #222222 !important;
|
}
|
}
|
.index-search-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
}
|
.index-search-item-x {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background: #00BC12;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
}
|
</style>
|
