样式修改

App.vue

@@ -1,7 +1,30 @@
 <script>
 	export default {
+		globalData: {
+		    statusBarHeight: 0, // 状态导航栏高度
+		    navHeight: 0, // 总体高度
+		    navigationBarHeight: 0, // 导航栏高度(标题栏高度)
+		},
 		onLaunch: function() {
 			// console.log('App Launch')
+			 // 状态栏高度
+			this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+		 
+			// #ifdef MP-WEIXIN
+			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
+			const custom = wx.getMenuButtonBoundingClientRect()
+			// console.log(custom)
+		 
+			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
+			this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
+			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
+		 
+			// 总体高度 = 状态栏高度 + 导航栏高度
+			this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight
+		 
+			// #endif
+		 
+			console.log('this.globalData==========',this.globalData)
 		},
 		onShow: function() {
 			// console.log('App Show')

center/center.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="pages">
+		<view class="" :style="{height: navHeight+'px' }"></view>
 		<view class="page-bg">
 			<img class="img" :src="staticUrl+'/img/center-index-bg.png'" alt="">
 		</view>
@@ -74,11 +75,13 @@
 </template>
 
 <script>
+	import { systemInfo } from "@/mixin.js";
 	import tabbar from "../components/tabbar.vue"
 	export default {
 		components:{
 			tabbar
 		},
+		mixins:[systemInfo],
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
@@ -112,7 +115,7 @@
 			this.statisticsOrder();
 		},
 		onLoad() {
-
+			this.getSystemInfo();
 		},
 		methods: {
 			getMemberInfo(){
@@ -153,7 +156,7 @@
 <style>
 page{
 	background-color: #F5F5F5;
-	padding-top: 60px;
+	padding-top: 0;
 }
 </style>
 <style lang="scss" scoped>
@@ -222,7 +225,7 @@ page{
 			position: relative;
 		}
 		.down{
-			font-size: 22rpx;
+			font-size: 24rpx;
 			font-weight: 400;
 			color: #666666;
 			line-height: 31rpx;
@@ -237,7 +240,7 @@ page{
 			display: block;
 		}
 		.down{
-			font-size: 22rpx;
+			font-size: 24rpx;
 			font-weight: 400;
 			color: #666666;
 			line-height: 31rpx;

components/tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="">
+	<view class="tabbar">
 		<u-tabbar
 			:value="tabbarValue"
 			@change="tabbarChange"
@@ -142,10 +142,21 @@ export default {
 
 <style lang="scss" scoped>
 .u-page__item__slot-icon{
-	width: 60rpx;
-	height: 60rpx;
+	width: 40rpx;
+	height: 40rpx;
 	&.big{
 		transform: scale(1.5) translateY(-0.5em);
 	}
 }
+.u-tabbar-item{
+	padding-top: 10rpx;
+}
+.tabbar{
+	/deep/ .u-tabbar{
+		.u-tabbar-item{
+			padding-top: 100px;
+		}
+	}
+}
+
 </style>

mixin.js

@@ -0,0 +1,18 @@
+export const systemInfo = {
+  data: () => ({
+    statusBarHeight: 0,
+    navigationBarHeight: 0,
+    navHeight: 0,
+    windowHeight: 0, // 可使用窗口高度
+  }),
+ 
+  methods: {
+    // 获取设备信息
+    getSystemInfo() {
+      this.statusBarHeight = getApp().globalData.statusBarHeight
+      this.navigationBarHeight = getApp().globalData.navigationBarHeight
+      this.windowHeight = uni.getSystemInfoSync().windowHeight
+      this.navHeight = getApp().globalData.navHeight
+    },
+  },
+}

pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="pages">
+		<view class="" :style="{height: navHeight+'px' }"></view>
 		<view class="page-bg">
 			<img class="img" :src="staticUrl+'/img/index-bg.png'" alt="">
 		</view>
@@ -113,6 +114,7 @@
 </template>
 
 <script>
+	import { systemInfo } from "@/mixin.js";
 	import tabbar from "../../components/tabbar.vue";
 	import cartfixed from "../../components/cartfixed.vue"
 	export default {
@@ -120,11 +122,12 @@
 			tabbar,
 			cartfixed
 		},
+		mixins:[systemInfo],
 		data() {
 			return {
 				goodsName:'',
 				staticUrl:this.$commonConfig.staticUrl,
-				advantageSize:20,
+				advantageSize:14,
 				bannerList: [],
 				centerImg:[],
 				hotGoods:[]
@@ -138,6 +141,11 @@
 			setTimeout(()=>{
 				that.getCenterImg();
 			},200);
+			this.getSystemInfo();
+			// console.log('statusBarHeight',this.statusBarHeight);
+			// console.log('navigationBarHeight',this.navigationBarHeight);
+			// console.log('windowHeight',this.windowHeight);
+			// console.log('navHeight',this.navHeight);
 		},
 		onShow() {
 			this.$refs.cartfixed.getCartList();
@@ -205,7 +213,7 @@
 <style>
 page{
 	background-color: #F9F9F9;
-	padding-top: 60px;
+	padding-top: 0;
 }
 </style>
 <style lang="scss" scoped>
@@ -222,7 +230,7 @@ page{
 .advantage{
 	margin-top: 20rpx;
 	margin-bottom: 50rpx;
-	font-size: 20rpx;
+	font-size: 22rpx;
 	color: #ccc;
 	/deep/ .u-icon{
 		margin-right: 10rpx;

shopping/producTypetList.vue

@@ -269,7 +269,9 @@
 	}
 </script>
 <style>
-/* page{background-color: #F5F5F5;} */
+page{
+	/* padding-top: 60px; */
+}
 </style>
 <style lang="scss" scoped>
 .out-wrap{

shopping/productdetails.vue

@@ -10,6 +10,7 @@
 		 <u-swiper
 			v-if="details.slideImgList.length>0"
 			:list="details.slideImgList"
+			height="700rpx"
 			@change="e => currentNum = e.current"
 			:autoplay="false"
 			indicatorStyle="right: 20px"

xushuo/xushuo.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="pages">
+		<view class="" :style="{height: navHeight+'px' }"></view>
 		<view class="page-wrap">
 			<u-swiper
 				:list="bannerList"
@@ -81,11 +82,13 @@
 </template>
 
 <script>
+	import { systemInfo } from "@/mixin.js";
 	import tabbar from "../components/tabbar.vue"
 	export default {
 		components:{
 			tabbar
 		},
+		mixins:[systemInfo],
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
@@ -100,6 +103,7 @@
 			this.shopNewsType()
 			this.swiperList();
 			this.getIntro();
+			this.getSystemInfo();
 		},
 		methods: {
 			swiperList(){
@@ -168,7 +172,7 @@ page{
 	background-repeat: no-repeat;
 	background-position: left top;
 	background-size: 100% auto;
-	padding-top: 60px;
+	padding-top: 0;
 }
 </style>
 <style lang="scss" scoped>