我的页面布局优化

pages/wd/index.vue

@@ -1,13 +1,28 @@
 <template>
 	<view>
-		<image mode="widthFix" :src="isLogin ? '/static/wd_bg_login.jpg' : '/static/wd_bg.jpg'" :class="isLogin ? 'login_full_img' : 'full_img'"></image>
-
+		<!-- <image mode="widthFix" :src="isLogin ? '/static/wd_bg_login.jpg' : '/static/wd_bg.jpg'" :class="isLogin ? 'login_full_img' : 'full_img'"></image> -->
+		<u-navbar :is-back="false" title="我的" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
+			<view class="slot-wrap">
+				<image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
+			</view>
+		</u-navbar>
+		<view v-if="isLogin" class="imgs_bg">
+			<view class="infos">
+				<image :src="userInfo ? $method.splitImgHost(userInfo.avatar, true) : ''" class="avatar"></image>
+				<!-- <view style="margin-left: 20rpx;z-index: 999;"> -->
+				<view style="color: #FFFFFF;font-size: 32rpx;">{{ userInfo.nickname }}</view>
+				<view style="color: #ffffff;font-size: 20rpx;margin-top: 17rpx">{{ userInfo.telphone }}</view>
+				<!-- </view> -->
+			</view>
+			<image src="/static/me/me_bgpic.jpg" class="bg_pic"></image>
+		</view>
 		<view class="login_wrap" v-if="!isLogin">
 			<view class="login_text">您还没有登录哦~</view>
 			<view class="loginBtn" @click="jumpLogin">立即登录/注册</view>
 		</view>
 		<view v-if="isLogin" class="loginBox">
-			<view style="width: 100%;height: 40px;background-color: #F0F1F5;position: fixed;top: 150px;z-index: 100;"></view>
+			<view class="contents">
+			<!-- <view style="width: 100%;height: 40px;background-color: #F0F1F5;position: fixed;top: 150px;z-index: 100;"></view>
 			<view style="display: flex;height: 160rpx;align-items: center; position: fixed;z-index: 999;top: 110px;" v-if="isLogin">
 				<image :src="userInfo ? $method.splitImgHost(userInfo.avatar, true) : ''" class="avatar"></image>
 				<view style="margin-left: 20rpx;z-index: 999;">
@@ -16,7 +31,7 @@
 				</view>
 				<view style="background-color: #F0F1F5;height:80rpx;"></view>
 			</view>
-			<view style="top: 195px;position: relative;padding-bottom: 30rpx;">
+			<view style="top: 195px;position: relative;padding-bottom: 30rpx;"> -->
 				<!-- <navigator  hover-class="none" url="/pages2/plan/index" class="menu_box">
 					<view class="box_left">
 						<image src="/static/icon/my_icon1.png" class="my_icon"></image>
@@ -28,7 +43,7 @@
 						个学习任务
 					</view>
 				</navigator> -->
-				<view class="two_menu">
+				<!-- <view class="two_menu">
 					<navigator  hover-class="none" url="/pages2/wd/class" class="small_menu">
 						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
 						<view>我的网课</view>
@@ -37,8 +52,8 @@
 						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
 						<view>我的题库通</view>
 					</view>
-				</view>
-				<navigator  hover-class="none" url="/pages5/liveDetail/list" class="menu_box" >
+				</view> -->
+				<!-- <navigator  hover-class="none" url="/pages5/liveDetail/list" class="menu_box" >
 					<view class="box_left">
 						<image src="/static/icon/my_icon12.png" class="my_icon"></image>
 						<view>我的直播课</view>
@@ -48,7 +63,7 @@
 						<text>{{ total2 }}</text>
 						个课程直播中
 					</view>
-				</navigator>
+				</navigator> -->
 				<navigator  hover-class="none" url="/pages2/learn/my_learn" class="menu_box" >
 					<view class="box_left">
 						<image src="/static/icon/my_icon2.png" class="my_icon"></image>
@@ -105,14 +120,18 @@
 						<image src="/static/icon/my_icon9.png" class="my_icon"></image>
 						<view>我的资料</view>
 					</view>
+					<view class="box_right">
+						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
+					</view>
 				</navigator>
+				</view>
 				<view class="logout" @click="logout">退出</view>
 			</view>
-		</view>
+			
 
-		<u-navbar :is-back="false" title="我的" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
+		<!-- <u-navbar :is-back="false" title="我的" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
 			<view class="slot-wrap"><image src="/static/logo.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image></view>
-		</u-navbar>
+		</u-navbar> -->
 	</view>
 </template>
 
@@ -136,6 +155,7 @@ export default {
 		console.log(option,987)
 	},
 	onShow() {
+		console.log('userInfo', this.userInfo)
 		this.isLogin = this.$method.isLogin();
 		if(this.isLogin){
 		this.$store.state.allowLoading = false;
@@ -214,10 +234,10 @@ page {
 <style scoped lang="scss">
 .login_wrap {
 	text-align: center;
-	margin-top: 60rpx;
+	margin-top: 100rpx;
 	
 	.login_text {
-		color: #007AFF ;
+		color: #007AFF;
 		font-size: 36rpx;
 		font-weight: bold;
 	}
@@ -235,10 +255,36 @@ page {
 		margin-top: 50rpx;
 	}
 }
+.imgs_bg {
+	width: 100%;
+	height: 429rpx;
+	position: fixed;
+	z-index: 999;
+	.infos {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 99;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.bg_pic {
+		width: 100%;
+		height: 100%;
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 9;
+	}
+}
 .avatar {
-	height: 70rpx;
-	width: 70rpx;
+	height: 160rpx;
+	width: 160rpx;
 	border-radius: 50%;
+	margin: 110rpx 0rpx 37rpx 0rpx;
 }
 .small_menu {
 	width: 45%;
@@ -262,17 +308,18 @@ page {
 	margin-right: 20rpx;
 }
 .menu_box {
-	height: 104rpx;
+	height: 130rpx;
 	background: #ffffff;
-	border-radius: 24rpx;
-	margin-top: 30rpx;
+	// border-radius: 24rpx;
+	// margin-top: 30rpx;
 	display: flex;
 	align-items: center;
-	padding: 0 20rpx;
+	// padding: 0 20rpx;
 	justify-content: space-between;
 	color: #666666;
-	font-size: 32rpx;
-	
+	font-size: 30rpx;
+	font-weight: 500;
+	border-bottom: 1rpx solid #EEEEEE;
 	.box_left {
 		display: flex;
 		align-items: center;
@@ -289,12 +336,18 @@ page {
 }
 .loginBox {
 	position: relative;
-
-	padding: 0 30rpx;
-}
-.avatar {
-	width: 80px;
-	height: 80px;
+	padding: 0 30rpx 20rpx 30rpx;
+    top: 430rpx;
+	width: 100%;
+	height: 100%;
+	margin-top: 30rpx;
+	.contents {
+		width: 100%;
+		height: 100%;
+		border-radius: 24rpx;
+		background-color: #ffffff;
+		padding: 0rpx 30rpx 0rpx 20rpx;
+	}
 }
 .login_full_img {
 	display: block;