sunliwei/lanan-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优惠卷

Browse Source
This commit is contained in:
ChuShiZ 2024-09-24 16:02:12 +08:00
parent 91036322a8
commit fd6ddb5122
1 changed files with 175 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
pages/my/cardRoll.vue
View File

@ -1,6 +1,36 @@
<template> <template>
<view> <view class="container">
<v-navigation-bar title-color="#333" background-color="#fff" title="卡卷包">
</v-navigation-bar>
<view class="tabbar">
<view v-for="item in tabList" :key="item.value" class="tabItem" :class="{active: activeKey === item.value}">
{{item.title}}
<view v-if="activeKey === item.value" class="activeLine">
</view>
</view>
</view>
<view class="body">
<view class="cardItem">
<view class="cardItemTop">
<image class="cardImg" src="" mode="aspectFill"></image>
<view class="cardInfo">
<view class="cardName">车辆保养卡</view>
<view class="cardEndDate">2024-09-20</view>
</view>
<view class="cardInfoRight">
<view class="cardNum">
<text class="cardNumValue">4</text>次
</view>
<view class="cardLabel">可用次数</view>
</view>
</view>
<view class="cardItemBottom">
<view class="useSm">使用说明</view>
<view class="useBtn">去使用</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
@ -13,12 +43,152 @@
}, },
data() { data() {
return { return {
tabList: [{
value: 0,
title: '优惠卷'
},
{
value: 1,
title: '卡包'
}
],
activeKey: 0
}; };
} }
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.container {
height: 100%;
background-color: #F0F1F5;
</style> display: flex;
flex-direction: column;
.body {
flex: 1;
height: 0;
box-sizing: border-box;
padding: 30rpx 0;
margin: 0 32rpx;
display: flex;
flex-direction: column;
row-gap: 20rpx;
overflow: auto;
.cardItem {
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 30rpx;
}
.cardItemTop {
display: flex;
align-items: center;
column-gap: 16rpx;
padding-bottom: 32rpx;
border-bottom: 1px solid #ddd;
}
.cardImg {
width: 136rpx;
height: 100rpx;
background-color: #efefef;
}
.cardInfo {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0;
.cardName {
font-size: 32rpx;
color: #333333;
}
.cardEndDate {
font-size: 24rpx;
color: #999999;
}
}
.cardInfoRight {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FC4D4A;
.cardNumValue {
font-size: 64rpx;
}
.cardLabel {
color: #999999;
}
}
}
.cardItemBottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0 0;
.useSm {
font-size: 24rpx;
color: #999999;
}
.useBtn {
width: 144rpx;
height: 60rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
border: 1rpx solid #FC4D4A;
font-size: 28rpx;
color: #FC4D4A;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.tabbar {
background-color: #fff;
display: flex;
align-items: center;
.tabItem {
flex: 1;
width: 0;
display: flex;
justify-content: center;
padding: 30rpx 0;
position: relative;
}
.activeLine {
width: 52rpx;
height: 8rpx;
background: #009EDA;
border-radius: 4rpx 4rpx 4rpx 4rpx;
position: absolute;
left: 50%;
bottom: 2rpx;
transform: translate(-50%, 0);
}
}
</style>