<template> <div class="bar-wrapper"> <div class="title">资讯详情</div> <div class="close" @click="close"> <i class="iconfont icon-close icon"></i> </div> </div> </template> <script> export default { name: 'ArticleBar', methods: { close() { this.$emit('on-close'); } }, }; </script> <style lang="scss" scoped> .bar-wrapper { width: 100%; height: 88px; position: relative; background-color: white; border-bottom: 1px solid #e0e0e0; } .title { font-size: 32px; color: #444; line-height: 88px; text-align: center; } .close { color: #444; position: absolute; top: 20px; right: 40px; } .icon { font-size: 50px; } </style>