update: TODO#134222 [小鈴鐺通知] 客戶/顧問的小鈴鐺通知前端畫面刻版

Mila

2022-01-13 a8b5f48e21a57e871cfb0ccf6eebbe7c36841c31

update: TODO#134222 [小鈴鐺通知] 客戶/顧問的小鈴鐺通知前端畫面刻版

 PAMapp/assets/images/notification/banner_mob.svg

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,56 @@
<svg id="notification_mob" data-name="notification â€“ mob" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="120" viewBox="0 0 375 120">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_4042" data-name="Rectangle 4042" width="375" height="120" fill="none"/>
    </clipPath>
    <linearGradient id="linear-gradient" x1="-1.128" y1="2.281" x2="-0.128" y2="2.281" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#edc9c7"/>
      <stop offset="1" stop-color="#f3e2e1"/>
    </linearGradient>
  </defs>
  <g id="Group_3388" data-name="Group 3388" transform="translate(1 -1)">
    <g id="Group_3387" data-name="Group 3387" transform="translate(-1 1)" clip-path="url(#clip-path)">
      <g id="Group_3386" data-name="Group 3386" transform="translate(-3.5 -50.5)">
        <g id="Group_3383" data-name="Group 3383" transform="translate(0 42.5)">
          <rect id="Rectangle_4025" data-name="Rectangle 4025" width="134.5" height="398" transform="translate(0 134.5) rotate(-90)" fill="url(#linear-gradient)"/>
        </g>
        <rect id="Rectangle_4026" data-name="Rectangle 4026" width="225" height="72.5" transform="translate(161 111.5)" fill="#f09491"/>
        <rect id="Rectangle_4027" data-name="Rectangle 4027" width="375" height="120" transform="translate(4.5 50.5)" fill="none"/>
        <path id="Path_8048" data-name="Path 8048" d="M505.6,13.343,480.284-95.912a5.277,5.277,0,0,0-6.332-3.95L183.977-32.675a5.278,5.278,0,0,0-3.951,6.332l8.8,38.431L173,24.641a2.912,2.912,0,0,0,1.188,5.127l19.738,4.31,11.418,48.835a5.278,5.278,0,0,0,6.333,3.95L501.649,19.675A5.277,5.277,0,0,0,505.6,13.343Z" transform="translate(-81.946 100)" fill="#f09491"/>
        <path id="Path_8049" data-name="Path 8049" d="M472.4,135.243l-74.942,34.674a8.661,8.661,0,0,1-6.521-.636L359.2,143.793a2.154,2.154,0,0,1,.792-3.589l80.219-29.133a5.109,5.109,0,0,1,4.938.636l27.519,19.947C473.986,132.974,473.733,134.648,472.4,135.243Z" transform="translate(-175.259 -5.352)" fill="#1b365d" opacity="0.5"/>
        <path id="Path_8050" data-name="Path 8050" d="M473.873,114.133l-74.941,34.674a8.667,8.667,0,0,1-6.522-.636l-31.741-25.488c-.168-.112-.838-.452-.792-1.056.264-3.43.007-6.92,1.055-7.388L441.68,89.962a5.106,5.106,0,0,1,4.938.636l28.574,15.725C475.72,108.433,475.2,113.538,473.873,114.133Z" transform="translate(-175.937 5.203)" fill="#a7a8aa"/>
        <path id="Path_8051" data-name="Path 8051" d="M474.514,103.05l-74.942,34.674a8.663,8.663,0,0,1-6.521-.636L361.309,111.6a2.154,2.154,0,0,1,.792-3.589l80.22-29.132a5.108,5.108,0,0,1,4.938.636l27.519,19.947C476.1,100.781,475.844,102.455,474.514,103.05Z" transform="translate(-176.314 10.745)" fill="#feecdc"/>
        <path id="Path_8052" data-name="Path 8052" d="M495.549,118.372l-14.578,6.789a5.2,5.2,0,0,1-4.223-.825l-21.506-16.67a1.6,1.6,0,0,1,.313-2.61l15.366-5.78a3.132,3.132,0,0,1,3.206.739l21.4,15.717C496.443,116.78,496.371,118,495.549,118.372Z" transform="translate(-223.36 0.453)" fill="#fff"/>
        <path id="Path_8053" data-name="Path 8053" d="M437,142.121l-14.578,6.789a5.2,5.2,0,0,1-4.223-.824l-22.006-17.17a1.6,1.6,0,0,1,.314-2.61l15.866-5.28a3.133,3.133,0,0,1,3.206.739l21.4,15.717C437.889,140.529,437.817,141.753,437,142.121Z" transform="translate(-193.833 -11.422)" fill="#fff"/>
        <path id="Path_8054" data-name="Path 8054" d="M540.751,104.906l-1.5,1.383a1.669,1.669,0,0,1-1.353-.264l-6.625-5.4a.512.512,0,0,1,.1-.836l1.492-1a1,1,0,0,1,1.027.237l6.863,5C541.045,104.365,541.015,104.558,540.751,104.906Z" transform="translate(-261.551 0.635)" fill="#a7a8aa"/>
        <path id="Path_8055" data-name="Path 8055" d="M391.314,173.552l-.712.939a.715.715,0,0,1-.871-.148L383.4,169.33a.634.634,0,0,1-.146-.807l.674-.776c.263-.118.725-.3,1.055,0l6.069,4.75C391.344,172.832,391.578,173.2,391.314,173.552Z" transform="translate(-187.583 -33.791)" fill="#fff"/>
        <rect id="Rectangle_4028" data-name="Rectangle 4028" width="24.277" height="24.541" rx="5.278" transform="translate(131.955 109.942)" fill="#5cb8b2"/>
        <rect id="Rectangle_4029" data-name="Rectangle 4029" width="30.61" height="30.943" rx="5.278" transform="translate(178.662 59.277)" fill="#fff" opacity="0.7"/>
        <rect id="Rectangle_4030" data-name="Rectangle 4030" width="30.61" height="30.943" rx="5.278" transform="translate(236.452 67.194)" fill="#f2c75c" opacity="0.7"/>
        <path id="Path_8056" data-name="Path 8056" d="M149.422,69.681l-6.879,10.753,7.88,6.207-9.28,9.1,5.192-8.723-7.1-5.9Z" transform="translate(-65.616 15.16)" fill="#fff"/>
        <path id="Path_8057" data-name="Path 8057" d="M187.495,180.835,175.68,176l-4.688,8.868-10.621-7.492,9.515,3.539,4.53-8.048Z" transform="translate(-76.186 -36.434)" fill="#fff"/>
        <g id="Group_3384" data-name="Group 3384" transform="translate(21.25 101.584)">
          <ellipse id="Ellipse_684" data-name="Ellipse 684" cx="4.354" cy="4.882" rx="4.354" ry="4.882" transform="translate(18.449 43.12) rotate(-89.901)" fill="#d0d0ce"/>
          <path id="Path_8058" data-name="Path 8058" d="M67.989,173.6s-1.589,3.163-.278,8.179,3.676,11.09,3.676,11.09,1.052,1.849-.268,2.374-7.129,2.627-7.129,2.627-2.641,1.051-3.43-.534-8.145-20.6-8.145-20.6Z" transform="translate(-43.457 -138.383)" fill="#a7a8aa"/>
          <circle id="Ellipse_685" data-name="Ellipse 685" cx="6.333" cy="6.333" r="6.333" transform="translate(40.134 9.656)" fill="#f09491"/>
          <circle id="Ellipse_686" data-name="Ellipse 686" cx="7.784" cy="7.784" r="7.784" transform="translate(0 22.255)" fill="#68737a"/>
          <path id="Path_8059" data-name="Path 8059" d="M42.159,132.015s-4.736-7.66,9-13.442,16.637-7.1,21.922-11.837,6.34-4.211,7.656-1.57,8.929,25.084,9.451,28.251-1.328,5.011-6.869,4.738-19.267,1.814-25.6,3.65S44.771,147.06,42.159,132.015Z" transform="translate(-37.934 -103.169)" fill="#fff"/>
          <path id="Path_8060" data-name="Path 8060" d="M52.376,131.871l7.244,23.674s-7.028,4.033-11.511,2.706-6.318-8.983-6.318-8.983-3.677-10.033,2.134-13.19A91.3,91.3,0,0,1,52.376,131.871Z" transform="translate(-37.571 -117.52)" fill="#f09491"/>
        </g>
        <rect id="Rectangle_4031" data-name="Rectangle 4031" width="21.374" height="3.43" transform="translate(183.28 71.811)" fill="#d0d0ce"/>
        <rect id="Rectangle_4032" data-name="Rectangle 4032" width="21.374" height="3.43" transform="translate(183.28 65.214)" fill="#d0d0ce"/>
        <rect id="Rectangle_4033" data-name="Rectangle 4033" width="13.986" height="3.43" transform="translate(183.28 78.409)" fill="#d0d0ce"/>
        <rect id="Rectangle_4034" data-name="Rectangle 4034" width="21.374" height="3.43" transform="translate(240.806 73.659)" fill="#d0d0ce"/>
        <rect id="Rectangle_4035" data-name="Rectangle 4035" width="13.986" height="3.43" transform="translate(240.806 80.256)" fill="#d0d0ce"/>
        <rect id="Rectangle_4036" data-name="Rectangle 4036" width="17.416" height="3.43" transform="translate(135.254 114.824)" fill="#d0d0ce"/>
        <rect id="Rectangle_4037" data-name="Rectangle 4037" width="11.396" height="3.43" transform="translate(135.254 121.421)" fill="#d0d0ce"/>
        <g id="Group_3385" data-name="Group 3385" transform="translate(312.602 82.875)">
          <rect id="Rectangle_4038" data-name="Rectangle 4038" width="37.851" height="38.263" rx="5.278" fill="#fff"/>
          <rect id="Rectangle_4039" data-name="Rectangle 4039" width="30.346" height="3.43" transform="translate(4.09 12.27)" fill="#d0d0ce"/>
          <rect id="Rectangle_4040" data-name="Rectangle 4040" width="30.346" height="3.43" transform="translate(4.09 5.673)" fill="#d0d0ce"/>
          <rect id="Rectangle_4041" data-name="Rectangle 4041" width="19.856" height="3.43" transform="translate(4.09 18.867)" fill="#d0d0ce"/>
        </g>
      </g>
    </g>
  </g>
