Right.vue

<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-04-14 18:00:06
 * @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/left.vue
-->
<template>
  <div class="charsCom all-flex-h">
    <div class="title">第三方施工情况</div>
    <div class="two flex">
      <div class="left">已备案</div>
      <div class="middle">已完成</div>
      <div class="right">进行中</div>
    </div>
    <div class="three flex">
      <div class="left zzz">6</div>
      <div class="middle zzz">4</div>
      <div class="right zzz">2</div>
    </div>

    <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: "2022-01-11 07:29",
          text: "安装探头",
        },
        {
          companyName: "河北泽宏",
          time: "2022-01-13 07:29",
          text: "安装管道",
        },
        {
          companyName: "河北泽宏科技股份有限公司",
          time: "2022-01-14 07:29",
          text: "气体报警器",
        },
        {
          companyName: "政府部门",
          time: "2022-01-15 07:29",
          text: "安装设备监控",
        },
        {
          companyName: "中诚然气",
          time: "2022-01-17 07:29",
          text: "安装管道",
        },
        {
          companyName: "中诚然气",
          time: "2022-02-20 07:29",
          text: "轻工路1号施工",
        },
        {
          companyName: "中燃祥科",
          time: "2022-02-21 07:29",
          text: "轻工路1号施工",
        },
        {
          companyName: "河北泽宏",
          time: "2022-03-11 07:29",
          text: "安装管道",
        },
        {
          companyName: "河北泽宏",
          time: "2022-04-16 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: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
      ],
    };
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.charsCom {
  width: 100%;
  height: 100%;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 22px;
}
.two {
  box-shadow: 0px 0px 3px 1px #dddddd;
  height: 28px;
  font-size: 14px;
  margin-bottom: 15px;
  > div {
    line-height: 28px;
    flex: 1;
    text-align: center;
    &.left {
      color: #1f8df3;
    }
    &.middle {
      flex: 1;
      color: #03c4f1;
    }
    &.right {
      color: #ffc337;
    }
  }
}
.three {
  font-size: 16px;
  margin-bottom: 10px;
  > div {
    flex: 1;
    line-height: 24px;
    text-align: center;
  }
}
.four {
  flex: 1;
  font-size: 14px;
  // 这个解决子元素overhidden失效问题
  min-height: 0;
  >.top {
    background: rgba(24, 144, 255, 0.1);
    height: 29px;
    line-height: 29px;
    > div {
      flex: 1;
      text-align: center;
    }
  }
  .scroll-wrapper {
    // font-size: 14px;
    flex: 1;
    // 这个解决子元素overhidden失效问题
    min-height: 0;
    // background: red;
    // overflow: hidden;
    // position:relative;
  }
}
</style>