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 ${getColor(item[k])}`}">
				<view class="top" :style="'background-color:'+getColor(item[k])+';border-bottom: 1px solid '+getColor(item[k])+';'">
					{{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,
				},
			}
		},
			methods:{
				getColor(v){
					if(v>=0 && v<10){
						return '#bdef9a'
					}
					if(v>=10 && v<25){ return '#bdef9a'}
					if(v>=20 && v<50){return '#6ec1fb'}
					if(v>=50 && v<100){return '#1d1bc7'}
					if(v>=100 && v<250){return '#eb20f5'}
					if(v>=250){return '#761e50'}
					
					// #bdef9a 0-10,
					// #bdef9a 10-25
					// #6ec1fb 20-50
					// #1d1bc7 50-100
					// #eb20f5 100-250
					// #761e50 >=250
				},
	
			toDetail(){
				uni.navigateTo({
					url:`/pages/ylzList/detail/index?stnm=${this.item.stnm}&stcd=${this.item.stcd}`
				})
			},
	},

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