mall-web-ssr/components/search/GoodList.vue

<template>
  <div class="main">
    <div class="proofList">
      <div class="main-proof">
        <div class="content-f pro-title">
          <div class="content-f img"><a href=""></a></div>
          <div class="content-f">
            <div style="margin:10px 0 5px 0">
              <a href="" class="f16 text-bold text-num">123-91-422-41-001000</a>
              <a href="" class="text-num f10" style="margin-left: 10px">Mill-Max</a>
            </div>
            <p class="f10"><span title="产品分类"><i class="fa fa-th-large f14 " aria-hidden="true"></i>&nbsp;&nbsp;<a href="">插座及导线座</a></span></p>
            <p class="f10"><span class="title">包装方式：</span> <span class="content">无</span></p>
          </div>
        </div>
        <div class="content-r pro-r">
          <div>
            库存：<span class="text-num f12">0</span> &nbsp;<span class="text-num f12">PCS</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="toMore"><a href="">查看更多&gt;&gt;&nbsp;&nbsp;</a></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>
<style scoped>
  .main {
    margin: 20px auto;
    width: 100%;
    padding: 3px 3px;
  }
  .main .proofList {
    width: 100%;
    height: auto;
    border: 1px solid #d2d2d2;
    border-top: 2px solid #5078cb;
    margin: 15px 0 15px 0;
    padding-bottom: 20px;
  }
  .proofList .main-proof {
    padding: 20px 20px;
  }
  .proofList .pro-title {
    width: 720px;
    padding: 10px 10px 10px 20px;
    height: 115px;
  }
  .main .content-f {
    float: left;
  }
  .proofList .img {
    width: 80px;
    height: 80px;
    margin-right: 15px;
  }
  .text-bold {
    font-weight: 700;
  }
  .content {
    margin: 10px 0 20px 0;
  }
  .proofList .pro-r {
    padding: 15px 10px 0 0;
  }
  .main .content-r {
    float: right;
  }
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  .proofList .toMore {
    text-align: right;
    font-size: 14px;
  }
  .f16 {
    font-size: 16px;
  }
  .f14 {
    font-size: 14px;
  }
  a:hover{
    text-decoration: none;
    color: #f39801;
  }
  .text-num{
    font-style: normal;
    font-family: verdana;
  }
  .f10{
    font-size: 10px;
  }
</style>