</svg>

 PAMapp/assets/images/notification/banner_web.svg

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,60 @@
<svg id="notification_web" data-name="notification â€“ web" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="150" viewBox="0 0 1280 150">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_3981" data-name="Rectangle 3981" width="1280" height="150" transform="translate(0 1)" fill="none"/>
    </clipPath>
    <linearGradient id="linear-gradient" x1="-9.872" y1="-2.825" x2="-8.872" y2="-2.825" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#edc9c7"/>
      <stop offset="1" stop-color="#f3e2e1"/>
    </linearGradient>
  </defs>
  <g id="Group_3422" data-name="Group 3422" transform="translate(0 -1)">
    <g id="Group_3421" data-name="Group 3421" clip-path="url(#clip-path)">
      <g id="Group_3420" data-name="Group 3420">
        <g id="Group_3415" data-name="Group 3415">
          <rect id="Rectangle_3964" data-name="Rectangle 3964" width="269" height="796" transform="translate(-6 247) rotate(-90)" fill="url(#linear-gradient)"/>
        </g>
        <rect id="Rectangle_3965" data-name="Rectangle 3965" width="751.302" height="155.546" transform="translate(541.045 18.832)" fill="#f09491"/>
        <rect id="Rectangle_3966" data-name="Rectangle 3966" width="750" height="240" transform="translate(3 -6)" fill="none"/>
        <path id="Path_8017" data-name="Path 8017" d="M1299.375,29.165l-38.229-164.992a7.971,7.971,0,0,0-9.564-5.966L451.993-1.82a7.971,7.971,0,0,0-5.966,9.563L459.318,65.78,435.41,84.735a4.4,4.4,0,0,0,1.794,7.743l29.808,6.509,17.244,73.748a7.971,7.971,0,0,0,9.564,5.966L1293.409,38.728A7.971,7.971,0,0,0,1299.375,29.165Z" fill="#f09491"/>
        <path id="Path_8018" data-name="Path 8018" d="M746.643,92.665,633.469,145.029c-2.009.9-7.173.8-9.848-.961l-47.934-38.491c-1.993-1.993-.813-4.521,1.2-5.419L698.026,56.163a7.716,7.716,0,0,1,7.458.96l41.558,30.123C749.034,89.238,748.652,91.767,746.643,92.665Z" fill="#1b365d" opacity="0.5"/>
        <path id="Path_8019" data-name="Path 8019" d="M747.838,76.725,634.665,129.088c-2.009.9-7.173.8-9.848-.96L576.882,89.637c-.253-.169-1.265-.684-1.2-1.594.4-5.181.011-10.45,1.594-11.158L699.222,40.223a7.712,7.712,0,0,1,7.457.96L749.831,64.93C750.628,68.118,749.848,75.827,747.838,76.725Z" fill="#a7a8aa"/>
        <path id="Path_8020" data-name="Path 8020" d="M748.237,68.357,635.063,120.72c-2.009.9-7.173.8-9.848-.96L577.281,81.268c-1.993-1.992-.813-4.521,1.2-5.419L699.62,31.854a7.714,7.714,0,0,1,7.458.961l41.558,30.122C750.628,64.93,750.246,67.458,748.237,68.357Z" fill="#feecdc"/>
        <path id="Path_8021" data-name="Path 8021" d="M708.958,75.952,686.943,86.205c-1.241.555-4.563.2-6.377-1.245L648.089,59.786c-1.388-1.582-.768-3.388.473-3.943l23.205-8.728a4.73,4.73,0,0,1,4.841,1.115L708.92,71.966C710.308,73.548,710.2,75.4,708.958,75.952Z" fill="#fff"/>
        <path id="Path_8022" data-name="Path 8022" d="M665.123,93.885l-22.015,10.253c-1.241.555-4.563.2-6.377-1.246L603.5,76.963c-1.388-1.582-.768-3.387.473-3.942l23.96-7.974a4.73,4.73,0,0,1,4.841,1.116L665.085,89.9C666.473,91.481,666.364,93.329,665.123,93.885Z" fill="#fff"/>
        <path id="Path_8023" data-name="Path 8023" d="M719.545,55.892l-2.271,2.089a2.518,2.518,0,0,1-2.042-.4l-10.006-8.15a.774.774,0,0,1,.152-1.263l2.253-1.515a1.515,1.515,0,0,1,1.551.357l10.363,7.558C719.99,55.076,719.944,55.366,719.545,55.892Z" fill="#a7a8aa"/>
        <path id="Path_8024" data-name="Path 8024" d="M605.574,107.569l-1.075,1.42a1.082,1.082,0,0,1-1.316-.224l-9.564-7.572a.959.959,0,0,1-.22-1.219l1.017-1.172c.4-.177,1.095-.455,1.594,0l9.166,7.173C605.62,106.482,605.974,107.044,605.574,107.569Z" fill="#fff"/>
        <rect id="Rectangle_3967" data-name="Rectangle 3967" width="36.662" height="37.061" rx="3.985" transform="translate(497.182 62.539)" fill="#5cb8b2"/>
        <path id="Path_8025" data-name="Path 8025" d="M424.469,22.631,414.081,38.869l11.9,9.373L411.966,61.985l7.841-13.174L409.082,39.9Z" fill="#fff"/>
        <path id="Path_8026" data-name="Path 8026" d="M466,112.577l-17.842-7.3-7.08,13.392-16.039-11.314,14.369,5.344,6.841-12.154Z" fill="#fff"/>
        <g id="Group_3416" data-name="Group 3416">
          <ellipse id="Ellipse_678" data-name="Ellipse 678" cx="6.575" cy="7.372" rx="6.575" ry="7.372" transform="translate(357.861 113.036) rotate(-89.901)" fill="#d0d0ce"/>
          <path id="Path_8027" data-name="Path 8027" d="M367.047,101.1s-2.4,4.778-.42,12.353,5.55,16.747,5.55,16.747,1.589,2.792-.4,3.586-10.767,3.966-10.767,3.966-3.988,1.587-5.179-.806-12.3-31.1-12.3-31.1Z" fill="#a7a8aa"/>
          <circle id="Ellipse_679" data-name="Ellipse 679" cx="9.564" cy="9.564" r="9.564" transform="translate(390.609 62.499)" fill="#f09491"/>
          <circle id="Ellipse_680" data-name="Ellipse 680" cx="11.756" cy="11.756" r="11.756" transform="translate(330 81.526)" fill="#68737a"/>
          <path id="Path_8028" data-name="Path 8028" d="M336.379,91.479s-7.153-11.569,13.584-20.3S375.087,60.463,383.07,53.3s9.575-6.36,11.56-2.371S408.114,88.814,408.9,93.6s-2.006,7.568-10.374,7.155-29.1,2.739-38.664,5.512S340.325,114.2,336.379,91.479Z" fill="#fff"/>
          <path id="Path_8029" data-name="Path 8029" d="M352.357,69.589,363.3,105.342s-10.613,6.091-17.384,4.086-9.54-13.565-9.54-13.565-5.553-15.153,3.222-19.92A137.735,137.735,0,0,1,352.357,69.589Z" fill="#f09491"/>
        </g>
        <g id="Group_3417" data-name="Group 3417">
          <rect id="Rectangle_3968" data-name="Rectangle 3968" width="33.608" height="33.973" rx="2.897" transform="translate(560.717 13.027)" fill="#fff" opacity="0.7"/>
          <rect id="Rectangle_3969" data-name="Rectangle 3969" width="23.468" height="3.766" transform="translate(565.787 26.789)" fill="#d0d0ce"/>
          <rect id="Rectangle_3970" data-name="Rectangle 3970" width="23.468" height="3.766" transform="translate(565.787 19.546)" fill="#d0d0ce"/>
          <rect id="Rectangle_3971" data-name="Rectangle 3971" width="15.355" height="3.766" transform="translate(565.787 34.032)" fill="#d0d0ce"/>
        </g>
        <g id="Group_3418" data-name="Group 3418">
          <rect id="Rectangle_3972" data-name="Rectangle 3972" width="46.226" height="46.729" rx="3.985" transform="translate(649.988 8.982)" fill="#f2c75c" opacity="0.7"/>
          <rect id="Rectangle_3973" data-name="Rectangle 3973" width="32.279" height="5.181" transform="translate(656.564 18.745)" fill="#d0d0ce"/>
          <rect id="Rectangle_3974" data-name="Rectangle 3974" width="21.121" height="5.181" transform="translate(656.564 28.708)" fill="#d0d0ce"/>
        </g>
        <rect id="Rectangle_3975" data-name="Rectangle 3975" width="26.301" height="5.181" transform="translate(502.163 69.911)" fill="#d0d0ce"/>
        <rect id="Rectangle_3976" data-name="Rectangle 3976" width="17.209" height="5.181" transform="translate(502.163 79.874)" fill="#d0d0ce"/>
        <g id="Group_3419" data-name="Group 3419">
          <rect id="Rectangle_3977" data-name="Rectangle 3977" width="57.161" height="57.783" rx="3.985" transform="translate(769.988 32.663)" fill="#fff"/>
          <rect id="Rectangle_3978" data-name="Rectangle 3978" width="45.828" height="5.181" transform="translate(776.164 51.193)" fill="#d0d0ce"/>
          <rect id="Rectangle_3979" data-name="Rectangle 3979" width="45.828" height="5.181" transform="translate(776.164 41.231)" fill="#d0d0ce"/>
          <rect id="Rectangle_3980" data-name="Rectangle 3980" width="29.986" height="5.181" transform="translate(776.164 61.156)" fill="#d0d0ce"/>
        </g>
      </g>
    </g>
  </g>
