mall-web-ssr/components/applyPurchase/articleTwo.vue

<template>
  <div class="article_two">
    <div class="apply-rank">
      <table>
        <thead>
        <tr>
          <th width="50">排名</th>
          <th width="95">型号</th>
          <th width="65">求购次数</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(rank, index) in purchaseRank">
          <td><div>NO.<span>{{index + 1}}</span></div></td>
          <td>
            <div>
              <span v-if="rank.id_cmpcode" :title="rank.id_cmpcode">{{rank.id_cmpcode}}</span>
              <span v-if="!rank.id_cmpcode">-</span>
            </div>
          </td>
          <td><div>{{rank.seekAmount || 0}}</div></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    computed: {
      purchaseRank () {
        return this.$store.state.applyPurchase.purchaseApplyRank.purchaseApplyRank.data
      }
    }
  }
</script>
<style lang="scss">
  .article_two{
    position:relative;
    border-radius:5px;
    padding-top:25px;
    margin-bottom:20px;
    height:388px;
    background: #fff;
    &:before{
      content: '';
      display:block;
      position:absolute;
      top:-12px;
      left:1px;
      height:30px;
      width:215px;
      background: url(/images/applyPurchase/biaoti.png)no-repeat center;
    }
    .apply-rank {
      margin-bottom:10px;
      table {
        margin: 0 auto;
        color:#666;
        text-align: center;
        thead {
          background: #d3eafc;
          height: 26px;
          line-height: 26px;
          border-radius: 3px;
          tr {
            th {
              font-size: 12px;
              font-weight: bold;
              text-align: center;
            }
          }
        }
        tbody {
          tr {
            height: 30px;
            line-height: 30px;
            &:first-child {
              td {
                padding-top: 10px;
              }
            }
            td {
              color: #666;
              &:nth-child(1) {
                color: #f6682f;
                font-size: 12px;
                text-align:left;
                >div {
                  width: 50px;
                  span {
                    font-size: 16px;
                  }
                }
              }
              &:nth-child(2) {
                >div {
                  width: 90px;
                }
              }
              &:nth-child(3) {
                >div {
                  width: 60px;
                }
              }
              >div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 3px;
                position: relative;
                height: 30px;
                i {
                  font-style: normal;
                  float: right;
                  color: #8b8b8b;
                  font-size: 14px;
                  position: absolute;
                  right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
</style>