Right.vue

<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-09-09 17:11:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
  <div class="charsCom all-flex-h">
    <div class="four all-flex-h">
      <div class="top flex">
        <div>设备名称</div>
        <div>故障描述</div>
        <div>工单状态</div>
      </div>
      <div class="scroll-wrapper">
        <Scroll :dataList="arr">
          <template v-slot="{ dataList }">
            <ScroItem
              v-for="(item, index) in dataList"
              :key="item.companyName + index"
              :data="item"
              :index="index"
            />
          </template>
        </Scroll>
      </div>
    </div>
  </div>
</template>

<script>
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
export default {
  components: {
    Scroll,
    ScroItem,
  },
  data() {
    return {
      arr: [
        {
          companyName: "北区气压",
          time: "北区气压设备老化",
          text: "维修中",
        },
        {
          companyName: "东区气压",
          time: "东区气压设备老化",
          text: "维修中",
        },
        {
          companyName: "南区气压",
          time: "南区气压设备老化",
          text: "等待维修",
        },
        {
          companyName: "西区气压",
          time: "西区气压设备老化",
          text: "等待维修",
        },
        {
          companyName: "北区气压",
          time: "北区气压设备老化",
          text: "维修中",
        },
        {
          companyName: "东区气压",
          time: "东区气压设备老化",
          text: "维修中",
        },
        {
          companyName: "南区气压",
          time: "南区气压设备老化",
          text: "等待维修",
        },
        {
          companyName: "西区气压",
          time: "西区气压设备老化",
          text: "等待维修",
        },
        {
          companyName: "北区气压",
          time: "北区气压设备老化",
          text: "维修中",
        },

        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
      ],
    };
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.charsCom {
  width: 100%;
  height: 100%;
}

.four {
  flex: 1;
  font-size: 14px;
  // 这个解决子元素overhidden失效问题
  min-height: 0;
  > .top {
    // background: rgba(24, 144, 255, 0.1);
    background: rgba(34, 104, 175, 1);
    color: #fff;
    justify-content: space-between;
    height: 43px;
    line-height: 43px;
    > div {
      flex: 1;
      text-align: center;
    }
  }
  .scroll-wrapper {
    // font-size: 14px;
    flex: 1;
    // 这个解决子元素overhidden失效问题
    min-height: 0;
    // background: red;
    // overflow: hidden;
    // position:relative;
  }
}
</style>