133 lines
3.0 KiB
Vue
133 lines
3.0 KiB
Vue
<template>
|
||
<view class="page_container replacement_record_box">
|
||
<view class="nav flex items-center">
|
||
<view class="line"></view>
|
||
<text class="title">仪表换新记录</text>
|
||
</view>
|
||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||
<view class="instrument_body">
|
||
<view
|
||
class="instrument_items flex items-center flex-between"
|
||
v-for="(item, index) in infolist"
|
||
:key="index"
|
||
>
|
||
<view class="flex items-center">
|
||
<image src="/static/imgs/home.png" class="icon" mode=""></image>
|
||
<view class="instrument_info">
|
||
<view class="instrument_title">
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
<view class="instrument_time">
|
||
<text>换新时间时间：{{ item.time }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="instrument_type">
|
||
<text v-if="item.type === 2">电表</text>
|
||
<text v-else>水表</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
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 infolist = ref([
|
||
{
|
||
title: 'M2栋3单元1801室（M2-3-1801）',
|
||
time: '2023-08-01 10:05:46',
|
||
type: 1 //1水表 2电表
|
||
},
|
||
{
|
||
title: 'M2栋3单元1801室（M2-3-1801）',
|
||
time: '2023-08-01 10:05:46',
|
||
type: 2 //1水表 2电表
|
||
},
|
||
{
|
||
title: 'M2栋3单元1801室（M2-3-1801）',
|
||
time: '2023-08-01 10:05:46',
|
||
type: 1 //1水表 2电表
|
||
},
|
||
{
|
||
title: 'M2栋3单元1801室（M2-3-1801）',
|
||
time: '2023-08-01 10:05:46',
|
||
type: 2 //1水表 2电表
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.replacement_record_box {
|
||
background: #f9f9f9;
|
||
.nav {
|
||
margin-bottom: 40rpx;
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
.line {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: #4d5dfa;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.instrument_body {
|
||
margin-top: 20rpx;
|
||
.instrument_items {
|
||
background: #ffffff;
|
||
padding: 40rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 32rpx;
|
||
}
|
||
.instrument_info {
|
||
margin-left: 22rpx;
|
||
.instrument_title {
|
||
font-weight: 550;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
}
|
||
.instrument_time {
|
||
margin-top: 5rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.instrument_type {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4d5dfa;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|