92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<style lang='scss' scoped>
|
||
.runingRecord{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #F9F9F9;
|
||
&-list{
|
||
padding-right: $paddingLR;
|
||
background-color: #F9F9F9;
|
||
}
|
||
&-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&-time{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-right: 1px solid #ddd;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: $uni-font-size-sm;
|
||
position: relative;
|
||
&-circle{
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 50%;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
transform: translate(10rpx,10rpx);
|
||
border-radius: 50%;
|
||
background-color: #FF5D3F;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
&-info{
|
||
width: 480rpx;
|
||
height: 120rpx;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
padding: 20rpx;
|
||
margin-left: 20rpx;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="runingRecord">
|
||
<view class="runingRecord-list">
|
||
<view class="runingRecord-box" v-for="(item,index) in 5" :key="index">
|
||
<view class="runingRecord-box-time">
|
||
<text>2021-1-25 09:40:11</text>
|
||
<view class="runingRecord-box-time-circle"></view>
|
||
</view>
|
||
<view class="runingRecord-box-info">
|
||
<view class="runingRecord-box-info-status">
|
||
<text>状态:</text>
|
||
<text>火警</text>
|
||
</view>
|
||
<view class="runingRecord-box-info-intensity">
|
||
<text>信号强度:</text>
|
||
<text>30mp</text>
|
||
</view>
|
||
<view class="runingRecord-box-info-status">
|
||
<text>当前电池电压:</text>
|
||
<text>3V</text>
|
||
</view>
|
||
<view class="runingRecord-box-info-intensity">
|
||
<text>CPU温度:</text>
|
||
<text>20°C</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
onLoad() {},
|
||
methods: {}
|
||
}
|
||
</script>
|