Merge branch 'master' of ssh://192.168.0.10:29418/pcalife/PAM

Jack

2021-11-26 aa5b8b8266912d4b02d432049a66d29f56245115

Merge branch 'master' of ssh://192.168.0.10:29418/pcalife/PAM

 PAMapp/assets/images/questionnaire/reserve_bg_mob.svg

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,154 @@
<svg id="reserve_bg_mob" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="80" viewBox="0 0 375 80">

  <defs>

    <clipPath id="clip-path">

      <rect id="Rectangle_3917" data-name="Rectangle 3917" width="375" height="80" transform="translate(105 -299)" fill="none"/>

    </clipPath>

    <clipPath id="clip-path-2">

      <rect id="Rectangle_3914" data-name="Rectangle 3914" width="6.887" height="2.455" transform="translate(0 0.724) rotate(-6.036)" fill="none"/>

    </clipPath>

    <clipPath id="clip-path-4">

      <rect id="Rectangle_3916" data-name="Rectangle 3916" width="2.229" height="3.846" transform="translate(0 0.388) rotate(-10.018)" fill="none"/>

    </clipPath>

  </defs>

  <g id="Group_3305" data-name="Group 3305" transform="translate(-105 299)">

    <g id="Group_3304" data-name="Group 3304" clip-path="url(#clip-path)">

      <g id="Group_3283" data-name="Group 3283">

        <g id="Group_3282" data-name="Group 3282">

          <path id="Path_7949-2" data-name="Path 7949-2" d="M78.66-200.876h406V-306.537h-406Z" fill="none"/>

          <g id="Group_3268" data-name="Group 3268">

            <g id="Group_3267" data-name="Group 3267">

              <path id="Path_7983" data-name="Path 7983" d="M377.031-261.536l-12.548-.342a6.6,6.6,0,0,0-1.012-.081H301.179a6.356,6.356,0,0,0-6.356,6.356v20.764a6.354,6.354,0,0,0,6.355,6.357H363.47a6.357,6.357,0,0,0,6.357-6.357v-19.836Z" fill="#fff"/>

              <path id="Path_7984" data-name="Path 7984" d="M363.471-227.868H301.179a6.978,6.978,0,0,1-6.966-6.974V-255.6a6.98,6.98,0,0,1,6.971-6.972h62.291a7.089,7.089,0,0,1,1.069.083l12.508.341a.617.617,0,0,1,.6.634.617.617,0,0,1-.19.427l-7.013,6.679v19.569A6.98,6.98,0,0,1,363.471-227.868Zm-62.292-33.474a5.748,5.748,0,0,0-5.741,5.741v20.759a5.747,5.747,0,0,0,5.741,5.741H363.47a5.748,5.748,0,0,0,5.743-5.741v-19.833a.614.614,0,0,1,.191-.445l6.133-5.84-11.069-.3a.531.531,0,0,1-.081-.007,5.85,5.85,0,0,0-.915-.074Z" fill="#5cb8b2"/>

            </g>

            <path id="Path_7985" data-name="Path 7985" d="M345.249-245.9h-36.23a1.23,1.23,0,0,1-1.266-1.2,1.232,1.232,0,0,1,1.2-1.266h36.3a1.231,1.231,0,0,1,1.265,1.2,1.23,1.23,0,0,1-1.2,1.265Z" fill="#5cb8b2"/>

            <path id="Path_7986" data-name="Path 7986" d="M332.961-239.326H309.019a1.231,1.231,0,0,1-1.233-1.229,1.232,1.232,0,0,1,1.23-1.233h23.945a1.231,1.231,0,0,1,1.229,1.233,1.23,1.23,0,0,1-1.229,1.229Z" fill="#5cb8b2"/>

          </g>

          <g id="Group_3269" data-name="Group 3269">

            <path id="Path_7987" data-name="Path 7987" d="M450.582-193.172a.749.749,0,0,1-.717-.531c-8.026-26.27-35.218-50.5-35.492-50.747a.749.749,0,0,1-.066-1.059.751.751,0,0,1,1.059-.066c.277.244,27.783,24.754,35.934,51.433a.752.752,0,0,1-.5.937.765.765,0,0,1-.217.032Z" fill="#ecc3b2"/>

            <path id="Path_7988" data-name="Path 7988" d="M420.825-258.65s-1.737-3.968,0-1.984,10.168,9.176,11.16,10.912.5,5.7-1.736,7.937-3.969,5.208-3.969,7.936a40.238,40.238,0,0,1-1.487-10.168C424.793-249.23,420.825-258.65,420.825-258.65Z" fill="#f09491"/>

            <path id="Path_7989" data-name="Path 7989" d="M439.43-249.725s-.248-3.472.992-1.24,6.448,18.6,5.456,21.081-6.506,10.189-6.477,11.791c0,0-5.676-6.335-4.187-12.535S439.43-243.773,439.43-249.725Z" fill="#f09491"/>

            <path id="Path_7990" data-name="Path 7990" d="M451.086-221.453s-.5-3.72.744-1.984,2.48,10.169,2.48,10.913.248,2.728-2.728,4.464a11.907,11.907,0,0,1-5.175,1.786,24.132,24.132,0,0,0,1.7-5.507C448.358-214.012,451.086-218.972,451.086-221.453Z" fill="#f09491"/>

            <path id="Path_7991" data-name="Path 7991" d="M419.822-220.212s-4.464.992-2.233,2.729,7.441,4.96,12.153,1.984,6.562-4.367,6.562-4.367a6.861,6.861,0,0,0-5.074-1.834A62.623,62.623,0,0,0,419.822-220.212Z" fill="#f09491"/>

            <path id="Path_7992" data-name="Path 7992" d="M431.23-202.12s-2.48-.992,0-1.488,8.929-1.736,11.409-.248a17.289,17.289,0,0,1,4.711,3.968c.248.5,2.48,1.736-.247,1.984s-7.688,1.488-9.177.5S431.23-202.12,431.23-202.12Z" fill="#f09491"/>

            <path id="Path_7993" data-name="Path 7993" d="M407.177-236.825s-4.216,3.224-1.488,3.224,5.208.993,10.168,0,5.889-1.282,8.029-1.385c0,0-4.061-5.807-7.285-6.055S409.409-238.313,407.177-236.825Z" fill="#f09491"/>

          </g>

          <path id="Path_7994" data-name="Path 7994" d="M407.541-270.713a22.1,22.1,0,0,1-22.073-22.073,22.1,22.1,0,0,1,22.073-22.073,22.1,22.1,0,0,1,22.072,22.073A22.1,22.1,0,0,1,407.541-270.713Zm0-34.225a12.166,12.166,0,0,0-12.153,12.152,12.165,12.165,0,0,0,12.153,12.152,12.165,12.165,0,0,0,12.152-12.152,12.167,12.167,0,0,0-12.152-12.153Z" fill="#f09491"/>

          <path id="Path_7995" data-name="Path 7995" d="M233.478-289.046a.409.409,0,0,1-.323-.154,16.5,16.5,0,0,0-4.221-3.185.387.387,0,0,1-.169-.522l.007-.013a.415.415,0,0,1,.553-.158,16.988,16.988,0,0,1,4.477,3.4.387.387,0,0,1-.061.544l-.013.01A.41.41,0,0,1,233.478-289.046Z" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

          <path id="Path_7996" data-name="Path 7996" d="M246.253-282.86a.411.411,0,0,1-.324-.154,16.536,16.536,0,0,0-4.22-3.184.388.388,0,0,1-.17-.523l.007-.013a.416.416,0,0,1,.553-.158,16.988,16.988,0,0,1,4.477,3.4.387.387,0,0,1-.061.544l-.013.01A.414.414,0,0,1,246.253-282.86Z" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

          <path id="Path_7997" data-name="Path 7997" d="M236.6-280.359a.411.411,0,0,1-.324-.154,16.539,16.539,0,0,0-4.22-3.185.388.388,0,0,1-.171-.521l.008-.014a.415.415,0,0,1,.553-.157,16.988,16.988,0,0,1,4.477,3.4.387.387,0,0,1-.061.544l-.013.01A.413.413,0,0,1,236.6-280.359Z" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

          <path id="Path_7998" data-name="Path 7998" d="M225.188-282.2a.409.409,0,0,1-.323-.154,16.523,16.523,0,0,0-4.221-3.184.388.388,0,0,1-.17-.523l.007-.013a.416.416,0,0,1,.553-.158,16.988,16.988,0,0,1,4.477,3.4.387.387,0,0,1-.062.544l-.013.01A.413.413,0,0,1,225.188-282.2Z" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

          <g id="Group_3271" data-name="Group 3271">

            <g id="Group_3270" data-name="Group 3270">

              <path id="Path_7999" data-name="Path 7999" d="M323.419-272.391H240.787a6.356,6.356,0,0,0-6.357,6.355h0v21.091l-.036-.025.036,2.545v.543c0,.132.006.262.014.393l.2,14.015,9.881-8.052h78.9a6.356,6.356,0,0,0,6.356-6.356h0v-24.153a6.356,6.356,0,0,0-6.356-6.356Z" fill="#fff"/>

              <path id="Path_8000" data-name="Path 8000" d="M234.64-226.858a.614.614,0,0,1-.616-.606l-.2-14.015c-.008-.115-.013-.258-.013-.4v-.543l-.036-2.536a.594.594,0,0,1,.036-.216v-20.862a6.98,6.98,0,0,1,6.972-6.972h82.632a6.981,6.981,0,0,1,6.971,6.972v24.154a6.98,6.98,0,0,1-6.971,6.972H244.74L235.029-227A.615.615,0,0,1,234.64-226.858Zm.371-17.888.033,2.865a3.5,3.5,0,0,0,.012.356l.182,12.771L244.133-236a.618.618,0,0,1,.389-.138h78.895a5.747,5.747,0,0,0,5.741-5.741v-24.155a5.748,5.748,0,0,0-5.741-5.741h-82.63a5.748,5.748,0,0,0-5.741,5.741v21.092a.6.6,0,0,1-.033.2Z" fill="#5cb8b2"/>

            </g>

            <path id="Path_8001" data-name="Path 8001" d="M313.673-260.355H245.661a1.23,1.23,0,0,1-1.23-1.232,1.232,1.232,0,0,1,1.23-1.23h68.012a1.231,1.231,0,0,1,1.229,1.233A1.23,1.23,0,0,1,313.673-260.355Z" fill="#5cb8b2"/>

            <path id="Path_8002" data-name="Path 8002" d="M281.89-251.245H245.661a1.231,1.231,0,0,1-1.2-1.265,1.232,1.232,0,0,1,1.2-1.2H281.89a1.232,1.232,0,0,1,1.195,1.266A1.231,1.231,0,0,1,281.89-251.245Z" fill="#5cb8b2"/>

            <path id="Path_8003" data-name="Path 8003" d="M269.6-244.679H245.661a1.231,1.231,0,0,1-1.2-1.265,1.232,1.232,0,0,1,1.2-1.2H269.6a1.231,1.231,0,0,1,1.265,1.2,1.23,1.23,0,0,1-1.2,1.265c-.024,0-.047,0-.07,0Z" fill="#5cb8b2"/>

          </g>

          <g id="Group_3272" data-name="Group 3272" transform="translate(116.636 -264.949)">

            <path id="Path_8004" data-name="Path 8004" d="M121.014-259.744s0-2.616,2.834-1.526,8.722,6.322,8.5,11.554-1.637,8.145-1.582,9.306c0,0-6.921-3.855-8.447-5.6S120.359-256.255,121.014-259.744Z" transform="translate(-114.684 261.535)" fill="#f09491"/>

            <path id="Path_8005" data-name="Path 8005" d="M139.938-245.271s2.617-2.4,4.579-.218,1.308,5.89-.654,7.2-5.9,2.82-6.22,4.026c0,0-1.406-3.372-.974-5.77S139.938-245.271,139.938-245.271Z" transform="translate(-116.603 259.705)" fill="#f09491"/>

            <path id="Path_8006" data-name="Path 8006" d="M117.568-231.474s-4.8-.44-3.488,4.578a7.4,7.4,0,0,0,5.668,2.616c3.706,0,6.4-3.943,8.215-4.806A25.7,25.7,0,0,0,117.568-231.474Z" transform="translate(-113.854 257.9)" fill="#f09491"/>

            <path id="Path_8007" data-name="Path 8007" d="M144.132-224.12a22.086,22.086,0,0,1-8.164-5.758,10.074,10.074,0,0,1-.942-1.37.569.569,0,0,0,.127-.352c0-5.28,4.615-11.625,4.659-11.691a.573.573,0,0,0-.123-.8.572.572,0,0,0-.8.122h0c-.184.25-4.175,5.736-4.8,11.025-3.6-6.99-9.028-21.777-9.093-21.956a.573.573,0,0,0-.748-.313.572.572,0,0,0-.328.706c.28.764,6.036,16.46,9.681,23.069-5.738-2.369-14.241-.247-14.63-.146a.573.573,0,0,0-.447.676.573.573,0,0,0,.676.447.411.411,0,0,0,.055-.014c.1-.025,10.109-2.528,15.289.808a.539.539,0,0,0,.2.078,5.829,5.829,0,0,0,.36.46,22.842,22.842,0,0,0,8.639,6.083.572.572,0,0,0,.721-.369.574.574,0,0,0-.332-.709Z" transform="translate(-114.417 260.776)" fill="#ecc3b2"/>

          </g>

          <path id="Path_6857" data-name="Path 6857" d="M174.722-235.364c3.306,2.315,6.282,2.976,9.257,1.985s6.081-6.065,6.081-6.065c.791,1.535,3.838,3.421,12.434,7.058s5.621,6.282,5.621,6.282-4.3,16.207-2.31,19.515-.992,12.235-1.319,13.889-10.25,6.282-10.25,6.282l.5,7.438-15.375,3.472c-15.208,0-21.493-4.96-21.493-4.96-4.3.992-7.6-2.645-8.263-6.944s-3.305-35.046-1.653-41.329,6.611-6.944,6.611-6.944c11.9-2.645,13.889-4.96,13.889-4.96A53.967,53.967,0,0,0,174.722-235.364Z" transform="translate(-1.277 -5.94)" fill="#8db9ca"/>

          <path id="Path_6858" data-name="Path 6858" d="M195.771-270.552l.166,6.447c.661,12.894-3.174,14.248-4.747,16.614.147.935.3,2.069.425,3.212a47.759,47.759,0,0,1-5.381,7.12h-3.4c-8.148-2.033-11.311-5.153-12.293-6.345.088-1.573.088-3.2.075-4.515-1.531-2.231-2.558-7.133-2.71-7.445-.138.006-2.982-1.135-3.377-2.693-.484-1.846-3.111-3.923-2.976-5.294.133-1.3,3-1.929,3.373-2.387.4,1.959-1.18-5.3-.276-3.516,1.055,1.71.6-3.134,1.09-6.322.726-4.619,2.18-2.59,15.7-3.052,4.8,1.962,9.23-.665,11.12,2.754.854,1.569,2.595.049,3.077,3.638Z" transform="translate(-2.987 -1.327)" fill="#fbe9d9"/>

          <path id="Path_6862" data-name="Path 6862" d="M197.358-286.161c-2.277,0-7.2,1.526-7.2,1.526s-5.3-9.086-11.34-3.052c-.329.33-5.324.556-6.976-.44-2.18-1.308-7.417.85-5.89,2.835.286.371-6.356-.274-3.706,7.63a8.208,8.208,0,0,0-2.4,5.232c-.361,2.537,1.486,7.193,4.36,5.45,1.055,1.7,1.036-1.61,1.526-4.8.73-4.62,5.45-8.284,13.952-7.194,7.355.943,6.681,3.089,9.81,3.924,3.271.872,8.87,1.261,10.683-1.308,2.616-3.706-.218-4.142-2.18-4.578,1.526-.654,2.97-1.625,2.18-3.052C199.921-284.468,198.884-286.161,197.358-286.161Z" transform="translate(-2.776 0)" fill="#221e1f"/>

          <g id="Group_1782" data-name="Group 1782" transform="translate(168.594 -272.142)">

            <path id="Path_7924" data-name="Path 7924" d="M176.665-265.431a4.383,4.383,0,0,0-3.307-.176A.264.264,0,0,1,173-265.7a.265.265,0,0,1,.095-.361.293.293,0,0,1,.085-.032,4.9,4.9,0,0,1,3.718.194.265.265,0,0,1,.1.36.261.261,0,0,1-.214.132A.254.254,0,0,1,176.665-265.431Z" transform="translate(-172.961 269.313)" fill="#221e1f"/>

            <path id="Path_7925" data-name="Path 7925" d="M189.235-267.5a.264.264,0,0,1-.256-.272.264.264,0,0,1,.048-.143,4.9,4.9,0,0,1,3.252-1.806h.006a.258.258,0,0,1,.278.233.264.264,0,0,1-.232.284,4.379,4.379,0,0,0-2.9,1.606.263.263,0,0,1-.207.1Z" transform="translate(-174.899 269.718)" fill="#221e1f"/>

            <g id="Group_1764-2" data-name="Group 1764-2" transform="translate(8.432 17.755)" opacity="0.8">

              <g id="Group_1763-2" data-name="Group 1763-2">

                <g id="Group_3228" data-name="Group 3228">

                  <g id="Group_3276" data-name="Group 3276">

                    <g id="Group_3299" data-name="Group 3299">

                      <g id="Group_3298" data-name="Group 3298" clip-path="url(#clip-path-2)">

                        <g id="Group_3275" data-name="Group 3275">

                          <g id="Group_3227" data-name="Group 3227">

                            <g id="Group_1762-2" data-name="Group 1762-2">

                              <g id="Group_1761-2" data-name="Group 1761-2">

                                <g id="Group_3226" data-name="Group 3226">

                                  <g id="Group_3274" data-name="Group 3274">

                                    <g id="Group_3297" data-name="Group 3297">

                                      <g id="Group_3296" data-name="Group 3296" clip-path="url(#clip-path-2)">

                                        <g id="Group_3273" data-name="Group 3273" transform="translate(-0.001 -0.001)">

                                          <g id="Group_3225" data-name="Group 3225">

                                            <g id="Group_1760-2" data-name="Group 1760-2">

                                              <path id="Path_6902-2" data-name="Path 6902-2" d="M189.4-249.521s-1.091,2.58-3.165,2.8-3.681-2.075-3.681-2.075" transform="translate(-182.553 249.521)" fill="#e2727c"/>

                                            </g>

                                          </g>

                                        </g>

                                      </g>

                                    </g>

                                  </g>

                                </g>

                              </g>

                            </g>

                          </g>

                        </g>

                      </g>

                    </g>

                  </g>

                </g>

              </g>

            </g>

            <g id="Group_1769-2" data-name="Group 1769-2" transform="translate(12.208 10.237)" opacity="0.8">

              <g id="Group_1768-2" data-name="Group 1768-2">

                <g id="Group_3232" data-name="Group 3232">

                  <g id="Group_3280" data-name="Group 3280">

                    <g id="Group_3303" data-name="Group 3303">

                      <g id="Group_3302" data-name="Group 3302" clip-path="url(#clip-path-4)">

                        <g id="Group_3279" data-name="Group 3279">

                          <g id="Group_3231" data-name="Group 3231">

                            <g id="Group_1767-2" data-name="Group 1767-2">

                              <g id="Group_1766-2" data-name="Group 1766-2">

                                <g id="Group_3230" data-name="Group 3230">

                                  <g id="Group_3278" data-name="Group 3278">

                                    <g id="Group_3301" data-name="Group 3301">

                                      <g id="Group_3300" data-name="Group 3300" clip-path="url(#clip-path-4)">

                                        <g id="Group_3277" data-name="Group 3277" transform="translate(0.787 0.358)">

                                          <g id="Group_3229" data-name="Group 3229">

                                            <g id="Group_1765-2" data-name="Group 1765-2">

                                              <path id="Path_6903-2" data-name="Path 6903-2" d="M187.744-254.21s1.434.032,1.7-.55-.811-2.906-.811-2.906" transform="translate(-187.744 257.666)" fill="none" stroke="#cd9b6b" stroke-linecap="round" stroke-miterlimit="10.003" stroke-width="0.523"/>

                                            </g>

                                          </g>

                                        </g>

                                      </g>

                                    </g>

                                  </g>

                                </g>

                              </g>

                            </g>

                          </g>

                        </g>

                      </g>

                    </g>

                  </g>

                </g>

              </g>

            </g>

            <path id="Path_6904-2" data-name="Path 6904-2" d="M178.526-262.152h0a1.231,1.231,0,0,0-1.427-1h0a1.231,1.231,0,0,0-1,1.427,1.231,1.231,0,0,0,1.427,1,1.231,1.231,0,0,0,1-1.425" transform="translate(-173.339 268.926)" fill="#221e1f"/>

            <path id="Path_6905-2" data-name="Path 6905-2" d="M191.915-264.516h0a1.232,1.232,0,0,0-1.426-1h0a1.23,1.23,0,0,0-1,1.428,1.23,1.23,0,0,0,1.427,1,1.231,1.231,0,0,0,1-1.426" transform="translate(-174.959 269.211)" fill="#221e1f"/>

          </g>

          <g id="Group_3281" data-name="Group 3281" transform="translate(158.888 -264.537)">

            <path id="Path_8008" data-name="Path 8008" d="M167.644-258.731a2.889,2.889,0,0,0-3.389-2.281,2.889,2.889,0,0,0-2.282,3.389,2.89,2.89,0,0,0,.506,1.154,32.571,32.571,0,0,0,1.394,5.011c.208.558.747.253,1.017.1s.425-.382.105-2.017a2.261,2.261,0,0,1,.674-2.05A2.889,2.889,0,0,0,167.644-258.731Z" transform="translate(-161.92 261.067)" fill="#f8f9fa"/>

            <ellipse id="Ellipse_682" data-name="Ellipse 682" cx="1.909" cy="1.909" rx="1.909" ry="1.909" transform="translate(0.44 1.283)" fill="#a7a8aa"/>

            <ellipse id="Ellipse_683" data-name="Ellipse 683" cx="1.549" cy="1.549" rx="1.549" ry="1.549" transform="translate(0.658 1.719)" fill="#fff"/>

          </g>

          <g id="Group_1539" data-name="Group 1539" transform="translate(172.146 -233.069)">

            <path id="Path_6863" data-name="Path 6863" d="M205.41-200.717S195.2-191.908,187.978-187.7c0,0-12.973-7.368-10.711-15.533,0,0,10.657-2.976,14.213-3.7,0,0,5.509-.6,7.583-2.428Z" transform="translate(-177.002 223.345)" fill="#8db9ca"/>

            <path id="Path_6864" data-name="Path 6864" d="M220.533-222.69s3.324,3.993-2.065,10.271a15.393,15.393,0,0,1-5.253,5.139l-1.278,1s-9.147-2.736-8.542-4.858l2.042-3.449a21.526,21.526,0,0,1,2.657-2.623c-.487-.7.772-4.4,2.7-5.554.191-.116.99-.069.985.448-.009,1.128-.932,3.289-.2,3.2,3.059-.352,2.53-3.055,3.6-4.523a4.157,4.157,0,0,1,1.883-1.523C218.974-225.635,219.716-224.485,220.533-222.69Z" transform="translate(-180.191 225.27)" fill="#fbe9d9"/>

            <path id="Path_6865" data-name="Path 6865" d="M212.459-205.166a14.069,14.069,0,0,1-4.146-.988,6.455,6.455,0,0,1-3.924-3.052,3.333,3.333,0,0,1-.218-2.18,2.8,2.8,0,0,0-3.352,2.461c-.176,1.3,2.033,4.18,2.033,4.18,1.526,1.63,3.2,3.756,5.436,3.787C211.148-200.922,212.866-203.742,212.459-205.166Z" transform="translate(-179.881 223.592)" fill="#d0d0ce"/>

          </g>

          <path id="Rectangle_3900" data-name="Rectangle 3900" d="M212.277-222l11.87-11.87a1.307,1.307,0,0,1,1.85,0h0a1.308,1.308,0,0,1,0,1.85l-11.871,11.871a1.308,1.308,0,0,1-1.85,0h0A1.309,1.309,0,0,1,212.277-222Z" transform="translate(-9.076 -6.713)" fill="#1b365d"/>

          <path id="Path_8009" data-name="Path 8009" d="M191.756-219.334a.654.654,0,0,1-.654-.654h0a16.291,16.291,0,0,0-1.039-4.769c-.849-2.122-2.576-5.389-2.594-5.422a.654.654,0,0,1,.27-.885.656.656,0,0,1,.886.27h0c.072.136,1.777,3.361,2.652,5.549a17.562,17.562,0,0,1,1.137,5.257.654.654,0,0,1-.653.655Z" transform="translate(-6.112 -7.09)" fill="#68737a"/>

          <ellipse id="Ellipse_684" data-name="Ellipse 684" cx="1.199" cy="1.199" rx="1.199" ry="1.199" transform="translate(184.445 -228.057)" fill="#d0d0ce"/>

          <path id="Path_8011" data-name="Path 8011" d="M185.121-232.455c-.063-.633-.44-1.308-2.18-1.308s-6.976-2.834-8.284-3.924-3.924-3.27-3.924-3.706c0,0-3.053,1.744-3.053,2.616s2.4,3.488,4.143,4.8,9.939,4.245,11.555,3.707C184.031-230.492,185.294-230.706,185.121-232.455Z" transform="translate(-3.728 -5.85)" fill="#d0d0ce"/>

          <path id="Path_8012" data-name="Path 8012" d="M187.22-232.612c.065-.654,1.881-1.7,3.382-2.7a29.417,29.417,0,0,0,2.7-2.7,6.008,6.008,0,0,0,1.353-2.254s3.833,2.7,3.833,3.6-.677,2.254-2.48,3.6-4.509,2.7-6.312,2.7C188.987-230.357,187.041-230.8,187.22-232.612Z" transform="translate(-6.09 -5.985)" fill="#d0d0ce"/>

          <path id="Path_8013" data-name="Path 8013" d="M191.057-268.271a5.451,5.451,0,0,0-5.936,4.917,5.532,5.532,0,0,0-.013.836,5.4,5.4,0,0,0-3.7.391,5.506,5.506,0,0,0-7.063-3.276,5.505,5.505,0,0,0-3.276,7.063,5.5,5.5,0,0,0,7.062,3.276,5.506,5.506,0,0,0,3.469-6.421,4.7,4.7,0,0,1,3.6-.343,5.449,5.449,0,0,0,6.372,4.335,5.45,5.45,0,0,0,4.335-6.373,5.451,5.451,0,0,0-4.845-4.408Zm-15.215,12.805a4.8,4.8,0,0,1-4.328-5.223,4.8,4.8,0,0,1,5.223-4.327,4.8,4.8,0,0,1,4.328,5.222A4.8,4.8,0,0,1,175.841-255.466Zm14.259-2.6a4.8,4.8,0,0,1-4.328-5.222,4.8,4.8,0,0,1,5.222-4.328,4.8,4.8,0,0,1,4.328,5.222h0A4.8,4.8,0,0,1,190.1-258.07Z" transform="translate(-4.097 -2.596)" fill="#a89968"/>

        </g>

      </g>

    </g>

  </g>

