付款码css

pages/mine/paymentCode.vue

@@ -25,7 +25,9 @@
 			</view>
 			<!-- 二维码 -->
 			<view class="qr-code ">
-				<div class="img" ref="qrCodeDiv"></div>
+				<view class="img">
+					<div id="qrCodeDiv" ref="qrCodeDiv"></div>
+				</view>
 				<!-- <view class="img">
 					<img src="../../assets/img/qrCode.png" alt="">
 					<view class="qr-logo">
@@ -67,6 +69,9 @@
 	import QRCode from 'qrcodejs2'
 
 	export default {
+		components: {
+			QRCode
+		},
 		data() {
 			return {
 				userInfo: {},
@@ -179,6 +184,14 @@
 </script>
 
 <style lang="scss" scoped>
+	// #qrCodeDiv {
+	// 	width: 400rpx;
+	// 	height: 400rpx;
+	// 	position: relative;
+	// 	// margin: 0 144rpx;
+	// 	padding: 0 144rpx 0 144rpx;
+	// }
+	
 	.loading-img{
 		animation: rotation 2s linear infinite;
 	}
@@ -261,10 +274,14 @@
 			padding: 80rpx 0;
 
 			.img {
-				width: 400rpx;
-				height: 400rpx;
-				position: relative;
-				margin: 0 144rpx;
+				// width: 400rpx;
+				// height: 400rpx;
+				// position: relative;
+				// margin: 0 144rpx;
+				padding: 0 144rpx 0 144rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 
 				img {
 					width: 100%;