update#129066 - [header] 前端畫面刻版

Tomas

2021-10-31 244a169b021c4b535a2a44b229b53aa70515bcf6

update#129066 - [header] 前端畫面刻版

 PAMapp/components/BackActionBar.vue

@@ -1,5 +1,37 @@
<template>
    <div>
        <el-button @click="$router.go(-1)">回前頁</el-button>
    </div>
    <nav class="pam-back-action-bar">
        <a @click="$router.push('/')">
          <i class="icon-left"></i>{{ label }}
        </a>
    </nav>
</template>

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

@Component
export default class UiCarousel extends Vue {

  label = 'back-action-label-text';

}
</script>

<style lang="scss" scoped>
.pam-back-action-bar {
  height: 53px;
  border: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  i {
    font-size: 20px;
    padding-right: 14px;
  }
  a {
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
  }
}
</style>

 PAMapp/components/NavBar.vue

@@ -1,9 +1,66 @@
<template>
    <div>Header
        <el-button @click="$router.push('/login')">登入</el-button>
    <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>
        <el-button @click="$router.push('/contactList/consultantList')">查看聯絡清單</el-button> -->
        <div class="pam-header__title">
          我的幸福我作主
          <div class="pam-header__sub-title">
            預約我的幸福守護者
    </div>
        </div>
        <div class="pam-header__action-bar">
          <i class="icon-bell"></i>
          <i class="icon-avatar"></i>
        </div>
    </header>
</template>

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

@Component
export default class NavBar extends Vue {

}
</script>

<style lang="scss" scoped>
.pam-header {
  height: 53px;
  display: flex;
  align-items: center;
  .pam-header__logo {
    height: 100%;
  }
  .pam-header__title {
    flex: 1;
    margin: 10px 0;
    padding-left: 10px;
    border-left: 1px solid #CCCCCC;
    font-size: 16px;
    font-weight: bold;
    color: #68737A;
    letter-spacing: 3.6px;
    .pam-header__sub-title {
      padding-top: 2px;
      font-size: 13px;
      font-weight: bold;
      color: #F09491;
      letter-spacing: 1.2px
    }
  }
  .pam-header__action-bar {
    display: flex;
    font-size: 24px;
    color: #1B365D;
    font-weight: bold;
    i {
      padding: 0 15px;
    }
  }
}
</style>