</svg>

 PAMapp/assets/images/satisfaction/satisfactionBtn_mob.svg

 PAMapp/assets/images/satisfaction/satisfactionBtn_web.svg

 PAMapp/assets/scss/vendors/elementUI/_rate.scss

@@ -40,3 +40,19 @@
    }
  }
}

.pam-satisfaction-rate {
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  .el-rate__item {
    .el-rate__icon {
      font-size: 30px;
    }

    .el-icon-star-off {
      color: $PRIMARY_BLACK !important;
    }
  }
}

 PAMapp/components/NavBar.vue

@@ -7,13 +7,20 @@
      <div class="pam-header__title--sub">預約我的幸福守護者</div>
    </div>
    <div class="pam-header__action-bar">
      <!-- <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        @click="$router.push('/notification')"></i> -->
      <i
        v-if="currentRole"
        class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        @click="$router.push('/notification')"
      ></i>
        <el-dropdown :class="{'is-open':isOpenDropdown}"
          ref="dropdown"
          trigger="click"
          @command="routerNavigateTo">
          <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue" @click="isOpenDropdown =!isOpenDropdown" @blur="isOpenDropdown =false"></i>
          <i
            class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"
            @click="isOpenDropdown =!isOpenDropdown"
            @blur="isOpenDropdown =false"
          ></i>
          <el-dropdown-menu
            class="pam-header__dropdown">
            <template v-for="(item,index) in navBarList">
