记录详情-响应式

待我称王封你为后i 2022-01-31 13:53 189阅读 0赞

<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>