<template>
  <div>
    <div class="menu vux-1px-r">
      <scroller
        lock-x
        scrollbar-y
        height="100%"
      >
        <div class="box1">
          <ul>
            <li class="vux-1px-b">
              <span>热搜推荐</span>
            </li>
            <li class="vux-1px-b">
              <span>手机数码</span>
            </li>
            <li class="vux-1px-b">
              <span>家用电器</span>
            </li>
            <li class="vux-1px-b">
              <span>女装内衣</span>
            </li>
            <li class="vux-1px-b">
              <span>男装内衣</span>
            </li>
            <li class="vux-1px-b">
              <span>鞋靴箱包</span>
            </li>
            <li class="vux-1px-b">
              <span>电脑办公</span>
            </li>
            <li class="vux-1px-b">
              <span>运动户外</span>
            </li>
            <li class="vux-1px-b">
              <span>个护化妆</span>
            </li>
            <li class="vux-1px-b">
              <span>家具建材</span>
            </li>
            <li class="vux-1px-b">
              <span>家居家纺</span>
            </li>
            <li class="vux-1px-b">
              <span>母婴玩具</span>
            </li>
            <li class="vux-1px-b">
              <span>食品生鲜</span>
            </li>
            <li class="vux-1px-b">
              <span>酒水饮料</span>
            </li>
            <li class="vux-1px-b">
              <span>钟表奢品</span>
            </li>
            <li class="vux-1px-b">
              <span>汽车用品</span>
            </li>
            <li class="vux-1px-b">
              <span>医药保健</span>
            </li>
            <li class="vux-1px-b">
              <span>珠宝饰品</span>
            </li>
            <li class="vux-1px-b">
              <span>图书音像</span>
            </li>
            <li class="vux-1px-b">
              <span>全球购</span>
            </li>
          </ul>
        </div>
      </scroller>
    </div>
    <div class="content">
      <scroller
        lock-x
        scrollbar-y
        height="100%"
      >
        <div>
          <div
            v-for="item in list"
            :key="item.title"
            style="margin: 10px;overflow: hidden;"
          >
            <masker style="border-radius: 2px;">
              <div
                class="m-img"
                :style="{backgroundImage: 'url(' + item.img + ')'}"
              />
              <div
                slot="content"
                class="m-title"
              >
                {{ item.title }}
                <br>
                <span class="m-time">2016-03-18</span>
              </div>
            </masker>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { Scroller, Masker } from '../components/_index'

export default {
  components: {
    Scroller,
    Masker
  },
  data () {
    return {
      list: [{
        title: '洗颜新潮流！人气洁面皂排行榜',
        img: 'https://cdn.xiaotaojiang.com/uploads/82/1572ec37969ee263735262dc017975/_.jpg'
      }, {
        title: '美容用品 & 日用品（上）',
        img: 'https://cdn.xiaotaojiang.com/uploads/59/b22e0e62363a4a652f28630b3233b9/_.jpg'
      }, {
        title: '日本车载空气净化器精选',
        img: 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg'
      }, {
        title: '洗颜新潮流！人气洁面皂排行榜',
        img: 'https://cdn.xiaotaojiang.com/uploads/82/1572ec37969ee263735262dc017975/_.jpg'
      }, {
        title: '美容用品 & 日用品（上）',
        img: 'https://cdn.xiaotaojiang.com/uploads/59/b22e0e62363a4a652f28630b3233b9/_.jpg'
      }, {
        title: '日本车载空气净化器精选',
        img: 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg'
      }]
    }
  }
}
</script>

<style scoped lange="less">
@import '../styles/1px.less';
.menu {
  width: 75px;
  float: left;
  background-color: #fff;
}
.box1 {
}
.box1 ul {
  width: 74px;
}
.box1 li{
  text-align: center;
  padding: 0 5px;
  font-size: 14px;
  line-height: 40px;
}
.content {
  padding-left: 20px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.shop-item {
  padding: 5px;
}
</style>
