zhuoxin-user-uniapp/pages/user/index.vue

<template>
	<view class="content">
		<!-- <fxyk-navbar :isSearch="false" :isNeedReturn="false" title="个人中心"/> -->
		<view class="head">
			<view class="head-item">
				<u-image width="179rpx" height="179rpx" :fade="false" src="../../static/images/head.png"></u-image>
				<view class="text-center word-one">用户名</view>
				<view class="text-center word-two">所属部门</view>
			</view>
		</view>
		<u-cell-group style="margin-bottom:200rpx">
			<fxyk-cell leftSlot v-for="(item,index) in profile" :key="index" :leftImg="item.imgPath" :title="item.title" arrow :redDot="item.redDot ? true : false" @click.native="jump_path(item.path)"/>
		</u-cell-group>
		<fxyk-button content="退出登录" bgColor="#FF0011" @click.native="logout"/>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				value: '',
				profile: [
					{
						'title': '修改密码',
						'imgPath': '../../static/images/updatePassword.png',
						'path': '/pages/user/updatePassword'
					},
					{
						'title': '版本更新',
						'imgPath': '../../static/images/version.png',
						// 小红点
						'redDot': 11,
						'path': '/pages/user/version'
					},
					{
						'title': '关于我们',
						'imgPath': '../../static/images/about.png',
						'path': '/pages/user/aboutUs'
					}
				] 
			}
		},
		onLoad() {},
		computed: {
			titleStyle() {
				return {'font-size': '29rpx',
				'font-family': 'SimSun',
				'font-weight': '400',
				'line-height': '40rpx',
				'color': '#000000',
				'margin-left': '29rpx'}
			}
		},
		methods: {
			...mapMutations(['logout']),
			// 跳指定页
			jump_path(val) {
				uni.navigateTo({
					url: val
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		/* background-color: $yk-bg-color; */
		min-height: 100vh;
	}
	.head {
		height: 350rpx;
		background-color: $yk-main-bg-color;
		position: relative;
		margin-bottom: 50rpx;
		.head-item {
			position: absolute;
			top: 20rpx;
			left: 50%;
			transform:  translateX(-50%);
			.word-one {
				font-size: 33rpx;
				font-family: SimSun;
				font-weight: 400;
				line-height: 44rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
			.word-two {
				font-size: 29rpx;
				font-family: SimSun;
				font-weight: 400;
				line-height: 40rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}
	}
</style>