update#129066 - [header] 前端畫面刻版 - 下拉選單

Tomas

2021-11-01 64cb4a2150e2c9fbdc294ad1fc70f523120c88b3

update#129066 - [header] 前端畫面刻版 - 下拉選單

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -1,3 +1,4 @@
@import './elementUI/avatar';
@import './elementUI/button';
@import './elementUI/progress';
@import './elementUI/dropdown';

 PAMapp/assets/scss/vendors/elementUI/_dropdown.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,20 @@
.pam-header__dropdown {
  border-radius: 10px;
  box-shadow: 0 3px 6px lightgray;
  padding: 20px 26px 20px 20px;
  .pam-header__dropdown-item {
    width: max-content;
    padding-bottom: 16px;
  }
  .pam-header__dropdown-divider {
    padding-top: 16px;
    width: calc(100% + 6px);
    border-top: 1px solid #CCCCCC;
  }
  .popper__arrow {
    display: none;
    &::after {
      display: none;
    }
  }
}

 PAMapp/components/NavBar.vue

@@ -1,11 +1,6 @@
<template>
    <header class="pam-header">
      <img class="pam-header__logo" src="~/assets/images/logo.png" alt="">
        <!-- <el-button @click="$router.push('/login')">登入</el-button>
        <el-button @click="$router.push('/notification')">通知功能</el-button>
        <el-button @click="$router.push('/accountSetting')">個人帳號設定</el-button>
        <el-button @click="$router.push('/record/contactRecord')">查看紀錄</el-button>
        <el-button @click="$router.push('/contactList/consultantList')">查看聯絡清單</el-button> -->
      <img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/login')">
        <div class="pam-header__title">
          æˆ‘的幸福我作主
          <div class="pam-header__sub-title">
@@ -13,8 +8,17 @@
          </div>
        </div>
        <div class="pam-header__action-bar">
          <i class="icon-bell"></i>
          <i class="icon-avatar"></i>
          <i class="icon-bell" @click="$router.push('/notification')"></i>
          <el-dropdown @command="handleCommand">
            <i class="icon-avatar"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
              <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('/contactList/consultantList')">我的顧問清單</li>
              <li class="pam-header__dropdown-item">登出</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/login')">顧問登入</li>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </header>
</template>
@@ -24,7 +28,9 @@

@Component
export default class NavBar extends Vue {
  handleCommand() {

  }
}
</script>

@@ -45,6 +51,7 @@
    font-weight: bold;
    color: #68737A;
    letter-spacing: 3.6px;
    flex-basis: 140px;
    .pam-header__sub-title {
      padding-top: 2px;
      font-size: 13px;
@@ -58,8 +65,12 @@
    font-size: 24px;
    color: #1B365D;
    font-weight: bold;
    justify-content: space-around;
    i {
      padding: 0 15px;
      @media screen and (max-width: 320px) {
        padding: 0 5px;
      }
    }
  }
}