From 58a5424d962e00a134662297d973bdf45b58a24e Mon Sep 17 00:00:00 2001 From: queenwuli <942534046@qq.com> Date: Tue, 22 Dec 2020 15:10:26 +0800 Subject: [PATCH] gx --- hive-app/pages/member/membershipCard.vue | 62 +++++++++++++++++++++++-------- 1 files changed, 46 insertions(+), 16 deletions(-) diff --git a/hive-app/pages/member/membershipCard.vue b/hive-app/pages/member/membershipCard.vue index 6b5db92..444ccd5 100644 --- a/hive-app/pages/member/membershipCard.vue +++ b/hive-app/pages/member/membershipCard.vue @@ -1,16 +1,31 @@ <template> <view class="container"> - <view class="card-item"> - <view class="card-header"> + <view class="list-item"> + <view class="list-header"> <text class="name">会员卡</text> <text>NO 23564</text> </view> - <view class="card-content"> + <view class="list-content"> <text> - ¥ 5656789 + ¥<text class="ml-10">565,6789</text> </text> </view> - <view class="card-footer"> + <view class="list-footer"> + <text>赠送金额 ¥ 5656</text> + <text>有效期:2025-10-20</text> + </view> + </view> + <view class="list-item" v-for="item in 2"> + <view class="list-header"> + <text class="name">双11拓客卡</text> + <text>NO 23564</text> + </view> + <view class="list-content"> + <text> + ¥<text class="ml-10">565,6789</text> + </text> + </view> + <view class="list-footer"> <text>赠送金额 ¥ 5656</text> <text>有效期:2025-10-20</text> </view> @@ -38,26 +53,41 @@ .container{ padding: 10px 10px; } - .card-item{ - background: #F0AD4E; + .list-item{ color: #FFFFFF; font-size: 14px; - padding: 12px 15px; - border-radius: 4px; + padding: 20px 18px; + border-radius: 16px; + margin-bottom: 10px; } - .card-header{ + .list-item:nth-child(2n+1){ + background: url(../../static/images/card-bg2.png) no-repeat; + background-size: cover; + } + .list-item:nth-child(2n+2){ + background: url(../../static/images/card-bg3.png) no-repeat; + background-size: cover; + } + .list-item:nth-child(1){ + background: url(../../static/images/card-bg1.png) no-repeat; + background-size: cover; + } + .list-header{ display: flex; justify-content: space-between; align-items: center; } - .card-header .name{ - font-size: 22px; + .list-header .name{ + font-size: 18px; font-weight: bold; } - .card-content{ - + .list-content{ + padding: 24px 0; + font-size: 30px; } - .card-footer{ - + .list-footer{ + display: flex; + justify-content: space-between; + align-items: center; } </style> -- Gitblit v1.9.1