8 changed files with 464 additions and 41 deletions
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div> |
|||
<div class="header"> |
|||
<div class="header_left"> |
|||
<span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="goPage(item.url)">{{item.name}}</span> |
|||
</div> |
|||
<button class="hedaer_button">资产挂牌</button> |
|||
</div> |
|||
<div class="seach"> |
|||
<div class="seach_item"> |
|||
<el-input v-model="query.input" placeholder="请输入资产名称/资产编号或托管方名称" class="seach_input" suffix-icon="el-icon-search"></el-input> |
|||
</div> |
|||
<div class="seach_item"> |
|||
<el-date-picker |
|||
v-model="query.time" |
|||
class="seach_input1" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</div> |
|||
<div class="seach_item"> |
|||
<span class="el-dropdown-link"> |
|||
展开更多筛选条件 |
|||
<i class="el-icon-arrow-down el-icon--right"></i> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="body"> |
|||
<div class="order_item" v-for="(item,index) in 4" :key="index"> |
|||
<div class="order_item_id">1</div> |
|||
<img src="../../../assets/img/header_logo.png" alt="" class="order_item_img"> |
|||
<div class="order_item_info"> |
|||
<div class="order_item_info_title"> |
|||
<span>2021-07-13 18:30:25</span> |
|||
<span>订单编号：15852458965124</span> |
|||
<span>托管方：东莞市芳华沉香园林景观有限公司</span> |
|||
<span>资产编号：GM-BZ-165254</span> |
|||
</div> |
|||
<div class="order_item_info_content"> |
|||
<div class="order_item_info_content_left"> |
|||
<p>东莞市芳华沉香园林景观有限公司20棵沉香树采集权（2年）</p> |
|||
<p>运费：¥ 80.00</p> |
|||
<p>服务费：¥ 1,000.00</p> |
|||
</div> |
|||
<div class="order_item_info_content_price"> |
|||
<p class="order_item_info_content_price_p">¥ 30,000.00</p> |
|||
<p>单价：¥ 10,000.00</p> |
|||
</div> |
|||
<div class="order_item_id">数量：3</div> |
|||
<div class="order_item_info_content_all">交易总额：¥ 31,080.00</div> |
|||
<div>交易状态：已完成</div> |
|||
<div class="order_item_info_content_operation"> |
|||
<p>订单详情</p> |
|||
<p>在线联系</p> |
|||
<p>查看评价</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
layout="total, prev, pager, next" |
|||
:current-page="query.page" |
|||
:page-size="query.limit" |
|||
:total="pageTotal" |
|||
@current-change="handlePageChange" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
query:{ |
|||
input:'', |
|||
time:'', |
|||
page:1, |
|||
limit:10, |
|||
}, |
|||
pageTotal:50, |
|||
|
|||
headerList:[ |
|||
{name:'全部资产',url:''}, |
|||
{name:'待审核',url:''}, |
|||
{name:'待复核',url:''}, |
|||
{name:'发布中',url:''}, |
|||
{name:'已下架',url:''}, |
|||
{name:'已转让',url:''}, |
|||
], |
|||
header_active:0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 分页导航 |
|||
handlePageChange(val) { |
|||
this.$set(this.query, 'page', val); |
|||
// this.getData(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.header{ |
|||
font-size: 14px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.hedaer_button{ |
|||
width: 100px; |
|||
height: 30px; |
|||
color: white; |
|||
border: none; |
|||
background: -moz-linear-gradient(top, #F8D89F 0%, #C94C4C 100%); |
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#C94C4C)); |
|||
background: -webkit-linear-gradient(top, #F8D89F 0%,#C94C4C 100%); |
|||
background: -o-linear-gradient(top, #F8D89F 0%,#C94C4C 100%); |
|||
background: -ms-linear-gradient(top, #F8D89F 0%,#C94C4C 100%); |
|||
background: linear-gradient(to bottom, #F8D89F 0%,#C94C4C 100%); |
|||
} |
|||
.header_active{ |
|||
color: rgba(201, 76, 76, 0.698039215686274); |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
.header span{ |
|||
display: inline-block; |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
margin-right: 20px; |
|||
} |
|||
.header span:hover{ |
|||
color: rgba(201, 76, 76, 0.698039215686274); |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
.seach{ |
|||
display: flex; |
|||
background-color: #FDF8F8; |
|||
border: 1px solid #E9B7B7; |
|||
height: 50px; |
|||
margin-top: 30px; |
|||
align-items: center; |
|||
} |
|||
.seach_item{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
margin-left: 20px; |
|||
|
|||
} |
|||
.seach_input{ |
|||
width: 260px; |
|||
border: 1px solid #E9B7B7; |
|||
} |
|||
.seach_input1{ |
|||
border: 1px solid #E9B7B7; |
|||
} |
|||
.seach_input1>>>.el-input__inner{ |
|||
border: none; |
|||
} |
|||
.seach_input>>>.el-input__inner{ |
|||
border: none; |
|||
padding-left: 5px; |
|||
} |
|||
.el-dropdown-link{ |
|||
color: #EAB1B1; |
|||
cursor: pointer; |
|||
} |
|||
.body{ |
|||
margin-top: 10px; |
|||
} |
|||
.order_item{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
padding: 15px 0; |
|||
} |
|||
.order_item:nth-child(2n+2){ |
|||
background-color: #FDF8F8; |
|||
} |
|||
.order_item_id{ |
|||
padding: 0 15px; |
|||
} |
|||
.order_item_img{ |
|||
width: 100px; |
|||
height: 100px; |
|||
margin: 0 15px; |
|||
} |
|||
.order_item_info_title{ |
|||
display: flex; |
|||
font-size: 14px; |
|||
color: #7F7F7F; |
|||
align-items: center; |
|||
width: 1020px; |
|||
justify-content: space-between; |
|||
} |
|||
.order_item_info_content{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 1020px; |
|||
font-size: 14px; |
|||
justify-content: space-between; |
|||
margin-top: 5px; |
|||
color: #333333; |
|||
} |
|||
.order_item_info_content_left p{ |
|||
width: 300px; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_item_info_content_price{ |
|||
/* margin:0 30px; */ |
|||
text-align: center; |
|||
} |
|||
.order_item_info_content_price_p{ |
|||
text-decoration: line-through; |
|||
margin-bottom: 5px; |
|||
} |
|||
.order_item_info_content_all{ |
|||
font-weight: bold; |
|||
} |
|||
.order_item_info_content_operation{ |
|||
color: #555555; |
|||
} |
|||
.order_item_info_content_operation p{ |
|||
margin-bottom: 5px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue