更新界面

App.vue

@@ -50,7 +50,7 @@ button::after {
 /**挂载iconfont字体图标*/
 @font-face {
 	font-family: 'iconfont';
-	src: url('https://at.alicdn.com/t/c/font_4191999_0q6n1g5foot.ttf?t=1690960741973') format('truetype');
+	src: url('https://at.alicdn.com/t/c/font_4191999_lhmrkxi7l3t.ttf?t=1691050336877') format('truetype');
 	/* src: url('~@/static/font/iconfont.ttf') format('truetype'); */
 }
 .icon {

common/style.scss

@@ -230,8 +230,7 @@
 /*****设置**********/
 .cmd {
 	margin-top: 10px;
-	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
-	border-radius: 5px;
+	border-radius: 8px;
 	overflow: hidden;
 	.s_item {
 		padding: 10px;
@@ -239,36 +238,16 @@
 		color: $font-c;
 		overflow: hidden;
 		border-bottom: 1px solid #f0f2f7;
-		.le {
-			float: left;
-			font-size: 17px;
-			.jf {
-				padding-left: 10px;
-				color: $main-color;
-			}
-			.qd {
-				font-size: 13px;
-				margin-top: 5px;
-				color: #989898;
-			}
-		}
-		.ri {
-			float: right;
-			padding: 5px 25px;
-			border-radius: 30px;
-		}
 		.ic {
 			display: block;
 			float: left;
-			width: 27px;
-			height: 27px;
 			font-size: 25px;
-			background-color: red;
 			text-align: center;
 			padding: 7px;
 			border-radius: 50%;
 			margin-right: 13px;
 			line-height: 29px;
+			color: $main-color;
 		}
 		.title {
 			color: #545555;
@@ -414,13 +393,9 @@
 /**用户登录end******/
 .news_item {
 	background-color: white;
-	border-bottom: 1px solid #f0f2f7;
 	padding: 12px;
 	margin-bottom: 10px;
-	border-radius:10px;
-	&:last-child {
-		border: 0px;
-	}
+	border-radius: 10px;
 	.img {
 		float: left;
 		width: 100px;
@@ -466,6 +441,39 @@
 		padding: 10px 30px;
 	}
 }
+.menu {
+	background-color: white;
+	padding-top: 3px;
+	margin-top: 10px;
+	padding-bottom: 7px;
+	border-radius: 8px;
+	.msn {
+		float: left;
+		width: 25%;
+		text-align: center;
+		.out {
+			padding: 3px;
+			.int {
+				padding: 9px;
+				animation: bounceIn 1s;
+				.ioc {
+					width: 45px;
+					height: 45px;
+					background-color: #1c9dff;
+					border-radius: 40%;
+					margin: 0 auto;
+					line-height: 46px;
+					font-size: 25px
+				}
+				.tit {
+					font-size: 13px;
+					margin-top: 5px;
+					color: $font-c;
+				}
+			}
+		}
+	}
+}
 .ppopup {
 	padding: 15px;
 	.sh {

pages.json

@@ -48,7 +48,8 @@
 		, {
 			"path": "pages/personal/personal",
 			"style": {
-				"navigationBarTitleText": "个人中心"
+				"navigationBarTitleText": "个人中心",
+				"navigationStyle": "custom"
 			}
 
 		}, {

pages/message/message.vue

@@ -1,22 +1,115 @@
 <template>
 	<view>
-		
+		<view class="list">
+			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
+				<view class="top">
+					<view class="icon">&#xe60d;</view>
+					<view class="title">交易消息</view>
+					<view class="date">2023-8-310:50</view>
+					<view class="clear"></view>
+				</view>
+				<view class="content">订单20210803172489305已支付，请尽快与对方联系!</view>
+				<view class="clear"></view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
+export default {
+	data() {
+		return {
+			list: [],
+			param: { pageNum: 1, pageSize: 10, orderByColumn: 'createTime', isAsc: 'desc' },
+			loadMore: true
+		};
+	},
+	onLoad(e) {
+		this.getData();
+	},
+	methods: {
+		getData() {
+			this.http.request({
+				url: '/level-one-server/app/TbPortNews/getPortNewsList',
+				data: this.param,
+				loading: 'false',
+				success: res => {
+					this.list.push(...res.data.data);
+				}
+			});
+		},
+		detail(item) {
+			uni.navigateTo({
+				url: '/pages/news/detail?id=' + item.id
+			});
 		},
-		methods: {
-			
+		//刷新数据
+		refresh() {
+			this.loadMore = true;
+			this.param.pageNum = 1;
+			this.list = [];
+			this.getData();
+		}
+	},
+	//下拉刷新
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.refresh();
+			uni.stopPullDownRefresh();
+		}, 1000);
+	},
+	//上拉加载
+	onReachBottom() {
+		if (this.loadMore) {
+			this.param.pageNum++;
+			this.getData();
 		}
 	}
+};
 </script>
 
-<style>
-
+<style lang="scss">
+page {
+	background-color: #f5f5f5;
+}
+.list {
+	padding: 12px;
+	.item {
+		background-color: white;
+		border-bottom: 1px solid #f0f2f7;
+		padding: 14px;
+		margin-bottom: 10px;
+		border-radius: 10px;
+		.top {
+			color: $font-c;
+			border-bottom: 1px solid $line;
+			padding-bottom: 13px;
+			.icon {
+				float: left;
+				width: 17px;
+				height: 17px;
+				border-radius: 50%;
+				background-color: $main-color;
+				padding: 5px;
+				text-align: center;
+				line-height: 19px;
+				color: white;
+			}
+			.title {
+				float: left;
+				font-weight: bold;
+				padding-left: 7px;
+				color: #192B20;
+			}
+			.date {
+				float: right;
+				color: #A0A2A6;
+			}
+		}
+		.content {
+			padding-top: 15px;
+			color: #666666;
+		}
+	}
+}
 </style>

pages/personal/personal.vue

@@ -1,27 +1,163 @@
 <template>
 	<view>
-		<u-button type="primary" text="退出登录" @click="exitLogin()"></u-button>
+		<u-notify ref="uNotify" message="Hi uView"></u-notify>
+		<!--头部-->
+		<view class="my_top">
+			<image src="../../static/images/top-bg.png" class="bg"></image>
+		</view>
+		<view class="list animated fadeInDown">
+			<!--用户信息-->
+			<view class="user">
+				<image src="../../static/icon/user.png" mode="widthFix" class="head"></image>
+				<view class="con">
+					<view class="nickName omit">用户134****6556用户134****6556用户134****6556</view>
+					<view class="tag">
+						<text class="icon"></text>
+						<text>普通边民</text>
+					</view>
+				</view>
+				<text class="icon edit">&#xe645;</text>
+				<view class="clear"></view>
+			</view>
+			<!--菜单-->
+			<view class="menu">
+				<view class="msn">
+					<view class="out">
+						<view class="int">
+							<view class="icon ioc" style="background-color: #fff6e0; color: #f1ba41">&#xe686;</view>
+							<view class="tit">我的订单</view>
+						</view>
+					</view>
+				</view>
+				<view class="msn">
+					<view class="out">
+						<view class="int">
+							<view class="icon ioc" style="background-color: #e1f6e9; color: #47cf74">&#xe686;</view>
+							<view class="tit">我的订单</view>
+						</view>
+					</view>
+				</view>
+				<view class="msn">
+					<view class="out">
+						<view class="int">
+							<view class="icon ioc" style="background-color: #eaf1fe; color: #2a95fe">&#xe686;</view>
+							<view class="tit">我的订单</view>
+						</view>
+					</view>
+				</view>
+				<view class="msn">
+					<view class="out">
+						<view class="int">
+							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe686;</view>
+							<view class="tit">我的订单</view>
+						</view>
+					</view>
+				</view>
+				<view class="clear"></view>
+			</view>
+			<view class="cmd">
+				<view class="s_item" @click="show = true">
+					<text class="icon ic">&#xe686;</text>
+					<text class="title">常见问题</text>
+					<text class="icon arrow">&#xe8f2;</text>
+				</view>
+				<view class="s_item" @click="show = true">
+					<text class="icon ic">&#xe686;</text>
+					<text class="title">联系我们</text>
+					<text class="icon arrow">&#xe8f2;</text>
+				</view>
+				<view class="s_item" @click="show = true">
+					<text class="icon ic">&#xe686;</text>
+					<text class="title">用户协议</text>
+					<text class="icon arrow">&#xe8f2;</text>
+				</view>
+				<view class="s_item" @click="show = true">
+					<text class="icon ic">&#xe686;</text>
+					<text class="title">隐私协议</text>
+					<text class="icon arrow">&#xe8f2;</text>
+				</view>
+				<view class="s_item" @click="show = true">
+					<text class="icon ic">&#xe686;</text>
+					<text class="title">设置</text>
+					<text class="icon arrow">&#xe8f2;</text>
+				</view>
+			</view>
+			<button class="btn exit" @click="exitLogin()">退出登录</button>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			exitLogin() {
-				uni.removeStorageSync("token")
-				uni.removeStorageSync("info")
-				uni.removeStorageSync("menu")
-				this.$common.to('/pages/login/login')
-			}
+export default {
+	data() {
+		return {
+			user: {}
+		};
+	},
+	methods: {
+		exitLogin() {
+			uni.removeStorageSync('token');
+			uni.removeStorageSync('info');
+			uni.removeStorageSync('menu');
+			this.$common.to('/pages/login/login');
 		}
 	}
+};
 </script>
 
-<style>
-
+<style lang="scss">
+page {
+	background-color: #f5f5f5;
+}
+.my_top {
+	position: relative;
+	overflow: hidden;
+	image {
+		width: 100%;
+	}
+}
+.list {
+	position: relative;
+	padding: 0px 20px 10px 20px;
+	margin-top: -196px;
+	.user {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+		color: $font-c;
+		.head {
+			float: left;
+			width: 55px;
+			height: 55px;
+		}
+		.con {
+			float: left;
+			padding-left: 15px;
+			width: 60%;
+			.nickName {
+				font-size: 17px;
+				font-weight: bold;
+			}
+			.tag {
+				background-color: #6799ad;
+				color: white;
+				float: left;
+				font-size: 13px;
+				padding: 2px 6px;
+				border-radius: 5px;
+				margin-top: 6px;
+			}
+		}
+		.edit {
+			float: right;
+			font-size: 20px;
+			margin-top: 17px;
+		}
+	}
+}
+.exit {
+	margin-top: 20px;
+	background-color: white;
+	color: $main-color;
+}
 </style>

uview-ui/components/u-empty/u-empty.vue

@@ -6,7 +6,7 @@
 				width: $u.addUnit(width),
 				height: $u.addUnit(height)
 			}"
-			src="../../../../static/empty.png"
+			src="../../../static/empty.png"
 			mode="widthFix"
 		></image>
 		<text class="u-empty__text" :style="[textStyle]">{{ text ? text : icons[mode] }}</text>