132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="我的骑行卡" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
|
height='45'></u-navbar>
|
|
|
|
<view class="cont">
|
|
<view class="card1">
|
|
<view class="tit1">
|
|
电单车15天5次卡
|
|
</view>
|
|
<view class="tit2">
|
|
有效期至2024-08-04
|
|
</view>
|
|
<view class="txt3">
|
|
剩余次数 <span >5</span>
|
|
</view>
|
|
</view>
|
|
<view class="card2">
|
|
|
|
</view>
|
|
<view class="card3">
|
|
|
|
</view>
|
|
<view class="card4">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: '#fff'
|
|
},
|
|
sn: '',
|
|
istrue: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
|
|
.cont {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
.tit1{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.tit2{
|
|
margin-top: 10rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.card1 {
|
|
position: relative;
|
|
margin-top: 18rpx;
|
|
width: 680rpx;
|
|
height: 176rpx;
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uTKFB3So9QZGTuttNGD0');
|
|
background-size: cover;
|
|
/* 背景图片等比缩放以覆盖整个容器 */
|
|
background-position: center;
|
|
/* 背景图片居中显示 */
|
|
background-repeat: no-repeat;
|
|
padding: 22rpx 46rpx;
|
|
.txt3{
|
|
position: absolute;
|
|
right: 42rpx ;
|
|
bottom: 26rpx;
|
|
}
|
|
/* 防止背景图片重复 */
|
|
}
|
|
.card2 {
|
|
margin-top: 18rpx;
|
|
width: 680rpx;
|
|
height: 176rpx;
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uhYH4FVnYOsjGK2iky8X');
|
|
background-size: cover;
|
|
/* 背景图片等比缩放以覆盖整个容器 */
|
|
background-position: center;
|
|
/* 背景图片居中显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
}
|
|
.card3 {
|
|
margin-top: 18rpx;
|
|
width: 680rpx;
|
|
height: 410rpx;
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uZCTchd4XbAwsmNDuGun');
|
|
background-size: cover;
|
|
/* 背景图片等比缩放以覆盖整个容器 */
|
|
background-position: center;
|
|
/* 背景图片居中显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
}
|
|
.card4 {
|
|
margin-top: 18rpx;
|
|
width: 680rpx;
|
|
height: 410rpx;
|
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiT97zPTbkZOMkGGmsAc');
|
|
background-size: cover;
|
|
/* 背景图片等比缩放以覆盖整个容器 */
|
|
background-position: center;
|
|
/* 背景图片居中显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</style> |