113 lines
2.0 KiB
Vue
113 lines
2.0 KiB
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> |