<template> <view class="content"> <statusNav navBarTitle="客户(查询结果列表)"></statusNav> <view class="client-content"> <view class="li"> <view class="li-content"> <view class=""> <view class="title"> 湖南争鸣光电科技有限公司 </view> <view class="code"> 编号:KH20220304-002 </view> <view class="label-content"> <view class="label"> 弱电安防 </view> <view class="label"> 弱电安防 </view> <view class="label"> 弱电安防 </view> </view> </view> <view class="icon"> 13 </view> </view> <view class="address"> <image class="img" src="../../static/iocn/dizi.png" mode=""></image> <view class="text"> 湖南省长沙市高新开发区谷园路109号像素大厦1205 </view> </view> </view> </view> </view> </template> <script> import statusNav from '../../components/status-nav.vue'; export default { components: { statusNav }, data() { return { } }, methods: { } } </script> <style> .content{ padding-top: 80rpx; } .client-content .li{ background-color: #FFFFFF; margin-top: 20rpx; padding: 30rpx 34rpx 30rpx 53rpx; } .client-content .li .title{ font-size: 28rpx; color: #333333; margin-bottom: 25rpx; } .client-content .li .code{ font-size: 24rpx; margin-bottom: 25rpx; color: #666666; } .client-content .li .label-content{ display: flex; padding-bottom: 22rpx; } .client-content .li .label-content .label{ padding: 10rpx 21rpx; background-color: #EDEDED;margin-right: 12rpx; color: #999999; font-size: 24rpx; border-radius: 5rpx; } .client-content .li .li-content{ display: flex; align-items: center; border-bottom: 2rpx solid #EDEDED; justify-content: space-between; } .client-content .li .li-content .icon{ width: 71rpx; height: 66rpx; background-color: #00A2E9; box-shadow: -5rpx 5rpx 10rpx rgba(0,0,0,0.2); font-size: 36rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: bold; } .client-content .li .address{ display: flex; align-items: center; padding-top: 20rpx; color: #666666; font-size: 24rpx } .client-content .li .address .img{ width: 17rpx; height: 24rpx; margin-right: 10rpx; } </style>