Merge branch 'master' of http://120.27.44.69/dev/pingan-life-index-pro
Showing
19 changed files
with
1535 additions
and
669 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div id="app"> | 2 | <div id="app"> |
| 3 | <v-header class="header"></v-header> | 3 | <v-header class="header"></v-header> |
| 4 | <main ref="container" class="main-container"> | 4 | <main ref="container" class="main-container"> |
| 5 | <router-view /> | 5 | <router-view /> |
| 6 | </main> | 6 | </main> |
| 7 | <v-footer></v-footer> | 7 | <v-footer></v-footer> |
| 8 | <vhis-modal></vhis-modal> | 8 | <vhis-modal></vhis-modal> |
| 9 | </div> | 9 | </div> |
| 10 | </template> | 10 | </template> |
| 11 | 11 | ||
| 12 | 12 | ||
| ... | @@ -436,6 +436,10 @@ textarea { | ... | @@ -436,6 +436,10 @@ textarea { |
| 436 | display: none; | 436 | display: none; |
| 437 | } | 437 | } |
| 438 | 438 | ||
| 439 | .clarms .el-input__inner { | ||
| 440 | font-size: 22px; | ||
| 441 | } | ||
| 442 | |||
| 439 | @media (max-width: 1200px) { | 443 | @media (max-width: 1200px) { |
| 440 | .page-index { | 444 | .page-index { |
| 441 | .video-js { | 445 | .video-js { | ... | ... |
| 1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
| 2 | 2 | ||
| 3 | .comp { | ||
| 4 | font-size: 22px; | ||
| 5 | } | ||
| 3 | 6 | ||
| 4 | input { | 7 | input { |
| 5 | padding: 0 2.083333rem; | 8 | padding: 0 2.083333rem; |
| ... | @@ -7,14 +10,15 @@ input { | ... | @@ -7,14 +10,15 @@ input { |
| 7 | } | 10 | } |
| 8 | 11 | ||
| 9 | .orange { | 12 | .orange { |
| 10 | color: #ff6839; | 13 | color: #ff6839; |
| 11 | } | 14 | } |
| 12 | 15 | ||
| 13 | .gray { | 16 | .gray { |
| 14 | color: #747474; | 17 | // color: #747474; |
| 18 | color: #666666; | ||
| 15 | } | 19 | } |
| 16 | 20 | ||
| 17 | .empty{ | 21 | .empty { |
| 18 | flex: 1; | 22 | flex: 1; |
| 19 | height: 30rem; | 23 | height: 30rem; |
| 20 | display: flex; | 24 | display: flex; |
| ... | @@ -37,185 +41,193 @@ input { | ... | @@ -37,185 +41,193 @@ input { |
| 37 | } | 41 | } |
| 38 | } | 42 | } |
| 39 | 43 | ||
| 40 | .submit-btn{ | 44 | .submit-btn { |
| 41 | background: url("~@assets/images/vhis/vhis-btn.png"); | 45 | background: url("~@assets/images/vhis/vhis-btn.png"); |
| 42 | background-size: 100% 100%; | 46 | background-size: 100% 100%; |
| 43 | background-repeat: no-repeat; | 47 | background-repeat: no-repeat; |
| 44 | width: 15rem; | 48 | width: 300px; |
| 45 | height: 2.5rem; | 49 | height: 50px; |
| 46 | line-height: 2.5rem; | 50 | line-height: 50px; |
| 47 | color: white; | 51 | color: white; |
| 48 | font-weight: 600; | 52 | font-weight: 600; |
| 49 | cursor: pointer; | 53 | cursor: pointer; |
| 50 | margin: 2.5rem auto; | 54 | margin: 2.5rem auto; |
| 51 | text-align: center; | 55 | text-align: center; |
| 52 | border-radius: 2rem; | 56 | border-radius: 50px; |
| 53 | } | 57 | } |
| 54 | 58 | ||
| 55 | .reservation-container-2 { | 59 | .reservation-container-2 { |
| 56 | @extend .bb; | 60 | @extend .bb; |
| 57 | border-radius: .666667rem; | 61 | border-radius: .666667rem; |
| 58 | border: solid .083333rem #ff6839; | 62 | border: solid 2px $cOrange; |
| 59 | background-color: #ffffff; | 63 | background-color: #ffffff; |
| 60 | padding: 1.666667rem 10rem 2.833333rem 10rem; | 64 | // padding: 1.666667rem 10rem 2.833333rem 10rem; |
| 61 | 65 | padding: 20px 100px 72px; | |
| 62 | .clarms-border{ | 66 | |
| 63 | box-sizing:border-box; | 67 | .clarms-border { |
| 64 | padding:.166667rem; | 68 | box-sizing: border-box; |
| 65 | border-radius: .416667rem; | 69 | padding: .166667rem; |
| 66 | background-image: linear-gradient(to right , #ffb31d, #f15907) ; | 70 | border-radius: .416667rem; |
| 67 | margin: 0 1.25rem ; | 71 | background-image: linear-gradient(to right, #ffb31d, #f15907); |
| 68 | min-width: 25rem ; | 72 | margin: 0 1.25rem; |
| 69 | 73 | min-width: 25rem; | |
| 70 | .clarms-select { | 74 | |
| 71 | width: 100%; | 75 | .clarms-select { |
| 72 | } | 76 | width: 100%; |
| 73 | } | 77 | } |
| 78 | } | ||
| 74 | 79 | ||
| 75 | .title { | 80 | .title { |
| 76 | font-size: 1.333333rem; | 81 | color: #ff6839; |
| 77 | color: #ff6839; | 82 | text-align: center; |
| 78 | text-align: center; | 83 | // margin: 1.666667rem auto 0 auto; |
| 79 | margin: 1.666667rem auto 0 auto; | 84 | display: flex; |
| 80 | display: flex; | 85 | align-items: center; |
| 81 | align-items: center; | 86 | justify-content: center; |
| 82 | justify-content: center; | 87 | font-weight: 600; |
| 83 | font-weight: 600; | 88 | letter-spacing: .25rem; |
| 84 | letter-spacing: .25rem ; | 89 | font-size: 1.5rem; |
| 85 | font-size: 1.5rem; | ||
| 86 | } | ||
| 87 | |||
| 88 | .default-mt { | ||
| 89 | margin-top: 2.666667rem; | ||
| 90 | } | ||
| 91 | |||
| 92 | .submit-btn{ | ||
| 93 | margin: 2.5rem auto 1rem; | ||
| 94 | } | ||
| 95 | |||
| 96 | .flex-top { | ||
| 97 | display: flex; | ||
| 98 | justify-content: left; | ||
| 99 | align-items: flex-start; | ||
| 100 | } | ||
| 101 | |||
| 102 | .flex-start { | ||
| 103 | display: flex; | ||
| 104 | justify-content: left; | ||
| 105 | align-items: flex-start; | ||
| 106 | flex-wrap: wrap; | ||
| 107 | } | ||
| 108 | |||
| 109 | .check-disabled { | ||
| 110 | cursor: default; | ||
| 111 | 90 | ||
| 112 | span { | 91 | .t1 { |
| 113 | color: $cDisabled; | 92 | font-size: 24px; |
| 114 | } | 93 | font-weight: bold; |
| 115 | } | 94 | } |
| 95 | } | ||
| 116 | 96 | ||
| 117 | .check-item { | 97 | .default-mt { |
| 118 | display: flex; | 98 | margin-top: 48px; |
| 119 | align-items: center; | 99 | } |
| 120 | margin-right: 2rem; | ||
| 121 | margin-bottom: .833333rem; | ||
| 122 | 100 | ||
| 123 | span { | 101 | .submit-btn { |
| 124 | margin-left: .833333rem; | 102 | margin: 48px auto 24px; |
| 125 | } | 103 | } |
| 126 | 104 | ||
| 127 | img { | 105 | .flex-top { |
| 128 | width: 1.666667rem ; | 106 | display: flex; |
| 129 | } | 107 | justify-content: left; |
| 130 | } | 108 | align-items: flex-start; |
| 109 | } | ||
| 131 | 110 | ||
| 132 | .item-group { | 111 | .flex-start { |
| 133 | display: flex; | 112 | display: flex; |
| 134 | justify-content: flex-start; | 113 | justify-content: left; |
| 135 | align-items: flex-start; | 114 | align-items: flex-start; |
| 136 | flex-wrap: wrap; | 115 | flex-wrap: wrap; |
| 137 | } | 116 | } |
| 138 | 117 | ||
| 139 | .ml10 { | 118 | .check-disabled { |
| 140 | margin-left: .833333rem; | 119 | cursor: default; |
| 141 | } | ||
| 142 | 120 | ||
| 143 | .mr10 { | 121 | span { |
| 144 | margin-right: .833333rem; | 122 | color: $cDisabled; |
| 145 | } | 123 | } |
| 124 | } | ||
| 146 | 125 | ||
| 147 | .mt20 { | 126 | .check-item { |
| 148 | margin-top: 1.666667rem; | 127 | display: flex; |
| 128 | align-items: center; | ||
| 129 | margin-right: 60px; | ||
| 130 | margin-bottom: .833333rem; | ||
| 131 | |||
| 132 | span { | ||
| 133 | margin-left: 20px; | ||
| 149 | } | 134 | } |
| 150 | 135 | ||
| 151 | .mt10 { | 136 | img { |
| 152 | margin-top: .833333rem; | 137 | width: 1.666667rem; |
| 153 | } | 138 | } |
| 139 | } | ||
| 154 | 140 | ||
| 155 | .bottom-tip { | 141 | .item-group { |
| 156 | font-size: .833333rem ; | 142 | display: flex; |
| 157 | display: flex; | 143 | justify-content: flex-start; |
| 158 | align-items: center; | 144 | align-items: flex-start; |
| 159 | span { | 145 | flex-wrap: wrap; |
| 160 | margin-left: 1.3rem; | 146 | } |
| 161 | } | ||
| 162 | 147 | ||
| 163 | img { | 148 | .ml10 { |
| 164 | width: 1.3rem; | 149 | margin-left: .833333rem; |
| 165 | } | 150 | } |
| 151 | |||
| 152 | .mr10 { | ||
| 153 | margin-right: .833333rem; | ||
| 154 | } | ||
| 155 | |||
| 156 | .mt20 { | ||
| 157 | margin-top: 48px; | ||
| 158 | } | ||
| 159 | |||
| 160 | .mt10 { | ||
| 161 | margin-top: 24px; | ||
| 162 | } | ||
| 163 | |||
| 164 | .bottom-tip { | ||
| 165 | // font-size: .833333rem; | ||
| 166 | font-size: 18px; | ||
| 167 | display: flex; | ||
| 168 | align-items: center; | ||
| 169 | |||
| 170 | span { | ||
| 171 | margin-left: 1.3rem; | ||
| 166 | } | 172 | } |
| 167 | 173 | ||
| 168 | hr { | 174 | img { |
| 169 | border-top: 1px solid #eee; | 175 | width: 1.3rem; |
| 170 | margin-top: 2.5rem ; | ||
| 171 | } | 176 | } |
| 172 | 177 | } | |
| 173 | .tips { | ||
| 174 | display: flex; | ||
| 175 | justify-content: flex-start; | ||
| 176 | align-items: center; | ||
| 177 | 178 | ||
| 178 | img { | 179 | hr { |
| 179 | width: .833333rem; | 180 | border-top: 1px solid #eee; |
| 180 | } | 181 | margin-top: 48px; |
| 182 | } | ||
| 181 | 183 | ||
| 182 | span { | 184 | .tips { |
| 183 | font-size: 1rem ; | 185 | display: flex; |
| 184 | margin-left: .833333rem; | 186 | justify-content: flex-start; |
| 185 | color: #ff6839; | 187 | align-items: center; |
| 186 | } | 188 | |
| 189 | img { | ||
| 190 | width: 2rem; | ||
| 187 | } | 191 | } |
| 188 | 192 | ||
| 189 | .contact { | 193 | span { |
| 190 | text-align: center; | 194 | // font-size: 1rem; |
| 191 | cursor: pointer; | 195 | font-size: 18px; |
| 192 | color: #ff6839; | 196 | margin-left: .833333rem; |
| 193 | font-weight: 600; | 197 | color: #ff6839; |
| 194 | } | 198 | } |
| 199 | } | ||
| 200 | |||
| 201 | .contact { | ||
| 202 | text-align: center; | ||
| 203 | cursor: pointer; | ||
| 204 | color: #ff6839; | ||
| 205 | font-weight: 600; | ||
| 206 | } | ||
| 195 | 207 | ||
| 196 | 208 | ||
| 197 | 209 | ||
| 198 | .fail-tips { | 210 | .fail-tips { |
| 199 | align-items: center; | 211 | align-items: center; |
| 200 | justify-content: center; | 212 | justify-content: center; |
| 201 | display: flex; | 213 | display: flex; |
| 202 | font-size: 1.166667rem; | 214 | font-size: 1.166667rem; |
| 203 | 215 | ||
| 204 | .icon { | 216 | .icon { |
| 205 | width:1.333333rem; | 217 | width: 1.333333rem; |
| 206 | margin-right: 5px; | 218 | margin-right: 5px; |
| 207 | display: inline-block; | 219 | display: inline-block; |
| 208 | } | 220 | } |
| 209 | 221 | ||
| 210 | .btn { | 222 | .btn { |
| 211 | margin-left: 0; | 223 | margin-left: 0; |
| 212 | color: #ff6839; | 224 | color: #ff6839; |
| 213 | font-weight: 600; | 225 | font-weight: 600; |
| 214 | font-size: 1.166667rem; | 226 | font-size: 1.166667rem; |
| 215 | } | ||
| 216 | } | 227 | } |
| 217 | } | 228 | } |
| 218 | 229 | } | |
| 230 | |||
| 219 | 231 | ||
| 220 | .form { | 232 | .form { |
| 221 | display: flex; | 233 | display: flex; |
| ... | @@ -223,17 +235,17 @@ input { | ... | @@ -223,17 +235,17 @@ input { |
| 223 | flex-wrap: wrap; | 235 | flex-wrap: wrap; |
| 224 | 236 | ||
| 225 | &-name { | 237 | &-name { |
| 226 | font-size: 1.333333rem ; | 238 | font-size: 1.333333rem; |
| 227 | font-weight: 600; | 239 | font-weight: 600; |
| 228 | text-align: left; | 240 | text-align: left; |
| 229 | color: #ff6839; | 241 | color: #ff6839; |
| 230 | padding-left: 15px; | 242 | padding-left: 15px; |
| 231 | } | 243 | } |
| 232 | 244 | ||
| 233 | .ipt-date { | 245 | .ipt-date { |
| 234 | width: 100%; | 246 | width: 100%; |
| 235 | border: 1px solid #ff6839 !important; | 247 | border: 1px solid #ff6839 !important; |
| 236 | border-radius: .416667rem ; | 248 | border-radius: .416667rem; |
| 237 | height: 3rem; | 249 | height: 3rem; |
| 238 | align-items: center; | 250 | align-items: center; |
| 239 | padding-left: .833333rem; | 251 | padding-left: .833333rem; |
| ... | @@ -261,11 +273,11 @@ input { | ... | @@ -261,11 +273,11 @@ input { |
| 261 | 273 | ||
| 262 | // input和下拉 | 274 | // input和下拉 |
| 263 | .ipt { | 275 | .ipt { |
| 264 | border: 1px solid #ff6839 !important; | 276 | border: 1px solid #ff6839 !important; |
| 265 | border-radius: .416667rem ; | 277 | border-radius: .416667rem; |
| 266 | height: 3rem; | 278 | height: 3rem; |
| 267 | display:flex; | 279 | display: flex; |
| 268 | align-items: center; | 280 | align-items: center; |
| 269 | } | 281 | } |
| 270 | 282 | ||
| 271 | // 长文本 | 283 | // 长文本 |
| ... | @@ -290,7 +302,7 @@ input { | ... | @@ -290,7 +302,7 @@ input { |
| 290 | } | 302 | } |
| 291 | 303 | ||
| 292 | .validator { | 304 | .validator { |
| 293 | color: #ff6839; | 305 | color: #ff6839; |
| 294 | margin-top: 0.5rem; | 306 | margin-top: 0.5rem; |
| 295 | position: absolute; | 307 | position: absolute; |
| 296 | right: 1rem; | 308 | right: 1rem; |
| ... | @@ -318,9 +330,11 @@ input { | ... | @@ -318,9 +330,11 @@ input { |
| 318 | width: 30%; | 330 | width: 30%; |
| 319 | padding-left: 5px; | 331 | padding-left: 5px; |
| 320 | letter-spacing: .25rem; | 332 | letter-spacing: .25rem; |
| 333 | font-size: 20px; | ||
| 321 | 334 | ||
| 322 | .main-label { | 335 | .main-label { |
| 323 | font-size: 1.5rem ; | 336 | // font-size: 1.5rem; |
| 337 | font-size: 22px; | ||
| 324 | color: #ff6839; | 338 | color: #ff6839; |
| 325 | } | 339 | } |
| 326 | } | 340 | } |
| ... | @@ -331,47 +345,48 @@ input { | ... | @@ -331,47 +345,48 @@ input { |
| 331 | } | 345 | } |
| 332 | 346 | ||
| 333 | .value { | 347 | .value { |
| 334 | width: 70%; | 348 | width: 70%; |
| 335 | position: relative; | 349 | position: relative; |
| 336 | .ipt-wrap { | 350 | |
| 351 | .ipt-wrap { | ||
| 337 | 352 | ||
| 338 | // input和下拉 | 353 | // input和下拉 |
| 339 | .ipt { | 354 | .ipt { |
| 340 | border: 1px solid #ff6839 !important; | 355 | border: 1px solid #ff6839 !important; |
| 341 | border-radius: .416667rem ; | 356 | border-radius: .416667rem; |
| 342 | height: 3rem; | 357 | height: 3rem; |
| 343 | display:flex; | 358 | display: flex; |
| 344 | align-items: center; | 359 | align-items: center; |
| 345 | } | 360 | } |
| 346 | 361 | ||
| 347 | 362 | ||
| 348 | .ipt2 { | 363 | .ipt2 { |
| 349 | width: 100%; | 364 | width: 100%; |
| 350 | border-bottom: 1px solid #ccc; | 365 | border-bottom: 1px solid #ccc; |
| 351 | height: 3rem; | 366 | height: 3rem; |
| 352 | display:flex; | 367 | display: flex; |
| 353 | align-items: center; | 368 | align-items: center; |
| 354 | margin-bottom: .833333rem ; | 369 | margin-bottom: .833333rem; |
| 355 | } | 370 | } |
| 356 | 371 | ||
| 357 | // 长文本 | 372 | // 长文本 |
| 358 | .textarea { | 373 | .textarea { |
| 359 | min-height: 8.75rem; | 374 | min-height: 8.75rem; |
| 360 | @extend .bb; | 375 | @extend .bb; |
| 361 | padding: .75rem; | 376 | padding: .75rem; |
| 362 | } | 377 | } |
| 363 | 378 | ||
| 364 | .down-arrow { | 379 | .down-arrow { |
| 365 | z-index: 10; | 380 | z-index: 10; |
| 366 | position: absolute; | 381 | position: absolute; |
| 367 | top: 1.3rem; | 382 | top: 1.3rem; |
| 368 | right: 1.2rem; | 383 | right: 1.2rem; |
| 369 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 384 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
| 370 | background-size: 100% 100%; | 385 | background-size: 100% 100%; |
| 371 | width: .633333rem; | 386 | width: .633333rem; |
| 372 | height: .433333rem; | 387 | height: .433333rem; |
| 373 | pointer-events: none; | 388 | pointer-events: none; |
| 374 | cursor: default; | 389 | cursor: default; |
| 375 | } | 390 | } |
| 376 | } | 391 | } |
| 377 | } | 392 | } |
| ... | @@ -399,52 +414,53 @@ input { | ... | @@ -399,52 +414,53 @@ input { |
| 399 | } | 414 | } |
| 400 | 415 | ||
| 401 | @media (max-width: 1000px) { | 416 | @media (max-width: 1000px) { |
| 402 | .reservation-container-2 { | 417 | .reservation-container-2 { |
| 403 | padding: 1.666667rem 2rem 2.833333rem 2rem; | 418 | padding: 1.666667rem 2rem 2.833333rem 2rem; |
| 404 | } | 419 | } |
| 405 | 420 | ||
| 406 | .form { | 421 | .form { |
| 407 | &-item { | 422 | &-item { |
| 408 | width: 100%; | 423 | width: 100%; |
| 409 | .label { | 424 | |
| 410 | min-width: 30%; | 425 | .label { |
| 411 | } | 426 | min-width: 30%; |
| 412 | |||
| 413 | .ipt-wrap { | ||
| 414 | width: 70%; | ||
| 415 | } | ||
| 416 | } | 427 | } |
| 417 | 428 | ||
| 418 | &-item-2 { | 429 | .ipt-wrap { |
| 419 | .date-container { | 430 | width: 70%; |
| 420 | width: 80%; | ||
| 421 | } | ||
| 422 | } | 431 | } |
| 423 | } | 432 | } |
| 424 | } | 433 | |
| 434 | &-item-2 { | ||
| 435 | .date-container { | ||
| 436 | width: 80%; | ||
| 437 | } | ||
| 438 | } | ||
| 439 | } | ||
| 440 | } | ||
| 425 | 441 | ||
| 426 | @media (max-width: 600px) { | 442 | @media (max-width: 600px) { |
| 427 | 443 | ||
| 428 | 444 | ||
| 429 | .reservation-container-2 { | 445 | .reservation-container-2 { |
| 430 | 446 | ||
| 431 | .clarms-border{ | 447 | .clarms-border { |
| 432 | min-width: auto; | 448 | min-width: auto; |
| 433 | margin: 0 .25rem; | 449 | margin: 0 .25rem; |
| 450 | } | ||
| 434 | } | 451 | } |
| 435 | } | ||
| 436 | 452 | ||
| 437 | .form { | 453 | .form { |
| 438 | &-item { | 454 | &-item { |
| 439 | width: 100%; | 455 | width: 100%; |
| 440 | 456 | ||
| 441 | .label { | 457 | .label { |
| 442 | min-width: 30%; | 458 | min-width: 30%; |
| 443 | } | 459 | } |
| 444 | 460 | ||
| 445 | .ipt-wrap { | 461 | .ipt-wrap { |
| 446 | width: 70%; | 462 | width: 70%; |
| 447 | } | 463 | } |
| 448 | } | 464 | } |
| 449 | 465 | ||
| 450 | &-item2 { | 466 | &-item2 { |
| ... | @@ -456,18 +472,20 @@ input { | ... | @@ -456,18 +472,20 @@ input { |
| 456 | } | 472 | } |
| 457 | 473 | ||
| 458 | &-item-2 { | 474 | &-item-2 { |
| 459 | display: block; | 475 | display: block; |
| 460 | .label { | ||
| 461 | width: 100%; | ||
| 462 | margin-bottom:10px; | ||
| 463 | } | ||
| 464 | .value { | ||
| 465 | width: 100%; | ||
| 466 | } | ||
| 467 | 476 | ||
| 468 | .date-container { | 477 | .label { |
| 469 | width: 100%; | 478 | width: 100%; |
| 470 | } | 479 | margin-bottom: 10px; |
| 480 | } | ||
| 481 | |||
| 482 | .value { | ||
| 483 | width: 100%; | ||
| 484 | } | ||
| 485 | |||
| 486 | .date-container { | ||
| 487 | width: 100%; | ||
| 488 | } | ||
| 471 | } | 489 | } |
| 472 | 490 | ||
| 473 | &-item3 { | 491 | &-item3 { |
| ... | @@ -488,6 +506,6 @@ input { | ... | @@ -488,6 +506,6 @@ input { |
| 488 | 506 | ||
| 489 | @media (max-width: 400px) { | 507 | @media (max-width: 400px) { |
| 490 | .reservation-container-2 { | 508 | .reservation-container-2 { |
| 491 | padding: 1.666667rem 1rem; | 509 | padding: 1.666667rem 1rem; |
| 492 | } | 510 | } |
| 493 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 511 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | 2 | ||
| 3 | <div> | 3 | <div class="comp"> |
| 4 | <template v-if="!insuredList || insuredList.length == 0"> | 4 | <template v-if="!insuredList || insuredList.length == 0"> |
| 5 | <div class="reservation-container-2"> | 5 | <div class="reservation-container-2"> |
| 6 | <div class="empty"> | 6 | <div class="empty"> |
| ... | @@ -17,7 +17,7 @@ | ... | @@ -17,7 +17,7 @@ |
| 17 | <template v-else> | 17 | <template v-else> |
| 18 | <div class="reservation-container-2"> | 18 | <div class="reservation-container-2"> |
| 19 | <div class="title default-mt"> | 19 | <div class="title default-mt"> |
| 20 | <span>{{$t('clarms.step2.label1')}}</span> | 20 | <span class="t1">{{$t('clarms.step2.label1')}}</span> |
| 21 | <div class="clarms-border"> | 21 | <div class="clarms-border"> |
| 22 | <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> | 22 | <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')"> |
| 23 | <template v-if="lan == 'en'"> | 23 | <template v-if="lan == 'en'"> |
| ... | @@ -30,7 +30,7 @@ | ... | @@ -30,7 +30,7 @@ |
| 30 | </template> | 30 | </template> |
| 31 | </el-select> | 31 | </el-select> |
| 32 | </div> | 32 | </div> |
| 33 | <span>{{$t('clarms.step2.label2')}}</span> | 33 | <span class="t1">{{$t('clarms.step2.label2')}}</span> |
| 34 | </div> | 34 | </div> |
| 35 | <hr> | 35 | <hr> |
| 36 | <div class="gird-g form default-mt"> | 36 | <div class="gird-g form default-mt"> |
| ... | @@ -167,4 +167,4 @@ | ... | @@ -167,4 +167,4 @@ |
| 167 | <script src="./clarms-plugins-material.js"></script> | 167 | <script src="./clarms-plugins-material.js"></script> |
| 168 | <style lang="scss" scoped> | 168 | <style lang="scss" scoped> |
| 169 | @import "./clarms-plugins-material.scss"; | 169 | @import "./clarms-plugins-material.scss"; |
| 170 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 170 | </style> | ... | ... |
| ... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
| 9 | height: 100%; | 9 | height: 100%; |
| 10 | @extend .fcc; | 10 | @extend .fcc; |
| 11 | text-align: center; | 11 | text-align: center; |
| 12 | font-size: 22px; | ||
| 12 | } | 13 | } |
| 13 | 14 | ||
| 14 | .overlay { | 15 | .overlay { |
| ... | @@ -23,7 +24,7 @@ | ... | @@ -23,7 +24,7 @@ |
| 23 | .modal { | 24 | .modal { |
| 24 | position: relative; | 25 | position: relative; |
| 25 | @extend .bb; | 26 | @extend .bb; |
| 26 | width: 63.333333rem; | 27 | width: 800px; |
| 27 | // height: 28.5rem; | 28 | // height: 28.5rem; |
| 28 | border-radius: .8333rem; | 29 | border-radius: .8333rem; |
| 29 | background-color: #ffffff; | 30 | background-color: #ffffff; |
| ... | @@ -32,93 +33,98 @@ | ... | @@ -32,93 +33,98 @@ |
| 32 | 33 | ||
| 33 | 34 | ||
| 34 | .content { | 35 | .content { |
| 35 | display: flex; | 36 | display: flex; |
| 36 | justify-content: flex-start; | 37 | justify-content: flex-start; |
| 37 | align-items: center; | 38 | align-items: center; |
| 38 | padding: 10rem 8.333333rem; | 39 | padding: 10rem 8.333333rem; |
| 39 | 40 | ||
| 40 | .info-icon { | 41 | .info-icon { |
| 41 | width: 10rem; | 42 | width: 10rem; |
| 42 | min-width: 6rem; | 43 | min-width: 10rem; |
| 43 | img { | 44 | |
| 44 | width:100%; | 45 | img { |
| 45 | } | 46 | width: 100%; |
| 46 | } | 47 | } |
| 48 | } | ||
| 47 | 49 | ||
| 48 | .message { | 50 | .message { |
| 49 | margin-left: 1.666667rem; | 51 | margin-left: 32px; |
| 50 | font-size: 1.333333rem; | 52 | // font-size: 1.333333rem; |
| 51 | font-weight: 600; | 53 | font-weight: 600; |
| 52 | color: $cOrange; | 54 | color: $cOrange; |
| 53 | letter-spacing: .083333rem ; | 55 | letter-spacing: .083333rem; |
| 54 | text-align: left; | 56 | text-align: left; |
| 55 | line-height: 1.5; | 57 | line-height: 1.5; |
| 56 | 58 | ||
| 57 | span { | 59 | span { |
| 58 | cursor: pointer; | 60 | cursor: pointer; |
| 59 | text-decoration: underline; | 61 | text-decoration: underline; |
| 60 | } | ||
| 61 | } | 62 | } |
| 63 | } | ||
| 62 | } | 64 | } |
| 63 | 65 | ||
| 64 | .close { | 66 | .close { |
| 65 | cursor: pointer; | 67 | cursor: pointer; |
| 68 | |||
| 66 | img { | 69 | img { |
| 67 | width: 1.666667rem ; | 70 | width: 1.666667rem; |
| 68 | position: absolute; | 71 | position: absolute; |
| 69 | right: -2.5rem; | 72 | right: -2.5rem; |
| 70 | top: -1.666667rem ; | 73 | top: -1.666667rem; |
| 71 | } | 74 | } |
| 72 | } | 75 | } |
| 73 | } | 76 | } |
| 74 | 77 | ||
| 75 | 78 | ||
| 76 | @media (max-width: 800px) { | 79 | @media (max-width: 800px) { |
| 77 | .modal { | 80 | .modal { |
| 78 | // height: 28.5rem; | 81 | // height: 28.5rem; |
| 79 | padding: 3rem 1.5rem; | 82 | padding: 3rem 1.5rem; |
| 80 | width: 80%; | 83 | width: 80%; |
| 81 | height: auto; | 84 | height: auto; |
| 82 | 85 | ||
| 83 | .content { | 86 | .content { |
| 84 | padding: 5rem 4rem; | 87 | padding: 5rem 4rem; |
| 85 | } | 88 | } |
| 86 | .close { | 89 | |
| 87 | display: none; | 90 | .close { |
| 88 | } | 91 | display: none; |
| 89 | } | 92 | } |
| 90 | } | 93 | } |
| 94 | } | ||
| 91 | 95 | ||
| 92 | @media (max-width: 700px) { | 96 | @media (max-width: 700px) { |
| 93 | .modal { | 97 | .modal { |
| 94 | // height: 28.5rem; | 98 | // height: 28.5rem; |
| 95 | padding: 3rem 1.5rem; | 99 | padding: 3rem 1.5rem; |
| 96 | width: 80%; | 100 | width: 80%; |
| 97 | height: auto; | 101 | height: auto; |
| 98 | 102 | ||
| 99 | .content { | 103 | .content { |
| 100 | padding: 4rem 2rem; | 104 | padding: 4rem 2rem; |
| 101 | } | 105 | } |
| 102 | .close { | 106 | |
| 103 | display: none; | 107 | .close { |
| 104 | } | 108 | display: none; |
| 105 | } | 109 | } |
| 106 | } | 110 | } |
| 111 | } | ||
| 107 | 112 | ||
| 108 | 113 | ||
| 109 | 114 | ||
| 110 | @media (max-width: 450px) { | 115 | @media (max-width: 450px) { |
| 111 | .modal { | 116 | .modal { |
| 112 | // height: 28.5rem; | 117 | // height: 28.5rem; |
| 113 | padding: 3rem 1.5rem; | 118 | padding: 3rem 1.5rem; |
| 114 | width: 90%; | 119 | width: 90%; |
| 115 | height: auto; | 120 | height: auto; |
| 116 | 121 | ||
| 117 | .close { | 122 | .close { |
| 118 | display: none; | 123 | display: none; |
| 119 | } | 124 | } |
| 120 | .content { | 125 | |
| 121 | padding: 2rem .5rem; | 126 | .content { |
| 122 | } | 127 | padding: 2rem .5rem; |
| 123 | } | 128 | } |
| 124 | } | 129 | } |
| 130 | } | ... | ... |
| ... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
| 9 | height: 100%; | 9 | height: 100%; |
| 10 | @extend .fcc; | 10 | @extend .fcc; |
| 11 | text-align: center; | 11 | text-align: center; |
| 12 | font-size: 22px; | ||
| 12 | } | 13 | } |
| 13 | 14 | ||
| 14 | .overlay { | 15 | .overlay { |
| ... | @@ -23,7 +24,7 @@ | ... | @@ -23,7 +24,7 @@ |
| 23 | .modal { | 24 | .modal { |
| 24 | position: relative; | 25 | position: relative; |
| 25 | @extend .bb; | 26 | @extend .bb; |
| 26 | width: 63.333333rem; | 27 | width: 800px; |
| 27 | // height: 28.5rem; | 28 | // height: 28.5rem; |
| 28 | border-radius: .8333rem; | 29 | border-radius: .8333rem; |
| 29 | background-color: #ffffff; | 30 | background-color: #ffffff; |
| ... | @@ -32,93 +33,98 @@ | ... | @@ -32,93 +33,98 @@ |
| 32 | 33 | ||
| 33 | 34 | ||
| 34 | .content { | 35 | .content { |
| 35 | display: flex; | 36 | display: flex; |
| 36 | justify-content: flex-start; | 37 | justify-content: flex-start; |
| 37 | align-items: center; | 38 | align-items: center; |
| 38 | padding: 10rem 8.333333rem; | 39 | padding: 10rem 8.333333rem; |
| 39 | 40 | ||
| 40 | .info-icon { | 41 | .info-icon { |
| 41 | width: 10rem; | 42 | width: 10rem; |
| 42 | min-width: 6rem; | 43 | min-width: 10rem; |
| 43 | img { | 44 | |
| 44 | width:100%; | 45 | img { |
| 45 | } | 46 | width: 100%; |
| 46 | } | 47 | } |
| 48 | } | ||
| 47 | 49 | ||
| 48 | .message { | 50 | .message { |
| 49 | margin-left: 1.666667rem; | 51 | margin-left: 32px; |
| 50 | font-size: 1.333333rem; | 52 | // font-size: 1.333333rem; |
| 51 | font-weight: 600; | 53 | font-weight: 600; |
| 52 | color: $cOrange; | 54 | color: $cOrange; |
| 53 | letter-spacing: .083333rem ; | 55 | letter-spacing: .083333rem; |
| 54 | text-align: left; | 56 | text-align: left; |
| 55 | line-height: 1.5; | 57 | line-height: 1.5; |
| 56 | 58 | ||
| 57 | span { | 59 | span { |
| 58 | cursor: pointer; | 60 | cursor: pointer; |
| 59 | text-decoration: underline; | 61 | text-decoration: underline; |
| 60 | } | ||
| 61 | } | 62 | } |
| 63 | } | ||
| 62 | } | 64 | } |
| 63 | 65 | ||
| 64 | .close { | 66 | .close { |
| 65 | cursor: pointer; | 67 | cursor: pointer; |
| 68 | |||
| 66 | img { | 69 | img { |
| 67 | width: 1.666667rem ; | 70 | width: 1.666667rem; |
| 68 | position: absolute; | 71 | position: absolute; |
| 69 | right: -2.5rem; | 72 | right: -2.5rem; |
| 70 | top: -1.666667rem ; | 73 | top: -1.666667rem; |
| 71 | } | 74 | } |
| 72 | } | 75 | } |
| 73 | } | 76 | } |
| 74 | 77 | ||
| 75 | 78 | ||
| 76 | @media (max-width: 800px) { | 79 | @media (max-width: 800px) { |
| 77 | .modal { | 80 | .modal { |
| 78 | // height: 28.5rem; | 81 | // height: 28.5rem; |
| 79 | padding: 3rem 1.5rem; | 82 | padding: 3rem 1.5rem; |
| 80 | width: 80%; | 83 | width: 80%; |
| 81 | height: auto; | 84 | height: auto; |
| 82 | 85 | ||
| 83 | .content { | 86 | .content { |
| 84 | padding: 5rem 4rem; | 87 | padding: 5rem 4rem; |
| 85 | } | 88 | } |
| 86 | .close { | 89 | |
| 87 | display: none; | 90 | .close { |
| 88 | } | 91 | display: none; |
| 89 | } | 92 | } |
| 90 | } | 93 | } |
| 94 | } | ||
| 91 | 95 | ||
| 92 | @media (max-width: 700px) { | 96 | @media (max-width: 700px) { |
| 93 | .modal { | 97 | .modal { |
| 94 | // height: 28.5rem; | 98 | // height: 28.5rem; |
| 95 | padding: 3rem 1.5rem; | 99 | padding: 3rem 1.5rem; |
| 96 | width: 80%; | 100 | width: 80%; |
| 97 | height: auto; | 101 | height: auto; |
| 98 | 102 | ||
| 99 | .content { | 103 | .content { |
| 100 | padding: 4rem 2rem; | 104 | padding: 4rem 2rem; |
| 101 | } | 105 | } |
| 102 | .close { | 106 | |
| 103 | display: none; | 107 | .close { |
| 104 | } | 108 | display: none; |
| 105 | } | 109 | } |
| 106 | } | 110 | } |
| 111 | } | ||
| 107 | 112 | ||
| 108 | 113 | ||
| 109 | 114 | ||
| 110 | @media (max-width: 450px) { | 115 | @media (max-width: 450px) { |
| 111 | .modal { | 116 | .modal { |
| 112 | // height: 28.5rem; | 117 | // height: 28.5rem; |
| 113 | padding: 3rem 1.5rem; | 118 | padding: 3rem 1.5rem; |
| 114 | width: 90%; | 119 | width: 90%; |
| 115 | height: auto; | 120 | height: auto; |
| 116 | 121 | ||
| 117 | .close { | 122 | .close { |
| 118 | display: none; | 123 | display: none; |
| 119 | } | 124 | } |
| 120 | .content { | 125 | |
| 121 | padding: 2rem .5rem; | 126 | .content { |
| 122 | } | 127 | padding: 2rem .5rem; |
| 123 | } | 128 | } |
| 124 | } | 129 | } |
| 130 | } | ... | ... |
| ... | @@ -2,6 +2,10 @@ | ... | @@ -2,6 +2,10 @@ |
| 2 | 2 | ||
| 3 | $borderSize: 8px; | 3 | $borderSize: 8px; |
| 4 | 4 | ||
| 5 | .comp{ | ||
| 6 | font-size: 22px; | ||
| 7 | } | ||
| 8 | |||
| 5 | .clarms-container { | 9 | .clarms-container { |
| 6 | box-sizing: border-box; | 10 | box-sizing: border-box; |
| 7 | padding: .166667rem; | 11 | padding: .166667rem; |
| ... | @@ -25,6 +29,7 @@ $borderSize: 8px; | ... | @@ -25,6 +29,7 @@ $borderSize: 8px; |
| 25 | border-radius: 2px; | 29 | border-radius: 2px; |
| 26 | padding: 2px; | 30 | padding: 2px; |
| 27 | background-image: linear-gradient(to right, #ffb31d, #f15907); | 31 | background-image: linear-gradient(to right, #ffb31d, #f15907); |
| 32 | max-width: 400px; | ||
| 28 | 33 | ||
| 29 | .cont { | 34 | .cont { |
| 30 | @extend .bb; | 35 | @extend .bb; |
| ... | @@ -33,6 +38,7 @@ $borderSize: 8px; | ... | @@ -33,6 +38,7 @@ $borderSize: 8px; |
| 33 | height: 100%; | 38 | height: 100%; |
| 34 | background-color: #ffffff; | 39 | background-color: #ffffff; |
| 35 | border-radius: 2px; | 40 | border-radius: 2px; |
| 41 | font-size: 18px; | ||
| 36 | } | 42 | } |
| 37 | } | 43 | } |
| 38 | 44 | ||
| ... | @@ -63,7 +69,7 @@ $borderSize: 8px; | ... | @@ -63,7 +69,7 @@ $borderSize: 8px; |
| 63 | } | 69 | } |
| 64 | 70 | ||
| 65 | .clarms-t1 { | 71 | .clarms-t1 { |
| 66 | font-size: 1.5rem; | 72 | font-size: 22px; |
| 67 | color: #f15907; | 73 | color: #f15907; |
| 68 | letter-spacing: .166667rem; | 74 | letter-spacing: .166667rem; |
| 69 | } | 75 | } |
| ... | @@ -71,6 +77,7 @@ $borderSize: 8px; | ... | @@ -71,6 +77,7 @@ $borderSize: 8px; |
| 71 | .clarms-t2 { | 77 | .clarms-t2 { |
| 72 | color: #58595b; | 78 | color: #58595b; |
| 73 | letter-spacing: .166667rem; | 79 | letter-spacing: .166667rem; |
| 80 | font-size: 18px; | ||
| 74 | } | 81 | } |
| 75 | } | 82 | } |
| 76 | 83 | ||
| ... | @@ -89,7 +96,8 @@ $borderSize: 8px; | ... | @@ -89,7 +96,8 @@ $borderSize: 8px; |
| 89 | line-height: 3rem; | 96 | line-height: 3rem; |
| 90 | color: white; | 97 | color: white; |
| 91 | letter-spacing: .166667rem; | 98 | letter-spacing: .166667rem; |
| 92 | font-size: 1.166667rem; | 99 | // font-size: 1.166667rem; |
| 100 | font-size: 18px; | ||
| 93 | cursor: pointer; | 101 | cursor: pointer; |
| 94 | } | 102 | } |
| 95 | 103 | ... | ... |
| 1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
| 2 | 2 | ||
| 3 | .comp { | ||
| 4 | font-size: 22px; | ||
| 5 | } | ||
| 3 | 6 | ||
| 4 | .orange { | 7 | |
| 5 | color: $cOrange; | 8 | .orange { |
| 6 | } | 9 | color: $cOrange; |
| 7 | 10 | } | |
| 8 | .gray { | 11 | |
| 9 | color: #747474; | 12 | .gray { |
| 10 | } | 13 | color: #747474; |
| 11 | 14 | } | |
| 12 | .submit-btn{ | 15 | |
| 13 | background: url("~@assets/images/vhis/vhis-btn.png"); | 16 | |
| 14 | background-size: 100% 100%; | 17 | .submit-btn { |
| 15 | background-repeat: no-repeat; | 18 | background: url("~@assets/images/vhis/vhis-btn.png"); |
| 16 | width: 18rem; | 19 | background-size: 100% 100%; |
| 17 | height: 3rem; | 20 | background-repeat: no-repeat; |
| 18 | line-height: 3rem; | 21 | width: 300px; |
| 19 | color: white; | 22 | height: 50px; |
| 20 | font-weight: 600; | 23 | line-height: 50px; |
| 21 | cursor: pointer; | 24 | color: white; |
| 22 | margin: 2.5rem auto; | 25 | font-weight: 600; |
| 23 | text-align: center; | 26 | cursor: pointer; |
| 24 | border-radius: 1.666667rem; | 27 | margin: 2.5rem auto; |
| 25 | } | 28 | text-align: center; |
| 29 | border-radius: 50px; | ||
| 30 | } | ||
| 26 | 31 | ||
| 27 | .reservation-container { | 32 | .reservation-container { |
| 28 | @extend .bb; | 33 | @extend .bb; |
| 29 | border-radius: .666667rem; | 34 | border-radius: .666667rem; |
| 30 | border: solid .083333rem $cOrange; | 35 | border: solid 2px $cOrange; |
| 31 | background-color: #ffffff; | 36 | background-color: #ffffff; |
| 32 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 37 | padding: 2.666667rem 10rem 2.833333rem 10rem; |
| 33 | 38 | ||
| 34 | .title { | 39 | .title { |
| 35 | font-size: 1.333333rem; | 40 | // font-size: 1.333333rem; |
| 36 | color: $cOrange; | 41 | color: $cOrange; |
| 37 | text-align: center; | 42 | text-align: center; |
| 38 | margin: 1.666667rem auto 0 auto; | 43 | margin: 1.666667rem auto 0 auto; |
| 39 | 44 | ||
| 40 | span { | 45 | span { |
| 41 | margin: 0 .333333rem ; | 46 | margin: 0 .333333rem; |
| 42 | } | ||
| 43 | } | ||
| 44 | |||
| 45 | .default-mt { | ||
| 46 | margin-top: 2.666667rem; | ||
| 47 | } | ||
| 48 | |||
| 49 | .flex-top { | ||
| 50 | display: flex; | ||
| 51 | justify-content: left; | ||
| 52 | align-items: flex-start; | ||
| 53 | } | ||
| 54 | |||
| 55 | .flex-start { | ||
| 56 | display: flex; | ||
| 57 | justify-content: left; | ||
| 58 | align-items: flex-start; | ||
| 59 | flex-wrap: wrap; | ||
| 60 | } | 47 | } |
| 61 | 48 | } | |
| 62 | .check-item { | 49 | |
| 63 | display: flex; | 50 | .default-mt { |
| 64 | align-items: center; | 51 | margin-top: 2.666667rem; |
| 65 | span { | 52 | } |
| 66 | margin-left: .833333rem; | 53 | |
| 67 | } | 54 | .flex-top { |
| 55 | display: flex; | ||
| 56 | justify-content: left; | ||
| 57 | align-items: flex-start; | ||
| 58 | } | ||
| 59 | |||
| 60 | .flex-start { | ||
| 61 | display: flex; | ||
| 62 | justify-content: left; | ||
| 63 | align-items: flex-start; | ||
| 64 | flex-wrap: wrap; | ||
| 65 | } | ||
| 66 | |||
| 67 | .check-item { | ||
| 68 | display: flex; | ||
| 69 | align-items: center; | ||
| 70 | |||
| 71 | span { | ||
| 72 | margin-left: .833333rem; | ||
| 68 | } | 73 | } |
| 74 | } | ||
| 69 | 75 | ||
| 70 | .tips { | 76 | .tips { |
| 71 | align-items: center; | 77 | align-items: center; |
| ... | @@ -82,68 +88,157 @@ | ... | @@ -82,68 +88,157 @@ |
| 82 | } | 88 | } |
| 83 | } | 89 | } |
| 84 | } | 90 | } |
| 85 | 91 | ||
| 86 | 92 | ||
| 87 | 93 | ||
| 88 | 94 | ||
| 89 | .form { | 95 | .form { |
| 96 | display: flex; | ||
| 97 | justify-content: space-between; | ||
| 98 | flex-wrap: wrap; | ||
| 99 | |||
| 100 | &-name { | ||
| 101 | // font-size: 1.333333rem; | ||
| 102 | font-weight: 600; | ||
| 103 | text-align: left; | ||
| 104 | color: $cOrange; | ||
| 105 | padding-left: 15px; | ||
| 106 | } | ||
| 107 | |||
| 108 | .ipt-date { | ||
| 109 | width: 100%; | ||
| 110 | border: 1px solid $cOrange !important; | ||
| 111 | border-radius: .416667rem; | ||
| 112 | height: 3rem; | ||
| 113 | align-items: center; | ||
| 114 | padding: 0 2rem; | ||
| 115 | |||
| 116 | } | ||
| 117 | |||
| 118 | &-item { | ||
| 119 | width: 50%; | ||
| 90 | display: flex; | 120 | display: flex; |
| 91 | justify-content: space-between; | 121 | justify-content: center; |
| 92 | flex-wrap: wrap; | 122 | padding: 0 $marginSmall; |
| 93 | 123 | margin-bottom: 1.333333rem; | |
| 94 | &-name { | 124 | |
| 95 | font-size: 1.333333rem ; | 125 | .label { |
| 96 | font-weight: 600; | 126 | display: flex; |
| 97 | text-align: left; | ||
| 98 | color: $cOrange; | ||
| 99 | padding-left: 15px; | ||
| 100 | } | ||
| 101 | |||
| 102 | .ipt-date { | ||
| 103 | width: 100%; | ||
| 104 | border: 1px solid $cOrange !important; | ||
| 105 | border-radius: .416667rem ; | ||
| 106 | height: 3rem; | ||
| 107 | align-items: center; | 127 | align-items: center; |
| 108 | padding: 0 2rem; | 128 | width: 30%; |
| 129 | justify-content: flex-start; | ||
| 130 | padding-left: 5px; | ||
| 131 | letter-spacing: .25rem; | ||
| 109 | } | 132 | } |
| 110 | 133 | ||
| 111 | &-item { | 134 | .ipt-wrap { |
| 112 | width: 50%; | 135 | |
| 113 | display: flex; | 136 | width: 70%; |
| 114 | justify-content: center; | 137 | position: relative; |
| 115 | padding: 0 $marginSmall; | 138 | |
| 116 | margin-bottom: 1.333333rem; | 139 | // input和下拉 |
| 117 | 140 | .ipt { | |
| 118 | .label { | 141 | border: 1px solid $cOrange !important; |
| 142 | border-radius: .416667rem; | ||
| 143 | height: 3rem; | ||
| 119 | display: flex; | 144 | display: flex; |
| 120 | align-items: center; | 145 | align-items: center; |
| 121 | width: 30%; | 146 | |
| 122 | justify-content: flex-start; | ||
| 123 | padding-left: 5px; | ||
| 124 | letter-spacing: .25rem; | ||
| 125 | } | 147 | } |
| 126 | 148 | ||
| 149 | // 长文本 | ||
| 150 | .textarea { | ||
| 151 | min-height: 8.75rem; | ||
| 152 | @extend .bb; | ||
| 153 | padding: .75rem; | ||
| 154 | } | ||
| 155 | |||
| 156 | .down-arrow { | ||
| 157 | z-index: 10; | ||
| 158 | position: absolute; | ||
| 159 | top: 1.3rem; | ||
| 160 | right: 1.2rem; | ||
| 161 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
| 162 | background-size: 100% 100%; | ||
| 163 | width: .633333rem; | ||
| 164 | height: .433333rem; | ||
| 165 | pointer-events: none; | ||
| 166 | cursor: default; | ||
| 167 | } | ||
| 168 | } | ||
| 169 | |||
| 170 | .validator { | ||
| 171 | color: $cOrange; | ||
| 172 | margin-top: 0.5rem; | ||
| 173 | position: absolute; | ||
| 174 | right: 1rem; | ||
| 175 | display: flex; | ||
| 176 | align-items: center; | ||
| 177 | // bottom: 0; | ||
| 178 | |||
| 179 | img { | ||
| 180 | display: inline-block; | ||
| 181 | margin-right: 0.4rem; | ||
| 182 | } | ||
| 183 | } | ||
| 184 | } | ||
| 185 | |||
| 186 | |||
| 187 | &-item-2 { | ||
| 188 | width: 100%; | ||
| 189 | display: flex; | ||
| 190 | justify-content: flex-start; | ||
| 191 | padding: 0 $marginSmall; | ||
| 192 | margin-bottom: 1.333333rem; | ||
| 193 | |||
| 194 | .label { | ||
| 195 | align-items: center; | ||
| 196 | width: 25%; | ||
| 197 | padding-left: 5px; | ||
| 198 | letter-spacing: .25rem; | ||
| 199 | |||
| 200 | .main-label { | ||
| 201 | color: $cOrange; | ||
| 202 | } | ||
| 203 | } | ||
| 204 | |||
| 205 | .date-container { | ||
| 206 | width: 60%; | ||
| 207 | position: relative; | ||
| 208 | } | ||
| 209 | |||
| 210 | .value { | ||
| 211 | width: 75%; | ||
| 212 | position: relative; | ||
| 213 | |||
| 127 | .ipt-wrap { | 214 | .ipt-wrap { |
| 128 | width: 70%; | 215 | |
| 129 | position: relative; | ||
| 130 | |||
| 131 | // input和下拉 | 216 | // input和下拉 |
| 132 | .ipt { | 217 | .ipt { |
| 133 | border: 1px solid $cOrange !important; | 218 | border: 1px solid $cOrange !important; |
| 134 | border-radius: .416667rem ; | 219 | border-radius: .416667rem; |
| 135 | height: 3rem; | 220 | height: 3rem; |
| 136 | display:flex; | 221 | display: flex; |
| 137 | align-items: center; | 222 | align-items: center; |
| 223 | } | ||
| 224 | |||
| 225 | |||
| 226 | .ipt2 { | ||
| 227 | width: 100%; | ||
| 228 | border-bottom: 1px solid #ccc; | ||
| 229 | height: 3rem; | ||
| 230 | display: flex; | ||
| 231 | align-items: center; | ||
| 232 | margin-bottom: .833333rem; | ||
| 138 | } | 233 | } |
| 139 | 234 | ||
| 140 | // 长文本 | 235 | // 长文本 |
| 141 | .textarea { | 236 | .textarea { |
| 142 | min-height: 8.75rem; | 237 | min-height: 8.75rem; |
| 143 | @extend .bb; | 238 | @extend .bb; |
| 144 | padding: .75rem; | 239 | padding: .75rem; |
| 145 | } | 240 | } |
| 146 | 241 | ||
| 147 | .down-arrow { | 242 | .down-arrow { |
| 148 | z-index: 10; | 243 | z-index: 10; |
| 149 | position: absolute; | 244 | position: absolute; |
| ... | @@ -157,160 +252,76 @@ | ... | @@ -157,160 +252,76 @@ |
| 157 | cursor: default; | 252 | cursor: default; |
| 158 | } | 253 | } |
| 159 | } | 254 | } |
| 160 | |||
| 161 | .validator { | ||
| 162 | color: $cOrange; | ||
| 163 | margin-top: 0.5rem; | ||
| 164 | position: absolute; | ||
| 165 | right: 1rem; | ||
| 166 | display: flex; | ||
| 167 | align-items: center; | ||
| 168 | // bottom: 0; | ||
| 169 | |||
| 170 | img { | ||
| 171 | display: inline-block; | ||
| 172 | margin-right: 0.4rem; | ||
| 173 | } | ||
| 174 | } | ||
| 175 | } | ||
| 176 | |||
| 177 | |||
| 178 | &-item-2 { | ||
| 179 | width: 100%; | ||
| 180 | display: flex; | ||
| 181 | justify-content: flex-start; | ||
| 182 | padding: 0 $marginSmall; | ||
| 183 | margin-bottom: 1.333333rem; | ||
| 184 | |||
| 185 | .label { | ||
| 186 | align-items: center; | ||
| 187 | width: 25%; | ||
| 188 | padding-left: 5px; | ||
| 189 | letter-spacing: .25rem; | ||
| 190 | |||
| 191 | .main-label { | ||
| 192 | color: $cOrange; | ||
| 193 | } | ||
| 194 | } | ||
| 195 | |||
| 196 | .date-container { | ||
| 197 | width: 60%; | ||
| 198 | position: relative; | ||
| 199 | } | ||
| 200 | |||
| 201 | .value { | ||
| 202 | width: 75%; | ||
| 203 | position: relative; | ||
| 204 | .ipt-wrap { | ||
| 205 | |||
| 206 | // input和下拉 | ||
| 207 | .ipt { | ||
| 208 | border: 1px solid $cOrange !important; | ||
| 209 | border-radius: .416667rem ; | ||
| 210 | height: 3rem; | ||
| 211 | display:flex; | ||
| 212 | align-items: center; | ||
| 213 | } | ||
| 214 | |||
| 215 | |||
| 216 | .ipt2 { | ||
| 217 | width: 100%; | ||
| 218 | border-bottom: 1px solid #ccc; | ||
| 219 | height: 3rem; | ||
| 220 | display:flex; | ||
| 221 | align-items: center; | ||
| 222 | margin-bottom: .833333rem ; | ||
| 223 | } | ||
| 224 | |||
| 225 | // 长文本 | ||
| 226 | .textarea { | ||
| 227 | min-height: 8.75rem; | ||
| 228 | @extend .bb; | ||
| 229 | padding: .75rem; | ||
| 230 | } | ||
| 231 | |||
| 232 | .down-arrow { | ||
| 233 | z-index: 10; | ||
| 234 | position: absolute; | ||
| 235 | top: 1.3rem; | ||
| 236 | right: 1.2rem; | ||
| 237 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
| 238 | background-size: 100% 100%; | ||
| 239 | width: .633333rem; | ||
| 240 | height: .433333rem; | ||
| 241 | pointer-events: none; | ||
| 242 | cursor: default; | ||
| 243 | } | ||
| 244 | } | ||
| 245 | } | ||
| 246 | } | 255 | } |
| 247 | } | 256 | } |
| 248 | 257 | } | |
| 249 | 258 | ||
| 250 | .notice { | 259 | |
| 251 | margin-top: 4rem; | 260 | .notice { |
| 252 | @extend .bb; | 261 | margin-top: 4rem; |
| 253 | padding: 0 1rem; | 262 | @extend .bb; |
| 254 | 263 | padding: 0 1rem; | |
| 255 | &-item { | 264 | |
| 256 | position: relative; | 265 | &-item { |
| 257 | line-height: 2; | 266 | position: relative; |
| 258 | letter-spacing: 1.2px; | 267 | line-height: 2; |
| 259 | margin-bottom: 1rem; | 268 | letter-spacing: 1.2px; |
| 260 | 269 | margin-bottom: 1rem; | |
| 261 | &-icon { | 270 | |
| 262 | width: 1.166667rem; | 271 | &-icon { |
| 263 | position: absolute; | 272 | width: 1.166667rem; |
| 264 | top: .6rem; | 273 | position: absolute; |
| 265 | } | 274 | top: .6rem; |
| 266 | } | 275 | } |
| 267 | } | 276 | } |
| 277 | } | ||
| 278 | |||
| 268 | 279 | ||
| 269 | |||
| 270 | @media (max-width: 1200px) { | 280 | @media (max-width: 1200px) { |
| 271 | .mobile-margin { | 281 | .mobile-margin { |
| 272 | margin-top: 2.5rem; | 282 | margin-top: 2.5rem; |
| 273 | } | 283 | } |
| 274 | } | 284 | } |
| 275 | 285 | ||
| 276 | @media (max-width: 1000px) { | 286 | @media (max-width: 1000px) { |
| 277 | 287 | ||
| 278 | .form { | 288 | .form { |
| 279 | &-item { | 289 | &-item { |
| 280 | width: 100%; | 290 | width: 100%; |
| 281 | .label { | 291 | |
| 282 | min-width: 30%; | 292 | .label { |
| 283 | } | 293 | min-width: 30%; |
| 284 | |||
| 285 | .ipt-wrap { | ||
| 286 | width: 70%; | ||
| 287 | } | ||
| 288 | } | 294 | } |
| 289 | 295 | ||
| 290 | &-item-2 { | 296 | .ipt-wrap { |
| 291 | .date-container { | 297 | width: 70%; |
| 292 | width: 80%; | 298 | } |
| 293 | } | 299 | } |
| 300 | |||
| 301 | &-item-2 { | ||
| 302 | .date-container { | ||
| 303 | width: 80%; | ||
| 294 | } | 304 | } |
| 295 | } | 305 | } |
| 296 | } | 306 | } |
| 307 | } | ||
| 297 | 308 | ||
| 298 | @media (max-width: 700px) { | 309 | @media (max-width: 700px) { |
| 299 | .reservation-container { | 310 | .reservation-container { |
| 300 | padding: 2.666667rem 2rem 2.833333rem 2rem; | 311 | padding: 2.666667rem 2rem 2.833333rem 2rem; |
| 301 | } | 312 | } |
| 302 | 313 | ||
| 303 | .form { | 314 | .form { |
| 304 | &-item { | 315 | &-item { |
| 305 | width: 100%; | 316 | width: 100%; |
| 306 | 317 | ||
| 307 | .label { | 318 | .label { |
| 308 | min-width: 30%; | 319 | min-width: 30%; |
| 309 | } | 320 | } |
| 310 | 321 | ||
| 311 | .ipt-wrap { | 322 | .ipt-wrap { |
| 312 | width: 70%; | 323 | width: 70%; |
| 313 | } | 324 | } |
| 314 | } | 325 | } |
| 315 | 326 | ||
| 316 | &-item2 { | 327 | &-item2 { |
| ... | @@ -322,16 +333,17 @@ | ... | @@ -322,16 +333,17 @@ |
| 322 | } | 333 | } |
| 323 | 334 | ||
| 324 | &-item-2 { | 335 | &-item-2 { |
| 325 | .label { | 336 | .label { |
| 326 | width: 30%; | 337 | width: 30%; |
| 327 | } | 338 | } |
| 328 | .value { | ||
| 329 | width: 70%; | ||
| 330 | } | ||
| 331 | 339 | ||
| 332 | .date-container { | 340 | .value { |
| 333 | width: 100%; | 341 | width: 70%; |
| 334 | } | 342 | } |
| 343 | |||
| 344 | .date-container { | ||
| 345 | width: 100%; | ||
| 346 | } | ||
| 335 | } | 347 | } |
| 336 | 348 | ||
| 337 | &-item3 { | 349 | &-item3 { |
| ... | @@ -353,24 +365,24 @@ | ... | @@ -353,24 +365,24 @@ |
| 353 | 365 | ||
| 354 | @media (max-width: 500px) { | 366 | @media (max-width: 500px) { |
| 355 | 367 | ||
| 356 | .date-wrap .calendar-wrap{ | 368 | .date-wrap .calendar-wrap { |
| 357 | margin-left: -25px !important; | 369 | margin-left: -25px !important; |
| 358 | } | 370 | } |
| 359 | 371 | ||
| 360 | .form { | 372 | .form { |
| 361 | &-item { | 373 | &-item { |
| 362 | flex-direction: column; | 374 | flex-direction: column; |
| 363 | width: 100%; | 375 | width: 100%; |
| 364 | 376 | ||
| 365 | .label { | 377 | .label { |
| 366 | margin-bottom: .416667rem; | 378 | margin-bottom: .416667rem; |
| 367 | min-width: 100%; | 379 | min-width: 100%; |
| 368 | } | 380 | } |
| 369 | |||
| 370 | .ipt-wrap { | ||
| 371 | width: 100%; | ||
| 372 | 381 | ||
| 373 | } | 382 | .ipt-wrap { |
| 383 | width: 100%; | ||
| 384 | |||
| 385 | } | ||
| 374 | } | 386 | } |
| 375 | } | 387 | } |
| 376 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 388 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="reservation-container"> | 2 | <div class="comp reservation-container"> |
| 3 | <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div> | 3 | <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div> |
| 4 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> | 4 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> |
| 5 | <div class="gird-g form default-mt"> | 5 | <div class="gird-g form default-mt"> |
| ... | @@ -69,4 +69,4 @@ | ... | @@ -69,4 +69,4 @@ |
| 69 | <script src="./clarms-plugins-verifyform.js"></script> | 69 | <script src="./clarms-plugins-verifyform.js"></script> |
| 70 | <style lang="scss" scoped> | 70 | <style lang="scss" scoped> |
| 71 | @import "./clarms-plugins-verifyform.scss"; | 71 | @import "./clarms-plugins-verifyform.scss"; |
| 72 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 72 | </style> | ... | ... |
src/pages/clarms/clarms.scss
0 → 100644
| 1 | @import '@/styles/_support'; | ||
| 2 | |||
| 3 | .content { | ||
| 4 | // padding-bottom: 2.33rem; | ||
| 5 | margin: 2.333333rem auto; | ||
| 6 | position: relative; | ||
| 7 | } | ||
| 8 | |||
| 9 | |||
| 10 | input { | ||
| 11 | padding: 0 2.083333rem; | ||
| 12 | color: #333333; | ||
| 13 | } | ||
| 14 | |||
| 15 | .orange { | ||
| 16 | color: $cOrange; | ||
| 17 | } | ||
| 18 | |||
| 19 | .gray { | ||
| 20 | color: #747474; | ||
| 21 | } | ||
| 22 | |||
| 23 | .border2 { | ||
| 24 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 25 | } | ||
| 26 | |||
| 27 | .navigate { | ||
| 28 | position: relative; | ||
| 29 | margin: 24px auto 48px; | ||
| 30 | |||
| 31 | .bg { | ||
| 32 | position: absolute; | ||
| 33 | height: 13px; | ||
| 34 | width: 100%; | ||
| 35 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 36 | top: 32px; | ||
| 37 | } | ||
| 38 | |||
| 39 | .cont { | ||
| 40 | position: relative; | ||
| 41 | width: 1200px; | ||
| 42 | margin: 0 auto; | ||
| 43 | |||
| 44 | .tt { | ||
| 45 | padding: 0 24px; | ||
| 46 | color: #ff6839; | ||
| 47 | font-size: 48px; | ||
| 48 | font-weight: bold; | ||
| 49 | letter-spacing: 2.45px; | ||
| 50 | background-color: #ffffff; | ||
| 51 | } | ||
| 52 | } | ||
| 53 | } | ||
| 54 | |||
| 55 | .submit-btn { | ||
| 56 | background: url("~@assets/images/vhis/vhis-btn.png"); | ||
| 57 | background-size: 100% 100%; | ||
| 58 | background-repeat: no-repeat; | ||
| 59 | width: 15rem; | ||
| 60 | height: 2.5rem; | ||
| 61 | line-height: 2.5rem; | ||
| 62 | color: white; | ||
| 63 | font-weight: 600; | ||
| 64 | cursor: pointer; | ||
| 65 | margin: 2.5rem auto; | ||
| 66 | text-align: center; | ||
| 67 | } | ||
| 68 | |||
| 69 | |||
| 70 | |||
| 71 | .reservation-container { | ||
| 72 | @extend .bb; | ||
| 73 | border-radius: .666667rem; | ||
| 74 | border: solid 2px $cOrange; | ||
| 75 | background-color: #ffffff; | ||
| 76 | padding: 2.666667rem 10rem 2.833333rem 10rem; | ||
| 77 | |||
| 78 | .title { | ||
| 79 | font-size: 1.333333rem; | ||
| 80 | color: $cOrange; | ||
| 81 | text-align: center; | ||
| 82 | margin: 1.666667rem auto 0 auto; | ||
| 83 | |||
| 84 | span { | ||
| 85 | padding: 0 .166667rem; | ||
| 86 | } | ||
| 87 | } | ||
| 88 | |||
| 89 | .default-mt { | ||
| 90 | margin-top: 2.666667rem; | ||
| 91 | } | ||
| 92 | |||
| 93 | .flex-top { | ||
| 94 | display: flex; | ||
| 95 | justify-content: left; | ||
| 96 | align-items: flex-start; | ||
| 97 | } | ||
| 98 | |||
| 99 | .flex-start { | ||
| 100 | display: flex; | ||
| 101 | justify-content: left; | ||
| 102 | align-items: flex-start; | ||
| 103 | flex-wrap: wrap; | ||
| 104 | } | ||
| 105 | |||
| 106 | .check-item { | ||
| 107 | display: flex; | ||
| 108 | align-items: center; | ||
| 109 | |||
| 110 | span { | ||
| 111 | margin-left: .833333rem; | ||
| 112 | } | ||
| 113 | } | ||
| 114 | |||
| 115 | } | ||
| 116 | |||
| 117 | |||
| 118 | .reservation-container-2 { | ||
| 119 | @extend .bb; | ||
| 120 | border-radius: .666667rem; | ||
| 121 | border: solid .083333rem $cOrange; | ||
| 122 | background-color: #ffffff; | ||
| 123 | padding: 1.666667rem 10rem 2.833333rem 10rem; | ||
| 124 | |||
| 125 | .title { | ||
| 126 | font-size: 1.333333rem; | ||
| 127 | color: $cOrange; | ||
| 128 | text-align: center; | ||
| 129 | margin: 1.666667rem auto 0 auto; | ||
| 130 | |||
| 131 | select { | ||
| 132 | padding: 0 1.25rem; | ||
| 133 | border: none; | ||
| 134 | border-bottom: .083333rem solid #666666; | ||
| 135 | color: #666666; | ||
| 136 | } | ||
| 137 | } | ||
| 138 | |||
| 139 | .default-mt { | ||
| 140 | margin-top: 2.666667rem; | ||
| 141 | } | ||
| 142 | |||
| 143 | .submit-btn { | ||
| 144 | margin: 2.5rem auto 1rem; | ||
| 145 | } | ||
| 146 | |||
| 147 | .flex-top { | ||
| 148 | display: flex; | ||
| 149 | justify-content: left; | ||
| 150 | align-items: flex-start; | ||
| 151 | } | ||
| 152 | |||
| 153 | .flex-start { | ||
| 154 | display: flex; | ||
| 155 | justify-content: left; | ||
| 156 | align-items: flex-start; | ||
| 157 | flex-wrap: wrap; | ||
| 158 | } | ||
| 159 | |||
| 160 | .check-item { | ||
| 161 | display: flex; | ||
| 162 | align-items: center; | ||
| 163 | margin-right: 2rem; | ||
| 164 | margin-bottom: .833333rem; | ||
| 165 | |||
| 166 | span { | ||
| 167 | margin-left: .833333rem; | ||
| 168 | } | ||
| 169 | |||
| 170 | img { | ||
| 171 | width: 1.666667rem; | ||
| 172 | } | ||
| 173 | } | ||
| 174 | |||
| 175 | .item-group { | ||
| 176 | display: flex; | ||
| 177 | justify-content: flex-start; | ||
| 178 | align-items: flex-start; | ||
| 179 | flex-wrap: wrap; | ||
| 180 | } | ||
| 181 | |||
| 182 | .ml10 { | ||
| 183 | margin-left: .833333rem; | ||
| 184 | } | ||
| 185 | |||
| 186 | .mr10 { | ||
| 187 | margin-right: .833333rem; | ||
| 188 | } | ||
| 189 | |||
| 190 | .mt20 { | ||
| 191 | margin-top: 1.666667rem; | ||
| 192 | } | ||
| 193 | |||
| 194 | .mt10 { | ||
| 195 | margin-top: .833333rem; | ||
| 196 | } | ||
| 197 | |||
| 198 | .upload-item { | ||
| 199 | |||
| 200 | .tip { | ||
| 201 | color: $cOrange; | ||
| 202 | font-size: 1rem; | ||
| 203 | margin-top: .833333rem; | ||
| 204 | text-align: center; | ||
| 205 | width: 8.333333rem; | ||
| 206 | letter-spacing: 1px; | ||
| 207 | } | ||
| 208 | |||
| 209 | .upload-icon-1 { | ||
| 210 | width: 8.333333rem; | ||
| 211 | height: 8.333333rem; | ||
| 212 | background: url("~@/assets/images/clarms/icon1.png"); | ||
| 213 | background-size: 100% 100%; | ||
| 214 | } | ||
| 215 | |||
| 216 | .upload-icon-2 { | ||
| 217 | width: 8.333333rem; | ||
| 218 | height: 8.333333rem; | ||
| 219 | background: url("~@/assets/images/clarms/icon2.png"); | ||
| 220 | background-size: 100% 100%; | ||
| 221 | } | ||
| 222 | |||
| 223 | .upload-icon-3 { | ||
| 224 | width: 8.333333rem; | ||
| 225 | height: 8.333333rem; | ||
| 226 | background: url("~@/assets/images/clarms/icon3.png"); | ||
| 227 | background-size: 100% 100%; | ||
| 228 | } | ||
| 229 | |||
| 230 | .upload-icon-4 { | ||
| 231 | width: 8.333333rem; | ||
| 232 | height: 8.333333rem; | ||
| 233 | background: url("~@/assets/images/clarms/icon4.png"); | ||
| 234 | background-size: 100% 100%; | ||
| 235 | } | ||
| 236 | |||
| 237 | .upload-icon-5 { | ||
| 238 | width: 8.333333rem; | ||
| 239 | height: 8.333333rem; | ||
| 240 | background: url("~@/assets/images/clarms/icon5.png"); | ||
| 241 | background-size: 100% 100%; | ||
| 242 | } | ||
| 243 | } | ||
| 244 | |||
| 245 | .bottom-tip { | ||
| 246 | font-size: .833333rem; | ||
| 247 | display: flex; | ||
| 248 | align-items: center; | ||
| 249 | |||
| 250 | span { | ||
| 251 | margin-left: 1.3rem; | ||
| 252 | } | ||
| 253 | |||
| 254 | img { | ||
| 255 | width: 1.3rem; | ||
| 256 | } | ||
| 257 | } | ||
| 258 | |||
| 259 | hr { | ||
| 260 | border-top: 1px solid #eee; | ||
| 261 | margin-top: 2.5rem; | ||
| 262 | } | ||
| 263 | |||
| 264 | .tips { | ||
| 265 | display: flex; | ||
| 266 | justify-content: flex-start; | ||
| 267 | align-items: center; | ||
| 268 | |||
| 269 | img { | ||
| 270 | width: .833333rem; | ||
| 271 | } | ||
| 272 | |||
| 273 | span { | ||
| 274 | font-size: 1rem; | ||
| 275 | margin-left: .833333rem; | ||
| 276 | color: $cOrange; | ||
| 277 | } | ||
| 278 | } | ||
| 279 | |||
| 280 | .contact { | ||
| 281 | text-align: center; | ||
| 282 | cursor: pointer; | ||
| 283 | color: $cOrange; | ||
| 284 | font-weight: 600; | ||
| 285 | } | ||
| 286 | } | ||
| 287 | |||
| 288 | |||
| 289 | .form { | ||
| 290 | display: flex; | ||
| 291 | justify-content: space-between; | ||
| 292 | flex-wrap: wrap; | ||
| 293 | |||
| 294 | &-name { | ||
| 295 | font-size: 1.333333rem; | ||
| 296 | font-weight: 600; | ||
| 297 | text-align: left; | ||
| 298 | color: $cOrange; | ||
| 299 | padding-left: 15px; | ||
| 300 | } | ||
| 301 | |||
| 302 | .ipt-date { | ||
| 303 | width: 100%; | ||
| 304 | border: 1px solid $cOrange !important; | ||
| 305 | border-radius: .416667rem; | ||
| 306 | height: 3rem; | ||
| 307 | align-items: center; | ||
| 308 | padding-left: .833333rem; | ||
| 309 | } | ||
| 310 | |||
| 311 | &-item { | ||
| 312 | width: 50%; | ||
| 313 | display: flex; | ||
| 314 | justify-content: center; | ||
| 315 | padding: 0 $marginSmall; | ||
| 316 | margin-bottom: 1.333333rem; | ||
| 317 | |||
| 318 | .label { | ||
| 319 | display: flex; | ||
| 320 | align-items: center; | ||
| 321 | min-width: 30%; | ||
| 322 | justify-content: flex-start; | ||
| 323 | padding-left: 5px; | ||
| 324 | letter-spacing: .25rem; | ||
| 325 | } | ||
| 326 | |||
| 327 | .ipt-wrap { | ||
| 328 | width: 70%; | ||
| 329 | position: relative; | ||
| 330 | |||
| 331 | // input和下拉 | ||
| 332 | .ipt { | ||
| 333 | border: 1px solid $cOrange !important; | ||
| 334 | border-radius: .416667rem; | ||
| 335 | height: 3rem; | ||
| 336 | display: flex; | ||
| 337 | align-items: center; | ||
| 338 | } | ||
| 339 | |||
| 340 | // 长文本 | ||
| 341 | .textarea { | ||
| 342 | min-height: 8.75rem; | ||
| 343 | @extend .bb; | ||
| 344 | padding: .75rem; | ||
| 345 | } | ||
| 346 | |||
| 347 | .down-arrow { | ||
| 348 | z-index: 10; | ||
| 349 | position: absolute; | ||
| 350 | top: 1.3rem; | ||
| 351 | right: 1.2rem; | ||
| 352 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
| 353 | background-size: 100% 100%; | ||
| 354 | width: .633333rem; | ||
| 355 | height: .433333rem; | ||
| 356 | pointer-events: none; | ||
| 357 | cursor: default; | ||
| 358 | } | ||
| 359 | } | ||
| 360 | |||
| 361 | .validator { | ||
| 362 | color: $cOrange; | ||
| 363 | margin-top: 0.5rem; | ||
| 364 | position: absolute; | ||
| 365 | right: 1rem; | ||
| 366 | display: flex; | ||
| 367 | align-items: center; | ||
| 368 | // bottom: 0; | ||
| 369 | |||
| 370 | img { | ||
| 371 | display: inline-block; | ||
| 372 | margin-right: 0.4rem; | ||
| 373 | } | ||
| 374 | } | ||
| 375 | } | ||
| 376 | |||
| 377 | |||
| 378 | &-item-2 { | ||
| 379 | width: 100%; | ||
| 380 | display: flex; | ||
| 381 | justify-content: flex-start; | ||
| 382 | padding: 0 $marginSmall; | ||
| 383 | margin-bottom: 1.333333rem; | ||
| 384 | |||
| 385 | .label { | ||
| 386 | align-items: center; | ||
| 387 | width: 25%; | ||
| 388 | padding-left: 5px; | ||
| 389 | letter-spacing: .25rem; | ||
| 390 | |||
| 391 | .main-label { | ||
| 392 | color: $cOrange; | ||
| 393 | } | ||
| 394 | } | ||
| 395 | |||
| 396 | .date-container { | ||
| 397 | width: 60%; | ||
| 398 | position: relative; | ||
| 399 | } | ||
| 400 | |||
| 401 | .value { | ||
| 402 | width: 75%; | ||
| 403 | position: relative; | ||
| 404 | |||
| 405 | .ipt-wrap { | ||
| 406 | |||
| 407 | // input和下拉 | ||
| 408 | .ipt { | ||
| 409 | border: 1px solid $cOrange !important; | ||
| 410 | border-radius: .416667rem; | ||
| 411 | height: 3rem; | ||
| 412 | display: flex; | ||
| 413 | align-items: center; | ||
| 414 | } | ||
| 415 | |||
| 416 | |||
| 417 | .ipt2 { | ||
| 418 | width: 100%; | ||
| 419 | border-bottom: 1px solid #ccc; | ||
| 420 | height: 3rem; | ||
| 421 | display: flex; | ||
| 422 | align-items: center; | ||
| 423 | margin-bottom: .833333rem; | ||
| 424 | } | ||
| 425 | |||
| 426 | // 长文本 | ||
| 427 | .textarea { | ||
| 428 | min-height: 8.75rem; | ||
| 429 | @extend .bb; | ||
| 430 | padding: .75rem; | ||
| 431 | } | ||
| 432 | |||
| 433 | .down-arrow { | ||
| 434 | z-index: 10; | ||
| 435 | position: absolute; | ||
| 436 | top: 1.3rem; | ||
| 437 | right: 1.2rem; | ||
| 438 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
| 439 | background-size: 100% 100%; | ||
| 440 | width: .633333rem; | ||
| 441 | height: .433333rem; | ||
| 442 | pointer-events: none; | ||
| 443 | cursor: default; | ||
| 444 | } | ||
| 445 | } | ||
| 446 | } | ||
| 447 | } | ||
| 448 | } | ||
| 449 | |||
| 450 | |||
| 451 | .notice { | ||
| 452 | margin-top: 4rem; | ||
| 453 | @extend .bb; | ||
| 454 | padding: 0 1rem; | ||
| 455 | |||
| 456 | &-item { | ||
| 457 | position: relative; | ||
| 458 | line-height: 2; | ||
| 459 | letter-spacing: 1.2px; | ||
| 460 | margin-bottom: 1rem; | ||
| 461 | |||
| 462 | &-icon { | ||
| 463 | width: 1.166667rem; | ||
| 464 | position: absolute; | ||
| 465 | top: .6rem; | ||
| 466 | } | ||
| 467 | } | ||
| 468 | } | ||
| 469 | |||
| 470 | // .submit-btn { | ||
| 471 | // width: 13.583333rem; | ||
| 472 | // height: 4.083333rem; | ||
| 473 | // margin: 2.5rem auto; | ||
| 474 | // line-height: 4.083333rem; | ||
| 475 | // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); | ||
| 476 | // background-blend-mode: soft-light, ; | ||
| 477 | // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff); | ||
| 478 | // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); | ||
| 479 | // text-align: center; | ||
| 480 | // font-size: $fontSize; | ||
| 481 | // letter-spacing: .129167rem; | ||
| 482 | // color: #ffffff; | ||
| 483 | // border-radius: 3.5rem; | ||
| 484 | // cursor: pointer; | ||
| 485 | // border: none; | ||
| 486 | // color: #ffffff; | ||
| 487 | // background-color: $cOrange; | ||
| 488 | // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); | ||
| 489 | // background-blend-mode: soft-light, ; | ||
| 490 | // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff); | ||
| 491 | // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); | ||
| 492 | // } | ||
| 493 | |||
| 494 | |||
| 495 | @media (max-width: 1200px) { | ||
| 496 | .mobile-margin { | ||
| 497 | margin-top: 2.5rem; | ||
| 498 | } | ||
| 499 | } | ||
| 500 | |||
| 501 | @media (max-width: 1000px) { | ||
| 502 | .reservation-container-2 { | ||
| 503 | padding: 1.666667rem 2rem 2.833333rem 2rem; | ||
| 504 | } | ||
| 505 | |||
| 506 | .form { | ||
| 507 | &-item { | ||
| 508 | width: 100%; | ||
| 509 | |||
| 510 | .label { | ||
| 511 | min-width: 30%; | ||
| 512 | } | ||
| 513 | |||
| 514 | .ipt-wrap { | ||
| 515 | width: 70%; | ||
| 516 | } | ||
| 517 | } | ||
| 518 | |||
| 519 | &-item-2 { | ||
| 520 | .date-container { | ||
| 521 | width: 80%; | ||
| 522 | } | ||
| 523 | } | ||
| 524 | } | ||
| 525 | } | ||
| 526 | |||
| 527 | @media (max-width: 600px) { | ||
| 528 | .reservation-container { | ||
| 529 | padding: 2.666667rem 2rem 2.833333rem 2rem; | ||
| 530 | } | ||
| 531 | |||
| 532 | .form { | ||
| 533 | &-item { | ||
| 534 | width: 100%; | ||
| 535 | |||
| 536 | .label { | ||
| 537 | min-width: 30%; | ||
| 538 | } | ||
| 539 | |||
| 540 | .ipt-wrap { | ||
| 541 | width: 70%; | ||
| 542 | } | ||
| 543 | } | ||
| 544 | |||
| 545 | &-item2 { | ||
| 546 | display: block; | ||
| 547 | |||
| 548 | .ipt-wrap { | ||
| 549 | margin: 0; | ||
| 550 | } | ||
| 551 | } | ||
| 552 | |||
| 553 | &-item-2 { | ||
| 554 | .label { | ||
| 555 | width: 30%; | ||
| 556 | } | ||
| 557 | |||
| 558 | .value { | ||
| 559 | width: 70%; | ||
| 560 | } | ||
| 561 | |||
| 562 | .date-container { | ||
| 563 | width: 100%; | ||
| 564 | } | ||
| 565 | } | ||
| 566 | |||
| 567 | &-item3 { | ||
| 568 | display: block; | ||
| 569 | |||
| 570 | .ipt-wrap { | ||
| 571 | margin: 0; | ||
| 572 | width: 100%; | ||
| 573 | } | ||
| 574 | } | ||
| 575 | } | ||
| 576 | |||
| 577 | .notice { | ||
| 578 | margin: 0; | ||
| 579 | } | ||
| 580 | } | ||
| 581 | |||
| 582 | |||
| 583 | @media (max-width: 400px) { | ||
| 584 | .reservation-container-2 { | ||
| 585 | padding: 1.666667rem 1rem; | ||
| 586 | } | ||
| 587 | } |
| 1 | 1 | ||
| 2 | <template> | 2 | <template> |
| 3 | <div> | ||
| 4 | <div class="navigate"> | ||
| 5 | <div class="bg"></div> | ||
| 6 | <div class="cont"> | ||
| 7 | <span class="tt">索償申請</span> | ||
| 8 | </div> | ||
| 9 | </div> | ||
| 10 | <div class="content clarms"> | ||
| 11 | <template v-if="step == 3"> | ||
| 12 | <div class="alert"> | ||
| 13 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
| 14 | <div class="txt"> | ||
| 15 | {{$t('customService.unauth.baseInfoTip')}} | ||
| 16 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> | ||
| 17 | {{$t('customService.unauth.baseInfoTail')}} | ||
| 18 | </div> | ||
| 19 | <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> --> | ||
| 20 | </div> | ||
| 21 | </template> | ||
| 22 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
| 23 | <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two> | ||
| 24 | <div class="mobile-margin"> | ||
| 3 | 25 | ||
| 4 | <div> | 26 | <template v-if="step == 1"> |
| 5 | <template v-if="step == 3"> | 27 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> |
| 6 | <div class="alert"> | 28 | </template> |
| 7 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
| 8 | <div class="txt"> | ||
| 9 | {{$t('customService.unauth.baseInfoTip')}} | ||
| 10 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> | ||
| 11 | {{$t('customService.unauth.baseInfoTail')}} | ||
| 12 | </div> | ||
| 13 | <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> --> | ||
| 14 | </div> | ||
| 15 | </template> | ||
| 16 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
| 17 | <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two> | ||
| 18 | <div class="mobile-margin"> | ||
| 19 | 29 | ||
| 20 | <template v-if="step == 1"> | 30 | <template v-if="step == 2"> |
| 21 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> | 31 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> |
| 22 | </template> | 32 | </template> |
| 33 | </div> | ||
| 34 | </div> | ||
| 35 | </div> | ||
| 23 | 36 | ||
| 24 | <template v-if="step == 2"> | ||
| 25 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | ||
| 26 | </template> | ||
| 27 | </div> | ||
| 28 | </div> | ||
| 29 | </template> | 37 | </template> |
| 30 | 38 | ||
| 31 | <script src="./clarms.js"></script> | 39 | <script src="./clarms.js"></script> | ... | ... |
| 1 | import { | ||
| 2 | mapGetters, | ||
| 3 | mapActions, | ||
| 4 | mapState | ||
| 5 | } from "vuex"; | ||
| 6 | |||
| 7 | import api from '@/api/api' | ||
| 8 | import { | ||
| 9 | httpGet, | ||
| 10 | httpPost | ||
| 11 | } from '@/api/fetch-api.js' | ||
| 12 | |||
| 13 | import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue'; | ||
| 14 | import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue'; | ||
| 15 | import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue'; | ||
| 16 | import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue'; | ||
| 17 | |||
| 18 | // 用户没有登录 | ||
| 19 | // 校验成功 | ||
| 20 | // 校验失败 | ||
| 21 | // 用户已经登录 | ||
| 22 | // 没有保单 | ||
| 23 | // 校验成功 | ||
| 24 | // 校验失败 | ||
| 25 | // 有保单 | ||
| 26 | |||
| 27 | export default { | ||
| 28 | data() { | ||
| 29 | return { | ||
| 30 | step: 0, // 1是表单；2是报案页面；3=信息不完整 | ||
| 31 | showModal1: false, | ||
| 32 | showModal2: false, | ||
| 33 | agress: false, | ||
| 34 | reservationTypes: [], | ||
| 35 | cid: false, | ||
| 36 | // 可以理赔的客户信息 | ||
| 37 | customerList: [] | ||
| 38 | } | ||
| 39 | }, | ||
| 40 | components: { | ||
| 41 | ClarmsVerifyForm, | ||
| 42 | ClarmsMaterial, | ||
| 43 | ClarmsModalOne, | ||
| 44 | ClarmsModalTwo | ||
| 45 | }, | ||
| 46 | computed: { | ||
| 47 | ...mapState({ | ||
| 48 | userInfo: state => state.userInfo | ||
| 49 | }), | ||
| 50 | i18n() { | ||
| 51 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | ||
| 52 | }, | ||
| 53 | }, | ||
| 54 | methods: { | ||
| 55 | toClarms() { | ||
| 56 | this.$router.push({ | ||
| 57 | path: "/clarms", | ||
| 58 | query: {} | ||
| 59 | }); | ||
| 60 | }, | ||
| 61 | initData() { | ||
| 62 | // this.step = 2; | ||
| 63 | // return; | ||
| 64 | if (this.userInfo && this.userInfo.name) { | ||
| 65 | this.loadCidIfLogin(); | ||
| 66 | sessionStorage.removeItem("clarmsRequestCid") | ||
| 67 | } else { | ||
| 68 | let cid = sessionStorage.getItem("clarmsRequestCid"); | ||
| 69 | if (cid) { | ||
| 70 | this.cid = cid; | ||
| 71 | this.checkCid(); | ||
| 72 | } else { | ||
| 73 | this.step = 1; | ||
| 74 | } | ||
| 75 | } | ||
| 76 | }, | ||
| 77 | loadCidIfLogin() { | ||
| 78 | let param = { | ||
| 79 | sid: this.userInfo.sid | ||
| 80 | }; | ||
| 81 | httpPost({ | ||
| 82 | url: api.getCidByLogin, | ||
| 83 | sid: true, | ||
| 84 | data: param | ||
| 85 | }).then(res => { | ||
| 86 | if (res) { | ||
| 87 | this.cid = res; | ||
| 88 | this.checkCid(); | ||
| 89 | } else { | ||
| 90 | this.step = 3; | ||
| 91 | } | ||
| 92 | }).catch(e => { | ||
| 93 | this.step = 1; | ||
| 94 | }); | ||
| 95 | }, | ||
| 96 | checkCid() { | ||
| 97 | let param = { | ||
| 98 | cid: this.cid | ||
| 99 | } | ||
| 100 | httpPost({ | ||
| 101 | url: api.clarmsCustomerList, | ||
| 102 | data: param | ||
| 103 | }).then(res => { | ||
| 104 | sessionStorage.removeItem("clarmsRequestCid"); | ||
| 105 | if (res) { | ||
| 106 | this.customerList = res.insuredInfoList; | ||
| 107 | this.step = 2; | ||
| 108 | } | ||
| 109 | // if (res && res.insuredInfoList && res.insuredInfoList.length > 0) { | ||
| 110 | // this.customerList = res.insuredInfoList; | ||
| 111 | // this.step = 2; | ||
| 112 | // } else { | ||
| 113 | // sessionStorage.removeItem("clarmsRequestCid"); | ||
| 114 | // this.step = 1; | ||
| 115 | // } | ||
| 116 | }).catch(e => { | ||
| 117 | sessionStorage.removeItem("clarmsRequestCid"); | ||
| 118 | this.step = 1; | ||
| 119 | }); | ||
| 120 | }, | ||
| 121 | handleInsuredInfo(data) { | ||
| 122 | this.cid = data.cid; | ||
| 123 | this.customerList = data.list; | ||
| 124 | this.step = 2; | ||
| 125 | }, | ||
| 126 | handleShowModal(modalIndex) { | ||
| 127 | console.log(modalIndex); | ||
| 128 | if (modalIndex == 1) { | ||
| 129 | this.showModal1 = true; | ||
| 130 | } else if (modalIndex == 2) { | ||
| 131 | this.showModal2 = true; | ||
| 132 | } | ||
| 133 | }, | ||
| 134 | gotoInformationPage() { | ||
| 135 | let c = this.$route.fullPath; | ||
| 136 | this.$router.push({ | ||
| 137 | path: "/infomation/improve", | ||
| 138 | query: { | ||
| 139 | c: c, | ||
| 140 | a: 1 | ||
| 141 | } | ||
| 142 | }); | ||
| 143 | }, | ||
| 144 | logoutAction() { | ||
| 145 | this.sid = false; | ||
| 146 | this.hadQueryCustomerList = false; | ||
| 147 | this.customerList = []; | ||
| 148 | this.step = 1; | ||
| 149 | }, | ||
| 150 | loginAction() { | ||
| 151 | this.sid = false; | ||
| 152 | this.hadQueryCustomerList = false; | ||
| 153 | this.customerList = []; | ||
| 154 | } | ||
| 155 | }, | ||
| 156 | watch: { | ||
| 157 | userInfo(val) { | ||
| 158 | if (val && val.name) { | ||
| 159 | this.loginAction(); | ||
| 160 | } else { | ||
| 161 | this.logoutAction(); | ||
| 162 | } | ||
| 163 | } | ||
| 164 | }, | ||
| 165 | mounted() { | ||
| 166 | this.initData(); | ||
| 167 | }, | ||
| 168 | created() {} | ||
| 169 | } |
| ... | @@ -29,11 +29,13 @@ input { | ... | @@ -29,11 +29,13 @@ input { |
| 29 | } | 29 | } |
| 30 | 30 | ||
| 31 | .reservation-container { | 31 | .reservation-container { |
| 32 | @extend .fcc; | ||
| 32 | @extend .bb; | 33 | @extend .bb; |
| 33 | border-radius: .666667rem; | 34 | border-radius: .666667rem; |
| 34 | border: solid .083333rem $cOrange; | 35 | border: solid .083333rem $cOrange; |
| 35 | background-color: #ffffff; | 36 | background-color: #ffffff; |
| 36 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 37 | padding: 2.666667rem 10rem 2.833333rem 10rem; |
| 38 | min-height: 500px; | ||
| 37 | 39 | ||
| 38 | .title { | 40 | .title { |
| 39 | font-size: 1.333333rem; | 41 | font-size: 1.333333rem; |
| ... | @@ -80,7 +82,7 @@ input { | ... | @@ -80,7 +82,7 @@ input { |
| 80 | border: solid .083333rem $cOrange; | 82 | border: solid .083333rem $cOrange; |
| 81 | background-color: #ffffff; | 83 | background-color: #ffffff; |
| 82 | padding: 1.666667rem 10rem 2.833333rem 10rem; | 84 | padding: 1.666667rem 10rem 2.833333rem 10rem; |
| 83 | 85 | ||
| 84 | .title { | 86 | .title { |
| 85 | font-size: 1.333333rem; | 87 | font-size: 1.333333rem; |
| 86 | color: $cOrange; | 88 | color: $cOrange; |
| ... | @@ -94,28 +96,28 @@ input { | ... | @@ -94,28 +96,28 @@ input { |
| 94 | color: #666666; | 96 | color: #666666; |
| 95 | } | 97 | } |
| 96 | } | 98 | } |
| 97 | 99 | ||
| 98 | .default-mt { | 100 | .default-mt { |
| 99 | margin-top: 2.666667rem; | 101 | margin-top: 2.666667rem; |
| 100 | } | 102 | } |
| 101 | 103 | ||
| 102 | .submit-btn{ | 104 | .submit-btn{ |
| 103 | margin: 2.5rem auto 1rem; | 105 | margin: 2.5rem auto 1rem; |
| 104 | } | 106 | } |
| 105 | 107 | ||
| 106 | .flex-top { | 108 | .flex-top { |
| 107 | display: flex; | 109 | display: flex; |
| 108 | justify-content: left; | 110 | justify-content: left; |
| 109 | align-items: flex-start; | 111 | align-items: flex-start; |
| 110 | } | 112 | } |
| 111 | 113 | ||
| 112 | .flex-start { | 114 | .flex-start { |
| 113 | display: flex; | 115 | display: flex; |
| 114 | justify-content: left; | 116 | justify-content: left; |
| 115 | align-items: flex-start; | 117 | align-items: flex-start; |
| 116 | flex-wrap: wrap; | 118 | flex-wrap: wrap; |
| 117 | } | 119 | } |
| 118 | 120 | ||
| 119 | .check-item { | 121 | .check-item { |
| 120 | display: flex; | 122 | display: flex; |
| 121 | align-items: center; | 123 | align-items: center; |
| ... | @@ -171,28 +173,28 @@ input { | ... | @@ -171,28 +173,28 @@ input { |
| 171 | background: url("~@/assets/images/clarms/icon1.png"); | 173 | background: url("~@/assets/images/clarms/icon1.png"); |
| 172 | background-size: 100% 100%; | 174 | background-size: 100% 100%; |
| 173 | } | 175 | } |
| 174 | 176 | ||
| 175 | .upload-icon-2 { | 177 | .upload-icon-2 { |
| 176 | width: 8.333333rem ; | 178 | width: 8.333333rem ; |
| 177 | height: 8.333333rem ; | 179 | height: 8.333333rem ; |
| 178 | background: url("~@/assets/images/clarms/icon2.png"); | 180 | background: url("~@/assets/images/clarms/icon2.png"); |
| 179 | background-size: 100% 100%; | 181 | background-size: 100% 100%; |
| 180 | } | 182 | } |
| 181 | 183 | ||
| 182 | .upload-icon-3 { | 184 | .upload-icon-3 { |
| 183 | width: 8.333333rem ; | 185 | width: 8.333333rem ; |
| 184 | height: 8.333333rem ; | 186 | height: 8.333333rem ; |
| 185 | background: url("~@/assets/images/clarms/icon3.png"); | 187 | background: url("~@/assets/images/clarms/icon3.png"); |
| 186 | background-size: 100% 100%; | 188 | background-size: 100% 100%; |
| 187 | } | 189 | } |
| 188 | 190 | ||
| 189 | .upload-icon-4 { | 191 | .upload-icon-4 { |
| 190 | width: 8.333333rem ; | 192 | width: 8.333333rem ; |
| 191 | height: 8.333333rem ; | 193 | height: 8.333333rem ; |
| 192 | background: url("~@/assets/images/clarms/icon4.png"); | 194 | background: url("~@/assets/images/clarms/icon4.png"); |
| 193 | background-size: 100% 100%; | 195 | background-size: 100% 100%; |
| 194 | } | 196 | } |
| 195 | 197 | ||
| 196 | .upload-icon-5 { | 198 | .upload-icon-5 { |
| 197 | width: 8.333333rem ; | 199 | width: 8.333333rem ; |
| 198 | height: 8.333333rem ; | 200 | height: 8.333333rem ; |
| ... | @@ -218,7 +220,7 @@ input { | ... | @@ -218,7 +220,7 @@ input { |
| 218 | border-top: 1px solid #eee; | 220 | border-top: 1px solid #eee; |
| 219 | margin-top: 2.5rem ; | 221 | margin-top: 2.5rem ; |
| 220 | } | 222 | } |
| 221 | 223 | ||
| 222 | .tips { | 224 | .tips { |
| 223 | display: flex; | 225 | display: flex; |
| 224 | justify-content: flex-start; | 226 | justify-content: flex-start; |
| ... | @@ -234,7 +236,7 @@ input { | ... | @@ -234,7 +236,7 @@ input { |
| 234 | color: $cOrange; | 236 | color: $cOrange; |
| 235 | } | 237 | } |
| 236 | } | 238 | } |
| 237 | 239 | ||
| 238 | .contact { | 240 | .contact { |
| 239 | text-align: center; | 241 | text-align: center; |
| 240 | cursor: pointer; | 242 | cursor: pointer; |
| ... | @@ -242,7 +244,7 @@ input { | ... | @@ -242,7 +244,7 @@ input { |
| 242 | font-weight: 600; | 244 | font-weight: 600; |
| 243 | } | 245 | } |
| 244 | } | 246 | } |
| 245 | 247 | ||
| 246 | 248 | ||
| 247 | .form { | 249 | .form { |
| 248 | display: flex; | 250 | display: flex; |
| ... | @@ -466,7 +468,7 @@ input { | ... | @@ -466,7 +468,7 @@ input { |
| 466 | .label { | 468 | .label { |
| 467 | min-width: 30%; | 469 | min-width: 30%; |
| 468 | } | 470 | } |
| 469 | 471 | ||
| 470 | .ipt-wrap { | 472 | .ipt-wrap { |
| 471 | width: 70%; | 473 | width: 70%; |
| 472 | } | 474 | } |
| ... | @@ -478,7 +480,7 @@ input { | ... | @@ -478,7 +480,7 @@ input { |
| 478 | } | 480 | } |
| 479 | } | 481 | } |
| 480 | } | 482 | } |
| 481 | } | 483 | } |
| 482 | 484 | ||
| 483 | @media (max-width: 600px) { | 485 | @media (max-width: 600px) { |
| 484 | .reservation-container { | 486 | .reservation-container { |
| ... | @@ -492,7 +494,7 @@ input { | ... | @@ -492,7 +494,7 @@ input { |
| 492 | .label { | 494 | .label { |
| 493 | min-width: 30%; | 495 | min-width: 30%; |
| 494 | } | 496 | } |
| 495 | 497 | ||
| 496 | .ipt-wrap { | 498 | .ipt-wrap { |
| 497 | width: 70%; | 499 | width: 70%; |
| 498 | } | 500 | } |
| ... | @@ -539,4 +541,4 @@ input { | ... | @@ -539,4 +541,4 @@ input { |
| 539 | .reservation-container-2 { | 541 | .reservation-container-2 { |
| 540 | padding: 1.666667rem 1rem; | 542 | padding: 1.666667rem 1rem; |
| 541 | } | 543 | } |
| 542 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 544 | } | ... | ... |
| 1 | |||
| 2 | <template> | ||
| 3 | <div class="reservation-container"> | ||
| 4 | <div class="submit-btn" @click="toClarms">下一步</div> | ||
| 5 | </div> | ||
| 6 | <!-- <div> | ||
| 7 | <template v-if="step == 3"> | ||
| 8 | <div class="alert"> | ||
| 9 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
| 10 | <div class="txt"> | ||
| 11 | {{$t('customService.unauth.baseInfoTip')}} | ||
| 12 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> | ||
| 13 | {{$t('customService.unauth.baseInfoTail')}} | ||
| 14 | </div> | ||
| 15 | </div> | ||
| 16 | </template> | ||
| 17 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
| 18 | <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two> | ||
| 19 | <div class="mobile-margin"> | ||
| 20 | |||
| 21 | <template v-if="step == 1"> | ||
| 22 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> | ||
| 23 | </template> | ||
| 24 | |||
| 25 | <template v-if="step == 2"> | ||
| 26 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | ||
| 27 | </template> | ||
| 28 | </div> | ||
| 29 | </div> --> | ||
| 30 | </template> | ||
| 31 | |||
| 32 | <script src="./clarms-comp.js"></script> | ||
| 33 | <style lang="scss" scoped> | ||
| 34 | @import "./clarms-comp.scss"; | ||
| 35 | </style> |
| ... | @@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue' | ... | @@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue' |
| 14 | import PolicyChangeGuide from './components/policy-change-guide.vue' | 14 | import PolicyChangeGuide from './components/policy-change-guide.vue' |
| 15 | import PolicyChangeContact from './components/policy-change-contact.vue' | 15 | import PolicyChangeContact from './components/policy-change-contact.vue' |
| 16 | import PolicyChangeInformation from './components/policy-change-information.vue' | 16 | import PolicyChangeInformation from './components/policy-change-information.vue' |
| 17 | import Clarms from './components/clarms.vue' | 17 | import Clarms from './components/clarms-comp.vue' |
| 18 | 18 | ||
| 19 | export default { | 19 | export default { |
| 20 | data() { | 20 | data() { | ... | ... |
| ... | @@ -82,6 +82,7 @@ | ... | @@ -82,6 +82,7 @@ |
| 82 | 82 | ||
| 83 | .right-panel { | 83 | .right-panel { |
| 84 | max-width: 975px; | 84 | max-width: 975px; |
| 85 | width: 975px; | ||
| 85 | background-color: #ffffff; | 86 | background-color: #ffffff; |
| 86 | 87 | ||
| 87 | .panel { | 88 | .panel { |
| ... | @@ -106,8 +107,10 @@ | ... | @@ -106,8 +107,10 @@ |
| 106 | .left-panel { | 107 | .left-panel { |
| 107 | display: none; | 108 | display: none; |
| 108 | } | 109 | } |
| 109 | .right-panel{ | 110 | |
| 111 | .right-panel { | ||
| 110 | margin: 0 auto; | 112 | margin: 0 auto; |
| 113 | |||
| 111 | } | 114 | } |
| 112 | } | 115 | } |
| 113 | 116 | ... | ... |
| ... | @@ -189,7 +189,7 @@ export default { | ... | @@ -189,7 +189,7 @@ export default { |
| 189 | this.$set(this, 'bannerList', bannerList); | 189 | this.$set(this, 'bannerList', bannerList); |
| 190 | console.log(this.bannerList); | 190 | console.log(this.bannerList); |
| 191 | 191 | ||
| 192 | this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPlayer); | 192 | this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster); |
| 193 | // 设置标题 | 193 | // 设置标题 |
| 194 | document.title = targetData.productName; | 194 | document.title = targetData.productName; |
| 195 | 195 | ... | ... |
| ... | @@ -276,6 +276,14 @@ const routes = [ | ... | @@ -276,6 +276,14 @@ const routes = [ |
| 276 | meta: { | 276 | meta: { |
| 277 | title: '平安人寿香港' | 277 | title: '平安人寿香港' |
| 278 | } | 278 | } |
| 279 | }, | ||
| 280 | { | ||
| 281 | path: '/clarms', | ||
| 282 | name: 'clarms', | ||
| 283 | component: () => import('./pages/clarms/clarms.vue'), | ||
| 284 | meta: { | ||
| 285 | title: '平安人寿香港' | ||
| 286 | } | ||
| 279 | } | 287 | } |
| 280 | // 404页面 | 288 | // 404页面 |
| 281 | // { | 289 | // { |
| ... | @@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => { | ... | @@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => { |
| 306 | case "zh": | 314 | case "zh": |
| 307 | lang = zh; | 315 | lang = zh; |
| 308 | break; | 316 | break; |
| 309 | // 英文 | 317 | // 英文 |
| 310 | case "en": | 318 | case "en": |
| 311 | defaultTitle = "Ping An Life Hong Kong" | 319 | defaultTitle = "Ping An Life Hong Kong" |
| 312 | lang = en; | 320 | lang = en; |
| 313 | break; | 321 | break; |
| 314 | // 繁体 | 322 | // 繁体 |
| 315 | default: | 323 | default: |
| 316 | defaultTitle = "平安人壽香港" | 324 | defaultTitle = "平安人壽香港" |
| 317 | lang = tc; | 325 | lang = tc; | ... | ... |
-
Please register or sign in to post a comment