<template>
  <view class="page">
    <scroll-view scroll-y class="scroll">
      <!-- 第一块信息卡片 -->
      <view class="card">
        <view class="row-title">
          <text>幸福苑小区1号楼1单元电梯间</text>
          <text class="status">已巡检</text>
        </view>
        <view class="text-item">巡检项目：设备巡检</view>
        <view class="text-item">巡检时间：07:00:00 –09:00:00</view>
        <view class="text-item">巡检小区：幸福苑小区</view>
        <view class="text-item">巡检路线：常规巡检路线1</view>
        <view class="text-item">巡检点：安全出口1号；巡检点2；巡检点3</view>
      </view>

      <!-- 第二块巡检结果卡片 -->
      <view class="card">
        <view class="card-subtitle">巡检结果</view>
        <view class="text-item">巡检人：李祥龙</view>
        <view class="text-item">手机号码：13013001300</view>
        <view class="text-item">巡检时间：2026-10-25 08:10:10</view>
        <view class="text-item">巡检结果：</view>
        <view class="result-desc">
          <text>1.设备正常，无任何异动和意向</text>
          <text>2.电力系统正常、无故障提示</text>
          <text>3.设备使用正常，无异常提示</text>
        </view>
        <view class="text-item">巡检照片：</view>
        <!-- 图片区域 flex自动换行 -->
        <view class="img-wrap">
          <view
            class="img-box"
            v-for="(img, idx) in imgList"
            :key="idx"
          >
            <image
              class="img"
              :src="img"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 图片列表，空图片占位，真实环境替换成接口图片地址
const imgList = ref([
  '',
  '',
  '',
  ''
])
</script>

<style scoped>
page {
  background-color: #f7f8fa;
}
.page {
  padding: 24rpx;
}
.scroll {
  height: 100vh;
}
.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
}
.row-title {
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;
  color: #222;
  margin-bottom: 24rpx;
}
.status {
  font-size: 24rpx;
  color: #555;
}
.card-subtitle {
  font-size: 32rpx;
  font-weight: 500;
  color: #222;
  margin-bottom: 24rpx;
}
.text-item {
  font-size: 28rpx;
  color: #333;
  line-height: 2;
}
.result-desc {
  font-size: 28rpx;
  color: #333;
  display: flex;
  flex-direction: column;
  line-height: 1.8;
  margin: 12rpx 0;
}
/* 图片容器 flex-wrap换行 */
.img-wrap {
  margin-top: 16rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.img-box {
  width: 140rpx;
  height: 140rpx;
  background-color: #d8d9db;
  border-radius: 8rpx;
}
.img {
  width: 100%;
  height: 100%;
}
</style>
