@ -11,6 +11,112 @@
< el -breadcrumb -item : to = "{ path: '/shopping/views/clothType' }" > 上级页面 < / e l - b r e a d c r u m b - i t e m > < el -breadcrumb -item : to = "{ path: '/shopping/views/clothType' }" > 上级页面 < / e l - b r e a d c r u m b - i t e m >
<!-- < el -breadcrumb -item > { { this . $route . query . title } } < / e l - b r e a d c r u m b - i t e m > - - > <!-- < el -breadcrumb -item > { { this . $route . query . title } } < / e l - b r e a d c r u m b - i t e m > - - >
< / e l - b r e a d c r u m b > < / e l - b r e a d c r u m b >
< div class = "d-flex" >
< div class = "l" >
< div class = "card" >
< p class = "f_24" > 已发货 < / p >
< a class = "c_333 f_12" > 查看发票详情 < / a >
< / div >
< div class = "steps" >
< a -steps direction = "vertical" size = "small" :current ="1" >
< a -step title = "提交订单" description = "2022-12-24 12:23:00" >
< a -icon slot = "icon" type = "container" / >
< / a - s t e p >
< a -step title = "已支付" description = "This is a description." >
< a -icon slot = "icon" type = "credit-card" / >
< / a - s t e p >
< a -step title = "待生产" description = "This is a description." >
< a -icon slot = "icon" type = "rocket" / >
< / a - s t e p >
< a -step title = "生产中" description = "2022-12-24 12:23:00" >
< a -icon slot = "icon" type = "reconciliation" / >
< / a - s t e p >
< a -step title = "已发货" description = "2022-12-24 12:23:00" >
< a -icon slot = "icon" type = "car" / >
< / a - s t e p >
< a -step title = "已到货" description = "This is a description." >
< a -icon slot = "icon" type = "home" / >
< / a - s t e p >
< a -step title = "已签收" description = "This is a description." >
< a -icon slot = "icon" type = "printer" / >
< / a - s t e p >
< / a - s t e p s >
< / div >
< / div >
< div class = "r" >
< div class = "title d-flex" >
< span class = "f_20 c_333" > 订单号 # 6789086655 < span class = "line f_16 c_1B" > | < / span > 2022 - 08 - 19 < / span >
< div class = "right d-flex f_16" > < span > 数量 < / span > < span > 价格 < / span > < span > 总计 < / span > < / div >
< / div >
< div class = "d-flex orderDiv" >
< div class = "orderAddr" >
< p class = "headline" > 配送至 < / p >
< p class = "text" > 河南省 < / p >
< p class = "text" > 驻马店市 驿城区 < / p >
< p class = "text" > 黄淮学院南校区学府花园26号楼3602 < / p >
< p class = "text" > 463000 < / p >
< p class = "headline" > 已发货 < / p >
< p class = "text" > 您的订单已经发出 。 < / p >
< p class = "headline" > 尊享免费配送 ， 您的物流单号 ： < / p >
< p class = "text" > 4263882788397 < / p >
< / div >
< div class = "orderList " >
< div class = "item d-flex" >
< div class = "img" >
< img src = "../assets/cloth001.png" >
< / div >
< div class = "info" >
< p class = "f_14 c_333 headline" > 商品名商品名商品名商品名商品 < / p >
< p class = "d-flex" > 款式 ： < span > 衬衫 < / span > < / p >
< p class = "d-flex" > 尺码 ： < span > XXL < / span > < / p >
< p class = "d-flex" > 主辅料 ： < span > 主料1 ， 辅料2 ， 辅料3 ， 辅料4 ， 辅料5 ， 辅料6 < / span > < / p >
< / div >
< div class = "right d-flex f_14 c_333" >
< span > 1 < / span > < span > 2478 < / span > < span > 2478 < / span >
< / div >
< / div >
< div class = "item d-flex" >
< div class = "img" >
< img src = "../assets/cloth001.png" >
< / div >
< div class = "info" >
< p class = "f_14 c_333 headline" > 商品名商品名商品名商品名商品 < / p >
< p class = "d-flex" > 款式 ： < span > 衬衫 < / span > < / p >
< p class = "d-flex" > 尺码 ： < span > XXL < / span > < / p >
< p class = "d-flex" > 主辅料 ： < span > 主料1 ， 辅料2 ， 辅料3 ， 辅料4 ， 辅料5 ， 辅料6 < / span > < / p >
< / div >
< div class = "right d-flex f_14 c_333" >
< span > 1 < / span > < span > 2478 < / span > < span > 2478 < / span >
< / div >
< / div >
< / div >
< / div >
< div class = "heji" >
< p class = "d-flex" >
< span class = "leftSide f_20" style = "font-weight:500" > 购买人 < / span >
< span class = "midst f_16" > 小记 < / span >
< span class = "rightSide f_16" style = "font-weight:500" > 4 , 956 < / span >
< / p >
< p class = "d-flex" >
< span class = "leftSide f_18" > 王贰 < / span >
< span class = "midst f_16" > 运费总计 < / span >
< span class = "rightSide f_16" style = "font-weight:500" > 0 < / span >
< / p >
< p class = "d-flex" >
< span class = "leftSide" > < / span >
< span class = "midst f_20" style = "font-weight:600" > 总计 < / span >
< span class = "rightSide f_20" style = "font-weight:600" > 4 , 956 < / span >
< / p >
< / div >
< / div >
< / div >
< div class = "btn" > < a class = "c_fff f_16" > 返回 < / a > < / div >
< / div > < / div >
< / div > < / div >
< Footer > < / Footer > < Footer > < / Footer >
@ -40,10 +146,152 @@
@ import '../assets/common.css' ; @ import '../assets/common.css' ;
. orderMain { . orderMain {
background : # F6F6F6 ; background : # F6F6F6 ;
padding - bottom : 100 px ;
. jz {
. breadcrumb { . breadcrumb {
padding - top : 50 px ; padding - top : 50 px ;
padding - bottom : 50 px ; padding - bottom : 50 px ;
} }
. d - flex {
justify - content : space - between ;
. l {
width : 300 px ;
. card {
width : 300 px ;
height : 157 px ;
background : # FFFFFF ;
margin - bottom : 20 px ;
text - align : center ;
padding - top : 40 px ;
. f _24 {
color : # C8A985 ;
margin - bottom : 20 px ;
}
. f _12 {
padding : 5 px 14 px ;
border : 1 px solid # 333333 ;
}
}
. steps {
width : 300 px ;
height : 736 px ;
background : # FFFFFF ;
padding : 32 px 55 px ;
}
}
. r {
width : 1110 px ;
height : 913 px ;
background : # FFFFFF ;
padding : 54 px 48 px ;
. title {
padding - bottom : 15 px ;
border - bottom : 1 px solid # DADADA ;
. line {
margin - left : 10 px ;
margin - right : 10 px ;
}
. right {
width : 25 % ;
span {
color : # C8A985 ;
}
}
}
. orderDiv {
padding - bottom : 20 px ;
border - bottom : 1 px solid # DADADA ;
. orderAddr {
width : 25 % ;
color : # 333 ;
font - size : 16 px ;
p {
margin - bottom : 10 px ;
}
. headline {
font - weight : 500 ;
color : # C8A985 ;
margin - top : 30 px ;
}
. text {
font - weight : 400 ;
}
}
. orderList {
width : 75 % ;
. item {
padding - top : 30 px ;
border - bottom : 1 px solid # DADADA ;
& : last - of - type {
border : none ;
}
. img {
width : 23.33 % ;
img {
width : 180 px ;
height : 180 px ;
}
}
. info {
width : 43.33 % ;
padding - right : 10 px ;
. headline {
font - weight : 500 ;
}
p {
span {
margin - left : 10 px ;
display : inline - block ;
width : 80 % ;
}
}
}
. right {
width : 33.33 % ;
font - weight : 500 ;
}
}
} }
. heji {
padding : 30 px 20 px ;
p {
span {
width : 20 % ;
color : # 333 ;
}
. leftSide {
text - align : left ;
}
. midst {
text - align : center ;
}
. rightSide {
text - align : right ;
}
}
}
}
}
}
. btn {
a {
display : inline - block ;
width : 284 px ;
height : 56 px ;
background : # 1 B1B1B ;
line - height : 56 px ;
}
& : hover {
color : red ;
}
text - align : center ;
margin - top : 60 px ;
}
} }
< / style > < / style >
