wenhuayun_index/src/components/page/Purchaser/myCollection.vue

<template>
  <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>资产编号：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,
    }
  },
  methods:{
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      // this.getData();
    }
  }
}
</script>
<style scoped>
  .header{
    font-size: 14px;
  }
  .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;
  }
  .order_item_info_title span{
    display: inline-block;
    margin-right: 50px;
  }
  .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>