默认提交
Showing
12 changed files
with
125 additions
and
53 deletions
... | @@ -345,6 +345,11 @@ textarea { | ... | @@ -345,6 +345,11 @@ textarea { |
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 { | ... | ... |

10.4 KB
src/assets/images/home/qrcode.png
0 → 100644

22.4 KB
src/assets/images/insurance-query/check.png
0 → 100644

459 Bytes

363 Bytes

255 Bytes
... | @@ -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 | |||
64 | } | ||
63 | } | 65 | } |
66 | |||
67 | .nav2 { | ||
68 | display: none; | ||
64 | } | 69 | } |
65 | 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; | ||
149 | } | ||
127 | } | 150 | } |
151 | |||
152 | .nav2 { | ||
153 | display: none; | ||
128 | } | 154 | } |
129 | 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 | } | ... | ... |
... | @@ -13,7 +13,13 @@ | ... | @@ -13,7 +13,13 @@ |
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 w1"> | ||
18 | <img v-if="1>10" class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> | ||
19 | <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> P3**********0772 | ||
20 | </div> --> | ||
21 | <!-- 下载样式 --> | ||
22 | <div class="td w1">P3**********0772<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""></div> | ||
17 | <div class="td w2">平安</div> | 23 | <div class="td w2">平安</div> |
18 | <div class="td w2">{{dataForm.v1}}</div> | 24 | <div class="td w2">{{dataForm.v1}}</div> |
19 | <div class="td w2">HK$10,000</div> | 25 | <div class="td w2">HK$10,000</div> |
... | @@ -27,11 +33,7 @@ | ... | @@ -27,11 +33,7 @@ |
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" | ||
32 | :class="{rotate180 : !insuranceForm.f1}" | ||
33 | @click="insuranceForm.f1 = !insuranceForm.f1" | ||
34 | ></div> | ||
35 | </div> | 37 | </div> |
36 | </div> | 38 | </div> |
37 | <div class="table-content" :class="{hide : !insuranceForm.f1}"> | 39 | <div class="table-content" :class="{hide : !insuranceForm.f1}"> |
... | @@ -65,11 +67,7 @@ | ... | @@ -65,11 +67,7 @@ |
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" | ||
70 | :class="{rotate180 : !insuranceForm.f2}" | ||
71 | @click="insuranceForm.f2 = !insuranceForm.f2" | ||
72 | ></div> | ||
73 | </div> | 71 | </div> |
74 | </div> | 72 | </div> |
75 | <div class="table-content" :class="{hide : !insuranceForm.f2}"> | 73 | <div class="table-content" :class="{hide : !insuranceForm.f2}"> |
... | @@ -180,15 +178,11 @@ | ... | @@ -180,15 +178,11 @@ |
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" | ||
189 | :class="{rotate180 : !insuranceForm.f3}" | ||
190 | @click="insuranceForm.f3 = !insuranceForm.f3" | ||
191 | ></div> | ||
192 | </div> | 186 | </div> |
193 | </div> | 187 | </div> |
194 | <div class="table-content" :class="{hide : !insuranceForm.f3}"> | 188 | <div class="table-content" :class="{hide : !insuranceForm.f3}"> |
... | @@ -219,11 +213,7 @@ | ... | @@ -219,11 +213,7 @@ |
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" | ||
224 | :class="{rotate180 : !insuranceForm.f4}" | ||
225 | @click="insuranceForm.f4 = !insuranceForm.f4" | ||
226 | ></div> | ||
227 | </div> | 217 | </div> |
228 | </div> | 218 | </div> |
229 | <div class="table-content" :class="{hide : !insuranceForm.f4}"> | 219 | <div class="table-content" :class="{hide : !insuranceForm.f4}"> |
... | @@ -268,15 +258,11 @@ | ... | @@ -268,15 +258,11 @@ |
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" | ||
277 | :class="{rotate180 : !insuranceForm.f5}" | ||
278 | @click="insuranceForm.f5 = !insuranceForm.f5" | ||
279 | ></div> | ||
280 | </div> | 266 | </div> |
281 | </div> | 267 | </div> |
282 | <div class="table-content" :class="{hide : !insuranceForm.f5}"> | 268 | <div class="table-content" :class="{hide : !insuranceForm.f5}"> | ... | ... |
... | @@ -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 | ... | ... |
-
Please register or sign in to post a comment