1.配置H5 的样式展示

pages/goods/goods.vue

@@ -13,7 +13,7 @@
 		<view class="swiper-box">
 			<swiper circular="true" autoplay="true" @change="swiperChange">
 				<swiper-item v-for="(swiper,index) in swiperList" :key="index">
-					<image mode="widthFix" :src="imageUrl+swiper" @click="perImage(swiper)"></image>
+					<image :src="imageUrl+swiper" @click="perImage(swiper)"></image>
 				</swiper-item>
 			</swiper>
 			<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view>
@@ -742,13 +742,43 @@
 		}
 	}
 
+	// .swiper-box {
+	// 	position: relative;
+	// 	width: 100%;
+
+	// 	swiper {
+	// 		width: 100%;
+
+	// 		swiper-item {
+	// 			image {
+	// 				width: 100%;
+	// 				height: 100vw;
+	// 			}
+	// 		}
+	// 	}
+
+	// 	.indicator {
+	// 		display: flex;
+	// 		justify-content: center;
+	// 		align-items: center;
+	// 		padding: 0 25upx;
+	// 		height: 40upx;
+	// 		border-radius: 40upx;
+	// 		font-size: 22upx;
+	// 		position: absolute;
+	// 		bottom: 20upx;
+	// 		right: 20upx;
+	// 		color: #fff;
+	// 		background-color: rgba(0, 0, 0, 0.2);
+	// 	}
+	// }
 	.swiper-box {
 		position: relative;
 		width: 100%;
-
+		height: 100vw;
 		swiper {
 			width: 100%;
-
+			height: 100vw;
 			swiper-item {
 				image {
 					width: 100%;
@@ -756,8 +786,7 @@
 				}
 			}
 		}
-
-		.indicator {
+		.indicator{
 			display: flex;
 			justify-content: center;
 			align-items: center;

pages/tabBar/user/user.vue

@@ -1,11 +1,9 @@
 <template>
 	<view>
+		<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
+		<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}"></view>
 		<!-- 占位 -->
-		<!-- <view class="place">
-			<image @click="toScan"
-				src="data:image/png;base64,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">
-			</image>
-		</view> -->
+		<view v-if="showHeader" class="place"></view>
 		<view class="user">
 			<!-- 头像 -->
 			<view class="left">
@@ -95,7 +93,7 @@
 		</view>
 		<!-- 占位 -->
 		<view class="place-bottom"></view>
-		<authorize></authorize>
+		<!-- <authorize></authorize> -->
 	</view>
 </template>
 <script>
@@ -200,6 +198,14 @@
 		},
 		onLoad() {
 			this.statusHeight = 0;
+			// #ifdef APP-PLUS
+			this.showHeader = false;
+			this.statusHeight = plus.navigator.getStatusbarHeight();
+			// #endif
+			// #ifdef MP
+			this.showHeader = false;
+			this.statusHeight = plus.navigator.getStatusbarHeight();
+			// #endif
 		},
 		onReady() {
 			//此处，演示,每次页面初次渲染都把登录状态重置
@@ -337,6 +343,50 @@
 		background-color: #fff;
 	}
 
+	.status {
+		width: 100%;
+		height: 0;
+		position: fixed;
+		z-index: 10;
+		background-color: #f06c7a;
+		top: 0;
+		/*  #ifdef  APP-PLUS  */
+		height: var(--status-bar-height);//覆盖样式
+		/*  #endif  */
+		
+	}
+	
+	.header{
+		width: 92%;
+		padding: 0 4%;
+		height: 100upx;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		position: fixed;
+		top: 0;
+		z-index: 10;
+		background-color: #f06c7a;
+		/*  #ifdef  APP-PLUS  */
+		top: var(--status-bar-height);
+		/*  #endif  */
+		.icon-btn{
+			width: 120upx;
+			height: 60upx;
+			flex-shrink: 0;
+			display: flex;
+			.icon{
+				color: #fff;
+				width: 60upx;
+				height: 60upx;
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				font-size: 42upx;
+			}
+		}
+	}
+
 	button::after {
 		border: none
 	}