@@ -48,7 +55,6 @@
    @roleStorage.Mutation storageClear!: () => void;

    isOpenDropdown = false;
    login_role     = Role.NOT_LOGIN;

    navBarList = [{
        authorityOfRoleList: [Role.NOT_LOGIN],

 PAMapp/layouts/default.vue

@@ -57,7 +57,7 @@

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
      const needBannerRoutes = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList', 'myConsultantList-contactedList', 'myAppointmentList-appointmentList', 'myAppointmentList-contactedList', 'login'];
      const needBannerRoutes = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList', 'myConsultantList-contactedList', 'myAppointmentList-appointmentList', 'myAppointmentList-contactedList', 'login', 'notification'];
      return _.includes(needBannerRoutes, route) ? route + '-banner' : 'pam-no-banner';
    };

@@ -114,6 +114,9 @@
  }

  @include desktop {
    .pam-banner  {
      height: 150px;
    }
    .mt-navBar {
      margin-top: calc($DESKTOP_NAV_BAR + $MOB_NAV_BAR);
    }
@@ -219,4 +222,16 @@
    }
  }

  .notification {
    &-banner {
      background-image: url('~/assets/images/notification/banner_mob.svg');
    }

    @include desktop {
      &-banner {
        background-image: url('~/assets/images/notification/banner_web.svg');
      }
    }
  }

