| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- <template>
- <view>
- <view class="m-order">
- <view class="order-img"><image :src="value.payload.address.img" mode="widthFix"></image></view>
- <view class="order-info">
- <view class="title">{{value.payload.address.name}}</view>
- <view class="desc">{{value.payload.address.order}}</view>
- </view>
- <view class="status danger" v-if="value.payload.address.status==0">待补充</view>
- <view class="status success" v-if="value.payload.address.status==1">已补充</view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- isMy: {
- type: [Boolean, Number],
- default: false
- },
- value: {
- type: Object,
- default: {}
- }
- },
- data() {
- return {};
- },
- }
- </script>
- <style>
- .m-order{background-color: #fff;border-radius: 10upx;display: flex;font-size: 28upx;position: relative;flex: 1;width: 60vw;}
- .m-order .order-img {display: flex;align-items: center;justify-content: center;}
- .m-order .order-img image{width: 120upx;height: 120upx;}
- .m-order .order-info {padding: 15upx;}
- .m-order .order-info .title{font-size: 28upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
- .m-order .order-info .desc{font-size: 20upx;color: #999;}
- .m-order .status{position: absolute;right: 0;bottom: 0;border-radius: 10upx 0 10upx 0;background-color: #909399;font-size: 24upx;color: #fff;padding: 10upx;}
- .m-order .status.info{background-color: #909399;}
- .m-order .status.primary{background-color: #409eff;}
- .m-order .status.success{background-color: #67c23a;}
- .m-order .status.danger{background-color: #f56c6c;}
- .m-order .status.warn{background-color: #e6a23c;}
- </style>
|
