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 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 {
......
...@@ -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
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
......