</style>

 PAMapp/pages/notification/index.vue

@@ -1,5 +1,132 @@
<template>
    <div>通知功能
        <el-button @click="$router.push('/notification/detail')">通知細節</el-button>
    <div>
        <div class="text--right mb-10" @click="showNotificationHint = true">
            <i class="satisfaction-icon icon-edit"></i>
        </div>
        <div class="satisfaction-banner my-10 cursor--pointer" @click="$router.push('/satisfactionList')">
            <p class="satisfaction-text text--center">請填寫滿意度調查</p>
        </div>
        <el-row
            v-for="(item, index) in notificationList"
            :key="index"
            type="flex"
            justify="space-between"
            align="middle"
            class="notification-card"
        >
            <el-col class="unRead" :span="3"></el-col>
            <el-col :span="18">
                <p class="text">{{item.content}}</p>
            </el-col>
            <el-col :span="3" class="notification-period text--right">
                <div>
                    <UiDateFormat
                        class="date"
                        :date="item.date"
                        onlyShowSection="DAY" />
                </div>
                <div>
                    <UiDateFormat
                        class="time"
                        :date="item.date"
                        onlyShowSection="TIME" />
                </div>

            </el-col>
        </el-row>

        <PopUpFrame
             :isOpen.sync="showNotificationHint"
        >
            <div class="text--center mdTxt">
                <p class="mb-30">通知</p>
                <div class="mb-20 cursor--pointer">全部已讀</div>
                <div class="cursor--pointer">全部刪除</div>
                <div class="text--center mt-30">
                    <el-button
                        type="primary"
                        @click="showNotificationHint = false"
                    >確定</el-button>
                </div>
            </div>
        </PopUpFrame>
    </div>
