123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <view class="cleared-details-container">
- <!-- 列表数据 -->
- <view class="cell-item-con">
- <view class="cell-item" v-for="(item, index) in listdata" :key="index">
- <view class="cell-item-c">
- <u-image class="cell-item-pic" src="/static/logo.jpg" width="140rpx" height="140rpx"></u-image>
- <view class="cell-item-info">
- <view class="cell-item-info-network">咸阳市秦都区文彩舫东区</view>
- <view class="cell-item-info-weight">清运总重量:<text>2568kg</text></view>
- </view>
- </view>
- <u-grid :col="4" :hover-class="none">
- <u-grid-item>
- <view class="cell-item-main">
- <text class="cell-item-number blue">26</text>
- <text class="cell-item-unit">个</text>
- </view>
- <view class="cell-item-exp">废旧衣物</view>
- </u-grid-item>
- <u-grid-item>
- <view class="cell-item-main">
- <text class="cell-item-number green">26</text>
- <text class="cell-item-unit">个</text>
- </view>
- <view class="cell-item-exp">废旧纸张</view>
- </u-grid-item>
- <u-grid-item>
- <view class="cell-item-main">
- <text class="cell-item-number red">26</text>
- <text class="cell-item-unit">kg</text>
- </view>
- <view class="cell-item-exp">废旧金属</view>
- </u-grid-item>
- <u-grid-item>
- <view class="cell-item-main">
- <text class="cell-item-number yellow">26</text>
- <text class="cell-item-unit">kg</text>
- </view>
- <view class="cell-item-exp">废旧玻璃</view>
- </u-grid-item>
- </u-grid>
- </view>
- </view>
- <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- listdata: [{},{}],
- noDataText: '暂无数据', // 列表请求状态提示语
- status: 'loadmore', // 加载中状态
- }
- },
- methods: {
-
- }
- }
- </script>
- <style lang="scss" scoped>
- .cleared-details-container{
- width: 100%;
- .cell-item-con{
- .cell-item{
- margin: $uni-spacing-col-base $uni-spacing-row-base;
- background-color: #fff;
- border-radius: $uni-border-radius-base;
- color: $uni-text-color;
- font-size: $uni-font-size-base;
- box-shadow: 3rpx 3rpx 5rpx #eee;
- .cell-item-c{
- display: flex;
- align-items: center;
- padding: $uni-spacing-col-base $uni-spacing-row-base;
- .cell-item-pic{
- flex-shrink: 0;
- margin-right: 10rpx;
- }
- .cell-item-info{
- flex-grow: 1;
- .cell-item-info-network{
- word-break: break-all;
- margin-bottom: 10rpx;
- }
- .cell-item-info-weight{
- font-size: 26rpx;
- text{
- font-weight: bold;
- }
- }
- }
- }
- .cell-item-main{
- margin-bottom: 10rpx;
- .cell-item-number{
- margin-right: 5rpx;
- }
- .cell-item-unit{
- font-size: 26rpx;
- }
- .blue {
- color: #1890FF;
- }
- .green {
- color: #16b50e;
- }
- .red {
- color: red;
- }
- .yellow {
- color: #ff9900;
- }
- }
- }
- }
- }
- </style>
|