[ Update ] 修正 chrome 開發者模式按下 有藍色背景的問題，修正 navbar 根據螢幕寬度進行改變和 fix 住

劉鈞霖

2021-11-16 98161c912dbcc05179391b41792a0c41a22d4e92

 PAMapp/components/BackActionBar.vue

@@ -1,3 +1,65 @@
<template>
    <div>backActionBar</div>
</template>
    <nav class="pam-back-action-bar fix-chrome-click--issue">
        <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 {

  get label(): string {
    if (this.$route.name) {
      const routeName = this.$route.name.split('-')[0];
      let featureLabel = '';
      switch(routeName) {
        case 'login':
          featureLabel = '登入';
          break;
        case 'recommendConsultant':
          featureLabel = '嚴選配對';
          break;
        case 'quickFilter':
          featureLabel = '快速篩選';
          break;
        case 'myConsultantList':
          featureLabel = '我的顧問清單';
          break;
        case 'agentInfo':
          featureLabel = '業務員資訊'
          break;
        default:
          featureLabel = '回首頁';
          break;
      }
      return featureLabel;
    } else {
      return '回首頁';
    }
  }

}
</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>