xytSk-App/pages/ylzList/index.vue

<template>
	<view class="skinfo" @click="toDetail()">
		<view class="title">
			<view class="left">
				<text>{{item.stnm}}</text>
			</view>
			<view class="right">
				{{item.tm}}
			</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">
					{{item[k]}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default{
		props:{
			item:{
			  type: Object,
			  required: true,
			},
		},
		data(){
			return{
				list:{
					h1:0,
					h3:0,
					h6:0,
					h12:22,
					h24:35,
				},
				ylzList:[]
			}
		},
			methods:{

			  // 获取雨量站
        async getYlzData(){
            try {
                 const {data} = await uni.$http.post(
                  "/gunshiApp/xyt/stPptnRReal/list")
                  if(data.code == 200){
                    this.ylzList = [...data.data];
                  }
            } catch (error) {
                 uni.$showMsg();
            }
        },	
			toDetail(){
				uni.navigateTo({
					url:'/pages/ylzList/detail/index'
				})
			},
	},
	mounted() {
		this.getYlzData();
	},
	}
</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>