InspectionCleaning/pages/index/cleanDetails.vue

<template>
  <view class="content">
    <u-navbar title="保洁详情"></u-navbar>
    <view class="area-info">
      <view class="name">保洁区域名称</view>
      <view class="position">所在区域：学校操场</view>
    </view>
    <view class="area-details">
      <view class="title">区域详情</view>
      <view class="details">
        <view class="block">
          <view class="value">室内/室外</view>
          <view class="label">区域类型</view>
        </view>
        <view class="block">
          <view class="value">保洁员1号</view>
          <view class="label">保洁人员</view>
        </view>
        <view class="block">
          <view class="value">2024/1/27 9:53:35</view>
          <view class="label">清扫时间</view>
        </view>
        <view class="block">
          <view class="value">清扫完成</view>
          <view class="label">备注</view>
        </view>
      </view>
      <view class="title">保洁区域图片</view>
      <view class="images">
        <u-image
          class="image"
          v-for="(v, i) in 7"
          :key="i"
          width="212rpx"
          height="212rpx"
          src="https://cdn.uviewui.com/uview/example/fade.jpg"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
import { GetPlanInfoAre } from "@/api/apiList";
export default {
  data() {
    return {
      id: "",
    };
  },

  onLoad(options) {
    this.id = options.id;
    this.getAreaInfo();
  },

  methods: {
    async getAreaInfo() {
      const res = await GetPlanInfoAre({
        id: this.id,
      });
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: linear-gradient(#fff 0%, #e0ebf9 20%);
  .title {
    line-height: 1;
    border-left: 10rpx solid #5a7ee9;
    padding-left: 16rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .area-info {
    padding: 44rpx;
    margin-top: 30rpx;
    height: 290rpx;
    background: url("@/static/images/area-bg.png") no-repeat 100% 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .name {
      font-weight: bold;
      font-size: 56rpx;
      color: #211d2f;
    }
    .position {
      margin-top: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #717b94;
    }
  }
  .area-details {
    padding: 50rpx 32rpx;
    background: #ffffff;
    border-radius: 36rpx 36rpx 0 0;
    min-height: calc(100vh - 400rpx);
    .details {
      margin-top: 42rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48.5%;
        height: 160rpx;
        background: #f1f7fe;
        border-radius: 18rpx;
      }
      .block:nth-child(n + 3) {
        margin-top: 14rpx;
      }
    }
    .images {
    margin-top: 46rpx;
    display: grid;
    grid-template-columns: repeat(auto-fill, 212rpx);
    gap: 20rpx;  // 图片间距
  }
  }
}
</style>