caoyuanye
/
html-template


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../c_style/css.css">
  <link rel="stylesheet" href="../../c_style/shop.css">
</head>
<body>
<div>
  <div class="shop-container">
    <div class="shop-container-search-box">
      <div class="shop-container-search">
        <input class="shop-container-search-input"
               placeholder="请输入商品名称、规格型号、出厂编码查询" type="text">
        <div class="shop-container-search-btn">搜索</div>
        <div class="shop-container-shopping-cart"><i class="icon-shopcar"></i>购物车(20)</div>
      </div>
    </div>
    <div class="shop-container-filter-box">
      <div class="shop-container-filter-box-wrapper">
        <div class="shop-container-filter-item dotted-line">
          <div class="shop-container-filter-item-title">车型</div>
          <div class="shop-container-filter-item-container">
            <div class="shop-container-filter-item-car-type">东风日产奇骏20102.5 无级 XV 至尊版（ 20112011 ）
              <a class="clear-btn">×</a>
            </div>
            <div class="shop-container-filter-item-btn btn-1">选择车型</div>
            <div class="shop-container-filter-item-btn btn-2">VIN 图片识别</div>
            <div class="shop-container-filter-item-btn btn-3">VIN 查询</div>
          </div>
        </div>
        <div class="shop-container-filter-item">
          <div class="shop-container-filter-item-title">品类</div>
          <div id="brand-filter" class="shop-container-filter-item-container put-container">
            <span class="shop-container-filter-item-brand">不限</span>
            <span class="shop-container-filter-item-brand checked">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
          </div>
          <div id="brand-show" class="shop-container-filter-item-more">展开∨</div>
          <div id="brand-hide" class="shop-container-filter-item-more" style="display: none">收起∧</div>
        </div>
        <div class="shop-container-filter-item dotted-line">
          <div class="shop-container-filter-item-title">子品类</div>
          <div id="brand-children-filter" class="shop-container-filter-item-container put-container">
            <span class="shop-container-filter-item-brand">不限</span>
            <span class="shop-container-filter-item-brand checked">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
            <span class="shop-container-filter-item-brand">滤清器类</span>
          </div>
          <div id="brand-children-show" class="shop-container-filter-item-more">展开∨</div>
          <div id="brand-children-hide" class="shop-container-filter-item-more" style="display: none">收起∧</div>
        </div>
        <div class="shop-container-filter-item">
          <div class="shop-container-filter-item-title">品牌</div>
          <div class="shop-container-filter-item-container">
            <span class="shop-container-filter-item-brand checked">不限</span>
            <span class="shop-container-filter-item-brand">马牌</span>
          </div>
        </div>
      </div>
      <div class="shop-container-filter-box-wrapper">
        <div class="shop-container-filter-item">
          <div class="shop-container-filter-item-title">配件列表</div>
          <div class="shop-container-filter-item-container">
            <div class="shop-container-filter-item-container-top-filter filtered">库存 ↑↓ </div>
            <div class="shop-container-filter-item-container-top-filter">价格 ↑↓</div>
            <div class="shop-container-filter-item-container-top-filter-2"><input type="checkbox" name="favorite" value="1" />仅显示有货</div>
          </div>
        </div>
      </div>
    </div>
    <div class="shop-container-table-box">
      <table>
        <colgroup>
          <col width="8%">
          <col width="15%">
          <col width="15%">
          <col width="10%">
          <col width="10%">
          <col width="10%">
          <col width="10%">
          <col width="8%">
          <col width="8%">
        </colgroup>
        <thead>
        <tr>
          <th>图片</th>
          <th>品牌/名称/供应商编码</th>
          <th>规格型号/出厂编码</th>
          <th>包装规格</th>
          <th>价格</th>
          <th>商品品质/产地</th>
          <th>适配车型</th>
          <th>替换件</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>
            <img
              src="https://upload.jianshu.io/users/upload_avatars/14368237/e85f3cbe-9fc7-46e1-b43e-eaa734694690.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp"
              alt="">
          </td>
          <td>
            <div class="td-containe">
              <p>品牌/名称</p>
              <span>2218-18MMX25M</span>
            </div>
          </td>
          <td>
            <div class="td-containe">
              <span>2218-18MMX25M</span>
              <span>2218-18MMX25M</span>
            </div>
          </td>
          <td>
            <span>包装规格</span>
          </td>
          <td>
            <span><span class="rmb-title">￥400.00</span>（单位）</span>
          </td>
          <td>
            <span>原厂</span>
            <span>北京</span>
          </td>
          <td>
            <div class="td-containe">
              <span>适配车型适配车型，多了换行展示多了很长很长很长适配车型适配车型，多了换行展示多了很长很长很长</span>
            </div>
          </td>
          <td>
            <span class="color-blue">32</span>
          </td>
          <td>
            <div class="count-input">
              <div class="count-input-btn count-input-btn-add">+</div>
              <input type="text" value="1">
              <div class="count-input-btn count-input-btn-sub">-</div>
            </div>
          </td>
          <td>
            <i class="icon-shopcar"></i>
          </td>
        </tr>
        <tr>
          <td>
            <img
              src="https://upload.jianshu.io/users/upload_avatars/14368237/e85f3cbe-9fc7-46e1-b43e-eaa734694690.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp"
              alt="">
          </td>
          <td>
            <div class="td-containe">
              <p>品牌/名称</p>
              <span>2218-18MMX25M</span>
            </div>
          </td>
          <td>
            <div class="td-containe">
              <span>2218-18MMX25M</span>
              <span>2218-18MMX25M</span>
            </div>
          </td>
          <td>
            <span>包装规格</span>
          </td>
          <td>
            <span><span class="rmb-title">￥400.00</span>（单位）</span>
          </td>
          <td>
            <span>原厂</span>
            <span>北京</span>
          </td>
          <td>
            <div class="td-containe">
              <span>适配车型适配车型，多了换行展示多了很长很长很长适配车型适配车型，多了换行展示多了很长很长很长</span>
            </div>
          </td>
          <td>
            <span class="color-blue">32</span>
          </td>
          <td>
            <div class="count-input">
              <div class="count-input-btn count-input-btn-add">+</div>
              <input type="text" value="1">
              <div class="count-input-btn count-input-btn-sub">-</div>
            </div>
          </td>
          <td>
            <i class="icon-shopcar"></i>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../../layui/layui.all.js"></script>
