<!--
 * @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.fConstructDepartment">{{ data.fConstructDepartment }}</div>
    <div class="zzz" :title="data.fConstructionEnd">{{ data.fConstructionEnd }}</div>
    <div class="zzz" :title="data.fRemark || ''">{{ data.fRemark || '' }}</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>
