orderList.vue
2.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
<div class="order-list-container">
<NavTitle :more="more">
<template slot="title">最近10笔订单</template>
</NavTitle>
<Modal>
<template slot="label">
<div class="time">2018-10-31 16:51:22</div>
<div class="order-code">订单号：<span class="red">11111</span></div>
</template>
<template slot="cont">
<div class="order-cont" >
<div class="goods-info">
<img src="//img11.static.yhbimg.com/goodsimg/2018/10/22/18/012502918a8149f76a74ebcab5971437c6.jpg?imageMogr2/thumbnail/750x750/background/d2hpdGU=/position/center/quality/80">
<div class="right">
<div class="goods-name">AIR JORDAN 1 x OFF-WHITE CHICAGO THE TEN 芝加哥</div>
<div class="number">
<span class="goods-price red">¥859</span>
<span class="goods-num">数量：1</span>
</div>
</div>
</div>
<div class="order-info">
<div class="order-price">订单金额：</div>
<div class="order-dec">
<div>订单状态：</div>
<div>订单来源：</div>
</div>
</div>
</div>
</template>
</Modal>
</div>
</template>
<script>
import Modal from './modal';
import NavTitle from './nav-title';
import homeModel from '../../../models/home';
export default {
name: 'order-list',
data() {
return {
more: 'http://www.baidu.com'
};
},
mounted() {
},
methods: {
},
components: {
Modal,
NavTitle
}
}
</script>
<style lang="scss" scoped>
.order-list-container {
.time {
float: left;
}
.order-code {
float: right;
}
.goods-info {
height: 66px;
display: flex;
img {
width: 56px;
height: 66px;
}
.right {
flex: 1;
margin-left: 10px;
}
.goods-name {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.order-info {
border-top: 1px solid #ddd;
margin-top: 10px;
padding-top: 10px;
}
.order-dec {
display: flex;
justify-content: space-between;
}
}
</style>