<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <el-row>
          <div v-for="(o, index) in sData" :key="o" :span="4" class="product-item">
            <div class="image-box">
              <div class="suffix" style="background:rgba(33,150,243,.8) url(http://wms.xingyunyi.cn/aceui/images/dict.png) center center no-repeat;background-size:80px">
                <p style="padding-top:150px">
                  {{ o }}
                </p>
              </div>
              <a href="#" @click="toDict(o)" />
            </div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { _getDictList } from '@/api/knowledgeSevice/index'
export default {
  name: 'Dicts',
  data: function() {
    return {
      sData: []
    }
  },
  mounted() {
    _getDictList().then(r => {
      this.sData = r
    })
  },
  methods: {
    toDict(dictName) {
      this.$router.push('/knowledgeSevice/files/' + dictName)
    }
  }
}
</script>

<style scoped>
 .product-item{
        width:200px;
        height: 200px;
        background-color: #ffffff;
        float: left;
        margin-left: 45px;
        margin-bottom: 50px;
        position: relative;
        -moz-box-shadow:1px 1px 10px #ccc;; -webkit-box-shadow:1px 1px 10px #ccc;; box-shadow:1px 1px 10px #ccc;;
    }

    .product-item .image-box{
        width:200px;
        height:200px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

    .product-item .image-box .image{
        width: 200px;
        height: 200px;
        background-size: cover;
        transition: all 0.5s;
    }

    .product-item .image-box .suffix{
        width:200px;
        height: 200px;
        text-align: center;
        vertical-align: middle;
        background: rgba(33,150,243,.8);
        color:#fff;
    }

    .product-item:hover .image-box .image{
         -webkit-transform: scale(1.25, 1.25);
         transform: scale(1.25, 1.25);
    }

    .product-item:first{
        margin-left: 0;
    }

    p{
      line-height: 24px;
      height: 24px;
      margin:0;
    }

    .author ,.time{
      color:#333333;
      font-size: 12px;
    }

    .time{
      float:right;
    }
  .image-box {
    position: relative;
  }

  .image-box a{
    position:absolute;
    width:100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
  }

</style>
