Merge remote-tracking branch 'origin/master'

wayne

2021-11-16 647946725fdb607c8dbcabf30e4a5a94eab2561c

 PAMapp/components/NavBar.vue

@@ -1,31 +1,19 @@
<template>
    <header class="pam-header">
      <img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/')">
    <div class="pam-header__logo" @click="$router.push('/')"></div>
        <div class="pam-header__title">
          我的幸福我作主
          <div class="pam-header__sub-title">
            預約我的幸福守護者
      <div class="pam-header__title--main">我的幸福我做主</div>
      <div class="pam-header__title--sub">預約我的幸福守護者</div>
          </div>
        </div>
        <div class="pam-header__action-bar">
          <i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i>
          <!-- <el-dropdown @command="handleCommand">
            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
              <li class="pam-header__dropdown-item" @click="$router.push('/login')">登入</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/accountSetting')">個人帳號設定</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">查看紀錄</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/myConsultantList/consultantList')">我的顧問清單</li>
              <li class="pam-header__dropdown-item">登出</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">顧問登入</li>
            </el-dropdown-menu>
          </el-dropdown> -->

    <div class="pam-header__action-bar" style="position:relaitive">
      <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
        @click="$router.push('/notification')"></i>
          <el-dropdown>
            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
        <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
        <el-dropdown-menu slot="dropdown"
          class="pam-header__dropdown">
              <template v-for="(navbarItem,index) in navBarList">
                <li class="pam-header__dropdown-item" 
            <li class="pam-header__dropdown-item fix-chrome-click--issue "
                  :class="{'pam-header__dropdown-divider':navbarItem.title === '顧問登入'}" 
                  v-if="navbarItem.needRole.includes(loginRole)" 
                  :key="index" 
@@ -44,8 +32,7 @@
import * as _ from 'lodash';
@Component
export default class NavBar extends Vue {
  navBarList=[
    {
    navBarList = [{
      needRole:[Role.NOT_LOGIN],
      link:'/login',
      title:'登入',
@@ -76,7 +63,7 @@
      title:'登出',
    },
    {
      needRole:[Role.NOT_LOGIN,Role.USER],
        needRole: [Role.NOT_LOGIN],
      link:'/consultantLogin',
      title:'顧問登入',
    },
@@ -107,45 +94,100 @@
  ADMIN='admin',
  NOT_LOGIN='',
}

</script>

<style lang="scss" scoped>
.pam-header {
  height: 53px;
    position: fixed;
    top: 0;
    height: $MOB_NAV_BAR;
    width: 100%;
  display: flex;
  align-items: center;
    background-color: $PRIMARY_WHITE;
    z-index: 3;
    
  .pam-header__logo {
    height: 100%;
      height: 30px;
      width: 115px;
      margin: 0 10px;
      background-image: url('~/assets/images/taiwan-logo.png');
      background-repeat:no-repeat;
      background-size: contain;
      background-position: center;
  }
  .pam-header__title {
    flex: 1;
    margin: 10px 0;
      flex-basis: 160px;
      border-left:1px #CCCCCC solid;
    padding-left: 10px;
    border-left: 1px solid #CCCCCC;
      .pam-header__title--main {
    font-size: 16px;
    font-weight: bold;
    color: $PRUDENTIAL_GREY;
    letter-spacing: 3.6px;
    flex-basis: 140px;
    .pam-header__sub-title {
        letter-spacing:0.8px;
        @media screen and (max-width: 352px) {
          font-size: 12px;
        }
      }
      .pam-header__title--sub {
      padding-top: 2px;
      font-size: 13px;
        font-size: 12px;
        transform: scale(0.9);
        -webkit-transform-origin-x: 0;
      font-weight: bold;
      color: $CORAL;
      letter-spacing: 1.2px
        letter-spacing: 1.2px;
    }
  }


  .pam-header__action-bar {
    display: flex;
    font-size: 24px;
    font-weight: bold;
    justify-content: space-around;

    i {
      padding: 0 15px;
      @media screen and (max-width: 320px) {
        padding: 0 5px;
        padding: 0px 15px;
        @media screen and (max-width: 352px) {
          padding: 0px 10px;
      }
    }
  }
}

  @include desktop {
    .pam-header {
      height: $DESKTOP_NAV_BAR;
      .pam-header__logo {
        width: 180px;
        height: 100%;
        margin: 0;
        background-image: url('~/assets/images/logo.png');
        background-size: cover;
        background-repeat:no-repeat;
        background-position: center;
      }
      .pam-header__title {
        display: flex;
        justify-content: start;
        align-items: center;
        border: none;
        padding-left: 30px;
        .pam-header__title--main{
          font-size: 30px;
          letter-spacing: 1.5px;
        }
        .pam-header__title--sub{
          font-size: 20px;
          letter-spacing: 2px;
          transform: none;
          margin-left: 30px;
        }
      }
    }
  }

</style>