146 lines
2.7 KiB
Vue
146 lines
2.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="fixedheader">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
报警记录1# 14层
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
|
||
<view class="record_list" :style="{ 'padding-top': statusBarHeight + 68 + 'px' }">
|
||
<div class="record_item" v-for="(item,index) in 10" :key="index">
|
||
<view class="record_item_wrap">
|
||
<view class="left header_item">
|
||
<view class="record_label">轴线：</view>
|
||
<text class="name">X：788 Y：899</text>
|
||
</view>
|
||
</view>
|
||
<view class="record_item_wrap">
|
||
<view class="left">
|
||
<view class="record_label">设计强度：</view>
|
||
<text>C40</text>
|
||
</view>
|
||
<view class="right">
|
||
<view class="record_label">推定强度值：</view>
|
||
<text>34</text>
|
||
</view>
|
||
</view>
|
||
<view class="record_item_wrap">
|
||
<view class="left">
|
||
<view class="record_label">测量人员：</view>
|
||
<text>李国瑞</text>
|
||
</view>
|
||
<view class="right">
|
||
<view class="record_label">推送人：</view>
|
||
<text>王立</text>
|
||
</view>
|
||
</view>
|
||
<view class="record_item_wrap">
|
||
<view class="left">
|
||
<view class="record_label">报警时间：</view>
|
||
<text>2021-11-30</text>
|
||
</view>
|
||
|
||
</view>
|
||
</div>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return{
|
||
statusBarHeight: 0
|
||
}
|
||
},
|
||
onShow(){
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
||
},
|
||
methods:{
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fixedheader{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
.record_list{
|
||
padding-bottom: 90rpx;
|
||
}
|
||
.record_item{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
|
||
.record_item_wrap{
|
||
display: flex;
|
||
margin-bottom: 6rpx;
|
||
.header_item{
|
||
font-size: 28rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.left{
|
||
flex: 1;
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
}
|
||
.record_label{
|
||
color: #2A2B5B;
|
||
opacity: 0.6;
|
||
}
|
||
.name{
|
||
font-weight: 600;
|
||
}
|
||
.pointer_txt{
|
||
color: #5181F6;
|
||
}
|
||
}
|
||
.record_btn_box{
|
||
margin-top: 18rpx;
|
||
font-size: 28rpx;
|
||
color: #5181F6;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.btn_item{
|
||
margin-left: 34rpx;
|
||
height: 52rpx;
|
||
padding: 0 20rpx;
|
||
border: 1rpx solid #5181F6;
|
||
border-radius: 26rpx;
|
||
line-height: 52rpx;
|
||
}
|
||
}
|
||
.status{
|
||
padding: 0 20rpx;
|
||
border-radius: 7px;
|
||
height: 32rpx;
|
||
color: #fff;
|
||
line-height: 32rpx;
|
||
}
|
||
.status1{
|
||
background: #44D7B5;
|
||
}
|
||
.status2{
|
||
background: #F65352;
|
||
}
|
||
}
|
||
|
||
</style>
|