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
| <template>
| <view class="help-container">
| <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
| <view class="text-title">
| <view :class="item.icon"></view>{{ item.title }}
| </view>
| <view class="childList">
| <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
| @click="handleText(child)">
| <view class="text-item">{{ child.title }}</view>
| <view class="line" v-if="zindex !== item.childList.length - 1"></view>
| </view>
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
| list: [{
| icon: 'iconfont icon-github',
| title: '使用问题',
| childList: [{
| title: '体检结果准确吗？',
| content: '你猜'
| }, {
| title: '怎么查看别人的体检报告？',
| content: '你猜'
| }]
| },
| {
| icon: 'iconfont icon-help',
| title: '其他问题',
| childList: [{
| title: '如何退出登录？',
| content: '请点击[我的] - [应用设置] - [退出登录]即可退出登录',
| }, {
| title: '如何修改用户头像？',
| content: '请点击[我的] - [选择头像] - [点击提交]即可更换用户头像',
| }, {
| title: '如何修改登录密码？',
| content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
| }]
| }
| ]
| }
| },
| methods: {
| handleText(item) {
| this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| page {
| background-color: #f8f8f8;
| }
|
| .help-container {
| margin-bottom: 100rpx;
| padding: 30rpx;
| }
|
| .list-title {
| margin-bottom: 30rpx;
| }
|
| .childList {
| background: #ffffff;
| box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
| border-radius: 16rpx;
| margin-top: 10rpx;
| }
|
| .line {
| width: 100%;
| height: 1rpx;
| background-color: #F5F5F5;
| }
|
| .text-title {
| color: #303133;
| font-size: 32rpx;
| font-weight: bold;
| margin-left: 10rpx;
|
| .iconfont {
| font-size: 16px;
| margin-right: 10rpx;
| }
| }
|
| .text-item {
| font-size: 28rpx;
| padding: 24rpx;
| }
|
| .question {
| color: #606266;
| font-size: 28rpx;
| }
| </style>
|
|
