设置

pages.json

@@ -46,6 +46,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/setting/setting",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {

pages/home/home.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<!-- 用户信息 -->
-		<view class="user-info">
+		<view class="user-info" @click="toSetting">
 			<view class="head-img">
 				<u-avatar src="/static/logo.png" size="104"></u-avatar>
 			</view>
@@ -132,7 +132,7 @@
 				<view class="info-list">
 					<view v-for="(item,inedx) in infoList" :key="index" class="info-item">
 						<view class="info-icon">
-							<u-image src="/static/home/chat.png" height="40" width="40" shape="circle"></u-image>
+							<u-image src="/static/home/chat.png" height="40" width="40"></u-image>
 						</view>
 						<view class="info-content">
 							<view class="info-title">
@@ -190,6 +190,13 @@
 		methods: {
 			swiperChange(e) {
 				this.swiperIndex = e.detail.current
+			},
+			toSetting() {
+				this.$u.throttle(() => {
+					uni.navigateTo({
+						url: "/pages/setting/setting"
+					})
+				})
 			}
 		},
 		computed: {

pages/setting/setting.vue

@@ -0,0 +1,188 @@
+<template>
+	<view>
+		<cpn-navbar title="设置" :isBack="true"></cpn-navbar>
+
+		<view>
+			<!-- 个人信息 -->
+			<view class="user-info">
+				<view class="user-info-title">个人信息</view>
+
+				<view class="user-info-content">
+					<view class="head-img">
+						<view class="text">头像</view>
+						<view style="display: flex;">
+							<view class="avatar">
+								<u-image src="/static/logo.png" height="104" width="104" shape="circle"></u-image>
+							</view>
+							<view class="arrow">
+								<u-icon name="arrow-right" size="24"></u-icon>
+							</view>
+						</view>
+					</view>
+
+					<view class="line"></view>
+
+					<view class="name">
+						<view class="name-text">账户名</view>
+						<view class="name-user">王老师</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 版本信息 -->
+			<view class="sys-info">
+				<view class="sys-info-title">版本信息</view>
+
+				<view class="sys-info-content">
+					<view>当前版本</view>
+					<view>V2.0</view>
+				</view>
+			</view>
+
+			<view class="logout">
+				<u-button :hair-line="false" :custom-style="btnStyle">退出登录</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				btnStyle: {
+					width: "670rpx",
+					height: "76rpx",
+					color: "#1479FF",
+					border: "2rpx solid #1479FF"
+				}
+			}
+		},
+		methods: {
+
+		},
+		computed: {
+
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.user-info {
+
+		margin-top: 28rpx;
+
+		&-title {
+			height: 40rpx;
+			font-size: 28rpx;
+			font-family: PingFang-SC-Medium, PingFang-SC;
+			font-weight: 500;
+			color: #ABAEBE;
+			line-height: 40rpx;
+
+			padding-left: 40rpx;
+		}
+
+		&-content {
+			width: 750rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
+
+			margin: 26rpx auto 0 auto;
+
+			.head-img {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				&>view>view {
+					align-self: center;
+				}
+
+				.text {
+					font-size: 32rpx;
+					font-family: PingFang-SC-Medium, PingFang-SC;
+					font-weight: 500;
+					color: #333333;
+
+					padding-left: 40rpx;
+				}
+
+				.avatar {
+
+					padding: 18rpx 0rpx;
+				}
+
+				.arrow {
+
+					padding: 0 50rpx 0 40rpx;
+				}
+			}
+
+			.line {
+				width: 670rpx;
+				height: 2rpx;
+				border: 2rpx solid #EEEFF5;
+
+				margin: 0 auto;
+			}
+
+			.name {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				padding: 20rpx 40rpx;
+
+				&-text {
+					font-size: 32rpx;
+					font-family: PingFang-SC-Medium, PingFang-SC;
+					font-weight: 500;
+					color: #333333;
+				}
+
+				&-user {
+					font-size: 32rpx;
+					font-family: PingFang-SC-Medium, PingFang-SC;
+					font-weight: 500;
+					color: #333333;
+				}
+			}
+		}
+	}
+
+	.sys-info {
+
+		margin-top: 34rpx;
+
+		&-title {
+			font-size: 28rpx;
+			font-family: PingFang-SC-Medium, PingFang-SC;
+			font-weight: 500;
+			color: #ABAEBE;
+
+			padding: 0 0 26rpx 36rpx;
+		}
+
+		&-content {
+			background: #FFFFFF;
+			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			padding: 22rpx 40rpx;
+
+			&>view {
+				font-size: 32rpx;
+				font-family: PingFang-SC-Medium, PingFang-SC;
+				font-weight: 500;
+				color: #333333;
+			}
+		}
+	}
+
+	.logout {
+		margin-top: 40rpx;
+	}
+</style>