记录详情-响应式

最新推荐文章于 2024-11-08 19:34:15 发布

原创最新推荐文章于 2024-11-08 19:34:15 发布 · 126 阅读

CC 4.0 BY-SA版权

<template>
<view>
<view>
<view class="header">{{hydrant}}</view>

<view class="hydrant-title">
<view class="hydrant-title0">
<view>{{titlea}}</view>
<view>{{titleb}}</view>
</view>
<view>{{titlec}}</view>
</view>

<view class="hydrant-item" v-for="(item,index) in list" :key="index" :class="{changeColor:index%2==0,changeWidth:index%2==1}">
<view class="hydrant-item0">
<view>{{item.title1}}</view>
<view>{{item.title2}}</view>
</view>
<view>{{item.title3}}</view>
</view>

</view>
</view>
</view>

<view>
<view class="header">{{extingguisher}}</view>

<view class="hydrant-title">
<view class="hydrant-title0">
<view>{{titlea}}</view>
<view>{{titleb}}</view>
</view>
<view>{{titlec}}</view>
</view>

</view>
</view>
</view>

</view>
</template>

return {
extingguisher: "干粉灭火器",
hydrant: "消火栓",
titlea: "问题描述",
titleb: "是否/有无",
titlec: "备注",
list: [{
title1: "栓内配件是否完好、齐备",
title2: "否",
title3: "未补充"
},
{
title1: "缺失设备：直流水枪"
},
{
title1: "消防栓门把手是否完好。",
title2: "是"
},
{
title1: "栓门开关有无卡销，锁有无损坏",
titile2: "无"
},
{
title1: "消防栓玻璃是否有破损。",
title2: "是",
title3: "已报修"
},
{
title1: "消防栓周围是否被物品堵塞。",
title2: "无"
},
{
title1: "消防栓门把手是否完好。",
title2: "是"
},
{
title1: "消防栓门把手是否完好。",
title2: "是"
},
{
title1: "消防栓门把手是否完好。",
title2: "是"
},
{
title1: "消防栓门把手是否完好。",
title2: "是"
},
{
title1: "消防栓门是否有锈迹、破损、漏水现象",
title2: "是"
}

]
}
}

}
</script>

.header:hover {
border-bottom: 7upx solid red;

}

.changeColor {
background-color: #FFFFFF;

}

.changeWidth {
background-color: #f6f6f6;
}

.container1 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50upx;

}

.hydrant {
display: flex;
flex-direction: column;
width: 95%;
height: 886upx;
background-color: #ffffff;
box-shadow: 0px 23upx 27upx 2upx rgba(0, 0, 0, 0.11);
border-radius: 20upx;
box-sizing: border-box;
}

.hydrant-title {
font-family: PingFang-SC-Medium;
font-size: 30upx;
color: #333333;
width: 100%;
height: 70upx;
background-color: #dddddd;
border-radius: 20upx 20upx 0px 0px;
box-sizing: border-box;
padding: 20upx;
font-weight: 550;
}

.hydrant-item {
font-family: PingFang-SC-Regular;
font-size: 24upx;
color: #666666;
box-sizing: border-box;
padding: 20upx;
}

.hydrant-title,
.hydrant-item {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-top: 10upx; */
}

.hydrant-title0 {
width: 85%;
display: flex;
justify-content: space-between;
align-items: center;
}

.hydrant-item0 {
width: 75%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>