</svg>


 PAMapp/assets/images/questionnaire/reserve_bg_web.svg

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,152 @@
<svg id="reserve_bg_web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="467" viewBox="0 0 700 467">

  <defs>

    <clipPath id="clip-path">

      <rect id="Rectangle_3960" data-name="Rectangle 3960" width="700" height="467" transform="translate(480 -254)" fill="none"/>

    </clipPath>

    <clipPath id="clip-path-2">

      <rect id="Rectangle_3957" data-name="Rectangle 3957" width="11.673" height="4.161" transform="translate(0 1.227) rotate(-6.036)" fill="none"/>

    </clipPath>

    <clipPath id="clip-path-4">

      <rect id="Rectangle_3959" data-name="Rectangle 3959" width="3.778" height="6.518" transform="translate(0 0.657) rotate(-10.018)" fill="none"/>

    </clipPath>

  </defs>

  <g id="Group_3391" data-name="Group 3391" transform="translate(-480 254)">

    <g id="Group_3390" data-name="Group 3390" clip-path="url(#clip-path)">

      <g id="Group_3389" data-name="Group 3389" transform="translate(0 11.559)">

        <g id="Group_3268" data-name="Group 3268" transform="translate(543.736 -44.999)">

          <g id="Group_3267" data-name="Group 3267" transform="translate(-0.001 0)">

            <path id="Path_7983" data-name="Path 7983" d="M787.661,70.957l-16.089-.439a8.149,8.149,0,0,0-1.3-.1H690.4a8.149,8.149,0,0,0-8.149,8.15v26.623a8.149,8.149,0,0,0,8.148,8.151h79.87a8.151,8.151,0,0,0,8.15-8.151V79.754Z" transform="translate(-681.472 -69.625)" fill="#fff"/>

            <path id="Path_7984" data-name="Path 7984" d="M770.129,113.979h-79.87a8.949,8.949,0,0,1-8.932-8.942V78.418a8.951,8.951,0,0,1,8.938-8.94h79.869a9.087,9.087,0,0,1,1.371.106l16.038.438a.79.79,0,0,1,.523,1.361l-8.992,8.564v25.091A8.949,8.949,0,0,1,770.129,113.979ZM690.258,71.06a7.369,7.369,0,0,0-7.361,7.361v26.617a7.37,7.37,0,0,0,7.361,7.361h79.87a7.371,7.371,0,0,0,7.363-7.361V79.607a.788.788,0,0,1,.245-.57l7.864-7.488-14.192-.385a1.039,1.039,0,0,1-.1-.008,7.287,7.287,0,0,0-1.173-.1Z" transform="translate(-681.327 -69.478)" fill="#5cb8b2"/>

          </g>

          <path id="Path_7985" data-name="Path 7985" d="M749.986,94.243H703.533a1.578,1.578,0,0,1-.09-3.155h46.544a1.578,1.578,0,0,1,.09,3.155Z" transform="translate(-684.549 -72.86)" fill="#5cb8b2"/>

          <path id="Path_7986" data-name="Path 7986" d="M734.239,104.234h-30.7a1.579,1.579,0,0,1,0-3.157h30.7a1.579,1.579,0,0,1,0,3.157Z" transform="translate(-684.557 -74.424)" fill="#5cb8b2"/>

        </g>

        <path id="Path_7994" data-name="Path 7994" d="M823.358,37.823a21.912,21.912,0,1,1,21.911-21.911A21.938,21.938,0,0,1,823.358,37.823Zm0-33.975a12.063,12.063,0,1,0,12.064,12.064A12.077,12.077,0,0,0,823.358,3.848Z" transform="translate(-162.322 -119.745)" fill="none" stroke="#f09491" stroke-width="1" opacity="0.5"/>

        <path id="Path_7994-2" data-name="Path 7994" d="M823.358,37.823a21.912,21.912,0,1,1,21.911-21.911A21.938,21.938,0,0,1,823.358,37.823Zm0-33.975a12.063,12.063,0,1,0,12.064,12.064A12.077,12.077,0,0,0,823.358,3.848Z" transform="translate(-165.475 -121.687)" fill="#f09491"/>

        <path id="Path_7995" data-name="Path 7995" d="M560.794,29.06a.609.609,0,0,1-.477-.227,24.308,24.308,0,0,0-6.231-4.7.572.572,0,0,1-.25-.77l.011-.019a.61.61,0,0,1,.816-.233,25.027,25.027,0,0,1,6.61,5.019.572.572,0,0,1-.089.8l-.02.015A.611.611,0,0,1,560.794,29.06Z" transform="translate(-46.613 -191.938)" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

        <path id="Path_7996" data-name="Path 7996" d="M580.214,38.463a.608.608,0,0,1-.479-.227,24.333,24.333,0,0,0-6.229-4.7.574.574,0,0,1-.252-.772l.011-.018a.612.612,0,0,1,.816-.234,25.031,25.031,0,0,1,6.61,5.02.572.572,0,0,1-.089.8l-.02.015A.606.606,0,0,1,580.214,38.463Z" transform="translate(-47.172 -192.209)" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

        <path id="Path_7997" data-name="Path 7997" d="M565.546,42.265a.609.609,0,0,1-.478-.227,24.341,24.341,0,0,0-6.23-4.7.573.573,0,0,1-.251-.77l.011-.02a.612.612,0,0,1,.817-.231,25.037,25.037,0,0,1,6.609,5.019.571.571,0,0,1-.089.8l-.019.015A.608.608,0,0,1,565.546,42.265Z" transform="translate(-46.75 -192.318)" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

        <path id="Path_7998" data-name="Path 7998" d="M548.193,39.464a.606.606,0,0,1-.477-.227,24.3,24.3,0,0,0-6.232-4.7.575.575,0,0,1-.251-.773l.01-.018a.613.613,0,0,1,.817-.233,25.06,25.06,0,0,1,6.61,5.019.572.572,0,0,1-.091.8l-.019.015A.612.612,0,0,1,548.193,39.464Z" transform="translate(-46.249 -192.237)" fill="#5cb8b2" opacity="0.5" style="isolation: isolate"/>

        <g id="Group_3271" data-name="Group 3271" transform="translate(499.992 -81.921)">

          <g id="Group_3270" data-name="Group 3270" transform="translate(0 -0.001)">

            <path id="Path_7999" data-name="Path 7999" d="M676.542,54.557H570.592a8.149,8.149,0,0,0-8.15,8.148V89.749l-.046-.032.046,3.263v.7c0,.169.008.336.018.5l.256,17.97,12.669-10.324H676.549a8.15,8.15,0,0,0,8.15-8.15V62.707a8.149,8.149,0,0,0-8.15-8.15Z" transform="translate(-561.601 -53.766)" fill="#fff"/>

            <path id="Path_8000" data-name="Path 8000" d="M562.563,112.792a.79.79,0,0,1-.79-.778l-.256-17.969c-.01-.148-.016-.331-.016-.513v-.7l-.046-3.252a.773.773,0,0,1,.046-.277V62.558a8.949,8.949,0,0,1,8.939-8.939h105.95a8.949,8.949,0,0,1,8.938,8.939v30.97a8.951,8.951,0,0,1-8.938,8.94H575.513l-12.451,10.145A.786.786,0,0,1,562.563,112.792Zm.476-22.936.042,3.673a4.562,4.562,0,0,0,.015.456l.234,16.374,11.4-9.293a.79.79,0,0,1,.5-.177H676.392a7.369,7.369,0,0,0,7.361-7.361V62.558a7.368,7.368,0,0,0-7.361-7.361H570.444a7.371,7.371,0,0,0-7.361,7.361V89.6a.788.788,0,0,1-.042.254Z" transform="translate(-561.454 -53.619)" fill="#5cb8b2"/>

          </g>

          <path id="Path_8001" data-name="Path 8001" d="M666.434,72.267h-87.2a1.579,1.579,0,0,1,0-3.157h87.2a1.579,1.579,0,0,1,0,3.157Z" transform="translate(-563.99 -56.044)" fill="#5cb8b2"/>

          <path id="Path_8002" data-name="Path 8002" d="M625.69,86.115H579.237a1.578,1.578,0,0,1,0-3.155H625.69a1.578,1.578,0,0,1,0,3.155Z" transform="translate(-563.998 -58.212)" fill="#5cb8b2"/>

          <path id="Path_8003" data-name="Path 8003" d="M609.936,96.1h-30.7a1.578,1.578,0,0,1,0-3.155h30.7a1.578,1.578,0,0,1,.09,3.155Z" transform="translate(-563.998 -59.774)" fill="#5cb8b2"/>

        </g>

        <g id="Group_3388" data-name="Group 3388" transform="translate(486.522 36.974)">

          <g id="Group_3272" data-name="Group 3272" transform="translate(0 59.571)">

            <path id="Path_8004" data-name="Path 8004" d="M363.022,56.655s0-3.791,4.107-2.212,12.64,9.163,12.323,16.745-2.373,11.8-2.293,13.486c0,0-10.03-5.587-12.242-8.114S362.074,61.71,363.022,56.655Z" transform="translate(-353.849 -54.059)" fill="#f09491"/>

            <path id="Path_8005" data-name="Path 8005" d="M391.572,78.7s3.792-3.477,6.636-.316,1.9,8.535-.948,10.427-8.551,4.086-9.014,5.835c0,0-2.039-4.887-1.412-8.362S391.572,78.7,391.572,78.7Z" transform="translate(-357.754 -57.783)" fill="#f09491"/>

            <path id="Path_8006" data-name="Path 8006" d="M357.541,99.754s-6.952-.637-5.054,6.635a10.72,10.72,0,0,0,8.214,3.791c5.371,0,9.277-5.714,11.906-6.965A37.232,37.232,0,0,0,357.541,99.754Z" transform="translate(-352.159 -61.456)" fill="#f09491"/>

            <path id="Path_8007" data-name="Path 8007" d="M396.37,108.728a32.031,32.031,0,0,1-11.832-8.345,14.7,14.7,0,0,1-1.365-1.986.824.824,0,0,0,.184-.51c0-7.652,6.689-16.848,6.752-16.944a.83.83,0,0,0-1.338-.982h0c-.266.362-6.05,8.313-6.956,15.978-5.224-10.131-13.084-31.561-13.178-31.82a.831.831,0,0,0-1.56.569c.4,1.107,8.749,23.855,14.03,33.433-8.315-3.434-20.638-.358-21.2-.211a.83.83,0,1,0,.331,1.628l.079-.02c.145-.037,14.651-3.664,22.158,1.171a.8.8,0,0,0,.282.113c.181.255.354.475.521.666a33.107,33.107,0,0,0,12.521,8.816.83.83,0,0,0,.563-1.561Z" transform="translate(-353.305 -55.604)" fill="#ecc3b2"/>

          </g>

          <path id="Path_6857" data-name="Path 6857" d="M449.456,94.766c5.6,3.922,10.647,5.042,15.689,3.364s10.307-10.28,10.307-10.28c1.341,2.6,6.5,5.8,21.074,11.962s9.526,10.647,9.526,10.647-7.281,27.469-3.915,33.075-1.683,20.735-2.235,23.539-3.375,13.692-3.375,13.692l-13.156,9.561-26.057,5.884c-25.774,0-36.426-8.407-36.426-8.407-7.285,1.683-12.889-4.483-14-11.77s-5.6-59.4-2.8-70.046,11.2-11.77,11.2-11.77c20.173-4.483,23.539-8.407,23.539-8.407A91.824,91.824,0,0,0,449.456,94.766Z" transform="translate(-359.596 -12.648)" fill="#8db9ca"/>

          <path id="Path_6858" data-name="Path 6858" d="M482.662,41.791l.282,10.926c1.12,21.853-5.381,24.147-8.045,28.158.249,1.586.51,3.508.719,5.444a80.846,80.846,0,0,1-9.12,12.068h-5.758c-13.809-3.446-19.169-8.733-20.835-10.753.149-2.666.149-5.422.126-7.652-2.6-3.781-4.335-12.088-4.593-12.617-.234.011-5.053-1.923-5.724-4.563-.821-3.128-5.273-6.649-5.043-8.972.224-2.205,5.081-3.269,5.717-4.045.676,3.32-2-8.982-.469-5.96,1.788,2.9,1.016-5.311,1.847-10.714,1.231-7.83,3.695-4.39,26.6-5.173,8.129,3.325,15.643-1.128,18.847,4.667,1.447,2.66,4.4.084,5.214,6.167Z" transform="translate(-360.024 -11.493)" fill="#fbe9d9"/>

          <path id="Path_6862" data-name="Path 6862" d="M485.656,17.253c-3.859,0-12.194,2.586-12.194,2.586s-8.988-15.4-19.219-5.173c-.557.559-9.024.943-11.824-.745-3.695-2.217-12.569,1.441-9.981,4.8.484.629-10.772-.465-6.281,12.932a13.92,13.92,0,0,0-4.064,8.868c-.613,4.3,2.519,12.191,7.39,9.237,1.788,2.887,1.754-2.729,2.586-8.129C433.3,33.8,441.3,27.594,455.715,29.441c12.466,1.6,11.323,5.236,16.627,6.651,5.543,1.478,15.032,2.137,18.106-2.217,4.434-6.281-.369-7.02-3.695-7.759,2.586-1.108,5.034-2.753,3.695-5.173C490,20.121,488.243,17.253,485.656,17.253Z" transform="translate(-359.971 -11.161)" fill="#221e1f"/>

          <g id="Group_1782" data-name="Group 1782" transform="translate(81.64 29.852)">

            <path id="Path_7924" data-name="Path 7924" d="M448.287,48.3a7.423,7.423,0,0,0-5.605-.3.447.447,0,1,1-.451-.772.439.439,0,0,1,.144-.053,8.3,8.3,0,0,1,6.3.329.447.447,0,0,1-.2.834A.452.452,0,0,1,448.287,48.3Z" transform="translate(-442.01 -41.722)" fill="#221e1f"/>

            <path id="Path_7925" data-name="Path 7925" d="M466.792,45.386a.446.446,0,0,1-.432-.462.442.442,0,0,1,.08-.242,8.3,8.3,0,0,1,5.512-3.061h.011a.433.433,0,0,1,.47.394.446.446,0,0,1-.393.481,7.42,7.42,0,0,0-4.916,2.723.447.447,0,0,1-.352.175Z" transform="translate(-442.495 -41.62)" fill="#221e1f"/>

            <g id="Group_1764-2" data-name="Group 1764-2" transform="translate(14.291 30.092)" opacity="0.8">

              <g id="Group_1763-2" data-name="Group 1763-2" transform="translate(0 0)">

                <g id="Group_3228" data-name="Group 3228" transform="translate(0)">

                  <g id="Group_3276" data-name="Group 3276">

                    <g id="Group_3383" data-name="Group 3383">

                      <g id="Group_3382" data-name="Group 3382" clip-path="url(#clip-path-2)">

                        <g id="Group_3275" data-name="Group 3275">

                          <g id="Group_3227" data-name="Group 3227">

                            <g id="Group_1762-2" data-name="Group 1762-2">

                              <g id="Group_1761-2" data-name="Group 1761-2">

                                <g id="Group_3226" data-name="Group 3226">

                                  <g id="Group_3274" data-name="Group 3274">

                                    <g id="Group_3381" data-name="Group 3381">

                                      <g id="Group_3380" data-name="Group 3380" clip-path="url(#clip-path-2)">

                                        <g id="Group_3273" data-name="Group 3273" transform="translate(-0.001 -0.002)">

                                          <g id="Group_3225" data-name="Group 3225">

                                            <g id="Group_1760-2" data-name="Group 1760-2">

                                              <path id="Path_6902-2" data-name="Path 6902-2" d="M468.193,72.322s-1.849,4.373-5.364,4.749-6.239-3.517-6.239-3.517" transform="translate(-456.59 -72.322)" fill="#e2727c"/>

                                            </g>

                                          </g>

                                        </g>

                                      </g>

                                    </g>

                                  </g>

                                </g>

                              </g>

                            </g>

                          </g>

                        </g>

                      </g>

                    </g>

                  </g>

                </g>

              </g>

            </g>

            <g id="Group_1769-2" data-name="Group 1769-2" transform="translate(20.69 17.349)" opacity="0.8">

              <g id="Group_1768-2" data-name="Group 1768-2" transform="translate(0 0)">

                <g id="Group_3232" data-name="Group 3232" transform="translate(0)">

                  <g id="Group_3280" data-name="Group 3280">

                    <g id="Group_3387" data-name="Group 3387">

                      <g id="Group_3386" data-name="Group 3386" clip-path="url(#clip-path-4)">

                        <g id="Group_3279" data-name="Group 3279">

                          <g id="Group_3231" data-name="Group 3231">

                            <g id="Group_1767-2" data-name="Group 1767-2">

                              <g id="Group_1766-2" data-name="Group 1766-2">

                                <g id="Group_3230" data-name="Group 3230">

                                  <g id="Group_3278" data-name="Group 3278">

                                    <g id="Group_3385" data-name="Group 3385">

                                      <g id="Group_3384" data-name="Group 3384" clip-path="url(#clip-path-4)">

                                        <g id="Group_3277" data-name="Group 3277" transform="translate(1.333 0.607)">

                                          <g id="Group_3229" data-name="Group 3229">

                                            <g id="Group_1765-2" data-name="Group 1765-2">

                                              <path id="Path_6903-2" data-name="Path 6903-2" d="M464.481,65.8s2.43.053,2.874-.933-1.375-4.925-1.375-4.925" transform="translate(-464.481 -59.941)" fill="none" stroke="#cd9b6b" stroke-linecap="round" stroke-miterlimit="10.003" stroke-width="0.523"/>

                                            </g>

                                          </g>

                                        </g>

                                      </g>

                                    </g>

                                  </g>

                                </g>

                              </g>

                            </g>

                          </g>

                        </g>

                      </g>

                    </g>

                  </g>

                </g>

              </g>

            </g>

            <path id="Path_6904-2" data-name="Path 6904-2" d="M450.895,53.3h0a2.086,2.086,0,0,0-2.418-1.69h0a2.086,2.086,0,1,0,2.418,1.693" transform="translate(-442.104 -41.819)" fill="#221e1f"/>

            <path id="Path_6905-2" data-name="Path 6905-2" d="M471.248,49.705h0a2.085,2.085,0,0,0-2.416-1.688h0a2.086,2.086,0,1,0,2.419,1.692" transform="translate(-442.51 -41.747)" fill="#221e1f"/>

          </g>

          <g id="Group_3281" data-name="Group 3281" transform="translate(65.19 42.742)">

            <path id="Path_8008" data-name="Path 8008" d="M434.927,58.73a4.9,4.9,0,1,0-8.752,3.833,55.433,55.433,0,0,0,2.362,8.492c.354.946,1.267.428,1.724.171s.719-.648.179-3.418a3.834,3.834,0,0,1,1.143-3.474A4.894,4.894,0,0,0,434.927,58.73Z" transform="translate(-425.225 -54.771)" fill="#f8f9fa"/>

            <circle id="Ellipse_682" data-name="Ellipse 682" cx="3.236" cy="3.236" r="3.236" transform="translate(0.746 2.173)" fill="#a7a8aa"/>

            <circle id="Ellipse_683" data-name="Ellipse 683" cx="2.625" cy="2.625" r="2.625" transform="translate(1.116 2.912)" fill="#fff"/>

          </g>

          <g id="Group_1539" data-name="Group 1539" transform="translate(87.659 96.074)">

            <path id="Path_6863" data-name="Path 6863" d="M496.3,148.02s-17.309,14.929-29.545,22.062c0,0-21.987-12.488-18.154-26.325,0,0,18.062-5.045,24.089-6.269,0,0,9.337-1.008,12.852-4.114Z" transform="translate(-448.151 -109.67)" fill="#8db9ca"/>

            <path id="Path_6864" data-name="Path 6864" d="M517.323,113.559s5.633,6.767-3.5,17.407a26.077,26.077,0,0,1-8.9,8.71l-2.166,1.693s-15.5-4.637-14.477-8.235l3.461-5.846a36.471,36.471,0,0,1,4.5-4.446c-.825-1.192,1.308-7.45,4.569-9.413.323-.2,1.678-.117,1.67.76-.015,1.911-1.579,5.574-.332,5.423,5.185-.6,4.288-5.177,6.1-7.665a7.048,7.048,0,0,1,3.191-2.58C514.682,108.569,515.94,110.517,517.323,113.559Z" transform="translate(-448.95 -109.188)" fill="#fbe9d9"/>

            <path id="Path_6865" data-name="Path 6865" d="M504.087,140.836a23.9,23.9,0,0,1-7.026-1.674,10.948,10.948,0,0,1-6.651-5.173,5.66,5.66,0,0,1-.369-3.695c-2.065-.172-5.173.369-5.681,4.171-.3,2.2,3.446,7.085,3.446,7.085,2.586,2.762,5.429,6.366,9.213,6.418C501.864,148.03,504.776,143.25,504.087,140.836Z" transform="translate(-448.872 -109.608)" fill="#d0d0ce"/>

          </g>

          <path id="Rectangle_3900" data-name="Rectangle 3900" d="M501.842,116.293,521.96,96.175a2.218,2.218,0,0,1,3.135,0h0a2.218,2.218,0,0,1,0,3.135l-20.118,20.118a2.216,2.216,0,0,1-3.135,0h0A2.217,2.217,0,0,1,501.842,116.293Z" transform="translate(-361.549 -12.842)" fill="#1b365d"/>

          <path id="Path_8009" data-name="Path 8009" d="M471.343,120.273a1.109,1.109,0,0,1-1.108-1.108h0a27.579,27.579,0,0,0-1.76-8.082c-1.44-3.6-4.367-9.133-4.4-9.19a1.11,1.11,0,0,1,1.959-1.043h0c.122.231,3.012,5.7,4.495,9.4a29.751,29.751,0,0,1,1.926,8.91,1.108,1.108,0,0,1-1.106,1.109Z" transform="translate(-360.807 -12.936)" fill="#68737a"/>

          <circle id="Ellipse_684" data-name="Ellipse 684" cx="2.032" cy="2.032" r="2.032" transform="translate(108.504 104.568)" fill="#d0d0ce"/>

          <path id="Path_8011" data-name="Path 8011" d="M463.541,99.826c-.107-1.072-.745-2.217-3.695-2.217s-11.824-4.8-14.041-6.651-6.65-5.541-6.65-6.28c0,0-5.175,2.955-5.175,4.433s4.066,5.912,7.021,8.129,16.845,7.195,19.585,6.283C461.694,103.153,463.834,102.791,463.541,99.826Z" transform="translate(-360.21 -12.626)" fill="#d0d0ce"/>

          <path id="Path_8012" data-name="Path 8012" d="M463.687,99.364c.111-1.108,3.189-2.889,5.732-4.584A49.99,49.99,0,0,0,474,90.2a10.167,10.167,0,0,0,2.292-3.819s6.5,4.584,6.5,6.108-1.147,3.82-4.2,6.109-7.642,4.584-10.7,4.584C466.682,103.187,463.383,102.43,463.687,99.364Z" transform="translate(-360.801 -12.66)" fill="#d0d0ce"/>

          <path id="Path_8013" data-name="Path 8013" d="M473.068,43.823a9.235,9.235,0,0,0-10.083,9.751,9.144,9.144,0,0,0-6.278.664,9.335,9.335,0,1,0,.324,1.088,7.964,7.964,0,0,1,6.109-.581,9.237,9.237,0,1,0,9.936-10.924Zm-25.788,21.7a8.129,8.129,0,1,1,8.853-7.335A8.128,8.128,0,0,1,447.281,65.526Zm24.167-4.413a8.128,8.128,0,1,1,8.851-7.335h0A8.137,8.137,0,0,1,471.447,61.113Z" transform="translate(-360.302 -11.811)" fill="#a89968"/>

        </g>

      </g>

      <g id="Group_3410" data-name="Group 3410" transform="translate(588 -247.574)" opacity="0.3">

        <path id="Path_8004-2" data-name="Path 8004" d="M60.384,84.373s0-3.982-4.314-2.323S42.8,91.673,43.128,99.637s2.492,12.4,2.408,14.163c0,0,10.534-5.867,12.857-8.522S61.379,89.682,60.384,84.373Z" transform="translate(-24.214 -81.645)" fill="#f09491"/>

        <path id="Path_8005-2" data-name="Path 8005" d="M83.62,113.638s-3.983-3.651-6.969-.332-1.991,8.96,1,10.951,8.981,4.293,9.468,6.129c0,0,2.146-5.133,1.482-8.783S83.62,113.638,83.62,113.638Z" transform="translate(-73.333 -91.664)" fill="#f09491"/>

        <path id="Path_8006-2" data-name="Path 8006" d="M45.208,141.765s7.3-.664,5.309,6.969a11.259,11.259,0,0,1-8.627,3.982c-5.641,0-9.743-6-12.5-7.314A39.087,39.087,0,0,1,45.208,141.765Z" transform="translate(-5.057 -101.54)" fill="#f09491"/>

        <path id="Path_8007-2" data-name="Path 8007" d="M39.355,141.574a33.636,33.636,0,0,0,12.423-8.758,15.455,15.455,0,0,0,1.434-2.085.865.865,0,0,1-.193-.542c0-8.038-7.025-17.694-7.1-17.791a.872.872,0,0,1,1.4-1.032c.28.38,6.354,8.731,7.305,16.782,5.486-10.64,13.741-33.148,13.84-33.42a.872.872,0,0,1,1.638.6c-.425,1.163-9.188,25.055-14.735,35.113,8.732-3.606,21.671-.375,22.269-.223a.872.872,0,1,1-.432,1.689c-.153-.039-15.385-3.847-23.272,1.23a.862.862,0,0,1-.3.119c-.19.263-.373.5-.547.7a34.779,34.779,0,0,1-13.15,9.259.869.869,0,0,1-1.115-.524A.873.873,0,0,1,39.355,141.574Z" transform="translate(-38.779 -85.786)" fill="#f09491"/>

      </g>

    </g>

  </g>

  <rect id="Rectangle_3963" data-name="Rectangle 3963" width="700" height="1" transform="translate(0 466)" fill="#5cb8b2"/>

