我的首页-部分修改

src/pages/index/mine.vue

 <template>
-	<view>
-		<u-navbar v-if="!takeStatus" :is-back="false" :title-size="26" title-color="#000" title="我的"></u-navbar>
-		<view v-if="!takeStatus">
-			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
+	<view class="mine-view">
+		<image class="header-image" mode="widthFix" :src="imageUrl + 'wodebeijing.png'"></image>
+		<u-navbar :is-back="false" :background="{ background: 'transparent' }" :border-bottom="false">
+			<text class="title-view">我的</text>
+		</u-navbar>
+		<view v-if="!takeStatus" class="mine-content">
+			<view class="u-flex header-view">
 				<view class="u-m-r-10">
 					<u-avatar :src="pic" size="140"></u-avatar>
 				</view>
@@ -12,17 +15,16 @@
 				</view>
 			</view>
 
-			<view class="u-m-t-20">
+			<view class="list-view">
 				<u-cell-group>
-					<u-cell-item v-for="(item, index) in items" :title="item.title" :value="item.value" :key="index">
-						<u-icon slot="icon" size="32" name="search"></u-icon>
+					<view v-for="(item, index) in items" :key="index">
+						<u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(index)">
+							<image slot="icon" :src="imageUrl + item.icon" :style="item.imageStyle"></image>
+							<view slot="title" class="item-title">{{item.title}}</view>
+							<view slot="value" class="item-value">{{value}}</view>
 						</u-cell-item>
-				</u-cell-group>
+						<view v-if="index == 3" class="line-view"></view>
 					</view>
-			
-			<view class="u-m-t-20">
-				<u-cell-group>
-					<u-cell-item icon="setting" title="设置"></u-cell-item>
 				</u-cell-group>
 			</view>
 			<view class="u-m-t-20" @click="take">
@@ -43,8 +45,9 @@
 		},
 		data() {
 			return {
-				pic:'https://uviewui.com/common/logo.png',
-				show:true,
+				serviceTel: '0755-81773817',
+				pic: 'https://uviewui.com/common/logo.png',
+				show: true,
 				takeStatus: false,
 				testData: {
 					_id: '1', // 规格ID
@@ -62,14 +65,55 @@
 		},
 		computed: {
 			items() {
-				return [
-				{title: '我的钱包', value: '', icon: ''},
-				 {title: '我的质保金', value: '', icon: ''},
-				 {title: '我的合同', value: '', icon: ''},
-				 {title: '我的证件', value: '', icon: ''},
-				 {title: '我的收货地址', value: '', icon: ''},
-				 {title: '我的仓库', value: '', icon: ''},
-				 {title: '联系客服', value: '6666666', icon: ''}]
+				return [{
+						title: '我的钱包',
+						value: '',
+						icon: 'qianbao.png',
+						imageStyle: 'width:34rpx;height:32rpx'
+					},
+					{
+						title: '配件押金',
+						value: '',
+						icon: 'yajin.png',
+						imageStyle: 'width:32rpx;height:32rpx'
+					},
+					{
+						title: '我的合同',
+						value: '',
+						icon: 'hetong.png',
+						imageStyle: 'width:34rpx;height:32rpx'
+					},
+					{
+						title: '我的证件',
+						value: '',
+						icon: 'zhengjian.png',
+						imageStyle: 'width:36rpx;height:28rpx'
+					},
+					{
+						title: '收货地址',
+						value: '',
+						icon: 'wddizhi.png',
+						imageStyle: 'width:32rpx;height:32rpx'
+					},
+					{
+						title: '我的仓库',
+						value: '',
+						icon: 'cangku.png',
+						imageStyle: 'width:36rpx;height:32rpx'
+					},
+					{
+						title: '联系客服',
+						value: this.serviceTel,
+						icon: 'lxkefu.png',
+						imageStyle: 'width:32rpx;height:32rpx'
+					}
+				]
+			},
+			imageUrl(name) {
+				return process.uniEnv.qn_base_url
+			},
+			pages() {
+				return []
 			}
 		},
 		onLoad() {
@@ -83,12 +127,56 @@
 			closeTake(img) {
 				console.log(img)
 				this.takeStatus = false
+			},
+			handleClick(index) {
+				uni.navigateTo({
+					url: 'pages/mine/' + this.pages[index]
+				})
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.mine-view {
+		position: relative;
+		.header-image {
+			position: absolute;
+			width: 100%;
+		}
+		.title-view {
+			color: #FFFFFF;
+			font-weight: bold;
+			font-size: 40rpx;
+		}
+		.mine-content {
+			background-color: #F4F5F7;
+			.header-view {}
 			
-</style>
+			.list-view {
+				background-color: #FFFFFF;
+				border-radius: 16rpx 16rpx 0 0;
+			
+				.item-title {
+					font-size: 32rpx;
+					color: #333333;
+					margin-left: 16rpx;
+					line-height: 32rpx;
+				}
+			
+				.item-value {
+					font-size: 26rpx;
+					color: #999999;
+				}
 			
+				.line-view {
+					height: 2rpx;
+					background-color: #F4F5F7;
+					margin-top: 30rpx;
+					margin-bottom: 30rpx;
+				}
+			}
+		}
+		
+	}
+</style>