فهرست منبع

优化信息卡照片比例

LinWuTai 2 روز پیش
والد
کامیت
50ef4ba5f4
1فایلهای تغییر یافته به همراه22 افزوده شده و 16 حذف شده
  1. 22 16
      components/creditCard.vue

+ 22 - 16
components/creditCard.vue

@@ -19,16 +19,16 @@
 			</view>
 		</view>
 		<view class="image-box" v-if="isLogin && data.creditNo">
-			<view class="image-item-box">
+			<view class="image-item-box item-photo">
 				<image class="photo" :src="data.headUrl" :key="data.headUrl" @click="previewImage(data.headUrl)"></image>
 			</view>
-			<view class="image-item-box">
+			<view class="image-item-box item-qrcode">
 				<view class="qrcode-box">
 					<!-- <image class="qrcode" :src="`${FILE_URL}/zhengshu/qrCode.png`"></image>-->
 					 <ikun-qrcode
 						v-if="data.url"
-						:width="size === 'mini' ? 75 : 240"
-						:height="size === 'mini' ? 75 : 240"
+						:width="size === 'mini' ? 75 : 180"
+						:height="size === 'mini' ? 75 : 180"
 						unit="rpx"
 						:data="data.url"
 						:key="data.url"
@@ -65,8 +65,8 @@
 				</view>
 			</view>
 		</view>
-		<view class="publisher-box" v-if="isLogin && data.id">
-			{{ data.publisher }}&nbsp;制
+		<view class="publisher-box" v-if="isLogin && data.creditNo">
+			广州市住房和城乡建设委员会&nbsp;制
 		</view>
 	</view>
 </template>
@@ -123,15 +123,21 @@
 		.image-box {
 			height: 40%;
 			display: flex;
+			.item-photo {
+				width: 60%;
+			}
+			.item-qrcode {
+				width: 40%;
+			}
 			
 			.image-item-box {
-				width: 50%;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				.photo {
-					height: 100%;
 					width: 100%;
+					height: auto;
+					aspect-ratio: 22/32;
 					object-fit: cover;
 				}
 				.qrcode {
@@ -186,8 +192,8 @@
 			gap: 20rpx;
 			.image-item-box {
 				.qrcode-box {
-					height: 70%;
-					width: 100%;
+					height: 75rpx;
+					width: 75rpx;
 				}
 				.text {
 					height: 20%;
@@ -209,7 +215,7 @@
 			position: relative;
 			left: -9rpx;
 			padding-top: 10rpx;
-			font-size: $uni-font-size-6;
+			font-size: $uni-font-size-5;
 			font-weight: bold;
 			transform: scale(0.7);
 		}
@@ -226,7 +232,7 @@
 				font-size: calc($uni-title-font-size-1 + 3rpx);
 			}
 			.text {
-				font-size: calc($uni-title-font-size-1);
+				font-size: calc($uni-title-font-size-1 + 3rpx);
 			}
 		}
 		.desc-box {
@@ -246,11 +252,11 @@
 			gap: 20rpx;
 			.image-item-box {
 				.qrcode-box {
-					height: 75%;
-					width: 100%;
+					height: 180rpx;
+					width: 180rpx;
 				}
 				.text {
-					height: 10%;
+					padding-top: 30rpx;
 					text-align: center;
 					font-size: $uni-title-font-size-2;
 					font-weight: bold;
@@ -268,7 +274,7 @@
 		}
 		.publisher-box {
 			padding-top: 10rpx;
-			font-size: $uni-title-font-size-3;
+			font-size: $uni-title-font-size-2;
 			font-weight: bold;
 		}
 	}