</svg>


 PAMapp/assets/scss/reset/_reset.scss

@@ -55,3 +55,6 @@
p {
  line-height: 24pt;
}
input{
    outline: none;
}

 PAMapp/assets/scss/utilities/_heading.scss

@@ -9,10 +9,6 @@
  font-weight: bold;
}

.fz-20{
  font-size: 20px;
}

.mdTxt {
  font-size: 20px;
  font-weight: bold;

 PAMapp/assets/scss/vendors/elementUI/_button.scss

@@ -55,7 +55,7 @@
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: normal;
  @extend .fz-20;
  @extend .text--middle;
  &.el-button--default {
      color: black;
      background-color: #FFFFFF;
@@ -90,31 +90,6 @@
  }
}

.ques-page{
  .pam-radio-group--col{
      .el-radio-button__orig-radio:checked+.el-radio-button__inner{
          background-color: #FFFFFF;
          color: black;
          border-color:none;
          border:none;
          box-shadow: none;
          font-weight: bold;
      }
      .el-radio-button:first-child .el-radio-button__inner{
          border-left:none;
      }
      .el-radio-button__inner {
          border:none;
          font-size: 20px;
      }

  }
  .radio-btn{
      display: flex;
      flex-direction: column;
      margin-top: 30px;
  }
}

