148 lines
4.1 KiB
Vue
148 lines
4.1 KiB
Vue
<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>
|