You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

96 lines
1.7 KiB

<style lang="scss">
.container{
min-height: 100%;
background:#f6f6f6;
padding:30rpx 0;
.card{
margin-bottom:0;
&>.info{
display:flex;
align-items: center;
margin-bottom:20rpx;
text{
&:first-child{
font-size:20rpx;
color:#fff;
background:#10C176;
border-radius: 0 20rpx 0 20rpx;
height:40rpx;
width:80rpx;
line-height: 40rpx;
text-align: center;
margin-right:16rpx;
}
&:nth-child(2){
font-weight: bold;
}
&:nth-child(3){
color:#999;
font-size: 20rpx;
margin-left:6rpx;
}
}
}
&>.name{
text{
&:first-child{
color:#FBA83C;
}
&:nth-child(2){
color:#999;
margin-left:22rpx;
}
}
}
&>.data{
display:flex;
align-items: center;
justify-content: space-between;
border-top:2rpx solid #D8D8D8;
margin-top:20rpx;
padding-top:16rpx;
text{
&:first-child{
color:#999;
font-size:24rpx;
}
&:nth-child(2){
font-weight: bold;
&:after{
content:"("attr(data-unit)")";
font-weight: normal;
margin-left:5rpx;
}
}
}
}
}
}
</style>
<template>
<view class="container">
<d-search/>
<view class="card">
<view class="info">
<text>化肥</text> <text>中量元素水溶肥</text> <text>(100kg/)</text>
</view>
<view class="name">
<text>微量元素肥</text> <text>云南云天化股份有限公司</text>
</view>
<view class="data">
<text>领用时间2022-12-29</text> <text data-unit="共200kg">2</text>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>