property-manager-side/wuye-manager-uniapp/pageSubPack/inspection/inspection_record.vue

<template>
  <view class="page_container inspection_record_box">
    <TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
    <view class="record_body">
      <!-- v-for -->
      <view class="record_item" v-for="(item, index) in list" :key="index">
        <view class="time">
          <view>{{ item.day }}</view>
        </view>
        <view class="record_list_box">
          <!-- v-for -->
          <view class="record_list_item" v-for="(ite, ind) in item.list" :key="ind">
            <view class="title flex items-center">
              <view class="title_name"> {{ ite.title }} </view>
              <view class="title_status" v-if="ite.status === 0"> 已巡检 </view>
              <view class="title_status noinspection" v-else> 未巡检 </view>
            </view>
            <view class="items">
              <!-- v-for -->
              <view class="item" v-for="(it, inde) in ite.items" :key="inde">
                <text>{{ it }}</text>
              </view>
            </view>
            <view class="time">
              <text>巡检时间：</text>
              <text>{{ ite.time }}</text>
            </view>
            <view class="time user">
              <text>巡检人：</text>
              <text>{{ ite.user }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TabsComponents from '@/components/tabs/tabs.vue'
const tabslist = [
  {
    name: '全部',
    value: 0
  },
  {
    name: '未巡检',
    value: 1
  },
  {
    name: ' 已巡检',
    value: 2
  }
]
function handleChangeTabs(val: number) {
  console.log('选择了：', val)
}
// ---------------------------------------------------------------------

// ---------------------------------------------------------------------
const list = [
  {
    day: '10月11日',
    list: [
      {
        title: '标题1',
        status: 0,
        items: ['设备巡检'],
        time: '07:00:00-09:00:00',
        user: '李兴'
      },
      {
        title: '标题3',
        status: 0,
        items: ['设备巡检'],
        time: '07:00:00-09:00:00',
        user: '湖色'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  },
  {
    day: '10月12日',
    list: [
      {
        title: '标题2',
        status: 1,
        items: ['防火设施检查'],
        time: '09:00:00-12:00:00',
        user: '郧西'
      }
    ]
  }
]
// ---------------------------------------------------------------------
</script>

<style lang="scss" scoped>
.inspection_record_box {
  .record_body {
    margin-top: 20rpx;
    .record_item {
      & > .time {
        width: 168rpx;
        height: 48rpx;
        background: #ffffff;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;

        margin-bottom: 20rpx;
      }
      .record_list_box {
        margin-bottom: 20rpx;
        .record_list_item {
          margin-bottom: 20rpx;
          background: #ffffff;
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 32rpx;
          // 巡检标题
          .title {
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
            line-height: 40rpx;
            height: 40rpx;
            margin-bottom: 25rpx;

            .title_status {
              width: 86rpx;
              height: 30rpx;
              background: #4d5dfa;
              border-radius: 198rpx 198rpx 198rpx 198rpx;
              text-align: center;
              font-weight: 400;
              font-size: 20rpx;
              color: #ffffff;
              line-height: 30rpx;
              margin-left: 5rpx;

              &.noinspection {
                background-color: #ccc;
              }
            }
          }

          // 巡检项目
          .items {
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .item {
              padding: 0 10rpx;
              height: 42rpx;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              border: 1rpx solid #4d5dfa;

              font-weight: 400;
              font-size: 24rpx;
              color: #4d5dfa;
              text-align: center;
              line-height: 42rpx;
              margin-right: 20rpx;
              margin-bottom: 10rpx;
            }
          }

          // 巡检人 巡检时间
          & > .time {
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>