<!-- * @Author: your name * @Date: 2022-04-12 18:02:16 * @LastEditTime: 2022-04-13 09:24:43 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue --> <template> <div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]"> <div class="left zzz" :title="data.companyName">{{ data.companyName }}</div> <div class="zzz" :title="data.time">{{ data.time }}</div> <div class="zzz" :title="data.text">{{ data.text }}</div> </div> </template> <script> export default { props: { data: { type: Object, }, index: { type: Number, }, }, }; </script> <style lang="scss" scoped> .top { width: 100%; height: 29px; line-height: 29px; &.n { color: #333333; } &.n2 { color: #1f8df3; background: rgba(0, 0, 0, 0.1); } > div { flex: 1; text-align: center; font-size: 12px; box-sizing: border-box; padding: 0 2px; &.left{ padding: 0 5px; } } } </style>