默认提交
Showing
13 changed files
with
291 additions
and
165 deletions
| ... | @@ -437,7 +437,8 @@ textarea { | ... | @@ -437,7 +437,8 @@ textarea { |
| 437 | } | 437 | } |
| 438 | 438 | ||
| 439 | .clarms .el-input__inner { | 439 | .clarms .el-input__inner { |
| 440 | font-size: 22px; | 440 | font-size: 22px; |
| 441 | border: none; | ||
| 441 | } | 442 | } |
| 442 | 443 | ||
| 443 | @media (max-width: 1200px) { | 444 | @media (max-width: 1200px) { | ... | ... |
| ... | @@ -59,25 +59,42 @@ input { | ... | @@ -59,25 +59,42 @@ input { |
| 59 | .reservation-container-2 { | 59 | .reservation-container-2 { |
| 60 | @extend .bb; | 60 | @extend .bb; |
| 61 | border-radius: .666667rem; | 61 | border-radius: .666667rem; |
| 62 | border: solid 2px $cOrange; | 62 | // border: solid 2px $cOrange; |
| 63 | background-color: #ffffff; | 63 | background-color: #ffffff; |
| 64 | // padding: 1.666667rem 10rem 2.833333rem 10rem; | 64 | // padding: 1.666667rem 10rem 2.833333rem 10rem; |
| 65 | padding: 20px 100px 72px; | 65 | padding: 20px 100px 72px; |
| 66 | 66 | ||
| 67 | .clarms-border { | 67 | .clarms-border { |
| 68 | box-sizing: border-box; | 68 | position: relative; |
| 69 | padding: .166667rem; | 69 | @extend .bb; |
| 70 | border-radius: .416667rem; | 70 | @extend .fcc; |
| 71 | padding: 2px; | ||
| 71 | background-image: linear-gradient(to right, #ffb31d, #f15907); | 72 | background-image: linear-gradient(to right, #ffb31d, #f15907); |
| 72 | margin: 0 1.25rem; | 73 | width: 482px; |
| 73 | min-width: 25rem; | 74 | height: 62px; |
| 75 | margin: 0 24px; | ||
| 76 | border-radius: 8px; | ||
| 74 | 77 | ||
| 75 | .clarms-select { | 78 | .clarms-select { |
| 76 | width: 100%; | 79 | width: 100%; |
| 77 | } | 80 | } |
| 81 | |||
| 82 | .down-arrow { | ||
| 83 | z-index: 10; | ||
| 84 | position: absolute; | ||
| 85 | top: 26px; | ||
| 86 | right: 1.2rem; | ||
| 87 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | ||
| 88 | background-size: 100% 100%; | ||
| 89 | width: 15px; | ||
| 90 | height: 10px; | ||
| 91 | pointer-events: none; | ||
| 92 | cursor: default; | ||
| 93 | } | ||
| 78 | } | 94 | } |
| 79 | 95 | ||
| 80 | .title { | 96 | .title { |
| 97 | |||
| 81 | color: #ff6839; | 98 | color: #ff6839; |
| 82 | text-align: center; | 99 | text-align: center; |
| 83 | // margin: 1.666667rem auto 0 auto; | 100 | // margin: 1.666667rem auto 0 auto; |
| ... | @@ -86,12 +103,12 @@ input { | ... | @@ -86,12 +103,12 @@ input { |
| 86 | justify-content: center; | 103 | justify-content: center; |
| 87 | font-weight: 600; | 104 | font-weight: 600; |
| 88 | letter-spacing: .25rem; | 105 | letter-spacing: .25rem; |
| 89 | font-size: 1.5rem; | ||
| 90 | 106 | ||
| 91 | .t1 { | 107 | .t1 { |
| 92 | font-size: 24px; | 108 | font-size: 36px; |
| 93 | font-weight: bold; | 109 | font-weight: bold; |
| 94 | } | 110 | } |
| 111 | |||
| 95 | } | 112 | } |
| 96 | 113 | ||
| 97 | .default-mt { | 114 | .default-mt { |
| ... | @@ -242,13 +259,22 @@ input { | ... | @@ -242,13 +259,22 @@ input { |
| 242 | padding-left: 15px; | 259 | padding-left: 15px; |
| 243 | } | 260 | } |
| 244 | 261 | ||
| 262 | .cont { | ||
| 263 | @extend .bb; | ||
| 264 | @extend .fcc; | ||
| 265 | padding: 2px; | ||
| 266 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 267 | height: 62px; | ||
| 268 | border-radius: 8px; | ||
| 269 | } | ||
| 270 | |||
| 245 | .ipt-date { | 271 | .ipt-date { |
| 246 | width: 100%; | 272 | width: 100%; |
| 247 | border: 1px solid #ff6839 !important; | 273 | background-color: #ffffff; |
| 248 | border-radius: .416667rem; | 274 | // padding-left: .833333rem; |
| 249 | height: 3rem; | 275 | // border-radius: 0; |
| 250 | align-items: center; | 276 | height: 58px; |
| 251 | padding-left: .833333rem; | 277 | border-radius: 8px; |
| 252 | } | 278 | } |
| 253 | 279 | ||
| 254 | &-item { | 280 | &-item { |
| ... | @@ -294,8 +320,8 @@ input { | ... | @@ -294,8 +320,8 @@ input { |
| 294 | right: 1.2rem; | 320 | right: 1.2rem; |
| 295 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 321 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
| 296 | background-size: 100% 100%; | 322 | background-size: 100% 100%; |
| 297 | width: .633333rem; | 323 | width: 15px; |
| 298 | height: .433333rem; | 324 | height: 10px; |
| 299 | pointer-events: none; | 325 | pointer-events: none; |
| 300 | cursor: default; | 326 | cursor: default; |
| 301 | } | 327 | } |
| ... | @@ -342,6 +368,7 @@ input { | ... | @@ -342,6 +368,7 @@ input { |
| 342 | .date-container { | 368 | .date-container { |
| 343 | width: 60%; | 369 | width: 60%; |
| 344 | position: relative; | 370 | position: relative; |
| 371 | // background-color: wheat; | ||
| 345 | } | 372 | } |
| 346 | 373 | ||
| 347 | .value { | 374 | .value { |
| ... | @@ -357,6 +384,7 @@ input { | ... | @@ -357,6 +384,7 @@ input { |
| 357 | height: 3rem; | 384 | height: 3rem; |
| 358 | display: flex; | 385 | display: flex; |
| 359 | align-items: center; | 386 | align-items: center; |
| 387 | |||
| 360 | } | 388 | } |
| 361 | 389 | ||
| 362 | 390 | ||
| ... | @@ -379,16 +407,17 @@ input { | ... | @@ -379,16 +407,17 @@ input { |
| 379 | .down-arrow { | 407 | .down-arrow { |
| 380 | z-index: 10; | 408 | z-index: 10; |
| 381 | position: absolute; | 409 | position: absolute; |
| 382 | top: 1.3rem; | 410 | top: 26px; |
| 383 | right: 1.2rem; | 411 | right: 1.2rem; |
| 384 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 412 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
| 385 | background-size: 100% 100%; | 413 | background-size: 100% 100%; |
| 386 | width: .633333rem; | 414 | width: 15px; |
| 387 | height: .433333rem; | 415 | height: 10px; |
| 388 | pointer-events: none; | 416 | pointer-events: none; |
| 389 | cursor: default; | 417 | cursor: default; |
| 390 | } | 418 | } |
| 391 | } | 419 | } |
| 420 | |||
| 392 | } | 421 | } |
| 393 | } | 422 | } |
| 394 | } | 423 | } | ... | ... |
This diff is collapsed.
Click to expand it.
| ... | @@ -21,16 +21,22 @@ | ... | @@ -21,16 +21,22 @@ |
| 21 | background: rgba($color: #000000, $alpha: 0.7); | 21 | background: rgba($color: #000000, $alpha: 0.7); |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | .border { | ||
| 25 | position: relative; | ||
| 26 | @extend .bb; | ||
| 27 | @extend .fcc; | ||
| 28 | padding: 2px; | ||
| 29 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 30 | border-radius: 16px; | ||
| 31 | } | ||
| 32 | |||
| 24 | .modal { | 33 | .modal { |
| 25 | position: relative; | 34 | position: relative; |
| 26 | @extend .bb; | 35 | @extend .bb; |
| 27 | width: 800px; | 36 | width: 800px; |
| 28 | // height: 28.5rem; | 37 | border-radius: 16px; |
| 29 | border-radius: .8333rem; | ||
| 30 | background-color: #ffffff; | 38 | background-color: #ffffff; |
| 31 | padding: 3.5rem 2rem 2.5rem; | 39 | padding: 3.5rem 2rem 2.5rem; |
| 32 | border: .083333rem solid $cOrange; | ||
| 33 | |||
| 34 | 40 | ||
| 35 | .content { | 41 | .content { |
| 36 | display: flex; | 42 | display: flex; |
| ... | @@ -76,7 +82,7 @@ | ... | @@ -76,7 +82,7 @@ |
| 76 | } | 82 | } |
| 77 | 83 | ||
| 78 | 84 | ||
| 79 | @media (max-width: 800px) { | 85 | @media (max-width: 768px) { |
| 80 | .modal { | 86 | .modal { |
| 81 | // height: 28.5rem; | 87 | // height: 28.5rem; |
| 82 | padding: 3rem 1.5rem; | 88 | padding: 3rem 1.5rem; | ... | ... |
| 1 | 1 | ||
| 2 | <template> | 2 | <template> |
| 3 | <div class="comp"> | 3 | <div class="comp"> |
| 4 | <div @click="onOverLayHandler()" class="overlay"></div> | 4 | <div @click="onOverLayHandler()" class="overlay"></div> |
| 5 | <div class="modal"> | 5 | <div class="border"> |
| 6 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> | 6 | <div class="modal"> |
| 7 | <div class="content"> | 7 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> |
| 8 | <div class="info-icon"> | 8 | <div class="content"> |
| 9 | <img src="@/assets/images/clarms/info.png"> | 9 | <div class="info-icon"> |
| 10 | </div> | 10 | <img src="@/assets/images/clarms/info.png"> |
| 11 | <div class="message"> | 11 | </div> |
| 12 | {{$t('clarms.step2.tip5')}}<span @click="toContact">{{$t('clarms.step2.tip6')}}</span> | 12 | <div class="message"> |
| 13 | </div> | 13 | {{$t('clarms.step2.tip5')}} |
| 14 | </div> | 14 | <span @click="toContact">{{$t('clarms.step2.tip6')}}</span> |
| 15 | </div> | 15 | </div> |
| 16 | </div> | 16 | </div> |
| 17 | </div> | ||
| 18 | </div> | ||
| 19 | </div> | ||
| 17 | </template> | 20 | </template> |
| 18 | 21 | ||
| 19 | <script src="./clarms-plugins-modal1.js"></script> | 22 | <script src="./clarms-plugins-modal1.js"></script> | ... | ... |
| ... | @@ -21,15 +21,22 @@ | ... | @@ -21,15 +21,22 @@ |
| 21 | background: rgba($color: #000000, $alpha: 0.7); | 21 | background: rgba($color: #000000, $alpha: 0.7); |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | .border { | ||
| 25 | position: relative; | ||
| 26 | @extend .bb; | ||
| 27 | @extend .fcc; | ||
| 28 | padding: 2px; | ||
| 29 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 30 | border-radius: 16px; | ||
| 31 | } | ||
| 32 | |||
| 24 | .modal { | 33 | .modal { |
| 25 | position: relative; | 34 | position: relative; |
| 26 | @extend .bb; | 35 | @extend .bb; |
| 27 | width: 800px; | 36 | width: 800px; |
| 28 | // height: 28.5rem; | 37 | border-radius: 16px; |
| 29 | border-radius: .8333rem; | ||
| 30 | background-color: #ffffff; | 38 | background-color: #ffffff; |
| 31 | padding: 3.5rem 2rem 2.5rem; | 39 | padding: 3.5rem 2rem 2.5rem; |
| 32 | border: .083333rem solid $cOrange; | ||
| 33 | 40 | ||
| 34 | 41 | ||
| 35 | .content { | 42 | .content { | ... | ... |
| 1 | 1 | ||
| 2 | <template> | 2 | <template> |
| 3 | <div class="comp"> | 3 | <div class="comp"> |
| 4 | <div @click="onOverLayHandler()" class="overlay"></div> | 4 | <div @click="onOverLayHandler()" class="overlay"></div> |
| 5 | <div class="modal"> | 5 | <div class="border"> |
| 6 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> | 6 | <div class="modal"> |
| 7 | <div class="content"> | 7 | <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> |
| 8 | <div class="info-icon"> | 8 | <div class="content"> |
| 9 | <img src="@/assets/images/clarms/suc.png"> | 9 | <div class="info-icon"> |
| 10 | </div> | 10 | <img src="@/assets/images/clarms/suc.png"> |
| 11 | <div class="message"> | 11 | </div> |
| 12 | {{$t('clarms.step2.tip7')}}<span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span> | 12 | <div class="message"> |
| 13 | </div> | 13 | {{$t('clarms.step2.tip7')}} |
| 14 | </div> | 14 | <span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span> |
| 15 | </div> | 15 | </div> |
| 16 | </div> | 16 | </div> |
| 17 | </div> | ||
| 18 | </div> | ||
| 19 | |||
| 20 | </div> | ||
| 17 | </template> | 21 | </template> |
| 18 | 22 | ||
| 19 | <script src="./clarms-plugins-modal2.js"></script> | 23 | <script src="./clarms-plugins-modal2.js"></script> | ... | ... |
| ... | @@ -82,7 +82,8 @@ export default { | ... | @@ -82,7 +82,8 @@ export default { |
| 82 | let input = document.createElement("input"); | 82 | let input = document.createElement("input"); |
| 83 | input.setAttribute("type", "file"); | 83 | input.setAttribute("type", "file"); |
| 84 | input.setAttribute("multiple", "multiple"); | 84 | input.setAttribute("multiple", "multiple"); |
| 85 | input.setAttribute("accept", "image/*"); | 85 | // input.setAttribute("accept", "image/*"); |
| 86 | input.setAttribute("accept", "image/jpeg"); | ||
| 86 | input.onchange = function (val) { | 87 | input.onchange = function (val) { |
| 87 | let position = _this.images.length; | 88 | let position = _this.images.length; |
| 88 | for (let index = 0; index < input.files.length; index++) { | 89 | for (let index = 0; index < input.files.length; index++) { | ... | ... |
| ... | @@ -6,7 +6,8 @@ | ... | @@ -6,7 +6,8 @@ |
| 6 | 6 | ||
| 7 | 7 | ||
| 8 | .orange { | 8 | .orange { |
| 9 | color: $cOrange; | 9 | // color: $cOrange; |
| 10 | color: #ff6839; | ||
| 10 | } | 11 | } |
| 11 | 12 | ||
| 12 | .gray { | 13 | .gray { |
| ... | @@ -14,6 +15,7 @@ | ... | @@ -14,6 +15,7 @@ |
| 14 | } | 15 | } |
| 15 | 16 | ||
| 16 | 17 | ||
| 18 | |||
| 17 | .submit-btn { | 19 | .submit-btn { |
| 18 | background: url("~@assets/images/vhis/vhis-btn.png"); | 20 | background: url("~@assets/images/vhis/vhis-btn.png"); |
| 19 | background-size: 100% 100%; | 21 | background-size: 100% 100%; |
| ... | @@ -24,7 +26,7 @@ | ... | @@ -24,7 +26,7 @@ |
| 24 | color: white; | 26 | color: white; |
| 25 | font-weight: 600; | 27 | font-weight: 600; |
| 26 | cursor: pointer; | 28 | cursor: pointer; |
| 27 | margin: 2.5rem auto; | 29 | margin: 100px auto 32px; |
| 28 | text-align: center; | 30 | text-align: center; |
| 29 | border-radius: 50px; | 31 | border-radius: 50px; |
| 30 | } | 32 | } |
| ... | @@ -32,9 +34,10 @@ | ... | @@ -32,9 +34,10 @@ |
| 32 | .reservation-container { | 34 | .reservation-container { |
| 33 | @extend .bb; | 35 | @extend .bb; |
| 34 | border-radius: .666667rem; | 36 | border-radius: .666667rem; |
| 35 | border: solid 2px $cOrange; | 37 | // border: solid 2px $cOrange; |
| 36 | background-color: #ffffff; | 38 | background-color: #ffffff; |
| 37 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 39 | // padding: 2.666667rem 10rem 2.833333rem 10rem; |
| 40 | padding: 60px 82px 68px; | ||
| 38 | 41 | ||
| 39 | .title { | 42 | .title { |
| 40 | // font-size: 1.333333rem; | 43 | // font-size: 1.333333rem; |
| ... | @@ -48,7 +51,7 @@ | ... | @@ -48,7 +51,7 @@ |
| 48 | } | 51 | } |
| 49 | 52 | ||
| 50 | .default-mt { | 53 | .default-mt { |
| 51 | margin-top: 2.666667rem; | 54 | margin-top: 50px; |
| 52 | } | 55 | } |
| 53 | 56 | ||
| 54 | .flex-top { | 57 | .flex-top { |
| ... | @@ -106,26 +109,32 @@ | ... | @@ -106,26 +109,32 @@ |
| 106 | } | 109 | } |
| 107 | 110 | ||
| 108 | .ipt-date { | 111 | .ipt-date { |
| 109 | width: 100%; | 112 | // width: 100%; |
| 110 | border: 1px solid $cOrange !important; | 113 | // border: 1px solid $cOrange !important; |
| 111 | border-radius: .416667rem; | 114 | // border-radius: .416667rem; |
| 112 | height: 3rem; | 115 | // height: 3rem; |
| 113 | align-items: center; | 116 | // align-items: center; |
| 114 | padding: 0 2rem; | 117 | padding: 0 2rem; |
| 115 | 118 | ||
| 119 | width: 100%; | ||
| 120 | background-color: #ffffff; | ||
| 121 | height: 48px; | ||
| 122 | border-radius: 8px; | ||
| 116 | } | 123 | } |
| 117 | 124 | ||
| 118 | &-item { | 125 | &-item { |
| 119 | width: 50%; | 126 | width: 48%; |
| 120 | display: flex; | 127 | display: flex; |
| 121 | justify-content: center; | 128 | justify-content: center; |
| 122 | padding: 0 $marginSmall; | 129 | justify-content: space-between; |
| 123 | margin-bottom: 1.333333rem; | 130 | // padding: 0 $marginSmall; |
| 131 | margin-bottom: 32px; | ||
| 124 | 132 | ||
| 125 | .label { | 133 | .label { |
| 126 | display: flex; | 134 | display: flex; |
| 127 | align-items: center; | 135 | align-items: center; |
| 128 | width: 30%; | 136 | // width: 30%; |
| 137 | width: 140px; | ||
| 129 | justify-content: flex-start; | 138 | justify-content: flex-start; |
| 130 | padding-left: 5px; | 139 | padding-left: 5px; |
| 131 | letter-spacing: .25rem; | 140 | letter-spacing: .25rem; |
| ... | @@ -133,16 +142,31 @@ | ... | @@ -133,16 +142,31 @@ |
| 133 | 142 | ||
| 134 | .ipt-wrap { | 143 | .ipt-wrap { |
| 135 | 144 | ||
| 136 | width: 70%; | 145 | width: 352px; |
| 137 | position: relative; | 146 | position: relative; |
| 138 | 147 | ||
| 148 | .cont { | ||
| 149 | @extend .bb; | ||
| 150 | @extend .fcc; | ||
| 151 | padding: 2px; | ||
| 152 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 153 | height: 52px; | ||
| 154 | border-radius: 8px; | ||
| 155 | } | ||
| 156 | |||
| 139 | // input和下拉 | 157 | // input和下拉 |
| 140 | .ipt { | 158 | .ipt { |
| 141 | border: 1px solid $cOrange !important; | 159 | // border: 1px solid $cOrange !important; |
| 160 | border: none !important; | ||
| 142 | border-radius: .416667rem; | 161 | border-radius: .416667rem; |
| 143 | height: 3rem; | 162 | height: 3rem; |
| 144 | display: flex; | 163 | // display: flex; |
| 145 | align-items: center; | 164 | // align-items: center; |
| 165 | |||
| 166 | width: 100%; | ||
| 167 | background-color: #ffffff; | ||
| 168 | height: 48px; | ||
| 169 | border-radius: 8px; | ||
| 146 | 170 | ||
| 147 | } | 171 | } |
| 148 | 172 | ||
| ... | @@ -156,12 +180,12 @@ | ... | @@ -156,12 +180,12 @@ |
| 156 | .down-arrow { | 180 | .down-arrow { |
| 157 | z-index: 10; | 181 | z-index: 10; |
| 158 | position: absolute; | 182 | position: absolute; |
| 159 | top: 1.3rem; | 183 | top: 22px; |
| 160 | right: 1.2rem; | 184 | right: 1.2rem; |
| 161 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 185 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
| 162 | background-size: 100% 100%; | 186 | background-size: 100% 100%; |
| 163 | width: .633333rem; | 187 | width: 15px; |
| 164 | height: .433333rem; | 188 | height: 10px; |
| 165 | pointer-events: none; | 189 | pointer-events: none; |
| 166 | cursor: default; | 190 | cursor: default; |
| 167 | } | 191 | } |
| ... | @@ -242,12 +266,12 @@ | ... | @@ -242,12 +266,12 @@ |
| 242 | .down-arrow { | 266 | .down-arrow { |
| 243 | z-index: 10; | 267 | z-index: 10; |
| 244 | position: absolute; | 268 | position: absolute; |
| 245 | top: 1.3rem; | 269 | top: 22px; |
| 246 | right: 1.2rem; | 270 | right: 1.2rem; |
| 247 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); | 271 | background-image: url('~@/assets/images/reservation/re-down-arrow-2.png'); |
| 248 | background-size: 100% 100%; | 272 | background-size: 100% 100%; |
| 249 | width: .633333rem; | 273 | width: 15px; |
| 250 | height: .433333rem; | 274 | height: 10px; |
| 251 | pointer-events: none; | 275 | pointer-events: none; |
| 252 | cursor: default; | 276 | cursor: default; |
| 253 | } | 277 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="comp reservation-container"> | 2 | <div class="comp reservation-container clarms-plugins-verifyform"> |
| 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)"> |
| 4 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> | 4 | <u> |
| 5 | <div class="gird-g form default-mt"> | 5 | <span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/ |
| 6 | <div class="form-item"> | 6 | <span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span> |
| 7 | <div class="label"> | 7 | </u>{{$t('clarms.step1.t1')}}</div> |
| 8 | {{$t('clarms.step1.label1')}} | 8 | <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> |
| 9 | </div> | 9 | <div class="gird-g form default-mt"> |
| 10 | <div class="ipt-wrap"> | 10 | <div class="form-item"> |
| 11 | <input class="ipt" type="text" v-model="data.lastName"> | 11 | <div class="label"> |
| 12 | </div> | 12 | {{$t('clarms.step1.label1')}} |
| 13 | </div> | 13 | </div> |
| 14 | <div class="ipt-wrap"> | ||
| 15 | <div class="cont"> | ||
| 16 | <input class="ipt" type="text" v-model="data.lastName"> | ||
| 17 | </div> | ||
| 18 | </div> | ||
| 19 | </div> | ||
| 14 | 20 | ||
| 15 | <div class="form-item"> | 21 | <div class="form-item"> |
| 16 | <div class="label"> | 22 | <div class="label"> |
| 17 | {{$t('clarms.step1.label2')}} | 23 | {{$t('clarms.step1.label2')}} |
| 18 | </div> | 24 | </div> |
| 19 | <div class="ipt-wrap"> | 25 | <div class="ipt-wrap"> |
| 20 | <input class="ipt" type="text" v-model="data.firstName"> | 26 | <div class="cont"> |
| 21 | </div> | ||
| 22 | </div> | ||
| 23 | 27 | ||
| 24 | <div class="form-item"> | 28 | <input class="ipt" type="text" v-model="data.firstName"> |
| 25 | <div class="label"> | 29 | </div> |
| 26 | {{$t('clarms.step1.label3')}} | 30 | </div> |
| 27 | </div> | 31 | </div> |
| 28 | <div class="ipt-wrap"> | ||
| 29 | <div class="down-arrow"></div> | ||
| 30 | <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> | ||
| 31 | <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option> | ||
| 32 | </el-select> | ||
| 33 | </div> | ||
| 34 | </div> | ||
| 35 | 32 | ||
| 36 | <div class="form-item"> | 33 | <div class="form-item"> |
| 37 | <div class="label"> | 34 | <div class="label"> |
| 38 | {{$t('clarms.step1.label4')}} | 35 | {{$t('clarms.step1.label3')}} |
| 39 | </div> | 36 | </div> |
| 40 | <div class="ipt-wrap"> | 37 | <div class="ipt-wrap"> |
| 41 | <input class="ipt" type="text" v-model="data.idNo"> | 38 | <div class="down-arrow"></div> |
| 42 | </div> | 39 | <div class="cont"> |
| 43 | </div> | 40 | <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')"> |
| 41 | <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option> | ||
| 42 | </el-select> | ||
| 43 | </div> | ||
| 44 | 44 | ||
| 45 | <div class="form-item"> | 45 | </div> |
| 46 | <div class="label"> | 46 | </div> |
| 47 | {{$t('clarms.step1.label5')}} | 47 | |
| 48 | </div> | 48 | <div class="form-item"> |
| 49 | <div class="ipt-wrap"> | 49 | <div class="label"> |
| 50 | <div class="down-arrow"></div> | 50 | {{$t('clarms.step1.label4')}} |
| 51 | <date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', padding:'0', color:'#606266'}"></date-picker> | 51 | </div> |
| 52 | </div> | 52 | <div class="ipt-wrap"> |
| 53 | </div> | 53 | <div class="cont"> |
| 54 | </div> | 54 | <input class="ipt" type="text" v-model="data.idNo"> |
| 55 | <div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}"> | 55 | </div> |
| 56 | <van-loading v-if="loading" /> | 56 | </div> |
| 57 | <span>{{$t('clarms.step1.btn')}}</span> | 57 | </div> |
| 58 | </div> | 58 | |
| 59 | <div class="tips" v-if="showTips"> | 59 | <div class="form-item"> |
| 60 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | 60 | <div class="label"> |
| 61 | <div class="txt"> | 61 | {{$t('clarms.step1.label5')}} |
| 62 | {{$t('clarms.step1.noPolicy')}} | 62 | </div> |
| 63 | <span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span> | 63 | <div class="ipt-wrap"> |
| 64 | </div> | 64 | <div class="down-arrow"></div> |
| 65 | </div> | 65 | <div class="cont"> |
| 66 | </div> | 66 | <date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'48px', padding:'0', color:'#606266'}"></date-picker> |
| 67 | </div> | ||
| 68 | </div> | ||
| 69 | </div> | ||
| 70 | </div> | ||
| 71 | <div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}"> | ||
| 72 | <van-loading v-if="loading" /> | ||
| 73 | <span>{{$t('clarms.step1.btn')}}</span> | ||
| 74 | </div> | ||
| 75 | <div class="tips" v-if="showTips"> | ||
| 76 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
| 77 | <div class="txt"> | ||
| 78 | {{$t('clarms.step1.noPolicy')}} | ||
| 79 | <span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span> | ||
| 80 | </div> | ||
| 81 | </div> | ||
| 82 | </div> | ||
| 67 | </template> | 83 | </template> |
| 68 | 84 | ||
| 69 | <script src="./clarms-plugins-verifyform.js"></script> | 85 | <script src="./clarms-plugins-verifyform.js"></script> | ... | ... |
| 1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
| 2 | 2 | ||
| 3 | $borderSize:8px; | ||
| 4 | |||
| 3 | .content { | 5 | .content { |
| 4 | // padding-bottom: 2.33rem; | ||
| 5 | margin: 2.333333rem auto; | 6 | margin: 2.333333rem auto; |
| 6 | position: relative; | 7 | position: relative; |
| 8 | |||
| 9 | } | ||
| 10 | |||
| 11 | .clarms { | ||
| 12 | background-image: linear-gradient(to right, #ffb31d, #f15907); | ||
| 13 | @extend .bb; | ||
| 14 | @extend .fcc; | ||
| 15 | padding: 2px; | ||
| 16 | border-radius: $borderSize; | ||
| 17 | |||
| 18 | &-cont { | ||
| 19 | width: 100%; | ||
| 20 | height: 100%; | ||
| 21 | background-color: #ffffff; | ||
| 22 | border-radius: $borderSize; | ||
| 23 | } | ||
| 7 | } | 24 | } |
| 8 | 25 | ||
| 9 | 26 | ||
| ... | @@ -13,7 +30,8 @@ input { | ... | @@ -13,7 +30,8 @@ input { |
| 13 | } | 30 | } |
| 14 | 31 | ||
| 15 | .orange { | 32 | .orange { |
| 16 | color: $cOrange; | 33 | // color: $cOrange; |
| 34 | color: #ff6839; | ||
| 17 | } | 35 | } |
| 18 | 36 | ||
| 19 | .gray { | 37 | .gray { |
| ... | @@ -71,9 +89,9 @@ input { | ... | @@ -71,9 +89,9 @@ input { |
| 71 | .reservation-container { | 89 | .reservation-container { |
| 72 | @extend .bb; | 90 | @extend .bb; |
| 73 | border-radius: .666667rem; | 91 | border-radius: .666667rem; |
| 74 | border: solid 2px $cOrange; | 92 | // border: solid 2px $cOrange; |
| 75 | background-color: #ffffff; | 93 | background-color: #ffffff; |
| 76 | padding: 2.666667rem 10rem 2.833333rem 10rem; | 94 | // padding: 2.666667rem 10rem 2.833333rem 10rem; |
| 77 | 95 | ||
| 78 | .title { | 96 | .title { |
| 79 | font-size: 1.333333rem; | 97 | font-size: 1.333333rem; |
| ... | @@ -118,7 +136,7 @@ input { | ... | @@ -118,7 +136,7 @@ input { |
| 118 | .reservation-container-2 { | 136 | .reservation-container-2 { |
| 119 | @extend .bb; | 137 | @extend .bb; |
| 120 | border-radius: .666667rem; | 138 | border-radius: .666667rem; |
| 121 | border: solid .083333rem $cOrange; | 139 | // border: solid .083333rem $cOrange; |
| 122 | background-color: #ffffff; | 140 | background-color: #ffffff; |
| 123 | padding: 1.666667rem 10rem 2.833333rem 10rem; | 141 | padding: 1.666667rem 10rem 2.833333rem 10rem; |
| 124 | 142 | ... | ... |
| ... | @@ -8,29 +8,32 @@ | ... | @@ -8,29 +8,32 @@ |
| 8 | </div> | 8 | </div> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="content clarms"> | 10 | <div class="content clarms"> |
| 11 | <template v-if="step == 3"> | 11 | <div class="clarms-cont"> |
| 12 | <div class="alert"> | 12 | <template v-if="step == 3"> |
| 13 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | 13 | <div class="alert"> |
| 14 | <div class="txt"> | 14 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> |
| 15 | {{$t('customService.unauth.baseInfoTip')}} | 15 | <div class="txt"> |
| 16 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> | 16 | {{$t('customService.unauth.baseInfoTip')}} |
| 17 | {{$t('customService.unauth.baseInfoTail')}} | 17 | <span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span> |
| 18 | {{$t('customService.unauth.baseInfoTail')}} | ||
| 19 | </div> | ||
| 20 | <!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> --> | ||
| 18 | </div> | 21 | </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"> | ||
| 25 | |||
| 26 | <template v-if="step == 1"> | ||
| 27 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> | ||
| 28 | </template> | 22 | </template> |
| 23 | <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one> | ||
| 24 | <clarms-modal-two @close="showModal2 = false"></clarms-modal-two> | ||
| 25 | <div class="mobile-margin"> | ||
| 29 | 26 | ||
| 30 | <template v-if="step == 2"> | 27 | <template v-if="step == 1"> |
| 31 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | 28 | <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form> |
| 32 | </template> | 29 | </template> |
| 30 | |||
| 31 | <template v-if="step == 2"> | ||
| 32 | <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material> | ||
| 33 | </template> | ||
| 34 | </div> | ||
| 33 | </div> | 35 | </div> |
| 36 | |||
| 34 | </div> | 37 | </div> |
| 35 | </div> | 38 | </div> |
| 36 | 39 | ... | ... |
| ... | @@ -36,6 +36,13 @@ export default { | ... | @@ -36,6 +36,13 @@ export default { |
| 36 | if (a == "m4") { | 36 | if (a == "m4") { |
| 37 | a = "m41" | 37 | a = "m41" |
| 38 | } | 38 | } |
| 39 | if(a == "m5"){ | ||
| 40 | this.$router.push({ | ||
| 41 | path: "/clarms", | ||
| 42 | query: {} | ||
| 43 | }); | ||
| 44 | return; | ||
| 45 | } | ||
| 39 | this.$router.push({ | 46 | this.$router.push({ |
| 40 | path: "/custom/service", | 47 | path: "/custom/service", |
| 41 | query: { | 48 | query: { |
| ... | @@ -54,6 +61,13 @@ export default { | ... | @@ -54,6 +61,13 @@ export default { |
| 54 | }, | 61 | }, |
| 55 | created() { | 62 | created() { |
| 56 | let activity = this.$route.query.q; | 63 | let activity = this.$route.query.q; |
| 64 | if(activity == "m5"){ | ||
| 65 | this.$router.push({ | ||
| 66 | path: "/clarms", | ||
| 67 | query: {} | ||
| 68 | }); | ||
| 69 | return; | ||
| 70 | } | ||
| 57 | this.$set(this, 'activity', activity); | 71 | this.$set(this, 'activity', activity); |
| 58 | }, | 72 | }, |
| 59 | components: { | 73 | components: { | ... | ... |
-
Please register or sign in to post a comment