小程序很少很少

<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">基本信息</block>
		</cu-custom>

		<view class="footer">
			<view v-for="(item, index) in baseList" :key="item.name">
				<view :style="{'height': index === 0 ? '114rpx' : '','border-bottom': index === 4 ? 'none' : ''}"
					class="footer_top">
					<view class="arrow-left">
						<text class="footer_top_left">{{item.key}}</text>
						<text style="color: #CCCCCC;">{{item.value}}</text>
					</view>
					<u-icon v-if="index === 3 || index  === 4" name="arrow-right" color="#CCCCCC " size="40"></u-icon>
				</view>
			</view>
		</view>

		<view class="footer" style="margin-top: 24rpx;">
			<view v-for="(item, i) in baseLists" :key="item.name">
				<view :style="{'border-bottom': index === 2 ? 'none' : ''}" class="footer_top">
					<view class="arrow-left">
						<text class="footer_top_left">{{item.key}}</text>
						<text v-if="i === 1" style="color: #CCCCCC;">{{item.value | capitalize}}</text>
						<text v-else style="color: #CCCCCC;">{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
					key: '姓名',
					name: 'userName',
					value: '王某人'
				}, {
					key: '性别',
					name: 'nex',
					value: '男'
				}, {
					key: '手机号',
					name: 'phoneNumber',
					value: '13243453453'
				}, {
					key: '宠主性质',
					name: 'petCard',
					value: '个人'
				}, {
					key: '居住地址',
					name: 'address',
					value: '湖北省江汉区某街道123号'
				}],
				baseLists: [{
					key: '证件类型',
					name: 'cardType',
					value: '军官证'
				}, {
					key: '证件号',
					name: 'cardNumber',
					value: '63848448444421'
				}, {
					key: '证件有效期',
					name: 'cardTime',
					value: '2036-09-21'
				}]
			};
		},
		filters: {
			capitalize: function(value) {
				if (!value) return '';
				let a
				a = value.charAt(value.length - 1);
				let c 
				c = value.charAt(0);
				let b
				b = value.split('')
				b = b.map(item => item = '*')
				b.splice(b.length - 1, b.length - 1, a)
				b.splice(0, 0, c)
				b = b.join('')
				return b
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		margin-top: 1rpx;
		background-color: #fff;
		width: 100%;
		padding: 0 24rpx;

		.footer_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 2rpx;

			.arrow-left {
				display: flex;
				align-items: center;

				.footer_top_left {
					width: 222rpx;
					font-size: 34rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122