<script type="text/javascript">
$(function () {
  $('.count-input-btn-add').on('click',function (e) {
    if($(e.target).parent().hasClass('count-input-disabled')) return
    $(e.target).parent().children('input').attr('value',~~$(e.target).parent().children('input').attr('value')+1)
  })
  $('.count-input-btn-sub').on('click',function (e) {
    if($(e.target).parent().hasClass('count-input-disabled')) return
    $(e.target).parent().children('input').attr('value',~~$(e.target).parent().children('input').attr('value')-1>0?~~$(e.target).parent().children('input').attr('value')-1:1)
  })
  $('#brand-show').on('click',function (e) {
    $('#brand-hide').show()
    $('#brand-show').hide()
    $('#brand-filter').removeClass('put-container')
  })
  $('#brand-hide').on('click',function (e) {
    $('#brand-hide').hide()
    $('#brand-show').show()
    $('#brand-filter').addClass('put-container')
  })
  $('#brand-children-show').on('click',function (e) {
    $('#brand-children-hide').show()
    $('#brand-children-show').hide()
    $('#brand-children-filter').removeClass('put-container')
  })
  $('#brand-children-hide').on('click',function (e) {
    $('#brand-children-hide').hide()
    $('#brand-children-show').show()
    $('#brand-children-filter').addClass('put-container')
  })
})
</script>
</html>