<style lang="scss"> .container{ min-height:100%; background:#f6f6f6; // padding:30rpx 0; .card{ .name{ display:flex; align-items: center; margin-bottom:20rpx; text{ &:first-child{ flex-shrink: 0; color:#fff; font-size:20rpx; border-radius: 0px 20rpx 0px 20rpx; background:#10C176; width:80rpx; height:40rpx; text-align: center; line-height: 40rpx; margin-right:10rpx; } &:nth-child(2){ flex-grow: 1; display:flex; align-items: center; font-weight: bold; margin-right:20rpx; &:after{ content:"("attr(data-unit)")"; font-weight: bold; color:#999; font-size:24rpx; } } } } .company{ text{ font-size:24rpx; &:first-child{ color:#FBA83C; margin-right:16rpx; } &:nth-child(2){ color:#999; } } } } } </style> <template> <view class="container"> <d-search/> <view class="card" @click="$u.route({url:'pages/massif/agrSpecs'})"> <view class="name"> <text>化肥</text> <text data-unit="袋">中量元素水溶肥</text> <text class="plant-youbian"/> </view> <view class="company"> <text>微量元素肥</text> <text>云南云天化股份有限公司</text> </view> </view> </view> </template> <script> export default { data(){ return{ } } } </script>