mall-web-ssr/components/supplier/merchant.vue

<template>
<div class="merchant">
  <div class="container">
    <div class="top clearfix">
      <div class="title">
        <p>High quality dealer</p>
        <h2>供应商列表</h2>
      </div>
      <div class="search">
        <div class="input-group">
          <input type="search" class="form-control" title="code" placeholder="名称/地址/行业/型号/品牌"
                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
          <span class="input-group-btn">
            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;查 询</button>
          </span>
        </div>
      </div>
    </div>
    <div class="list_info">
      <ul class="list-inline">
        <li>
          <div class="has_shop">已开店</div>
          <div class="enterprise_name">
            深圳英优软科技有限公司
          </div>
          <div class="select_btn">
            添加为<br/>供应商
          </div>
          <div class="popups">
            <p>企业执照号：</p><p>hjfhqei</p>
            <p>地址：</p><p></p>
            <p>邮箱：</p><p>hjfhqei</p>
            <p>电话：</p><p></p>
            <p>行业：</p><p>hjfhq4333333333333333333333333333333333333333ei</p>
          </div>
        </li>
      </ul>
      <div style="float: right;">
        <page :total="pageParams.total" :page-size="pageParams.count"
              :current="pageParams.page" v-on:childEvent="handleCurrentChange">
        </page>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'MerchantView',
    data () {
      return {
        searchCode: '',
        pageParams: {
          count: 20,
          page: 1,
          total: 100
        }
      }
    },
    components: {
      Page
    },
    methods: {
      goodsSearch (type) {
        console.log('1', type)
      },
      handleCurrentChange () {
        console.log('22')
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.merchant{
  background: #ecf1f1 url(/images/supplier/banner.jpg)no-repeat;
  border-top:3px solid #000;
  padding-bottom:25px;
  margin-top:-1.5em;
  .top{
    padding-top:30px;
    margin-bottom:40px;
    .title{
      margin:0 auto;
      text-align: center;
      width:215px;
      border-bottom:1px solid #ff5151;
      color:#fff;
      p{
        margin:0;
      }
      h2{
        font-size: 32px;
        margin:0;
        line-height: 46px;
      }
      &:before{
        content: '';
        display:block;
        position:relative;
        left:55px;
        top:61px;
        width:105px;
        height:1px;
        background: #ff8a00;
      }
      &:after{
        content: '';
        display:block;
        position:relative;
        left:55px;
        top:4px;
        width:105px;
        height:1px;
        background: #fff600;
      }
    }
    .search{
      float:right;
      width:310px;
      text-align: right;
      margin-right:10px;
      .btn{
        width:68px;
        background: #ffa200;
        color:#fff;
      }
    }
  }
  .list_info{
    padding: 0 10px;
    ul{
      margin-left:5px;
      li{
        position:relative;
        vertical-align: top;
        width:267px;
        height:115px;
        border-radius:5px;
        margin-right:32px;
        margin-bottom:60px;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(0,0,0,.8);
        &:nth-child(4n) {
          margin-right:0;
        }
        &:after{
          content: '';
          display:block;
          position:absolute;
          top:99%;
          left:50%;
          z-index:200;
          width:88px;
          height:22px;
          margin-left:-44px;
          background: url(/images/supplier/icon/bottom_center_img.png)no-repeat;
        }
        .has_shop {
          position:absolute;
          right:0;
          top:0;
          width:68px;
          height:22px;
          background: url(/images/supplier/icon/top_right_img.png)no-repeat;
          color:#fff;
          font-weight: bold;
          text-align: center;
          line-height: 22px;
        }
        .enterprise_name{
          padding-top:15px;
          width:98%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space:nowrap;
          border-bottom:1px solid #b9def7;
          font-weight: bold;
          color:#1891e4;
          font-size: 18px;
          line-height: 48px;
          text-align: center;
        }
        .select_btn{
          position:absolute;
          bottom:-10px;
          left:50%;
          z-index:250;
          width:56px;
          height:56px;
          padding:10px 0;
          margin-left:-28px;
          text-align: center;
          line-height: 18px;
          background: #1891e4;
          border-radius:50%;
          color:#fff;
        }
        &:hover{
          cursor:pointer;
          .popups{
            top:99%;
            opacity:1;
            z-index:100;
            min-height:125px;
          }
        }
        .popups{
          position:absolute;
          top:0;
          left:0;
          background: #6c6c6c;
          width:267px;
          height:110px;
          padding:25px 15px 15px 10px;
          transition: all .3s ease;
          opacity: 0;
          color:#fff;
          overflow: hidden;
          p{
            float:left;
            white-space:pre-wrap;
            word-wrap:break-word;
            margin: 0 !important;
            line-height: 18px;
            height:18px;
            &:nth-child(2n-1){
              width:42px;
            }
            &:first-child{
              width:85px;
            }
            &:nth-child(2n){
              width:200px;
            }
            &:nth-child(2){
              width:155px;
            }
            &:last-child{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>