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
| <template>
| <div class="privacy-policy">
| <headers :mess="loginWay" />
| <div class="text">
| <div class="article" v-for="(article, index) in articles" :key="index">
| <div class="article-content" v-html="formatContent(article)"></div>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import headers from "../login/components/header.vue";
| export default {
| data() {
| return {
| loginWay: this.$t('《用戶服務協議》'),
| articles: [
| '协议第一条',
| '协议第二条',
| '协议第三条',
| '协议第四条',
| '协议第五条',
| '协议第六条',
| '协议第七条',
| '协议第八条'
| ]
| }
| },
| components: {
| headers
| },
| methods: {
| formatContent(key) {
| const content = this.$t(key)
| if (!content) return ''
| // 将换行符转换为HTML换行，并处理段落
| return content
| .split('\n')
| .map((line) => {
| // 如果是空行，返回空段落
| if (!line.trim()) {
| return '<p class="paragraph-spacing"></p>'
| }
| // 如果是标题行（包含"第X条"或"第X条"），加粗显示
| if (line.match(/^第[一二三四五六七八九十]+条/)) {
| return `<p class="article-title">${line}</p>`
| }
| // 如果是小标题（不包含句号，且较短），加粗显示
| if (line.length < 30 && !line.includes('。') && !line.includes('.')) {
| return `<p class="sub-title">${line}</p>`
| }
| // 普通段落
| return `<p class="article-paragraph">${line}</p>`
| })
| .join('')
| }
| }
| };
| </script>
|
| <style scoped>
| .privacy-policy {
| max-width: 960px;
| margin: 0 auto;
| padding: 20px;
| background-color: #fff;
| min-height: 100vh;
| }
|
| .text {
| font-size: 0.4rem;
| line-height: 1.6;
| color: #333;
| padding: 0.4rem 0;
| }
|
| .article {
| margin-bottom: 0.6rem;
| }
|
| .article-content {
| width: 100%;
| }
|
| .article-title {
| font-size: 0.48rem;
| font-weight: 600;
| color: #14181f;
| margin-bottom: 0.3rem;
| margin-top: 0.4rem;
| }
|
| .sub-title {
| font-size: 0.42rem;
| font-weight: 600;
| color: #333;
| margin-bottom: 0.2rem;
| margin-top: 0.3rem;
| }
|
| .article-paragraph {
| font-size: 0.38rem;
| color: #666;
| margin-bottom: 0.25rem;
| text-align: justify;
| line-height: 1.8;
| }
|
| .paragraph-spacing {
| height: 0.3rem;
| margin: 0;
| }
|
| .texta {
| font-size: 26px;
| line-height: 28px;
| margin-bottom: 20px;
| font-weight: 600;
| }
| </style>
|
|
