index.html 10.9 KB
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
  <meta content="telephone=no" name="format-detection" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>七巧板</title>
  <link rel="stylesheet" href="../css/common.css">
</head>

<body>

  <!-- header for wap -->
  <header class="m-header header-light">
    <div class="head">
      <a href="#" class="lt-bar"><i class="m-icon icon-back"></i></a>
      <h1 class="font-deep">名古屋的美食店</h1>
    </div>
  </header>


  <!-- tab -->
  <ul class="m-nav border-1px border-bottom">
    <li class="on"><a href="#">秒杀专区</a></li>
    <li><a href="#">活动专区</a></li>
    <li><a href="#">最低专区</a></li>
    <li><a href="#">精品专区</a></li>
  </ul>


  <!-- slider -->
  <div class="m-slider">
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <a class="swiper-slide" href="#" style="background:url(../temp/pic_320.png) center center no-repeat; background-size:100% 100%;"></a>
        <a class="swiper-slide" href="#" style="background:url(../temp/pic_320.png) center center no-repeat; background-size:100% 100%;"></a>
        <a class="swiper-slide" href="#" style="background:url(../temp/pic_320.png) center center no-repeat; background-size:100% 100%;"></a>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <!-- section -->
  <div class="m-section">
    <h3 class="section-head">秒杀专区</h3>
  </div>

  <!-- goods -->
<div class="scroll-wrap">
  <ul class="m-goods-items clearfix">
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
        <p>
          <em class="origin-price">1.5元/斤</em>
        </p>
      </a>
    </li>
  </ul>
</div>

  <!-- section -->
  <div class="m-section">
    <h3 class="section-head">活动专区</h3>
  </div>
  <div class="section-items">
    <a href="#" class="section-item">
      <img src="../temp/p_1.jpg" alt="">
    </a>
    <a href="#" class="section-item">
      <img src="../temp/p_2.jpg" alt="">
    </a>
    <a href="#" class="section-item">
      <img src="../temp/p_3.jpg" alt="">
    </a>
  </div>

  <!-- section -->
  <div class="m-section">
    <h3 class="section-head">最低专区</h3>
  </div>
  <div class="product-items clearfix">
    <ul class="items border-1px border-top">
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
      <li class="item border-1px-full">
        <a href="#">
          <h3>新鲜花菜</h3>
          <p>
            <em>0.8-0.9元/斤</em>
          </p>
          <img src="../temp/pic_220.png" class="pic" alt="">
        </a>
      </li>
    </ul>
  </div>


  <!-- section -->
  <div class="m-section">
    <h3 class="section-head">精品专区</h3>
  </div>

  <div class="photo-wall clearfix">
    <a href="#" class="photo-item photo-2p">
      <img src="../temp/wall_1.jpg" alt="">
    </a>
    <a href="#" class="photo-item photo-1p">
      <img src="../temp/wall_2.jpg" alt="">
    </a>
    <a href="#" class="photo-item photo-1p">
      <img src="../temp/wall_3.jpg" alt="">
    </a>
    <a href="#" class="photo-item photo-1p">
      <img src="../temp/wall_4.jpg" alt="">
    </a>
    <a href="#" class="photo-item photo-1p">
      <img src="../temp/wall_5.jpg" alt="">
    </a>
  </div>


  <!-- section -->
  <div class="m-section">
    <h3 class="section-head">推荐专区</h3>
  </div>


  <ul class="m-list-view border-1px border-top">
    <li class="cell cell-pic border-1px border-bottom">
      <a href="#">
        <img src="../temp/pic_80.png" width="80" height="80" alt="" class="pic">
        <div class="cont">
          <h3>白石榴 产地韩国</h3>

          <em class="font-red">0.8~0.9元/斤</em>

          <p class="desc">
            <span class="name font-gray">王大大大大</span>
            <span class="float-right category  font-gray">主营:根茎类</span>
          </p>
          <p>广西柳州市城中区第三方斯蒂芬是</p>
        </div>
      </a>
    </li>

    <li class="cell cell-pic border-1px border-bottom">
      <a href="#">
        <img src="../temp/pic_80.png" width="80" height="80" alt="" class="pic">
        <div class="cont">
          <h3>白石榴 产地韩国</h3>

          <em class="font-red">0.8~0.9元/斤</em>

          <p class="desc">
            <span class="name font-gray">王大大大大</span>
            <span class="float-right category  font-gray">主营:根茎类</span>
          </p>
          <p>广西柳州市城中区第三方斯蒂芬是</p>
        </div>
      </a>
    </li>

    <li class="cell cell-pic border-1px border-bottom">
      <a href="#">
        <img src="../temp/pic_80.png" width="80" height="80" alt="" class="pic">
        <div class="cont">
          <h3>白石榴 产地韩国</h3>

          <em class="font-red">0.8~0.9元/斤</em>

          <p class="desc">
            <span class="name font-gray">王大大大大</span>
            <span class="float-right category  font-gray">主营:根茎类</span>
          </p>
          <p>广西柳州市城中区第三方斯蒂芬是</p>
        </div>
      </a>
    </li>
  </ul>

  <!-- tab -->
  <div class="scroll-wrap background-white">
    <ul class="m-tab border-1px border-bottom">
      <li class="on"><a href="#">今日必抢</a></li>
      <li><a href="#">名古屋</a></li>
      <li><a href="#">我是吃货</a></li>
      <li><a href="#">我是吃货</a></li>
    </ul>
  </div>

  <ul class="m-goods-items clearfix">
    <li class="m-col-2">
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
      </a>
    </li>
    <li class="m-col-2">
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
      </a>
    </li>
    <li class="m-col-2">
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
      </a>
    </li>
    <li class="m-col-2">
      <a href="#">
        <div class="pic" style="background-image:url(../temp/pic_220.png); background-size:cover;"></div>
        <h3> 丝瓜 产地山东潍坊市 产地山东潍坊市</h3>
        <p>
          <em>0.8-0.9元/斤</em>
        </p>
      </a>
    </li>
  </ul>

  <script src="../js/swipe.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', { /*轮播图*/
      pagination: '.swiper-pagination',
      paginationClickable: true,
      centeredSlides: true,
      loop: true,
      spaceBetween: 0,
      autoplay: 3000,
      autoplayDisableOnInteraction: false
    });
  </script>
</body>

</html>