横屏的时候我的界面调整为左右结构

pages/tabbar/person/index.vue

@@ -2,22 +2,24 @@
 	<view class="percon-area">
 		<navbar />
 		<view style="height:92rpx;"></view>
-		<view class="head-card">
-			<view class="head-box">
-				<image :src="user_head_img"></image>
+		<view class="content-area">
+			<view class="head-card">
+				<view class="head-box">
+					<image :src="user_head_img"></image>
+				</view>
+				<text class="user-text">{{user_name}}</text>
+				<button class="quit-btn" @click="signOut">退出登录</button>
+			</view>
+			<view class="book-card">
+				<uni-grid :column="3" :showBorder="false" :square="false">
+					<uni-grid-item v-for="(item, index) in pageList" :key="index">
+						<view class="book-box" @click="linkBook(item.book_id)">
+							<image :src="item.book_picture_url"></image>
+						</view>
+						<text class="text" @click="linkBook(item.book_id)">{{item.book_name}}</text>
+					</uni-grid-item>
+				</uni-grid>
 			</view>
-			<text class="user-text">{{user_name}}</text>
-			<button class="quit-btn" @click="signOut">退出登录</button>
-		</view>
-		<view class="head-card book-card">
-			<uni-grid :column="3" :showBorder="false" :square="false">
-				<uni-grid-item v-for="(item, index) in pageList" :key="index">
-					<view class="book-box" @click="linkBook(item.book_id)">
-						<image :src="item.book_picture_url"></image>
-					</view>
-					<text class="text" @click="linkBook(item.book_id)">{{item.book_name}}</text>
-				</uni-grid-item>
-			</uni-grid>
 		</view>
 		<view style="height:120rpx;"></view>
 	</view>
@@ -78,12 +80,12 @@
 </script>
 
 <style lang="scss">
+	/*竖屏样式*/
 	.percon-area {
 		.head-card {
 			margin: 16rpx;
 			background-color: #fff;
 			border-radius: 16rpx;
-			//height: 400rpx;
 			padding: 17px;
 			display: flex;
 			flex-direction: column;
@@ -93,6 +95,13 @@
 			font-weight: 500;
 			font-size: 13pt;
 
+			@media (orientation: landscape) {
+				row-gap: 18rpx;
+				justify-content: start;
+				height: 260px;
+				min-width: 120px;
+			}
+
 			.head-box {
 				width: 160rpx;
 				height: 160rpx;
@@ -100,6 +109,11 @@
 				margin: 0 auto;
 				border-radius: 80rpx;
 
+				@media (orientation: landscape) {
+					width: 100rpx;
+					height: 100rpx;
+				}
+
 				uni-image {
 					width: 100%;
 					height: 100%;
@@ -113,13 +127,24 @@
 				color: #ed5c5c;
 				background-color: #fff;
 				padding: 0 40rpx;
+
+				@media (orientation: landscape) {
+					padding: 0 20rpx;
+				}
 			}
 		}
 
 		.book-card {
+			margin: 16rpx;
+			background-color: #fff;
 			padding: 16px 22px;
 			height: auto;
 			margin-bottom: 120px;
+			border-radius: 16rpx;
+
+			@media (orientation: landscape) {
+				margin-bottom: 20px;
+			}
 
 			.book-box {
 				width: 85%;
@@ -153,4 +178,12 @@
 			}
 		}
 	}
+
+	/* 横屏样式 */
+	@media (orientation: landscape) {
+		/deep/ .content-area {
+			display: flex;
+			flex-direction: row;
+		}
+	}
 </style>