<template> <div class="layout"> <div class="background"> <u-notice-bar mode="vertical" :bg-color="res.list[0].bk_color" :color="res.list[0].color" :list="list"></u-notice-bar> </div> </div> </template> <script> export default { title: "公告", props: ["res"], data() { return { list: [] } }, mounted() { this.list = this.res.list[0].title.map(i => i.context); }, }; </script> <style lang="scss" scoped> @import "./tpl.scss"; .background { position: absolute; z-index: 2; width: 100%; height: 84rpx; text-align: left; font-size: 20rpx; background-size: cover; } .layout { text-align: center; position: relative; height: 84rpx; display: flex; align-items: center; justify-content: center; background: #ffffff; } .title { line-height: 84rpx; font-size: 20px; font-weight: bold; } </style>