From a8b5f48e21a57e871cfb0ccf6eebbe7c36841c31 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 13 一月 2022 10:05:59 +0800
Subject: [PATCH] update: TODO#134222 [小鈴鐺通知] 客戶/顧問的小鈴鐺通知前端畫面刻版
---
PAMapp/layouts/default.vue | 17 ++
PAMapp/components/NavBar.vue | 14 +
PAMapp/assets/images/notification/banner_mob.svg | 56 ++++++++
PAMapp/assets/images/notification/banner_web.svg | 60 ++++++++
PAMapp/assets/images/satisfaction/satisfactionBtn_web.svg | 0
PAMapp/assets/scss/vendors/elementUI/_rate.scss | 16 ++
PAMapp/pages/notification/index.vue | 133 ++++++++++++++++++
PAMapp/pages/satisfactionList.vue | 102 ++++++++++++++
PAMapp/assets/images/satisfaction/satisfactionBtn_mob.svg | 0
9 files changed, 390 insertions(+), 8 deletions(-)
diff --git a/PAMapp/assets/images/notification/banner_mob.svg b/PAMapp/assets/images/notification/banner_mob.svg
new file mode 100644
index 0000000..6f4631d
--- /dev/null
+++ b/PAMapp/assets/images/notification/banner_mob.svg
@@ -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>
diff --git a/PAMapp/assets/images/notification/banner_web.svg b/PAMapp/assets/images/notification/banner_web.svg
new file mode 100644
index 0000000..f13523e
--- /dev/null
+++ b/PAMapp/assets/images/notification/banner_web.svg
@@ -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>
diff --git a/PAMapp/assets/images/satisfaction/notification_mob.svg b/PAMapp/assets/images/satisfaction/satisfactionBtn_mob.svg
similarity index 100%
rename from PAMapp/assets/images/satisfaction/notification_mob.svg
rename to PAMapp/assets/images/satisfaction/satisfactionBtn_mob.svg
diff --git a/PAMapp/assets/images/satisfaction/notification_web.svg b/PAMapp/assets/images/satisfaction/satisfactionBtn_web.svg
similarity index 100%
rename from PAMapp/assets/images/satisfaction/notification_web.svg
rename to PAMapp/assets/images/satisfaction/satisfactionBtn_web.svg
diff --git a/PAMapp/assets/scss/vendors/elementUI/_rate.scss b/PAMapp/assets/scss/vendors/elementUI/_rate.scss
index cd069c1..c8259f2 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_rate.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 44664b0..58a73cd 100644
--- a/PAMapp/components/NavBar.vue
+++ b/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],
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index 0e9d11d..605a5b5 100644
--- a/PAMapp/layouts/default.vue
+++ b/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>
diff --git a/PAMapp/pages/notification/index.vue b/PAMapp/pages/notification/index.vue
index 6d66b10..d9f0140 100644
--- a/PAMapp/pages/notification/index.vue
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/PAMapp/pages/satisfactionList.vue b/PAMapp/pages/satisfactionList.vue
new file mode 100644
index 0000000..e54717c
--- /dev/null
+++ b/PAMapp/pages/satisfactionList.vue
@@ -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>
\ No newline at end of file
--
Gitblit v1.8.0