样式

pages/home/home.vue

@@ -1,21 +1,23 @@
 <template>
-	<view class="zd_content">
-		<view class="header">{{$t('home.title')}}</view>
-		<view class="userInfo-wrap">
-			<view class="userInfo">
-				<text class="p1">{{$store.getters.userName}}</text>
-				<text class="p2">{{$t('home.message')}}</text>
+	<view class="home_wraper">
+		<view class="zd_content">
+			<view class="header">{{$t('home.title')}}</view>
+			<view class="userInfo-wrap">
+				<view class="userInfo">
+					<text v-if="userName !== ''" class="p1">{{userName}}</text>
+					<text class="p2">{{$t('home.message')}}</text>
+				</view>
+				<view class="exit" @tap="Quit">
+					<view class="icon-exit"></view>
+					<view class="exit-text">{{$t('home.exit')}}</view>
+				</view>
 			</view>
-			<view class="exit" @tap="Quit">
-				<view class="icon-exit"></view>
-				<view class="exit-text">{{$t('home.exit')}}</view>
-			</view>
-		</view>
-		<view class="zd_wrapper zd_home_wrapper">
-			<view class="menu-wrap">
-				<view class="menu-item" v-for="(e, i) in menuList" :key="i" @tap="toPage1(e)">
-					<image class="menu-img" :src="require('../../static/image/menu/' + e.path + '.png')" alt="">
-					<view class="menu-name">{{e.name}}</view>
+			<view class="zd_home_wrapper">
+				<view class="menu-wrap">
+					<view class="menu-item" v-for="(e, i) in menuList" :key="i" @tap="toPage1(e)">
+						<image class="menu-img" :src="require('../../static/image/menu/' + e.path + '.png')" alt="">
+						<view class="menu-name">{{e.name}}</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -38,12 +40,16 @@
 	export default {
 		data() {
 			return {
+				userName: '',
 				menuList: [],
 				show: false,
 				secM: []
 			};
 		},
 		created () {
+			if (this.$store.getters.userInfo) {
+				this.userName = JSON.parse(this.$store.getters.userInfo).username
+			}
 			this._authority()
 		},
 		methods: {
@@ -75,12 +81,21 @@
 
 <style lang="stylus">
 @import '../../common/style/mixin.styl';
+.home_wraper
+	_wh(100%, 100%)
 .zd_content
-	padding-top 0
-	padding-bottom 0
+	padding 0 24rpx
 	height 100%
+	padding-top calc(var(--status-bar-height) + 86rpx)
+	background linear-gradient(to bottom, #f8e6db 0%, #f6f6f6 30%, #f6f6f6 100%)
 .header
-	height 86rpx
+	position fixed
+	left 0
+	top 0
+	padding-top var(--status-bar-height)
+	z-index 100
+	_wh(100%, calc(var(--status-bar-height) + 86rpx))
+	background-color  #f8e6db
 	_font(36rpx,86rpx,#333,,center)
 .userInfo-wrap
 	_fj()
@@ -89,7 +104,7 @@
 	background-color $red
 	_bis('../../static/image/info_bg.png',auto,100%,right,bottom)
 	border-radius 12rpx
-	margin-bottom 20rpx
+	margin-bottom 24rpx
 .userInfo
 	_fj(,flex-start,column)
 .p1
@@ -110,8 +125,11 @@
 	_font(24rpx,47rpx,#fff,,right)
 	padding-left 10rpx
 .zd_home_wrapper
-	height calc(100% - 286rpx)
-	overflow hidden
+	_wh(100%, calc(100% - 208rpx))
+	background-color #fff
+	border-radius: 12rpx;
+	padding: 14rpx;
+	margin-bottom: 24rpx;
 	overflow-y auto
 .menu-wrap
 	_wh(100%, auto)
@@ -141,7 +159,7 @@
 	left 0
 	width 100%
 	height 70%
-	background-color #f4f5f5
+	background-color rgba(246, 246, 246, 1)
 	box-shadow 0 -8px 16px 0 rgba(28,31,33,.1)
 	border-top-left-radius 20rpx
 	border-top-right-radius 20rpx

pages/login/login.vue

@@ -50,7 +50,7 @@
 			//#ifdef APP-PLUS
 				// 获取本地应用资源版本号
 				plus.runtime.getProperty(plus.runtime.appid, (info) => {
-					console.log(JSON.stringify(info));
+					// console.log(JSON.stringify(info));
 					this.version = info.version;
 					this.versionCode = info.versionCode ;
 				}) 
@@ -182,6 +182,7 @@
 .zd_content
 	position: relative
 	height: 100%
+	overflow: hidden
 .version-name
 	width 100%
 	position: absolute