@include desktop {
  .pam-rec-btns {

 PAMapp/assets/scss/vendors/elementUI/_radio.scss

@@ -36,20 +36,34 @@
    }
}

.pam-radio-group--col {
.pam-single__select--col{
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    .el-radio-button {
    .el-radio-button{
        @extend .fix-chrome-click--issue;
        &.is-active {
            color:$PRIMARY_BLACK;
            background-color: none !important;
        width: 100%;
        margin-top: 30px;
        &.is-active{
            .el-radio-button__inner{
                color:$DARK_BLUE;
                font-weight: bolder;
            }
        }
        &:focus:not(.is-focus):not(:active):not(.is-disabled){
            box-shadow: none;
        }
        .el-radio-button__inner{
            border: none;
            color:$PRIMARY_BLACK; ;
            background-color:$PRIMARY_WHITE;
            box-shadow: none;
            width: 100%;
            font-size: 20px;
            font-weight: normal;
        }
    }
}

.btn_woman {
    .el-radio__label {
        background-image: url('~/assets/images/quickFilter/btn_woman.svg');

 PAMapp/assets/ts/api/consultant.ts

@@ -104,48 +104,53 @@
    return service.get('/appointment/getDetail/'+apointmentId, {headers})
}
export interface Consultants {
    agentNo: string,
    name: string,
    img: string,
    new: boolean,
    avgScore: number,
    expertise: string[],
    updateTime: Date,
    seniority: string,
    contactStatus?: string;
    agentNo            : string,
    name               : string,
    img                : string,
    new                : boolean,
    avgScore           : number,
    expertise          : string[],
    updateTime         : Date,
    seniority          : string,
    contactStatus?     : string;
    latestAppointmentId: number;
    role: string;
    image?: string;
    expertises?: string;
    role               : string;
    image?             : string;
    expertises?        : string;
}

export interface FastQueryParams {
    gender: string,
    gender             : string,
    communicationStyles: string[],
    avgScore: number,
    status: string
    avgScore           : number,
    status             : string
}

export interface AppointmentRequests {
  connectDevices: any[],
  hopeContactTime: any,
  email?: string,
  job?: string,
  otherJob?: string,
  gender?: string,
  myQuestion: any[],
  age?: string,
    phone          : string,
    email          : string,
    contactType    : string,
    gender         : string,
    age            : string,
    job            : string,
    requirement    : string[],
    hopeContactTime: ContactTime[],
    agentNo        : string,
}
export interface ContactTime {
  selectWeekOptions : string[],
  selectTimesOptions: string[]
}
export interface AppointmentParams {
    phone?: string,
    email?: string,
    contactType: string,
    gender?: string,
    age?: string,
    job?: string,
    requirement: string,
    hopeContactTime?: string,
    agentNo: string
    phone          : string,
    email          : string,
    contactType    : string,
    gender         : string,
    age            : string,
    job            : string,
    requirement    : string,
    hopeContactTime: string,
    agentNo        : string
}
export interface StrictQueryParams{
    gender:           string;
@@ -206,4 +211,4 @@
    name: string,
    /** "SMS"：Otp發送手機，"EMAIL":Otp發email */
    contactType: string
}
}

 PAMapp/assets/ts/models/enum/ContactType.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,5 @@
export enum ContactType{
    SMS="SMS",
    EMAIL="EMAIL",
    PHONE="phone"
}

 PAMapp/assets/ts/models/enum/Gender.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,4 @@
export enum Gender{
  MALE="male",
  FEMALE="female",
}

 PAMapp/components/careerSelect.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,149 @@
<template>
  <div>
    <div class="mdTxt pt-10 pb-10">職業</div>
      <div class="ques-career__select" @click="openPopUp">
        <div class="ques-career__select-input">
          <span v-if="!syncCareerSelect">請選擇</span>
          <span v-else> {{syncCareerSelect}}</span>
        </div>
        <div class="ques-career__select--icon">
          <i class="icon-down down-icon"></i>
        </div>
      </div>
      <PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
        <div class="pam-career">
          <div class="subTitle">職業</div>
          <el-radio-group class="pam-single__select--col" v-model="career" @change="handleChange">
            <el-radio-button v-for="(career,index) in options"
              :key="index"
              :label="career.label">
              {{career.title}}
            </el-radio-button>
          </el-radio-group>
          <div class="mt-10" v-if="career === '其他'">
            <input class="pam-career__other-input"
              :class="{'warning':!career_Other}"
              v-model="career_Other" >
          </div>
          <el-button type="primary"
            class="pam-career__confirm"
            :disabled="isCareerVerifyFailed"
            @click="patchCareer">
              ç¢ºå®š
          </el-button>
        </div>
      </PopUpFrame>
  </div>


</template>

<script lang="ts">
  import { Component , PropSync , Vue} from "vue-property-decorator";
  import * as _ from 'lodash';
  @Component
  export default class CareerSelect extends Vue {
    @PropSync('careerSelect',{ type: String, default :''}) syncCareerSelect! :string;
    showJobDrawer = false;
    career='';
    career_Other='';
    options= [
      {
        title:'外勤',
        label:'外勤'
      },
      {
        title:'內勤',
        label:'內勤'
      },
      {
        title:'其他',
        label:'其他'
      }
    ];
    get isCareerVerifyFailed():boolean{
      return !this.career || (_.isEqual(this.career,'其他')&&!this.career_Other) ;
    }
    handleChange(event:any):void{
      if(event !== '其他'){
        this.career_Other='';
      }
    }

    openPopUp():void{
      this.showJobDrawer = true;
      this.patchInitValue();
    }

    patchInitValue():void{
      if(this.syncCareerSelect){
        if(_.includes(['外勤','內勤'],this.syncCareerSelect)){
          this.career = this.syncCareerSelect;
        }else{
          this.career = '其他';
          this.career_Other = this.syncCareerSelect;
        }
      }
    }

    patchCareer():boolean {
      this.showJobDrawer = false;
      this.syncCareerSelect = this.career === '其他' ? _.cloneDeep(this.career_Other):_.cloneDeep(this.career);
      return true;
    }
  }
</script>

<style lang="scss" scoped>
  .pam-career{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ques-career__select{
    position: relative;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    border-radius:10px;
    border:1px solid #D0D0CE ;
    background-color: $PRIMARY_WHITE;
    .ques-career__select-input{
      width: 90%;
    }
    .ques-career__select--icon{
      position: absolute;
      top: 0px;
      right: 15px;
      .down-icon{
        color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-top: 11px;
        margin-left: -20px;
      }
    }
  }
  .pam-career__other-input{
    height: 50px;
    width: 100%;
    border: 1px #CCCCCC solid;
    width: 300px;
    padding-left: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &.warning{
      border: 1px $PRIMARY_RED solid;
    }
  }
  .pam-career__confirm{
    width: 120px;
    height: 50px;
    margin-top: 30px;
  }

</style>

 PAMapp/components/phoneContactTimePicker.vue

@@ -243,7 +243,6 @@
  .pam-add-schedule{
    color: $PRIMARY_RED;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
     &.disable{
        color:$LIGHT_GREY;

 PAMapp/layouts/home.vue

@@ -22,13 +22,14 @@
        padding-top:$MOB_NAV_BAR;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: calc(100vh - $MOB_NAV_BAR);
        .pam-container{
            flex: 1;
        }
    }
    @include desktop{
        .pam-background {
            min-height: calc(100vh - $DESKTOP_NAV_BAR);
            padding-top:$DESKTOP_NAV_BAR;
        }
    }

 PAMapp/pages/login/index.vue

@@ -446,6 +446,7 @@

    this.applyAccount_onAction = true;
    const registerInfo = this.setRegisterInfo();
    this.storagePhoneOrEmail(registerInfo);
    register(registerInfo).then(res => {
      this.storageIdToken(res.data.id_token);
      this.storageRole(Role.USER);
@@ -455,6 +456,10 @@
    });
  };

  storagePhoneOrEmail(registerInfo:RegisterInfo):void{
    localStorage.setItem('userInfo',JSON.stringify(registerInfo));
  }

  confirmApplySuccess(): void {
    this.phoneSuccessConfirmVisable = false;
    this.registerSuccessConfirmVisable = false;

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -1,352 +1,319 @@
<template>
    <div class="ques-page">
        <div class="pb-18">
            <span class="mdTxt">在預約之前，請幫助我們填寫以下問題(<i style="color: #FF0000">*</i>必填)</span>
  <div class="ques-page--reset">
    <div class="ques-header">
        <div class="ques-header__mob-banner"></div>
        <div
          class="ques-header__info"
          v-if="myRequest.contactType==='phone'">
          <div class="text--middle">
              <div class="mdTxt">你指定的聯繫方式</div>
              <div class="mt-10">
                  <span>手機：</span>
                  <span>{{myRequest.phone}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="datepicker required">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList.sync="myRequest.hopeContactTime"/>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>Email：</span>
                  <input class="ques-header__input"
                    placeholder="請輸入"
                    v-model="myRequest.email">
              </div>
          </div>
        </div>
        <div class="pb-18">
            <span class="mdTxt required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
            <span class="hint">可複選</span>
        <div class="ques-header__info" v-else>
          <div class="text--middle">
              <div class="mdTxt">你指定的聯繫方式</div>
              <div class="mt-10 ques-header__input-block">
                  <span>Email：</span>
                  <span>{{myRequest.email}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>手機：</span>
                  <input class="ques-header__input"
                    :class="{'is-invalid': !phoneValid}"
                    placeholder="請輸入"
                    maxlength="10"
                    v-model="myRequest.phone">
              </div>
              <div class="error mt-5 " style="margin-left:65px">
                <span v-show="!phoneValid">手機號碼格式有誤</span>
              </div>
          </div>
          <div class="mt-30" v-if="phoneValid">
              <div class="datepicker">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList.sync="myRequest.hopeContactTime"/>
              </div>
          </div>
        </div>
        <div class="pam-tags">
            <el-button
             class="contactMax Btn"
              :class="{ 'active': isConnectMobile }"
              @click="toggleConnectDevice('mobile')"
            >
              æ‰‹æ©Ÿ
            </el-button>
            <el-button
              class="contactMax Btn"
              :class="{ 'active': isConnectEmail}"
              @click="toggleConnectDevice('email')"
            >
              Email
            </el-button>
    </div>
    <div class="ques-container">
      <div class="pam-paragraph">
        <div class="mdTxt">
            æƒ³è¦è©¢å•çš„問題
            <span class="hint text--bold">
                (可複選)
            </span>
            <i class="icon-information text--bold" @click="showDrawer = true"></i>
        </div>
        <div class="connectDesktop">
            <div v-if="isConnectMobile">
                <span class="fz-20 phone-no">
                  0912345678
                </span>
            </div>
            <el-row class="pb-10 pt-10">
                <el-input
                  v-if="isConnectEmail"
                  class="pam-input"
                  placeholder="請輸入電子郵件信箱"
                  v-model="myRequest.email">
                </el-input>
            </el-row>
            <div v-if="isConnectMobile">
                <div class="datepicker">
                    <span class="mdTxt required">手機連絡的方便時間</span>
                    <PhoneContactTimePicker
                      :scheduleList.sync="myRequest.hopeContactTime"/>
                </div>
            </div>
        </div>
        <MultiSelectBtn class="mt-10"
          :mutiSelect.sync="myRequest.requirement"
          :options="requirementOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">您的性別</div>
        <SingleSelectBtn class="mt-10"
          :singleSelected.sync="myRequest.gender"
          :options="genderOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">年齡</div>
        <SingleSelectBtn class="mt-10"
          :singleSelected.sync="myRequest.age"
          :options="ageRangeOptions" />
      </div>
      <div class="pam-paragraph">
        <CareerSelect :careerSelect.sync="myRequest.job"/>
      </div>
      <div class="pam-paragraph ques-footer">
        <el-button type="primary"
          :disabled="isDisabledSubmitBtn"
          @click.native="sentDemand">
          é€å‡º
        </el-button>
      </div>
    </div>

        <div class="mb-30">
            <div>
            <div class="pb-10 mt-10 mdTxt required">
                æƒ³è¦è©¢å•çš„問題
                <span class="hint text--bold">
                    (可複選)
                </span>
                <i class="icon-information text--bold" @click="showDrawer = true"></i>
            </div>
              <ConsultantQues
                @change="myRequest.myQuestion = $event"
                :selectedQuestions="myRequest.myQuestion"
                class="mb-30"/>
            </div>
        </div>
        <div>
            <div class="pb-10 mdTxt pt-10">您的性別</div>
            <div class="mb-30 pam-tags">
                <el-button class="desktopBtn tags" @click="myRequest.gender = 'male'" :class="{ 'active': myRequest.gender ==='male'}">男性</el-button>
                <el-button class="desktopBtn tags" @click="myRequest.gender = 'female'" :class="{'active': myRequest.gender === 'female'}">女性</el-button>
            </div>
        </div>
        <div class="mdTxt pb-10">年齡</div>
        <div class="pam-age-tags">
            <div>
                <el-button class="ageDesktop" @click="myRequest.age = '20'" :class="{'active': myRequest.age === '20'}">20歲以下</el-button>
                <el-button class="ageDesktop" @click="myRequest.age = '30'" :class="{'active': myRequest.age === '30'}">21-30æ­²</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '40'" :class="{'active': myRequest.age === '40'}">31-40æ­²</el-button>
                <el-button class="ageDesktop" @click="myRequest.age = '50'" :class="{'active': myRequest.age === '50'}">41-50æ­²</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '55'" :class="{'active': myRequest.age === '55'}">46-55æ­²</el-button>
                <el-button class="ageDesktop " @click="myRequest.age = '60'" :class="{'active': myRequest.age === '60'}">51-60æ­²</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '70'" :class="{'active': myRequest.age === '70'}">61-70æ­²</el-button>
                <el-button class="mb-10" @click="myRequest.age = '71'" :class="{'active': myRequest.age === '71'}">71歲以上</el-button>
            </div>
        </div>
    <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
      <div class="qaTextTitle mdTxt">
        <strong>想要詢問的問題</strong>
      </div>
      <div class="qa-dialog">
          <div v-for="(qaText,index) in quesAboutList" :key="index" >
              <div class="pt-10">
                  <p class="p bold">{{qaText.title}}</p>
                  <p class="p">{{qaText.content}}</p>
              </div>
          </div>
      </div>
      <div class="text--center mdTxt mt-10">
          <el-button type="primary" @click="showDrawer = false">我知道了</el-button>
      </div>
    </PopUpFrame>

        <div class="mdTxt pt-10 pb-10">職業</div>
        <div class="job-pick" @click="showJobDrawer = true">
            <input class="fz-20 pl-18 input"
                style="outline:none margin-right:-18px"
                @click="showJobDrawer = true"
                placeholder="請選擇"
                :value="myRequest.job === '其他'
                        ? `其他, ${ myRequest.otherJob }`
                        : myRequest.job"
            >
              <i class="icon-down down-icon" style="margin-right:18px" @click="showJobDrawer = true" ></i>
        </div>

        <div class="ques-footer">
    <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
        <div class="text--middle  mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
        <div class="text--middle  sendReserve-txt">儘速與您聯絡！</div>
        <div class="text--center mdTxt">
          <el-button type="primary"
            :disabled="isInitScheduleDisabled || !isSelectedQues"
            @click.native="sentDemand"
          >
            é€å‡º
            @click="closeReservePopUp">
            æˆ‘知道了
          </el-button>
        </div>

        <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
            <div class="qaTextTitle mdTxt"><strong>想要詢問的問題</strong></div>
                <div class="qa-dialog">
                    <div v-for="(qaText,index) in queaAboutList" :key="index" >
                        <div class="pt-10">
                            <p class="p bold">{{qaText.title}}</p>
                            <p class="p">{{qaText.content}}</p>
                        </div>
                    </div>
                </div>
            <div class="text--center mdTxt mt-10">
                <el-button type="primary" @click="showDrawer = false">我知道了</el-button>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
            <div class="job-drawerTxt fz-20">
                <div class="subTitle mt-18">職業</div>

                <div class="radio-btn">
                    <el-radio-group  class="pam-radio-group--col" v-model="myRequest.job">
                        <el-radio-button style="margin-top:30px" text-color='#F09491' label="外勤"></el-radio-button>
                        <el-radio-button style="margin-top:30px" label="內勤"></el-radio-button>
                        <el-radio-button style="margin-top:30px" label="其他"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="job-inputDiv"><input v-if="myRequest.job === '其他'" class="job-input mb-30 fz-20 pl-20" v-model="myRequest.otherJob" > </div>
                <el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">確定</el-button>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
            <div class="fz-20 mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
            <div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
            <div class="text--center mdTxt">
                <el-button
                    type="primary"
                    @click="closeReservePopUp"
                >我知道了</el-button>
            </div>
        </PopUpFrame>

    </div>
    </PopUpFrame>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests } from '~/assets/ts/api/consultant';
import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
  import { Vue, Component } from 'vue-property-decorator';
  import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
  import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
  import { Gender } from '~/assets/ts/models/enum/Gender';
  import { ContactType } from '~/assets/ts/models/enum/ContactType';
  import _ from 'lodash';

@Component
    export default class Questionnaire extends Vue {
  @Component
  export default class Questionnaire extends Vue {
    genderOptions=[
      {
        title:'男性',
        label:Gender.MALE,
      },
      {
        title:'女性',
        label:Gender.FEMALE,
      }
    ];

                myRequest: AppointmentRequests = {
                  connectDevices: [],
                  hopeContactTime: [{
                    selectWeekOptions:[],
                    selectTimesOptions:[],
                  }],
                  gender: '',
                  email: '',
                  job: '',
                  otherJob: '',
                  myQuestion: [],
                  age: '',
                };
    requirementOptions=[
      {
        title:'健康與保障',
        label:'健康與保障',
      },
      {
        title:'子女教育',
        label:'子女教育',
      },
      {
        title:'資產規劃',
        label:'資產規劃',
      },
      {
        title:'樂活退休',
        label:'樂活退休',
      },
      {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單相關',
        label:'分紅保單相關',
      },
    ];

                showDrawer= false;
                showJobDrawer = false;
                sendReserve = false;
    ageRangeOptions=[
      {
        title:'20歲以下',
        label:'under_20',
      },
      {
        title:'21-30 æ­²',
        label:'21-30'
      },
      {
        title:'31-40 æ­²',
        label:'31-40'
      },
      {
        title:'41-50 æ­²',
        label:'41-50'
      },
      {
        title:'46-55 æ­²',
        label:'46-55',
      },
      {
        title:'51-60 æ­²',
        label:'51-60',
      },
      {
        title:'61-70 æ­²',
        label:'61-70',
      },
      {
        title:'71 æ­²ä»¥ä¸Š',
        label:'over_71',
      }
    ];

                queaAboutList = [
                  {
                      title:'健康與保障',
                      content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
                  },
                  {
                      title:'子女教育',
                      content:'利用分紅保單，規劃教育基金 ææ—©ç‚ºå­å¥³ä½œæº–備，讓生活更有保障！'
                  },
                  {
                      title:'資產規劃',
                      content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
                  },
                  {
                      title:'樂活退休',
                      content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
                  },
                  {
                      title:'保單健檢/規劃',
                      content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
                  },
                  {
                      title:'防疫保單',
                      content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                  }
                ];
    quesAboutList = [
      {
        title:'健康與保障',
        content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
      },
      {
        title:'子女教育',
        content:'利用分紅保單，規劃教育基金 ææ—©ç‚ºå­å¥³ä½œæº–備，讓生活更有保障！'
      },
      {
        title:'資產規劃',
        content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
      },
      {
        title:'樂活退休',
        content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
      },
      {
        title:'保單健檢/規劃',
        content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
      },
      {
        title:'防疫保單',
        content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
      }
    ];

                agentNo!: string;
    myRequest: AppointmentRequests = {
      phone: this.userInfo?.phone ? this.userInfo.phone :'',
      email: this.userInfo?.email ? this.userInfo.email :'',
      contactType: _.isEqual(this.userInfo.contactType,ContactType.SMS) ? ContactType.PHONE : ContactType.EMAIL  ,
      gender: '',
      age: '',
      job: '',
      requirement: [],
      hopeContactTime: [{
        selectWeekOptions: [],
        selectTimesOptions: [],
      }],
      agentNo: this.$route.params.agentNo,
    };

                get disableActionButton(): boolean {
                    return true;
                };
    showDrawer= false;
    sendReserve = false;

                get isConnectMobile(): boolean {
                    return this.myRequest.connectDevices.includes('mobile');
                }

                get isConnectEmail(): boolean {
                    return this.myRequest.connectDevices.includes('email');
                }

                get isSelectedQues(): boolean {
                  return !!this.myRequest.myQuestion.length;
                }

                get isInitScheduleDisabled() {
                  if (this.isConnectMobile && this.isConnectEmail) {
                      return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
                          || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
                          || !this.myRequest.email
                  } else if (this.isConnectMobile) {
                      return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
                        || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
                  } else if (this.isConnectEmail) {
                      return !this.myRequest.email
                  }
                  return true;
                }

                mounted() {
                    this.agentNo = this.$route.params.agentNo;
                    const storageMyRequest = getRequestsFromStorage();
                    if (storageMyRequest) {
                      this.myRequest = storageMyRequest;
                    }
                }

                toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
                    const deviceSelected = this.myRequest.connectDevices.includes(selectDevice);
                    if (deviceSelected) {
                        const deviceIndex = this.myRequest.connectDevices.findIndex((device) => device === selectDevice);
                        this.myRequest.connectDevices.splice(deviceIndex, 1);

                        if (selectDevice === 'mobile') {
                            this.myRequest.hopeContactTime = [{
                                selectWeekOptions:[],
                                selectTimesOptions:[],
                            }]
                        }

                        if (selectDevice === 'email') {
                            this.myRequest.email = '';
                        }
                        return;
                    }
                    this.myRequest.connectDevices.push(selectDevice);
                }

                sentDemand() {
                    addFavoriteConsultant([this.agentNo]).then(res => this.sentAppointmentDemand());
                }

                sentAppointmentDemand() {
                    const data: AppointmentParams = {
                        phone: '09123456789',
                        email: this.myRequest.email,
                        contactType: this.myRequest.connectDevices.toString(),
                        gender: this.myRequest.gender,
                        age: this.myRequest.age,
                        job: this.myRequest.job !== '其他' ? this.myRequest.job : this.myRequest.otherJob,
                        requirement: this.myRequest.myQuestion
                                      .filter((ques) => ques.selected)
                                      .map((selQues) => selQues.name).toString(),
                        hopeContactTime: this.getHopeContactTime(),
                        agentNo: this.agentNo
                    };

                    appointmentDemand(data).then(res => {
                        this.sendReserve = true;
                        console.log('sendMyReq', this.myRequest.myQuestion);
                        this.myRequest.myQuestion = this.myRequest.myQuestion
                                      .filter((ques) => ques.selected)
                                      .map((selQues) => selQues.name);
                        setRequestsToStorage(this.myRequest);
                    });
                }

                getHopeContactTime() {
                    return this.myRequest.hopeContactTime.map(i => {
                        return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
                    ).toString();
                }

                closeReservePopUp() {
                    this.sendReserve = false;
                    this.$router.push('/')
                }
    mounted() {
      const storageMyRequest = getRequestsFromStorage();
      if (storageMyRequest) {
        this.myRequest = storageMyRequest;
      }
    }

    export interface SelectedQuestion {
        name: string;
        selected: boolean;
    get phoneValid(): boolean {
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10) : true;
    }

    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
    }

    get isDisabledSubmitBtn(): boolean {
           return _.includes(this.myRequest.contactType,ContactType.PHONE)
      ? !this.isHopeContactTimeDone()
      : !this.phoneValid;
    }

    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0].selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0].selectTimesOptions.length >0;
    }

    sentDemand() {
      addFavoriteConsultant([this.myRequest.agentNo]).then(res => this.sentAppointmentDemand());
    }

    private sentAppointmentDemand() {
        const data: AppointmentParams = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime:this.phoneValid ? this.getHopeContactTime() :'',
        };

        appointmentDemand(data).then(res => {
            this.sendReserve = true;
            setRequestsToStorage(this.myRequest);
        });
    }

    getHopeContactTime() {
        return this.myRequest.hopeContactTime.map(i => {
            return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
        ).toString();
    }

    closeReservePopUp() {
        this.sendReserve = false;
        this.$router.push('/')
    }

  }
</script>

<style lang="scss" scoped>
.input{
    border:none;
    border-radius: 10px;
}
.pl-18{
    padding-left: 18px;
}
.ageDesktop{
    margin-bottom: 10px;
    margin-right: 20px;
    height:47px;
}
.ageDesktopP2{
    margin-right: 30px;
    margin-bottom: 10px;
    height:47px;
}

.ml-5{
    margin-left: -5px;
}
.mr-25{
    margin-right: 30px;
}
.job-drawerTxt{
  input:focus,textarea:focus {
  outline: none;
  border: 1px solid #ED1B2E;
  }
}

input:focus,textarea:focus {
    outline: none;
    border: 1px solid #FFFFFF;
}

.sendReserve-txt{
    display: flex;
    justify-content: center;
@@ -354,71 +321,16 @@
    margin-bottom: 26px;
}

.job-inputDiv{
    height:90px;
}

.jobBtn{
    font-weight:bold;
}//職業選項,按了變粗體

.job-input{
    height: 50px;
    width: 294px;
    border: 1px solid #FF0000;
}//職業選項,其他輸入框樣式

.job-pick{
    height: 50px;
    border-radius:10px;
    border:1px solid #D0D0CE ;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
}

//drawer最底下文字樣式
.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
    cursor: pointer;
}//drawer最底下文字樣式

.mt-18{
    margin-top: 18px;
}

.job-drawerTxt{
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-button {
    width: 120px;
    height:50px;
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
        border-color: $PRIMARY_RED;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: $PRIMARY_RED;
    }
    &.is-disabled {
    color: $PRIMARY_WHITE;
    background-color: $MID_GREY;
    border-color: $MID_GREY;
    border-style: solid;
    pointer-events: none;
    }
  }
}//職業選項內所有文字排版與按鈕樣式設定

//送出按鈕樣式與排版
.ques-footer{
    justify-content: center;
    margin: 30px 0;
@@ -431,7 +343,7 @@
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .fz-20;
    @extend .text--middle ;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
@@ -448,133 +360,30 @@
    border-style: solid;
    pointer-events: none;
    }
    }
}//送出按鈕樣式與排版
  }
}

