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

<template>
<div class="resource_info">
  <div class="container">
    <div class="crumbs">
      <div class="container">
        <div class="menu-com row">
          <div class="menu-title col-md-12">
            <a href="/">首页 ></a>
            <a href="/supplier">供应商资源 ></a>
            <span>供应商物料</span>
          </div>
        </div>
      </div>
    </div>
    <div class="user_info">
      <div class="user_title">
        <div class="user_name">
          <span>深圳优软科技有限公司 &nbsp;<i class="fa fa-angle-down"></i></span>
          <a href="/">进入店铺</a>
        </div>
        <div class="user_mes">
          <div class="mes-list">
            <ul>
              <li><span>企业执照号：</span><span>1</span></li>
              <li><span>地址：</span><span>1</span></li>
              <li><span>邮箱：</span><span>1</span></li>
              <li><span>电话：</span><span>1</span></li>
              <li><span>行业：</span><span>1</span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="input-group">
          <input type="search" class="form-control" placeholder="请输入要查找的内容"
                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
          <span class="input-group-btn">
            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">
              搜索 <i class="fa fa-search"></i>
            </button>
        </span>
        </div>
      </div>
    </div>
    <div class="info_list">
      <table>
        <thead>
        <tr>
          <th width="66">序号</th>
          <th width="336">原厂型号 / 品牌</th>
          <th width="336">类目（名称） / 单位</th>
          <th width="336">规格</th>
          <th width="116">操作</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td>12</td>
            <td>
              <div class="item">
                <span class="fl">原厂型号</span>
                <p>12322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
              </div>
              <div class="item">
                <span class="fl">品牌</span>
                <p>21322222222222222222222222222222222222222222222222222222222222322222222222222222222222222222222222222222222222222222222222222222222222222</p>
              </div>
            </td>
            <td><div class="item">
              <span class="fl">类目（名称）</span>
              <p>1</p>
            </div>
              <div class="item">
                <span class="fl">单位</span>
                <p>1</p>
              </div>
            </td>
            <td>
              <div class="item">
                <span class="fl">规格</span>
                <p>1</p>
              </div>
            </td>
            <td><a href="/">立即询价</a></td>
          </tr>
          <tr>
            <td>212</td>
            <td>212</td>
            <td>212</td>
            <td>212</td>
            <td>212</td>
          </tr>
        </tbody>
      </table>
      <div style="float: right;background: #ecf1f1;">
        <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: 'ResourceView',
    data () {
      return {
        searchCode: '',
        pageParams: {
          total: 100,
          count: 10,
          page: 1
        }
      }
    },
    components: {
      Page
    },
    computed: {
      list () {
        console.log(this.$store.state.supplier.material.material.data)
        return this.$store.state.supplier.material.material.data
      }
    },
    methods: {
      handleCurrentChange (type) {
        console.log(type)
      },
      goodsSearch (type) {
        console.log(type)
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.resource_info{
  background: #ecf1f1;
  .crumbs{
    background: #ecf1f1;
    .menu-com{
      margin: 0;
      .menu-title{
        line-height: 40px;
        font-size: 14px;
        padding-left: 0;
        margin:0;
        a{
          color: #5078cb;
          font-size: 14px;
        }
      }
    }
  }
  .user_info{
    .user_title{
      display:inline-block;
      position:relative;
      padding-bottom:13px;
      margin-right:330px;
      &:hover{
        .user_mes{
          display:block;
        }
      }
      .user_name{
        span{
          font-size: 20px;
          color:#666;
          font-weight: bold;
          margin-right:10px;
        }
        a{
          display:inline-block;
          padding:0 10px;
          border-radius:3px;
          font-size: 12px;
          height:24px;
          line-height: 24px;
          color:#fff;
          background: #ffa200;
        }
      }
      .user_mes{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        z-index: 200;
        height:10px;
        &:before{
          content: '';
          display:block;
          position:absolute;
          bottom:5px;
          left:20px;
          z-index: 100;
          border: 5px solid rgba(0,0,0,.7);
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -o-transform:rotate(45deg);
          -ms-transform: rotate(45deg);
          transform:rotate(45deg);
        }
        .mes-list{
          padding:5px 10px;
          background: rgba(0,0,0,.7);
          color:#fff;
        }
      }
    }
    .search{
      width:310px;
      margin:0;
      float:right;
      .btn{
        background: #3c7cf5;
        color:#fff;
      }
    }
  }
  .info_list{
    padding-bottom:200px;
    table {
      table-layout: fixed;
      thead{
        tr{
          line-height: 32px;
          vertical-align: middle;
          th{
            font-size: 14px;
            color:#fff;
            text-align: center;
            background: #3975f4;
          }
        }
      }
      tbody{
        tr{
          border:1px solid #dadada;
          &:nth-child(odd){
            background: #fff;
          }
          &:nth-child(even){
            background: #f8f8f8;
          }
          &:hover{
            cursor:pointer;
            background: #f8fafe;
            td{
              &:first-child{
                border-left:1px solid #3975f4;
              }
              &:last-child{
                border-right:1px solid #3975f4;
              }
              border-top:1px solid #3975f4;
              border-bottom:1px solid #3975f4;
            }
          }
          td{
            vertical-align: middle;
            margin:0 auto;
            padding:10px 0;
            &:first-child, &:last-child{
              color:#ed791c;
              text-align: center;
            }
            a{
              display:inline-block;
              padding:0 10px;
              margin:0 auto;
              line-height: 24px;
              border-radius:3px;
              height:24px;
              font-size: 12px;
              color:#fff;
              background: #3c7cf5;
              text-align: center;
            }
            .item{
              font-size: 12px;
              line-height: 18px;
              padding: 10px 0;
              span{
                display:inline-block;
                width:85px;
                text-align: right;
                color:#3c7cf5;
              }
              p{
                display:block;
                width:210px;
                height:54px;
                margin-left:100px;
                margin-bottom:0;
                color:#333;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                word-wrap:break-word;
              }
            }
          }
        }
      }
    }
  }
}
</style>