Blame view

apps/components/layouts/layout-header.vue 2.36 KB
陈峰 authored
1
<template>
陈峰 authored
2
  <div class="layout-header" :class="{[`theme-${theme}`]: theme}">
陈峰 authored
3
    <div class="back flex hover-opacity" @click="onBack">
陈峰 authored
4
      <slot name="back" v-if="back">
陈峰 authored
5
        <i class="iconfont icon-left"></i>
陈峰 authored
6 7
      </slot>
    </div>
陈峰 authored
8
    <div class="title flex" :style="{opacity}">
陈峰 authored
9 10 11
      <slot>
        {{title}}
      </slot>
陈峰 authored
12
    </div>
陈峰 authored
13
    <div class="opts flex" :style="{opacity}">
陈峰 authored
14
      <slot name="opts"></slot>
陈峰 authored
15 16
    </div>
  </div>
陈峰 authored
17 18 19
</template>

<script>
陈峰 authored
20 21
import {mapState} from 'vuex';
陈峰 authored
22
export default {
陈峰 authored
23 24
  name: 'LayoutHeader',
  props: {
陈峰 authored
25 26 27
    title: String,
    theme: String,
    fixed: Boolean,
陈峰 authored
28 29 30 31
    back: {
      type: Boolean,
      default: true
    },
陈峰 authored
32 33 34 35 36
    transparentSeek: Number,
    opacity: {
      type: Number,
      default: 1
    }
陈峰 authored
37
  },
陈峰 authored
38 39 40
  computed: {
    ...mapState(['yoho'])
  },
陈峰 authored
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
  watch: {
    transparentSeek(value) {
      this.animeEl && this.animeEl.seek(this.animeEl.duration * value);
    }
  },
  mounted() {
    if (this.transparentSeek >= 0) {
      import('animejs').then(({default: anime}) => {
        this.animeEl = anime({
          targets: this.$el,
          backgroundColor: '#222',
          easing: 'easeInOutQuad',
          autoplay: false
        });
      });
    }
陈峰 authored
57 58 59
  },
  methods: {
    onBack() {
陈峰 authored
60
      if (this.yoho.homePage) {
陈峰 authored
61 62 63 64
        this.$yoho.finishPage({});
      } else {
        this.$router.go(-1);
      }
陈峰 authored
65
    }
陈峰 authored
66
  }
陈峰 authored
67 68
};
</script>
陈峰 authored
69 70 71 72

<style lang="scss" scoped>
.layout-header {
  width: 100%;
陈峰 authored
73 74 75
  height: 44PX;
  background-color: #444;
  color: #fff;
陈峰 authored
76 77
  overflow: hidden;
  display: flex;
yyq authored
78
  align-items: stretch;
yyq authored
79
  box-sizing: border-box;
陈峰 authored
80
陈峰 authored
81 82 83
  &.theme-white {
    background-color: #fff;
    color: #222;
陈峰 authored
84
    border-bottom: solid 1px #e0e0e0;
陈峰 authored
85 86 87 88 89 90 91
  }

  &.theme-transparent {
    background-color: initial;
    color: #fff;
  }
yyq authored
92 93 94 95
  > * {
    position: relative;
  }
陈峰 authored
96 97 98 99 100 101 102
  .flex {
    display: flex;
    align-items: center;
  }

  .iconfont {
    height: 100%;
陈峰 authored
103
    font-size: 20PX;
陈峰 authored
104 105
    display: flex;
    align-items: center;
陈峰 authored
106 107 108
    justify-content: center;
    padding-left: 10PX;
    padding-right: 10PX;
陈峰 authored
109 110 111
  }

  .back {
陈峰 authored
112 113
    width: 160px;
    padding-left: 5px;
陈峰 authored
114 115 116 117 118
  }

  .title {
    flex: 1;
    justify-content: center;
陈峰 authored
119
    font-size: 18PX;
陈峰 authored
120
    letter-spacing: 0.09PX;
陈峰 authored
121
    overflow: hidden;
yyq authored
122
    z-index: 1;
陈峰 authored
123 124 125
  }

  .opts {
陈峰 authored
126
    width: 160px;
陈峰 authored
127
    height: inherit;
陈峰 authored
128
    justify-content: flex-end;
陈峰 authored
129
    padding-right: 5px;
陈峰 authored
130 131 132 133

    .iconfont {
      font-size: 23PX;
    }
陈峰 authored
134 135 136
  }
}
</style>