//詳細問題drawer中間內容空間大小設置
.qa-dialog{
    overflow-y:auto;
    height: 500px;
    margin-top: 20px;
}//詳細問題drawer中間內容空間大小設置
}

//詳細問題drawer主要標題
.qaTextTitle{
    margin-top:30px;
    display: flex;
    justify-content: center;
}//詳細問題drawer主要標題

.el-drawer__container ::-webkit-scrollbar {
        display: none;
}

.phone-no{
    margin-bottom: 30px;
    margin-left: 5px;
}
.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    cursor: pointer;
}
.el-button+.el-button{
    margin-left: 0;
}

.down-icon{
        color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-top: 11px;
        margin-left: -20px;
}

.job-txt{
    align-self: center;
    margin-left: 18px;
    color:#D0D0CE;
}

.date-txt{
    align-self: center;
    margin-left: 18px;
    color: #68737A;
}

.add-date{
    color:#D0D0CE;
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 20px;
}

.pb-16{
    padding-bottom: 16px;
}

.date-pick{
    height: 50px;
    border-radius:10px;
    border:1px solid #D0D0CE ;
    display: flex;
    justify-content: space-between;
}

.date-icon{
    color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-right: 16px;
        padding-top: 11px;
}

.addDate{
    margin-left: -20px;
}

