添加充值页面
This commit is contained in:
147
bundle/recharge/card.vue
Normal file
147
bundle/recharge/card.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="" style="padding-bottom: 20rpx;">
|
||||
<navbar title="充值卡列表"></navbar>
|
||||
|
||||
<view class="card-box">
|
||||
<view class="card-item">
|
||||
<image src="@/static/bjk.png" class="card-img" alt="" />
|
||||
|
||||
<view class="card-title">白金卡</view>
|
||||
<view class="card-balance">¥1602.00</view>
|
||||
<view class="card-discount">
|
||||
<text class="card-discount1">9.5</text>
|
||||
<text class="card-discount2">折</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-item">
|
||||
<image src="@/static/bjk.png" class="card-img" alt="" />
|
||||
|
||||
<view class="card-title">白金卡</view>
|
||||
<view class="card-balance">¥1602.00</view>
|
||||
<view class="card-discount">
|
||||
<text class="card-discount1">9.5</text>
|
||||
<text class="card-discount2">折</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-item">
|
||||
<image src="@/static/bjk.png" class="card-img" alt="" />
|
||||
|
||||
<view class="card-title">白金卡</view>
|
||||
<view class="card-balance">¥1602.00</view>
|
||||
<view class="card-discount">
|
||||
<text class="card-discount1">9.5</text>
|
||||
<text class="card-discount2">折</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-item">
|
||||
<image src="@/static/bjk.png" class="card-img" alt="" />
|
||||
|
||||
<view class="card-title">白金卡</view>
|
||||
<view class="card-balance">¥1602.00</view>
|
||||
<view class="card-discount">
|
||||
<text class="card-discount1">9.5</text>
|
||||
<text class="card-discount2">折</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-item">
|
||||
<image src="@/static/bjk.png" class="card-img" alt="" />
|
||||
|
||||
<view class="card-title">白金卡</view>
|
||||
<view class="card-balance">¥1602.00</view>
|
||||
<view class="card-discount">
|
||||
<text class="card-discount1">9.5</text>
|
||||
<text class="card-discount2">折</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue';
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 选择会员卡
|
||||
selectCard() {
|
||||
console.log("选择会员卡");
|
||||
},
|
||||
|
||||
// 确认选择
|
||||
confirmCard() {
|
||||
console.log("确认选择");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
margin: 40rpx 30rpx;
|
||||
|
||||
.card-item {
|
||||
width: 690rpx;
|
||||
height: 260rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-img {
|
||||
width: 690rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
top: 42rpx;
|
||||
left: 38rpx;
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
line-height: 56rpx
|
||||
}
|
||||
|
||||
.card-balance {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 38rpx;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.card-discount {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 78rpx;
|
||||
color: #FE6752;
|
||||
font-weight: bold;
|
||||
|
||||
.card-discount1 {
|
||||
font-size: 44rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.card-discount2 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user