family/education_uni/components/my-userinfo/my-userinfo.vue

<template>
	<view>
		<view class="wrapper">
		    <view class="top-index">
		        <view class="top-title">
		            <image :src="userinfo.avatar"></image>
		            <text class="top-nick">{{userinfo.alias}}</text>
		        </view>
		        <text class="top-text" bindtap="exitLogin">退出账号</text>
		    </view>
		    <view class="infoList">
		        <navigator class="infoList-text" url="myAppointment">我的邀请</navigator>
		        <navigator class="infoList-text" url="appointment">我被邀请</navigator>
		        <navigator class="infoList-text" url="myLessons">我的订单</navigator>
		        <navigator class="infoList-text" url="/subpkg/student_require/student_require">学员需求</navigator>
		        <navigator class="infoList-text" url="myTeacher">我收藏的老师</navigator>
		        <navigator class="infoList-text" url="myStudent">我收藏的学生</navigator>
		        <navigator class="infoList-text" url="/subpkg/course_publish/course_publish">我的投诉</navigator>
		        <navigator class="infoList-text" url="mySuggest">我的建议</navigator>
		        <navigator class="infoList-text" url="refund">退款记录</navigator>
		        <navigator class="infoList-text" url="/subpkg/teacher_authorize/teacher_authorize">老师认证</navigator>
				<navigator class="infoList-text" url="/subpkg/course_publish/course_publish">课程发布</navigator>
		        <navigator class="infoList-text" url="/subpkg/user_detail/user_detail">编辑账号</navigator>
		    </view>
		    <view class="recommendMoney">
		        <text bindtap="cashBack">推荐返现</text>
		    </view>
		    <button class="suggest" open-type="feedback">反馈建议</button>
		
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		name:"my-userinfo",
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				
			};
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
}

.top-index {
    display: flex;
    height: 100rpx;
    line-height: 100rpx;
    background-color: #f8f8f8;
}

.top-title {
    display: flex;
    width: 80%;
}

.top-index image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.top-nick {
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 20rpx;
}

.top-text {
    margin-top: 20rpx;
    margin-left: 4rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid rgb(207, 202, 202);
    border-radius: 20rpx;
    padding: 0 6rpx;
    color: #c0b0b0;
}

/* 主页容器 */
.infoList{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* 主页内容区 */
.infoList-text{
    width: 47%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: rgb(241, 241, 235);
    margin: 10rpx 10rpx 0 10rpx;
}

/* 推荐返现 */
.recommendMoney{
    /* position: relative;
    display: flex; */
    margin-top: 100rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    background-color: rgb(241, 241, 235);
    color: red;
}

/* 反馈建议 */
.suggest{
    margin-top: 20rpx;
}
</style>