<template>
  <div class="grid">
    <el-row type="flex">
      <el-col :span="4">
      </el-col>
      <el-col :span="16">
        <el-col :span="8">
          <div class="grid_left">
            <a href="">
            <span class="pic">
              <img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
            </span>
              <span class="info">产品分类</span>
              <span>了解更多</span>
            </a>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid_right">
            <ul>
              <li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
                <a :href="picItem.href">
                <span >
                  <img :src="picItem.src" alt=""/>
                </span>
                  <span class="info">{{picItem.name}}</span>
                </a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ProductsClassify",
  data(){
    return{
      pics:[
        {
          href:'',
          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
          name:'瓷抛大理石'
        },
        {
          href:'',
          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
          name:'通体大理石'
        },
        {
          href:'',
          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
          name:'中板通体大理石'
        },
        {
          href:'',
          src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
          name:'大板通体大理石'
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.grid {
  padding: 50px 0 60px 0;
  background-color: #f9f9f9;

  .grid_left:hover {
    filter: brightness(85%);
    opacity: 1;
  }

  //.grid_left:hover span:nth-child(2) {
  //  //background-color: red;
  //}
  .grid_left {
    position: relative;
    display: inline-block;
    transition: all 0.6s;

    a {
      .pic {
        img {
          width: 440px;
          z-index: 9;
        }
      }



      span:last-child {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px;
        height: 36px;
        line-height: 36px;
        margin: 20px 0 0 -80px;
        font-size: 16px;
        letter-spacing: 2px;
        text-align: center;
        background-color: #de832f;
        border-radius: 100px 100px 100px 100px;
        z-index: 999;
      }
    }
  }
  .info{
    color: #fff;
    position: absolute;
    top: 42%;
    left: 0;
    width: 100%;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .grid_right{
    //float: right;
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        margin-top: -5px;
        padding: 5px;
        span:first-child{

          width: 100%;
          filter: alpha(opacity=94);
          -moz-opacity: 0.94;
          opacity: 0.94;
          transition: all 0.6s;

        }
        a{
          position: relative;
          display: inline-block;
          img{
            width: 440px;
            height: 296px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
