<template>
  <div id="friendLink">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="title">
          <span>友情链接</span>
        </el-col>
        <el-col :span="24" class="image">
          <!-- <el-col :span="3" v-for="(item, index) in linkImgList" :key="index">
            <el-link :underlne="false">
              <el-image :src="item.url"></el-image>
            </el-link>
          </el-col> -->
          <ul class="link-list">
            <li class="link-item" v-for="(item, index) in linkImgList" :key="index">
              <a :href="item.url" class="link" :title="item.title" target="_blank" rel="nofollow">
                <img :src="item.pic" alt="" style="width:100%;heigth:100%" />
              </a>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'friendLink',
  props: {
    linkImgList: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.title {
  height: 49px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #850000;
}
.title span {
  display: inline-block;
  height: 47px;
  background: #fff;
  padding: 0 10px;
  text-align: center;
  line-height: 49px;
  color: #850000;
  border: 1px solid #ccc;
}
.link-list {
  margin: 0;
  padding: 0;
}
.link-list .link-item {
  float: left;
  border: 1px solid #eee;
  display: table;
  width: 178px !important;
  margin: 0 9px 10px 0;
  padding: 5px;
}
.link-list .link {
  display: table-cell;
  height: 30px !important;
  vertical-align: middle;
  text-align: center;
}
.link-list .link img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
</style>
