82 lines
1.3 KiB
Vue
82 lines
1.3 KiB
Vue
<template>
|
|
<view class="skinfo">
|
|
<view class="title">
|
|
<view class="left">
|
|
<text>上游雨量站</text>
|
|
</view>
|
|
<view class="right">
|
|
2024-08-12 11:00
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="listItem" v-for="(v,k) of list" :style="{border:'1px solid red'}">
|
|
<view class="top" style="background-color: red;border-bottom: 1px solid red;">
|
|
{{k}}
|
|
</view>
|
|
<view class="bottom">
|
|
{{v}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
list:{
|
|
h1:0,
|
|
h3:0,
|
|
h6:0,
|
|
h12:22,
|
|
h24:35,
|
|
},
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.skinfo {
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
|
|
}
|
|
.content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.listItem{
|
|
font-size: 13px;
|
|
border-radius: 5px;
|
|
color: #333333;
|
|
text-align: center;
|
|
width: 75px;
|
|
height: 50px;
|
|
margin: 5px;
|
|
.top{
|
|
height: 40%;
|
|
color: #fff;
|
|
}
|
|
.bottom{
|
|
height: 60%;
|
|
}
|
|
}
|
|
}
|
|
.bottomItem{
|
|
display: flex;
|
|
border-top: 1px solid #f0f0f0;
|
|
padding: 10px 0 0 0;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.withd-2{
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
</style> |