</template>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class Notification extends Vue {
    showNotificationHint = false;

    notificationList = [
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        },
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        }
    ]
}
</script>

<style lang="scss" scoped>
    .satisfaction-banner {
        width: 100%;
        height: 60px;
        background-image: url('~/assets/images/satisfaction/satisfactionBtn_mob.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 10px;

        .satisfaction-text {
            @extend .mdTxt;
            @extend .text--PRIMARY_WHITE;
            line-height: 60px;
        }

        @include desktop {
            height: 110px;
            background-image: url('~/assets/images/satisfaction/satisfactionBtn_web.svg');

            .satisfaction-text {
                font-size: 24px;
                line-height: 110px;
            }
        }
    }

    .notification-card {
        padding: 10px;
        border-bottom: solid 1px #CCCCCC;

        .unRead {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $YELLOW;
        }

        .notification-period {
            color: #707070;
            .date {
                font-size: 10px;
                line-height: 12px;
            }
            .time {
                font-size: 12px;
                line-height: 14px;
            }
        }

    }

    .satisfaction-icon {
        font-size: 24px;
        @extend .cursor--pointer;
    }
</style>

 PAMapp/pages/satisfactionList.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,102 @@
<template>
  <div>
    <div class="pam-satisfaction-banner"></div>
    <div class="pam-container">
      <div class="satisfaction-title">
        <span class="mdTxt">滿意度調查</span>
        <span class="ml-10 text--prudential_grey smTxt_bold">共 {{satisfactionList.length}} ç­†</span>
      </div>
      <div class="satisfaction-card" v-for="(item, index) in satisfactionList" :key="index">
        <div class="satisfaction-card-content">
          <UiAvatar :size="80" :agentNo="''"></UiAvatar>
          <div class="satisfaction-card-text">對於顧問
              <span class="text--primary text--bold">{{item.agentName}}</span>
              çš„整體服務，您給予幾顆星評價？
          </div>
        </div>
        <el-rate v-model="item.score" class="pam-satisfaction-rate mt-10"></el-rate>
      </div>
      <div class="text--center mt-30">
        <el-button type="primary" :disabled="isBtnDisabled">送出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue, Component } from 'nuxt-property-decorator';

