提交有效期查询页面切图

packages/card/detail.vue

@@ -7,13 +7,15 @@
 			</view>
 			<view class="cardinfobox">
 				<view class="cardlist">
-					<view class="listitem">
-						<view>卡片名称</view>
-						<text>红金款999型蟹卡</text>
-					</view>
-					<view class="listitem">
-						<view>卡片有效期</view>
-						<text>卡片至2025年10月31日有效</text>
+					<view class="cardinfolist">
+						<view class="listitem">
+							<view>卡片名称</view>
+							<text>红金款999型蟹卡</text>
+						</view>
+						<view class="listitem">
+							<view>卡片有效期</view>
+							<text>卡片至2025年10月31日有效</text>
+						</view>	
 					</view>
 				</view>
 				<view class="cardbtn" @click="saveImg">点击保存图片</view>
@@ -46,7 +48,7 @@
 					scope: 'scope.writePhotosAlbum',
 					success: (res) => {
 						uni.downloadFile({
-							url: '/static/cardimg1.jpg',
+							url: '../../static/cardimg1.jpg',
 							filePath:filePath,
 							success(res) {
 								console.log(res)
@@ -131,11 +133,47 @@
 	.cardlist{
 		border-radius: 10rpx;
 		width: 100%;
-		background-image: url(../../static/cardbg.png);
-		background-repeat: no-repeat;
-		background-position: center center;
-		background-size: cover;
 		overflow: hidden;
 		box-shadow: 0 5rpx 16rpx rgba(0,0,0,.32);
+		position: relative;
+		background-image: url(../../static/cardbg.jpg);
+		background-position: center top;
+		background-size: cover;
+		margin-bottom: 78rpx;
+	}
+	.cardinfolist{
+		padding: 16rpx 38rpx;
+	}
+	.cardinfolist .listitem{
+		display: flex;
+		border-bottom: 1rpx solid #f6d9b6;
+	}
+	.listitem:last-child{
+		border-bottom: none;
+	}
+	.listitem view{
+		padding-left: 6rpx;
+		width: 140rpx;
+		line-height: 80rpx;
+		color: #fff;
+		font-size: 24rpx;
+		border-right: 1rpx solid #f6d9b6;
+	}
+	.listitem text{
+		font-size: 24rpx;
+		line-height: 80rpx;
+		color: #f6d9b6;
+		padding-left: 20rpx;
+	}
+	.cardbtn{
+		width: 450rpx;
+		height: 74rpx;
+		line-height: 74rpx;
+		background: #b98b44;
+		font-size: 24rpx;
+		color: #fff;
+		margin: 0 auto;
+		text-align: center;
+		border-radius: 74rpx;
 	}
 </style>