125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<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>
|