sh-nav.vue
1.8 KB
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
<template>
<view class="sh-user-menu-box mb10">
<view class="menu-list-box">
<view class="menu-item x-bc" v-for="(nav, index) in detail.list" :key="index" @tap="jump(nav)">
<view class="x-f">
<image v-if="nav.image" class="item-img" :src="nav.image" mode=""></image>
<text class="item-title">{{ nav.name }}</text>
</view>
<text class="cuIcon-right item-arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
props: {
detail: {
type: Object,
default: null
}
},
computed: {},
methods: {
jump(data) {
this.$tools.routerTo(data.path);
}
}
};
</script>
<style lang="scss">
// 宫格
.tools-box {
background: #fff;
display: flex;
flex-wrap: wrap;
padding-bottom: 40rpx;
margin-bottom: 20rpx;
.tool-item {
width: (750rpx/4);
padding-top: 40rpx;
.tool-img {
width: 44rpx;
height: 44rpx;
// background: #ccc;
}
.item-title {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 24rpx;
padding-top: 30rpx;
}
}
}
// 列表
.menu-list-box {
width: 686rpx;
margin: 0 auto;
box-shadow: 0px 8px 24px 0px rgba(9,101,138,0.15);
.menu-item:first-child{
border-radius: 16rpx 16rpx 0 0;
}
.menu-item:last-child{
border-radius: 0 0 16rpx 16rpx ;
}
.menu-item {
height: 100rpx;
padding: 0 30rpx;
background: #fff;
border-bottom: 1rpx solid #f3f3f3;
.item-img {
width: 44rpx;
height: 44rpx;
margin-right: 20rpx;
// background: #ccc;
}
.item-title {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 24rpx;
}
.item-arrow {
color: rgba(153, 153, 153, 1);
}
}
}
</style>