.ageTags{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.datepicker{
    display: flex;
    flex-direction: column;
}

.pb-18{
    padding-bottom: 18px;
}

.mr-20{
    margin-right: 20px;
}

.pam-age-tags {
    display: flex;
    .el-button {
    border-width: 2px;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: black;
        background-color: #FFFFFF;
        border-color: #D0D0CE;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: #D0D0CE;
    }
    &.active {
        background-color: #F09491;
        color: white;
    }
  }
}

.required {
@@ -587,25 +396,82 @@
    }
}

@include desktop {
.ques-page--reset.pam-page-container {
    margin: 0px auto;
}

    .contactMax{
        margin-right: 10px;
.ques-header {
    position: relative;
}

.ques-header__mob-banner {
  width: 100%;
  min-height: 80px;
  background-color: #F8F9FA;
  background-image: url('~/assets/images/questionnaire/reserve_bg_mob.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.ques-header__info {
  position: relative;
  padding:30px 20px;
  margin: 0px 20px;
  background-color: #B3E7E3;
  border-radius: 10px;
}

.ques-header__input-block {
  display: flex;
  align-items: center;
  @extend .text--middle,.mt-10 ;
  .ques-header__input{
    &.is-invalid{
      border: 2px solid $PRIMARY_RED !important;
    }
    .connectDesktop{
        display: flex;
        flex-direction: column;
    }
    .desktopBtn{
        margin-right: 10px;
        height:47px
    }
    .ageDesktop{
        margin-right: 10px;
    }
    .ageDesktopP2{
        margin-right: 10px;
    }
    flex: 1;
    height: 50px;
    border-radius: 10px;
    border: 1px #CCCCCC solid;
    background-color: $PRIMARY_WHITE;
    padding: 15px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}

.ques-container {
  position: relative;
  margin: 0px 20px;
}


@include desktop{
  .ques-header{
    display: flex;
    justify-content: flex-end;
    min-height: 460px;
    background-image: url('~/assets/images/questionnaire/reserve_bg_web.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  .ques-header__mob-banner{
    display: none;
  }
  .ques-header__info{
    margin: 30px 20px;
    width:500px;
    min-height: 400px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
  }
  .ques-container{
    margin: 0px;
  }
}

</style>

 PAMapp/pages/recommendConsultant/index.vue

@@ -6,7 +6,7 @@
      <div class="pb-10 mdTxt required">顧問所在地區</div>
      <div class="job-pick cursor--pointer"
        @click="showAddress = true">
        <input class="fz-20 input cursor--pointer pl-10"
        <input class="text--middle  input cursor--pointer pl-10"
          :value="strictQueryDto.area"
          placeholder="請選擇">
        <i class="icon-down down-icon"></i>
@@ -27,7 +27,7 @@
      </div>
      <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" />
    </div>
    <div class="pam-paragraph pam-tags">
    <div class="pam-paragraph">
      <div class="pb-10 mdTxt">顧問年資</div>
        <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/>
    </div>

 PAMapp/pages/recommendConsultant/result.vue

@@ -9,7 +9,7 @@
                        <UiAvatar :fileName="info.img" ></UiAvatar>
                    </div>
                    <div class="pam-rec-agent-card__main-info">
                        <div class="fz-20 pt-10 rec-desktop-name">{{ info.name }}</div>
                        <div class="text--middle  pt-10 rec-desktop-name">{{ info.name }}</div>
                        <div class="rec-role">{{ info.role }}</div>
                        <span class="rec-detail fix-chrome-click--issue"  @click="showAgentDetail(info.agentNo)">詳細資料</span>
                    </div>

 pamapi/src/main/java/com/pollex/pam/service/ConsultantQuerySpec.java

@@ -6,10 +6,7 @@
import org.apache.commons.lang3.StringUtils;
import org.springframework.data.jpa.domain.Specification;

import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Predicate;
import javax.persistence.criteria.Root;
import javax.persistence.criteria.*;
import java.util.*;

public class ConsultantQuerySpec {
@@ -62,7 +59,11 @@
                }

                if(StringUtils.isNotEmpty(param.getArea())) {
                    set.add(criteriaBuilder.like(root.get("serveArea"), "%" + param.getArea() + "%"));
                    Predicate predicate1 = criteriaBuilder.like(root.get("serveArea"), "%" + param.getArea() + "%");
                    Predicate predicate2 = criteriaBuilder.like(root.get("serveArea"), "%全台%");

                    Predicate finalPredicate = criteriaBuilder.or(predicate1, predicate2);
                    set.add(finalPredicate);
                }

                List<String> allRequirements = Objects.nonNull(param.getRequirements()) ? param.getRequirements() : new ArrayList<>();