Blame view

apps/pages/showorder/components/avatar-header.vue 1.13 KB
htoooth authored
1 2 3
<template>
<div class="header">
  <div class="avatar-wrapper">
htoooth authored
4
    <img class="avatar" :src="avatar">
htoooth authored
5 6 7 8
    <span class="name">{{name}}</span>
  </div>

  <div class="close" @click="close">
htoooth authored
9
    <i class="iconfont icon-close icon"></i>
htoooth authored
10 11 12 13 14 15 16 17 18 19
  </div>
</div>
</template>

<script>
export default {
  name: 'ShowOrderHeader',
  props: {
    avatar: {
      type: String,
htoooth authored
20
      default: '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg'
htoooth authored
21 22 23 24 25 26 27 28 29 30 31
    },
    name: {
      type: String,
      default: 'huangtao'
    }
  },
  data() {
    return {};
  },
  methods: {
    close() {
htoooth authored
32
      this.$emit('close');
htoooth authored
33
      this.$yoho.finishPage({});
htoooth authored
34 35 36 37 38 39 40 41 42 43 44 45
    }
  }
};
</script>

<style lang="scss" scoped>

.header {
  display: flex;
  justify-content: space-between;
  padding: 18px 32px 54px;
  height: 128px;
htoooth authored
46
  background-color: rgba(0, 0, 0, 0.8);
htoooth authored
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 56px;
  border: 1px solid white;
  box-sizing: border-box;
}

.name {
  color: white;
  font-size: 24px;
  margin-left: 12px;
}
htoooth authored
68 69 70 71 72 73 74 75
.close {
  color: white;
}

.icon {
  font-size: 55px;
}
htoooth authored
76
</style>