Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
66cc1f8e by simon
Options

默认提交

1 parent c30007cb
Inline Side-by-side
Showing 12 changed files with 392 additions and 320 deletions
...@@ -344,7 +344,12 @@ textarea { ...@@ -344,7 +344,12 @@ textarea {
344 344
345 // // 视频 345 // // 视频
346 .video-js { 346 .video-js {
347 background-color: transparent !important; 347 background-color: transparent !important;
348 border-radius: $borderRadiusSmall;
349 }
350
351 .video-js .vjs-tech,.video-js .vjs-poster{
352 border-radius: $borderRadiusSmall;
348 } 353 }
349 354
350 .video-js .vjs-big-play-button { 355 .video-js .vjs-big-play-button {
......
...@@ -8,7 +8,8 @@ import { ...@@ -8,7 +8,8 @@ import {
8 export default { 8 export default {
9 data() { 9 data() {
10 return { 10 return {
11 key: 'value' 11 key: 'value',
12 qrcodeVisible: false,
12 } 13 }
13 }, 14 },
14 components: {}, 15 components: {},
......
...@@ -60,15 +60,36 @@ ...@@ -60,15 +60,36 @@
60 .n-item { 60 .n-item {
61 cursor: pointer; 61 cursor: pointer;
62 min-width: 14.75rem; 62 min-width: 14.75rem;
63
63 } 64 }
64 } 65 }
65 66
67 .nav2 {
68 display: none;
69 }
70
66 // 公众号 71 // 公众号
67 .public { 72 .public {
73 position: relative;
68 text-align: left; 74 text-align: left;
69 margin-left: 5.32rem; 75 margin-left: 5.32rem;
70 76
71 .qrcode { 77 .qrcode-wrap {
78 text-align: center;
79 // position: absolute;
80 // top: 2rem;
81 margin-top: 0.3rem;
82 width: 8.416667rem;
83 height: 8.833333rem;
84
85 .qrcode {}
86
87 .c1 {
88 margin-top: 0.3rem;
89 }
90 }
91
92 .icon {
72 margin-top: .75rem; 93 margin-top: .75rem;
73 margin-right: 1rem; 94 margin-right: 1rem;
74 display: inline-block; 95 display: inline-block;
...@@ -124,13 +145,19 @@ ...@@ -124,13 +145,19 @@
124 145
125 .n-item { 146 .n-item {
126 min-width: 0; 147 min-width: 0;
148 margin-right: 0;
127 } 149 }
128 } 150 }
129 151
152 .nav2 {
153 display: none;
154 }
155
130 .public { 156 .public {
131 margin: 0; 157 margin: 0;
132 margin-top: 2rem; 158 margin-top: 3rem;
133 text-align: left; 159 text-align: left;
160 min-height: 12rem;
134 } 161 }
135 } 162 }
136 163
...@@ -146,6 +173,7 @@ ...@@ -146,6 +173,7 @@
146 @media (max-width: 768px) { 173 @media (max-width: 768px) {
147 .v-footer { 174 .v-footer {
148 font-size: $fontSizeSmall-M; 175 font-size: $fontSizeSmall-M;
176
149 .footer-containter { 177 .footer-containter {
150 .cont { 178 .cont {
151 .info { 179 .info {
...@@ -176,6 +204,17 @@ ...@@ -176,6 +204,17 @@
176 204
177 .public { 205 .public {
178 margin: 0; 206 margin: 0;
207 min-width: 9rem;
208
209 .qrcode-wrap {
210 img {
211 width: 7rem;
212 }
213
214 .c1 {
215 display: none;
216 }
217 }
179 } 218 }
180 219
181 // 公共组件 220 // 公共组件
......
...@@ -49,10 +49,16 @@ ...@@ -49,10 +49,16 @@
49 49
50 <div class="public"> 50 <div class="public">
51 <div class="tit">{{$t('footer.qrcode')}}</div> 51 <div class="tit">{{$t('footer.qrcode')}}</div>
52 <!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> --> 52 <div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
53 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-1.png" alt=""> 53 <img src="@/assets/images/home/qrcode.png" alt="">
54 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-2.png" alt=""> 54 <div class="c1">官方公眾號</div>
55 <img class="qrcode pointer" src="@/assets/images/home/footer-icon-3.png" alt=""> 55 </div>
56 <template v-else>
57 <img @click="qrcodeVisible = !qrcodeVisible" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
58 <img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
59 <img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
60 </template>
61
56 </div> 62 </div>
57 63
58 </div> 64 </div>
......
...@@ -85,6 +85,12 @@ ...@@ -85,6 +85,12 @@
85 justify-content: space-between; 85 justify-content: space-between;
86 align-items: center; 86 align-items: center;
87 87
88 .td {
89 display: flex;
90 justify-content: center;
91 align-items: center;
92 }
93
88 .cell1 { 94 .cell1 {
89 width: 98%; 95 width: 98%;
90 display: flex; 96 display: flex;
...@@ -92,25 +98,12 @@ ...@@ -92,25 +98,12 @@
92 margin: auto; 98 margin: auto;
93 } 99 }
94 100
95
96
97 .separator-v { 101 .separator-v {
98 height: 2.5rem; 102 height: 2.5rem;
99 width: .166667rem; 103 width: .166667rem;
100 background-color: #f2f2f2; 104 background-color: #f2f2f2;
101 margin: 0 .916667rem; 105 margin: 0 .916667rem;
102 } 106 }
103
104 .td {
105 &:first-child {
106 text-align: left;
107 }
108
109 &:last-child {
110 text-align: right;
111 }
112 }
113
114 } 107 }
115 108
116 .label span { 109 .label span {
...@@ -141,3 +134,29 @@ ...@@ -141,3 +134,29 @@
141 } 134 }
142 135
143 } 136 }
137
138
139
140 .cell-between {
141 .data-line {
142 .td {
143 &:first-child {
144 justify-content: flex-start;
145 }
146
147 &:last-child {
148 justify-content: flex-end;
149 }
150 }
151 }
152
153 }
154
155 .icon-download {
156 margin: 0 1rem;
157 }
158
159 .icon-check {
160 height: 1.4rem;
161 margin: 0 1rem;
162 }
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="cell-group"> 3 <div class="cell-group">
4 <div class="table-header orange"> 4 <div class="table-header orange">
5 <div class="normal-header"> 5 <div class="normal-header">
6 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div> 6 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
7 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div> 7 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
8 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div> 8 <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> 9 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
10 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 10 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
11 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div> 11 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <div class="table-content"> 14 <div class="table-content">
15 <div class="data-line"> 15 <div class="data-line">
16 <div class="td w1">P3**********0772</div> 16 <!-- 勾选checkbox样式 -->
17 <div class="td w2">平安</div> 17 <!-- <div class="td w1">
18 <div class="td w2">{{dataForm.v1}}</div> 18 <img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
19 <div class="td w2">HK$10,000</div> 19 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772
20 <div class="td w2">2020-1-1</div> 20 </div> -->
21 <div class="td w2">{{dataForm.v2}}</div> 21 <!-- 下载样式 -->
22 </div> 22 <div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div>
23 </div> 23 <div class="td w2">平安</div>
24 </div> 24 <div class="td w2">{{dataForm.v1}}</div>
25 <div class="td w2">HK$10,000</div>
26 <div class="td w2">2020-1-1</div>
27 <div class="td w2">{{dataForm.v2}}</div>
28 </div>
29 </div>
30 </div>
25 31
26 <div class="cell-group"> 32 <div class="cell-group">
27 <div class="table-header"> 33 <div class="table-header">
28 <div class="normal-header"> 34 <div class="normal-header">
29 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div> 35 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
30 <div 36 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
31 class="guide" 37 </div>
32 :class="{rotate180 : !insuranceForm.f1}" 38 </div>
33 @click="insuranceForm.f1 = !insuranceForm.f1" 39 <div class="table-content" :class="{hide : !insuranceForm.f1}">
34 ></div> 40 <div class="data-line">
35 </div> 41 <div class="cell1">
36 </div> 42 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
37 <div class="table-content" :class="{hide : !insuranceForm.f1}"> 43 <div class="label">{{dataForm.v1}}</div>
38 <div class="data-line"> 44 </div>
39 <div class="cell1"> 45 <div class="separator-v"></div>
40 <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div> 46 <div class="cell1">
41 <div class="label">{{dataForm.v1}}</div> 47 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
42 </div> 48 <div class="label">HK$10,000</div>
43 <div class="separator-v"></div> 49 </div>
44 <div class="cell1"> 50 </div>
45 <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> 51 <div class="separator-h"></div>
46 <div class="label">HK$10,000</div> 52 <div class="data-line">
47 </div> 53 <div class="cell1">
48 </div> 54 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
49 <div class="separator-h"></div> 55 <div class="label">2020-1-1</div>
50 <div class="data-line"> 56 </div>
51 <div class="cell1"> 57 <div class="separator-v"></div>
52 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 58 <div class="cell1">
53 <div class="label">2020-1-1</div> 59 <div class="label">{{$t('customService.insuranceQuery.period')}}</div>
54 </div> 60 <div class="label">{{dataForm.v2}}</div>
55 <div class="separator-v"></div> 61 </div>
56 <div class="cell1"> 62 </div>
57 <div class="label">{{$t('customService.insuranceQuery.period')}}</div> 63 </div>
58 <div class="label">{{dataForm.v2}}</div> 64 </div>
59 </div>
60 </div>
61 </div>
62 </div>
63 65
64 <div class="cell-group"> 66 <div class="cell-group">
65 <div class="table-header"> 67 <div class="table-header">
66 <div class="normal-header"> 68 <div class="normal-header">
67 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div> 69 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
68 <div 70 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
69 class="guide" 71 </div>
70 :class="{rotate180 : !insuranceForm.f2}" 72 </div>
71 @click="insuranceForm.f2 = !insuranceForm.f2" 73 <div class="table-content" :class="{hide : !insuranceForm.f2}">
72 ></div> 74 <div class="data-line">
73 </div> 75 <div class="cell1">
74 </div> 76 <div class="label">
75 <div class="table-content" :class="{hide : !insuranceForm.f2}"> 77 {{$t('customService.insuranceQuery.t3InsurantNameCn')}}
76 <div class="data-line"> 78 <span>修改</span>
77 <div class="cell1"> 79 </div>
78 <div class="label"> 80 <div class="label">平安</div>
79 {{$t('customService.insuranceQuery.t3InsurantNameCn')}} 81 </div>
80 <span>修改</span> 82 <div class="separator-v"></div>
81 </div> 83 <div class="cell1">
82 <div class="label">平安</div> 84 <div class="label">
83 </div> 85 {{$t('customService.insuranceQuery.t3InsurantNameEn')}}
84 <div class="separator-v"></div> 86 <span>修改</span>
85 <div class="cell1"> 87 </div>
86 <div class="label"> 88 <div class="label">Pingan</div>
87 {{$t('customService.insuranceQuery.t3InsurantNameEn')}} 89 </div>
88 <span>修改</span> 90 </div>
89 </div> 91 <div class="separator-h"></div>
90 <div class="label">Pingan</div> 92 <div class="data-line">
91 </div> 93 <div class="cell1">
92 </div> 94 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
93 <div class="separator-h"></div> 95 <div class="label">2020-1-1</div>
94 <div class="data-line"> 96 </div>
95 <div class="cell1"> 97 <div class="separator-v"></div>
96 <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 98 <div class="cell1">
97 <div class="label">2020-1-1</div> 99 <div class="label">
98 </div> 100 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
99 <div class="separator-v"></div> 101 <span>修改</span>
100 <div class="cell1"> 102 </div>
101 <div class="label"> 103 <div class="label">123*****567</div>
102 {{$t('customService.insuranceQuery.t3InsurantIdNumber')}} 104 </div>
103 <span>修改</span> 105 </div>
104 </div> 106 <div class="separator-h"></div>
105 <div class="label">123*****567</div> 107 <div class="data-line">
106 </div> 108 <div class="cell1">
107 </div> 109 <div class="label">
108 <div class="separator-h"></div> 110 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
109 <div class="data-line"> 111 <span>修改</span>
110 <div class="cell1"> 112 </div>
111 <div class="label"> 113 <div class="label">{{dataForm.v3}}</div>
112 {{$t('customService.insuranceQuery.t3InsurantContactAddress')}} 114 </div>
113 <span>修改</span> 115 <div class="separator-v"></div>
114 </div> 116 <div class="cell1">
115 <div class="label">{{dataForm.v3}}</div> 117 <div class="label">
116 </div> 118 {{$t('customService.insuranceQuery.t3InsurantAddress')}}
117 <div class="separator-v"></div> 119 <span>修改</span>
118 <div class="cell1"> 120 </div>
119 <div class="label"> 121 <div class="label">{{dataForm.v3}}</div>
120 {{$t('customService.insuranceQuery.t3InsurantAddress')}} 122 </div>
121 <span>修改</span> 123 </div>
122 </div>
123 <div class="label">{{dataForm.v3}}</div>
124 </div>
125 </div>
126 124
127 <div class="separator-h"></div> 125 <div class="separator-h"></div>
128 <div class="data-line"> 126 <div class="data-line">
129 <div class="cell1"> 127 <div class="cell1">
130 <div class="label"> 128 <div class="label">
131 {{$t('customService.insuranceQuery.t3InsurantMobile')}} 129 {{$t('customService.insuranceQuery.t3InsurantMobile')}}
132 <span>修改</span> 130 <span>修改</span>
133 </div> 131 </div>
134 <div class="label">（852）2888 8888</div> 132 <div class="label">（852）2888 8888</div>
135 </div> 133 </div>
136 <div class="separator-v"></div> 134 <div class="separator-v"></div>
137 <div class="cell1"> 135 <div class="cell1">
138 <div class="label"> 136 <div class="label">
139 {{$t('customService.insuranceQuery.t3InsurantEmail')}} 137 {{$t('customService.insuranceQuery.t3InsurantEmail')}}
140 <span>修改</span> 138 <span>修改</span>
141 </div> 139 </div>
142 <div class="label">123@ping.com.cn</div> 140 <div class="label">123@ping.com.cn</div>
143 </div> 141 </div>
144 </div> 142 </div>
145 143
146 <div class="separator-h"></div> 144 <div class="separator-h"></div>
147 <div class="data-line"> 145 <div class="data-line">
148 <div class="cell1"> 146 <div class="cell1">
149 <div class="label"> 147 <div class="label">
150 {{$t('customService.insuranceQuery.t3InsuredNameCn')}} 148 {{$t('customService.insuranceQuery.t3InsuredNameCn')}}
151 <span>修改</span> 149 <span>修改</span>
152 </div> 150 </div>
153 <div class="label">平安</div> 151 <div class="label">平安</div>
154 </div> 152 </div>
155 <div class="separator-v"></div> 153 <div class="separator-v"></div>
156 <div class="cell1"> 154 <div class="cell1">
157 <div class="label"> 155 <div class="label">
158 {{$t('customService.insuranceQuery.t3InsuredNameEn')}} 156 {{$t('customService.insuranceQuery.t3InsuredNameEn')}}
159 <span>修改</span> 157 <span>修改</span>
160 </div> 158 </div>
161 <div class="label">Pingan</div> 159 <div class="label">Pingan</div>
162 </div> 160 </div>
163 </div> 161 </div>
164 162
165 <div class="separator-h"></div> 163 <div class="separator-h"></div>
166 <div class="data-line"> 164 <div class="data-line">
167 <div class="cell1"> 165 <div class="cell1">
168 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div> 166 <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
169 <div class="label">1999-1-1</div> 167 <div class="label">1999-1-1</div>
170 </div> 168 </div>
171 <div class="separator-v"></div> 169 <div class="separator-v"></div>
172 <div class="cell1"> 170 <div class="cell1">
173 <div class="label"> 171 <div class="label">
174 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}} 172 {{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
175 <span>修改</span> 173 <span>修改</span>
176 </div> 174 </div>
177 <div class="label">123*****567</div> 175 <div class="label">123*****567</div>
178 </div> 176 </div>
179 </div> 177 </div>
180 </div> 178 </div>
181 </div> 179 </div>
182 180
183 <div class="cell-group"> 181 <div class="cell-group cell-between">
184 <div class="table-header"> 182 <div class="table-header">
185 <div class="normal-header"> 183 <div class="normal-header">
186 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div> 184 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
187 <div 185 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
188 class="guide" 186 </div>
189 :class="{rotate180 : !insuranceForm.f3}" 187 </div>
190 @click="insuranceForm.f3 = !insuranceForm.f3" 188 <div class="table-content" :class="{hide : !insuranceForm.f3}">
191 ></div> 189 <div class="data-line">
192 </div> 190 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
193 </div> 191 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
194 <div class="table-content" :class="{hide : !insuranceForm.f3}"> 192 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
195 <div class="data-line"> 193 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
196 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div> 194 </div>
197 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div> 195 <div class="separator-h"></div>
198 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div> 196 <div class="data-line">
199 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div> 197 <div class="td w2">{{dataForm.v4}}</div>
200 </div> 198 <div class="td w2">Zhangsan</div>
201 <div class="separator-h"></div> 199 <div class="td w2">{{dataForm.v4_2}}</div>
202 <div class="data-line"> 200 <div class="td w2">50%</div>
203 <div class="td w2">{{dataForm.v4}}</div> 201 </div>
204 <div class="td w2">Zhangsan</div> 202 <div class="separator-h"></div>
205 <div class="td w2">{{dataForm.v4_2}}</div> 203 <div class="data-line">
206 <div class="td w2">50%</div> 204 <div class="td w2">李四</div>
207 </div> 205 <div class="td w2">Lisi</div>
208 <div class="separator-h"></div> 206 <div class="td w2">{{dataForm.v4_3}}</div>
209 <div class="data-line"> 207 <div class="td w2">50%</div>
210 <div class="td w2">李四</div> 208 </div>
211 <div class="td w2">Lisi</div> 209 </div>
212 <div class="td w2">{{dataForm.v4_3}}</div> 210 </div>
213 <div class="td w2">50%</div>
214 </div>
215 </div>
216 </div>
217 211
218 <div class="cell-group"> 212 <div class="cell-group">
219 <div class="table-header"> 213 <div class="table-header">
220 <div class="normal-header"> 214 <div class="normal-header">
221 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div> 215 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
222 <div 216 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
223 class="guide" 217 </div>
224 :class="{rotate180 : !insuranceForm.f4}" 218 </div>
225 @click="insuranceForm.f4 = !insuranceForm.f4" 219 <div class="table-content" :class="{hide : !insuranceForm.f4}">
226 ></div> 220 <div class="data-line">
227 </div> 221 <div class="cell1">
228 </div> 222 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
229 <div class="table-content" :class="{hide : !insuranceForm.f4}"> 223 <div class="label">30年</div>
230 <div class="data-line"> 224 </div>
231 <div class="cell1"> 225 <div class="separator-v"></div>
232 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div> 226 <div class="cell1">
233 <div class="label">30年</div> 227 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
234 </div> 228 <div class="label">{{dataForm.v5}}</div>
235 <div class="separator-v"></div> 229 </div>
236 <div class="cell1"> 230 </div>
237 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div> 231 <div class="separator-h"></div>
238 <div class="label">{{dataForm.v5}}</div>
239 </div>
240 </div>
241 <div class="separator-h"></div>
242 232
243 <div class="data-line"> 233 <div class="data-line">
244 <div class="cell1"> 234 <div class="cell1">
245 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div> 235 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
246 <div class="label">{{dataForm.v6}}</div> 236 <div class="label">{{dataForm.v6}}</div>
247 </div> 237 </div>
248 <div class="separator-v"></div> 238 <div class="separator-v"></div>
249 <div class="cell1"> 239 <div class="cell1">
250 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div> 240 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
251 <div class="label">HK$2,000</div> 241 <div class="label">HK$2,000</div>
252 </div> 242 </div>
253 </div> 243 </div>
254 <div class="separator-h"></div> 244 <div class="separator-h"></div>
255 245
256 <div class="data-line"> 246 <div class="data-line">
257 <div class="cell1"> 247 <div class="cell1">
258 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div> 248 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
259 <div class="label">{{dataForm.v7}}</div> 249 <div class="label">{{dataForm.v7}}</div>
260 </div> 250 </div>
261 <div class="separator-v"></div> 251 <div class="separator-v"></div>
262 <div class="cell1"> 252 <div class="cell1">
263 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div> 253 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
264 <div class="label">1234******888</div> 254 <div class="label">1234******888</div>
265 </div> 255 </div>
266 </div> 256 </div>
267 <div class="separator-h"></div> 257 <div class="separator-h"></div>
268 </div> 258 </div>
269 </div> 259 </div>
270 260
271 <div class="cell-group"> 261 <div class="cell-group cell-between">
272 <div class="table-header"> 262 <div class="table-header">
273 <div class="normal-header"> 263 <div class="normal-header">
274 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div> 264 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
275 <div 265 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
276 class="guide" 266 </div>
277 :class="{rotate180 : !insuranceForm.f5}" 267 </div>
278 @click="insuranceForm.f5 = !insuranceForm.f5" 268 <div class="table-content" :class="{hide : !insuranceForm.f5}">
279 ></div> 269 <div class="data-line">
280 </div> 270 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
281 </div> 271 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
282 <div class="table-content" :class="{hide : !insuranceForm.f5}"> 272 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
283 <div class="data-line"> 273 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
284 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div> 274 </div>
285 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div> 275 <div class="separator-h"></div>
286 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div> 276 <div class="data-line">
287 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div> 277 <div class="td w2">第二期</div>
288 </div> 278 <div class="td w2">{{dataForm.v8}}</div>
289 <div class="separator-h"></div> 279 <div class="td w2">2021-1-1</div>
290 <div class="data-line"> 280 <div class="td w2">HK$2,000</div>
291 <div class="td w2">第二期</div> 281 </div>
292 <div class="td w2">{{dataForm.v8}}</div> 282 <div class="separator-h"></div>
293 <div class="td w2">2021-1-1</div> 283 <div class="data-line">
294 <div class="td w2">HK$2,000</div> 284 <div class="td w2">首期</div>
295 </div> 285 <div class="td w2">{{dataForm.v8}}</div>
296 <div class="separator-h"></div> 286 <div class="td w2">2020-1-1</div>
297 <div class="data-line"> 287 <div class="td w2">HK$2,000</div>
298 <div class="td w2">首期</div> 288 </div>
299 <div class="td w2">{{dataForm.v8}}</div> 289 </div>
300 <div class="td w2">2020-1-1</div> 290 </div>
301 <div class="td w2">HK$2,000</div> 291 </div>
302 </div>
303 </div>
304 </div>
305 </div>
306 </template> 292 </template>
307 293
308 294
......
...@@ -48,8 +48,14 @@ ...@@ -48,8 +48,14 @@
48 48
49 &-item { 49 &-item {
50 @extend .bb; 50 @extend .bb;
51
51 margin-right: $marginSmall; 52 margin-right: $marginSmall;
52 53
54 &:last-child {
55 margin-right: 0;
56 }
57
58
53 position: relative; 59 position: relative;
54 width: 24.25rem; 60 width: 24.25rem;
55 // width: 100%; 61 // width: 100%;
...@@ -84,9 +90,6 @@ ...@@ -84,9 +90,6 @@
84 background-size: cover; 90 background-size: cover;
85 } 91 }
86 92
87 &:last-child {
88 margin-right: 0;
89 }
90 93
91 .btn { 94 .btn {
92 position: absolute; 95 position: absolute;
...@@ -169,6 +172,17 @@ ...@@ -169,6 +172,17 @@
169 @include content-percent(); 172 @include content-percent();
170 } 173 }
171 174
175 // 推荐产品
176 .recommend {
177 justify-content: center;
178
179 &-item {
180 width: 46% !important;
181 padding: 0 !important;
182 margin: 2% !important;
183 }
184 }
185
172 // 详情 186 // 详情
173 .detail { 187 .detail {
174 display: block; 188 display: block;
...@@ -191,8 +205,10 @@ ...@@ -191,8 +205,10 @@
191 // 推荐产品 205 // 推荐产品
192 .recommend { 206 .recommend {
193 &-item { 207 &-item {
194 width: 100%; 208 width: 100% !important;
195 margin: 0 auto $marginMedium-M; 209 ;
210 margin: $marginSmall-M auto !important;
211 ;
196 } 212 }
197 } 213 }
198 214
......