fix layout style

src/pages/customer/CustomerQrCode.vue

@@ -36,7 +36,25 @@
 			<t-cell title="最终起始编码" :note="finalStartCode" />
 			<t-cell title="最终结束编码" :note="finalEndCode" />
 		</t-cell-group>
-
+		<div class="actions">
+			<t-button
+				class="bg-white"
+				theme="primary"
+				variant="outline"
+				block
+				:loading="printing"
+				@click="printQrCode"
+			>打印</t-button>
+			<t-button
+				theme="primary"
+				block
+				:loading="downloading"
+				@click="downloadImages"
+			>
+				<span v-text="downloadText" />
+			</t-button>
+		</div>
+		<div class="actions orange tips">微信内可能无法发起打印或批量下载，建议使用默认浏览器打开</div>
 		<section class="preview">
 			<div class="header">
 				<h2 class="title">预览</h2>
@@ -53,12 +71,6 @@
 				</div>
 			</div>
 		</section>
-		<div class="actions">
-			<t-button class="bg-white" theme="primary" variant="outline" block :loading="printing" @click="printQrCode">打印</t-button>
-			<t-button theme="primary" block :loading="downloading" @click="downloadImages">
-				<span v-text="downloadText" />
-			</t-button>
-		</div>
 	</div>
 </template>
 
@@ -241,6 +253,18 @@ async function printQrCode(): Promise<void> {
 		}
 	}
 
+	.actions {
+		--td-button-border-radius: 1rem;
+
+		&.tips {
+			font-size: .875rem;
+		}
+
+		gap: .75rem;
+		display: flex;
+		margin: 0 1rem;
+	}
+
 	.preview {
 		padding: 0 1rem;
 
@@ -298,16 +322,6 @@ async function printQrCode(): Promise<void> {
 			}
 		}
 	}
-
-	.actions {
-		gap: .75rem;
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		display: grid;
-		position: fixed;
-		grid-template-columns: 1fr 1fr;
-	}
 }
 
 :global(html.theme-dark) {