@Component({
  layout: 'home'
})
export default class MySatisfactionList extends Vue {
  satisfactionList = [
    {
      agentName: '蔡美眉',
      score: 0
    },
    {
      agentName: '蔡美眉',
      score: 0
    }
  ]

  get isBtnDisabled() {
    return this.satisfactionList.findIndex(item => item.score > 0) === -1;
  }
}
</script>

<style lang="scss" scoped>
.pam-satisfaction-banner {
    width              : 100%;
    height             : 120px;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center;
    position           : relative;
    background-image   : url('~/assets/images/satisfaction/banner_mob.svg');
}

@media (min-width: 768px) {
    .pam-satisfaction-banner {
        height          : 150px;
        background-image: url('~/assets/images/satisfaction/banner_web.svg');
    }
}

.pam-container {
    margin: 30px 20px;
}

@include desktop {
    .pam-container {
        width : 700px;
        margin: 30px auto;
    }
}
.satisfaction-card {
  margin-top       : 20px;
  .satisfaction-card-content {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    .satisfaction-card-text {
      width        : 75%;
      line-height  : 28px;
      align-self: center;
      font-size: 20px;
      padding-left: 10px;
    }

    @include desktop {
        justify-content: flex-start;
        .satisfaction-card-text {
          width        : auto;
          padding-left: 30px;
        }
      }
  }

}
</style>