20 changed files with 1239 additions and 94 deletions
|
After Width: | Height: | Size: 675 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,264 @@ |
|||
<template> |
|||
<div> |
|||
<p class="title">确认订单信息</p> |
|||
<div class="order_head"> |
|||
<div class="order_head_item" >资产名称</div> |
|||
<div class="order_head_item" >资产编号</div> |
|||
<div class="order_head_item" >资产分类</div> |
|||
<div class="order_head_item" >资产单价</div> |
|||
<div class="order_head_item" >交易数量</div> |
|||
<div class="order_head_item" >金额小计</div> |
|||
</div> |
|||
<p class="order_title">挂牌方：东莞市芳华沉香园林景观有限公司</p> |
|||
<div class="order_content"> |
|||
<div class="order_content_item"> |
|||
<img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img"> |
|||
<span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>GM-BZ-165254</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>采集权</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>¥ 10,000.00</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>3</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span class="order_price">¥ 30,000.00</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_other"> |
|||
<div class="order_other_item"> |
|||
<div class="order_message"> |
|||
<span>给挂牌方留言：</span> |
|||
<el-input |
|||
type="textarea" |
|||
class="order_message_input" |
|||
resize="none" |
|||
placeholder="请输入内容" |
|||
v-model="textarea"> |
|||
</el-input> |
|||
</div> |
|||
<div class="order_other_item_right"> |
|||
<div> |
|||
<span>契税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
<div> |
|||
<span>印花税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_other_item order_other_item1"> |
|||
<span>金额合计 </span> |
|||
<span class="all_price"> ¥ 33,000.00</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_foot"> |
|||
<div class="order_info"> |
|||
<p class="order_info_item"> |
|||
<span class="order_info_span">实付款：</span> |
|||
<span class="order_info_span1">¥ 33,000.00</span> |
|||
</p> |
|||
<p class="order_info_item"> |
|||
<span class="order_info_span">联系地址： </span> |
|||
<span >广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span> |
|||
</p> |
|||
<p class="order_info_item"> |
|||
<span class="order_info_span">联系人： </span> |
|||
<span >陈阳明 13812345678</span> |
|||
</p> |
|||
</div> |
|||
<button class="order_button" @click="submit">提交订单</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
submit(){ |
|||
this.$router.push({path:'/order/orderPayment',query:{step:1}}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.title{ |
|||
font-size: 14px; |
|||
margin-bottom: 30px; |
|||
} |
|||
.order_head{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 25px; |
|||
width: 100%; |
|||
} |
|||
.order_head_item{ |
|||
width: 166px; |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
text-align: center; |
|||
border-bottom: 2px solid rgba(215, 215, 215, 1); |
|||
padding-bottom: 5px; |
|||
} |
|||
.order_head_item:first-child{ |
|||
width:340px |
|||
} |
|||
.order_title{ |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_content{ |
|||
height: 75px; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
border-top: 1px dashed #AAAAAA; |
|||
border-bottom: 1px dashed #AAAAAA; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_content_item{ |
|||
width: 166px; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_content_item:first-child{ |
|||
width:340px; |
|||
justify-content: flex-start; |
|||
padding-left: 20px; |
|||
} |
|||
.order_content_item:last-child{ |
|||
justify-content: flex-end; |
|||
padding-right: 20px; |
|||
} |
|||
.order_content_item_img{ |
|||
width: 55px; |
|||
height: 55px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_content_item_span{ |
|||
display: inline-block; |
|||
width: 240px; |
|||
} |
|||
.order_price{ |
|||
color: #EB4747; |
|||
} |
|||
.order_other{ |
|||
margin-bottom: 20px; |
|||
} |
|||
.order_other_item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 103px; |
|||
width: 100%; |
|||
} |
|||
.order_message{ |
|||
width: 596px; |
|||
padding: 10px 20px; |
|||
display: flex; |
|||
font-size: 12px; |
|||
background: #F2F2F2; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_message .order_message_input{ |
|||
width: 455px; |
|||
margin-left: 10px; |
|||
} |
|||
.order_message_input >>>.el-textarea__inner{ |
|||
height: 75px; |
|||
} |
|||
.order_other_item_right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item_right>div{ |
|||
width: 601px; |
|||
height: 50px; |
|||
background-color: rgba(242, 242, 242, 1); |
|||
font-size: 12px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item1{ |
|||
height: 50px; |
|||
background: #F2F2F2; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
margin-top: 3px; |
|||
font-size: 14px; |
|||
padding-right: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.all_price{ |
|||
color: #EB4747; |
|||
font-weight: 650; |
|||
} |
|||
.order_other_item1>span:first-child{ |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
} |
|||
.order_info{ |
|||
width: 400px; |
|||
height: 140px; |
|||
border-width: 2px; |
|||
border-style: solid; |
|||
border-color: rgba(137, 32, 31, 1); |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
justify-content: center; |
|||
margin-bottom: 20px; |
|||
} |
|||
.order_info_item{ |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 15px; |
|||
font-weight: 400; |
|||
color: #555555; |
|||
} |
|||
.order_info_span{ |
|||
font-weight: 650; |
|||
color: #333333; |
|||
} |
|||
.order_info_span1{ |
|||
font-size: 24px; |
|||
color: #EB4747; |
|||
font-weight: 650; |
|||
} |
|||
.order_button{ |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
width: 160px; |
|||
height: 40px; |
|||
background: #89201F; |
|||
border: none; |
|||
} |
|||
.order_foot{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="body"> |
|||
<p class="title">{{title[step]}}</p> |
|||
<el-steps :active="step" align-center class="step_bar"> |
|||
<el-step title="确认订单" description="这是一段很长很长很长的描述性文字"></el-step> |
|||
<el-step title="订单付款" description="这是一段很长很长很长的描述性文字"></el-step> |
|||
<el-step title="线下签约" description="这是一段很长很长很长的描述性文字"></el-step> |
|||
<el-step title="确认交付" description="这是一段很长很长很长的描述性文字"></el-step> |
|||
</el-steps> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
step:0, |
|||
title:['确认订单','订单付款','线下签约','确认交付'] |
|||
} |
|||
}, |
|||
created(){ |
|||
this.step= parseInt(this.$route.query.step) |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.body{ |
|||
margin-top: 30px; |
|||
} |
|||
.title{ |
|||
font-size: 18px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.step_bar{ |
|||
margin-bottom: 30px; |
|||
} |
|||
.step_bar>>>.el-step__icon{ |
|||
width: 34px; |
|||
height: 34px; |
|||
} |
|||
.step_bar>>>.el-step.is-horizontal .el-step__line{ |
|||
top: 17px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,313 @@ |
|||
<template> |
|||
<div> |
|||
<div class="order_info"> |
|||
<div class="order_info_left"> |
|||
<div class="order_info_left_title">订单信息</div> |
|||
<div class="order_info_left_content"> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系地址： </span> |
|||
<span>广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系人： </span> |
|||
<span>陈阳明 13812345678</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>订单编号： </span> |
|||
<span>851245854512</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>下单时间： </span> |
|||
<span>2021-08-08 10:33:54</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>挂牌方： </span> |
|||
<span>东莞市芳华沉香园林景观有限公司</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>摘牌方留言： </span> |
|||
<span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_info_right"> |
|||
<div class="order_info_right_title"> |
|||
<img src="../../../assets/img/order_stats1.png" alt=""> |
|||
<span>订单状态：已完成</span> |
|||
</div> |
|||
<p class="order_info_right_tips">双方交易已完成！</p> |
|||
<div class="order_info_right_tips"> |
|||
<span>您可以点击</span> |
|||
<button class="pay_button">交易凭证</button> |
|||
<span>下载资产交易凭证</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_head"> |
|||
<div class="order_head_item" >资产名称</div> |
|||
<div class="order_head_item" >资产编号</div> |
|||
<div class="order_head_item" >资产分类</div> |
|||
<div class="order_head_item" >资产单价</div> |
|||
<div class="order_head_item" >交易数量</div> |
|||
<div class="order_head_item" >金额小计</div> |
|||
</div> |
|||
<div class="order_content"> |
|||
<div class="order_content_item"> |
|||
<img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img"> |
|||
<span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>GM-BZ-165254</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>采集权</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>¥ 10,000.00</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>3</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span class="order_price">¥ 30,000.00</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_other"> |
|||
<div class="order_other_item"> |
|||
<div class="order_message"> |
|||
<span>给挂牌方留言：</span> |
|||
<el-input |
|||
type="textarea" |
|||
class="order_message_input" |
|||
resize="none" |
|||
placeholder="请输入内容" |
|||
v-model="textarea"> |
|||
</el-input> |
|||
</div> |
|||
<div class="order_other_item_right"> |
|||
<div> |
|||
<span>契税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
<div> |
|||
<span>印花税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_other_item order_other_item1"> |
|||
<span>金额合计 </span> |
|||
<span class="all_price"> ¥ 33,000.00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.order_info{ |
|||
width: 100%; |
|||
min-height: 360px; |
|||
height: auto; |
|||
border: 1px solid rgba(215, 215, 215, 1); |
|||
margin-bottom: 30px; |
|||
display: flex; |
|||
} |
|||
.order_info_right{ |
|||
width: 940px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding-left: 60px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_right_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
margin-bottom: 35px; |
|||
} |
|||
.order_info_right_title img{ |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 30px; |
|||
} |
|||
.order_info_right_tips{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 80px; |
|||
margin-bottom: 25px; |
|||
} |
|||
.order_time{ |
|||
color: #89201F; |
|||
} |
|||
.pay_button{ |
|||
width: 80px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
height: 30px; |
|||
border: 1px solid #D7D7D7; |
|||
margin: 0 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.order_info_left{ |
|||
width: 250px; |
|||
border-right: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
background-color: #F2F2F2; |
|||
} |
|||
.order_info_left_title{ |
|||
padding-left: 20px; |
|||
background-color: #E7E7E7; |
|||
display: flex; |
|||
height: 40px; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-weight: 650; |
|||
border-bottom: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_left_content{ |
|||
padding: 10px 20px; |
|||
min-height: 320px; |
|||
height: auto; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
} |
|||
.order_info_left_content_item{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
} |
|||
.order_info_left_content_item span:first-child{ |
|||
display: inline-block; |
|||
width: 80px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_info_left_content_item span:last-child{ |
|||
display: inline-block; |
|||
width: 135px; |
|||
} |
|||
.order_head{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 25px; |
|||
width: 100%; |
|||
} |
|||
.order_head_item{ |
|||
width: 166px; |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
text-align: center; |
|||
border-bottom: 2px solid rgba(215, 215, 215, 1); |
|||
padding-bottom: 5px; |
|||
} |
|||
.order_head_item:first-child{ |
|||
width:340px |
|||
} |
|||
.order_content{ |
|||
height: 75px; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
border-top: 1px dashed #AAAAAA; |
|||
border-bottom: 1px dashed #AAAAAA; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_content_item{ |
|||
width: 166px; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_content_item:first-child{ |
|||
width:340px; |
|||
justify-content: flex-start; |
|||
padding-left: 20px; |
|||
} |
|||
.order_content_item:last-child{ |
|||
justify-content: flex-end; |
|||
padding-right: 20px; |
|||
} |
|||
.order_content_item_img{ |
|||
width: 55px; |
|||
height: 55px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_content_item_span{ |
|||
display: inline-block; |
|||
width: 240px; |
|||
} |
|||
.order_price{ |
|||
color: #EB4747; |
|||
} |
|||
.order_other{ |
|||
margin-bottom: 100px; |
|||
} |
|||
.order_other_item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 103px; |
|||
width: 100%; |
|||
} |
|||
.order_message{ |
|||
width: 596px; |
|||
padding: 10px 20px; |
|||
display: flex; |
|||
font-size: 12px; |
|||
background: #F2F2F2; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_message .order_message_input{ |
|||
width: 455px; |
|||
margin-left: 10px; |
|||
} |
|||
.order_message_input >>>.el-textarea__inner{ |
|||
height: 75px; |
|||
} |
|||
.order_other_item_right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item_right>div{ |
|||
width: 601px; |
|||
height: 50px; |
|||
background-color: rgba(242, 242, 242, 1); |
|||
font-size: 12px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item1{ |
|||
height: 50px; |
|||
background: #F2F2F2; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
margin-top: 3px; |
|||
font-size: 14px; |
|||
padding-right: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div> |
|||
<p class="title">请选择支付方式</p> |
|||
<div class="order_content"> |
|||
<div class="order_content_item"> |
|||
<el-radio v-model="query.radio" label="1" class="order_content_item_radio">线下转账</el-radio> |
|||
<span>请使用平台账户登记的银行账号通过银行柜台转账至深圳文化产权交易所指定对公账户（开户行：中国农业银行 开户名称：深圳文化产权交易所 开户账号：6228480125447858588）</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<el-radio v-model="query.radio" label="2" class="order_content_item_radio">网上银行</el-radio> |
|||
<span>跳转至网银时请认真核对收款方，以保障支付安全。（请使用平台账户登记的银行账号进行交易）</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_foot"> |
|||
<button class="order_button" @click="submit">下一步</button> |
|||
</div> |
|||
<p class="order_tips">付款金额可能超限，限额如下</p> |
|||
<div> |
|||
<img src="../../../assets/img/order_process.png" alt="" class="order_process"> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
query:{ |
|||
radio:'1' |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
submit(){ |
|||
this.$router.push({path:'/order/orderPendingPay',query:{step:1}}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.title{ |
|||
font-size: 14px; |
|||
margin-bottom: 30px; |
|||
} |
|||
.order_content{ |
|||
border-top: 1px solid #DCDCDC; |
|||
border-bottom: 1px solid #DCDCDC; |
|||
} |
|||
.order_content_item{ |
|||
height: 70px; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #AAAAAA; |
|||
font-size: 12px; |
|||
border-bottom: 1px solid #DCDCDC; |
|||
} |
|||
.order_content_item:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.order_content_item_radio{ |
|||
color: #333333; |
|||
margin-right: 30px; |
|||
} |
|||
.all_price{ |
|||
color: #EB4747; |
|||
font-weight: 650; |
|||
} |
|||
.order_other_item1>span:first-child{ |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
} |
|||
.order_button{ |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
width: 120px; |
|||
height: 40px; |
|||
background: #89201F; |
|||
border: none; |
|||
} |
|||
.order_foot{ |
|||
display: flex; |
|||
margin: 15px 0; |
|||
} |
|||
.order_tips{ |
|||
font-size: 12px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.order_process{ |
|||
width: 660px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,318 @@ |
|||
<template> |
|||
<div> |
|||
<div class="order_info"> |
|||
<div class="order_info_left"> |
|||
<div class="order_info_left_title">订单信息</div> |
|||
<div class="order_info_left_content"> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系地址： </span> |
|||
<span>广东省 东莞市 虎门镇 华东区 讯发大厦2座B607</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>联系人： </span> |
|||
<span>陈阳明 13812345678</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>订单编号： </span> |
|||
<span>851245854512</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>下单时间： </span> |
|||
<span>2021-08-08 10:33:54</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>挂牌方： </span> |
|||
<span>东莞市芳华沉香园林景观有限公司</span> |
|||
</div> |
|||
<div class="order_info_left_content_item"> |
|||
<span>摘牌方留言： </span> |
|||
<span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_info_right"> |
|||
<div class="order_info_right_title"> |
|||
<img src="../../../assets/img/order_stats.png" alt=""> |
|||
<span>订单状态：等待摘牌方付款</span> |
|||
</div> |
|||
<p class="order_info_right_tips"> |
|||
您还有 |
|||
<span class="order_time">23小时43分15秒</span> |
|||
来付款，超时订单自动关闭。订单关闭后3天内不能再重复购买同一个资产，为避免不便之处，请尽快付款！ |
|||
</p> |
|||
<div class="order_info_right_tips"> |
|||
<span>您可以</span> |
|||
<button class="pay_button">网银支付</button> |
|||
<span>或上传转账记录</span> |
|||
<span>点击上传</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_head"> |
|||
<div class="order_head_item" >资产名称</div> |
|||
<div class="order_head_item" >资产编号</div> |
|||
<div class="order_head_item" >资产分类</div> |
|||
<div class="order_head_item" >资产单价</div> |
|||
<div class="order_head_item" >交易数量</div> |
|||
<div class="order_head_item" >金额小计</div> |
|||
</div> |
|||
<div class="order_content"> |
|||
<div class="order_content_item"> |
|||
<img src="../../../assets/img/achievements_bg.png" alt="" class="order_content_item_img"> |
|||
<span class="order_content_item_span">东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>GM-BZ-165254</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>采集权</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>¥ 10,000.00</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span>3</span> |
|||
</div> |
|||
<div class="order_content_item"> |
|||
<span class="order_price">¥ 30,000.00</span> |
|||
</div> |
|||
</div> |
|||
<div class="order_other"> |
|||
<div class="order_other_item"> |
|||
<div class="order_message"> |
|||
<span>给挂牌方留言：</span> |
|||
<el-input |
|||
type="textarea" |
|||
class="order_message_input" |
|||
resize="none" |
|||
placeholder="请输入内容" |
|||
v-model="textarea"> |
|||
</el-input> |
|||
</div> |
|||
<div class="order_other_item_right"> |
|||
<div> |
|||
<span>契税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
<div> |
|||
<span>印花税： ¥ 1,500.00</span> |
|||
<span class="order_price">¥ 1,500.00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="order_other_item order_other_item1"> |
|||
<span>金额合计 </span> |
|||
<span class="all_price"> ¥ 33,000.00</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.order_info{ |
|||
width: 100%; |
|||
min-height: 360px; |
|||
height: auto; |
|||
border: 1px solid rgba(215, 215, 215, 1); |
|||
margin-bottom: 30px; |
|||
display: flex; |
|||
} |
|||
.order_info_right{ |
|||
width: 940px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding-left: 60px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_right_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
margin-bottom: 35px; |
|||
} |
|||
.order_info_right_title img{ |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 30px; |
|||
} |
|||
.order_info_right_tips{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 80px; |
|||
margin-bottom: 25px; |
|||
} |
|||
.order_time{ |
|||
color: #89201F; |
|||
} |
|||
.pay_button{ |
|||
width: 80px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
height: 30px; |
|||
border: 1px solid #D7D7D7; |
|||
margin: 0 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.order_info_left{ |
|||
width: 250px; |
|||
border-right: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
background-color: #F2F2F2; |
|||
} |
|||
.order_info_left_title{ |
|||
padding-left: 20px; |
|||
background-color: #E7E7E7; |
|||
display: flex; |
|||
height: 40px; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-weight: 650; |
|||
border-bottom: 1px solid rgba(215, 215, 215, 1); |
|||
box-sizing: border-box; |
|||
} |
|||
.order_info_left_content{ |
|||
padding: 10px 20px; |
|||
min-height: 320px; |
|||
height: auto; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
} |
|||
.order_info_left_content_item{ |
|||
font-size: 12px; |
|||
color: #555555; |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
} |
|||
.order_info_left_content_item span:first-child{ |
|||
display: inline-block; |
|||
width: 80px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_info_left_content_item span:last-child{ |
|||
display: inline-block; |
|||
width: 135px; |
|||
} |
|||
.order_head{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 25px; |
|||
width: 100%; |
|||
} |
|||
.order_head_item{ |
|||
width: 166px; |
|||
font-size: 12px; |
|||
color: #7F7F7F; |
|||
text-align: center; |
|||
border-bottom: 2px solid rgba(215, 215, 215, 1); |
|||
padding-bottom: 5px; |
|||
} |
|||
.order_head_item:first-child{ |
|||
width:340px |
|||
} |
|||
.order_content{ |
|||
height: 75px; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
border-top: 1px dashed #AAAAAA; |
|||
border-bottom: 1px dashed #AAAAAA; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_content_item{ |
|||
width: 166px; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_content_item:first-child{ |
|||
width:340px; |
|||
justify-content: flex-start; |
|||
padding-left: 20px; |
|||
} |
|||
.order_content_item:last-child{ |
|||
justify-content: flex-end; |
|||
padding-right: 20px; |
|||
} |
|||
.order_content_item_img{ |
|||
width: 55px; |
|||
height: 55px; |
|||
margin-right: 10px; |
|||
} |
|||
.order_content_item_span{ |
|||
display: inline-block; |
|||
width: 240px; |
|||
} |
|||
.order_price{ |
|||
color: #EB4747; |
|||
} |
|||
.order_other{ |
|||
margin-bottom: 100px; |
|||
} |
|||
.order_other_item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 103px; |
|||
width: 100%; |
|||
} |
|||
.order_message{ |
|||
width: 596px; |
|||
padding: 10px 20px; |
|||
display: flex; |
|||
font-size: 12px; |
|||
background: #F2F2F2; |
|||
box-sizing: border-box; |
|||
} |
|||
.order_message .order_message_input{ |
|||
width: 455px; |
|||
margin-left: 10px; |
|||
} |
|||
.order_message_input >>>.el-textarea__inner{ |
|||
height: 75px; |
|||
} |
|||
.order_other_item_right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item_right>div{ |
|||
width: 601px; |
|||
height: 50px; |
|||
background-color: rgba(242, 242, 242, 1); |
|||
font-size: 12px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
justify-content: space-between; |
|||
} |
|||
.order_other_item1{ |
|||
height: 50px; |
|||
background: #F2F2F2; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
margin-top: 3px; |
|||
font-size: 14px; |
|||
padding-right: 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue