index.vue

<template>
  <table class="jd-table">
    <tr class="jd-table-header">
      <th style="width:5%" />
      <th style="width:10%">运单号</th>
      <th style="width:10%">提单号</th>
      <th style="width:25%">运输方式/出货渠道</th>
      <th style="width:15%">收货人</th>
      <th style="width:10%">唛头</th>
      <th style="width:10%">物流状态</th>
      <th style="width:15%">下单时间</th>
    </tr>
    <tr class="jd-table-body">
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'JdButton',
  props: {
    name: {
      type: String,
      default: ''
    },
    dark: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.jd-table{
width: 100%;
border-collapse:collapse;
}
.jd-table-header{
  background-image: url('../../assets/profile/table.png');
  background-size: 100%;
  font-size: 13px;
  height: 48px;
}
.jd-table-header th{
  color: #fff;
  font-weight: 500;
}
.jd-table-body{
  text-align: center;
  font-size: 12px;
}
</style>