<template> <div class="header"> <div class="avatar-wrapper"> <img class="avatar" :src="avatar"> <span class="name">{{name}}</span> </div> <div class="close" @click="close"> <i class="iconfont icon-close icon"></i> </div> </div> </template> <script> export default { name: 'ShowOrderHeader', props: { avatar: { type: String, default: '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg' }, name: { type: String, default: 'huangtao' } }, data() { return {}; }, methods: { close() { this.$emit('close'); this.$yoho.finishPage({}); } } }; </script> <style lang="scss" scoped> .header { display: flex; justify-content: space-between; padding: 18px 32px 54px; height: 128px; background-color: rgba(0, 0, 0, 0.8); } .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; } .close { color: white; } .icon { font-size: 55px; } </style>