<template>
  <div class="footerMain">
    <el-row>
      <el-col >
          <button class="navButton" v-for="item in menuItem" :key="item.value">{{item.label}}</button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
          <img class="footerImg" src="../../public/img/f2.png" alt="">
          <img class="footerImg" src="../../public/img/f1.png" alt="">
          <img class="footerImg" src="../../public/img/f3.png" alt="">
      </el-col>
    </el-row>
    <el-row>
      <el-col>
          <span class="version">©2022</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
        return{
            menuItem:[
                {
                    value:1,
                    label:"Home"
                },
                  {
                    value:2,
                    label:"Pricing"
                },
                {
                    value:3,
                    label:"Catalog"
                },
                {
                    value:4,
                    label:"Insights"
                },
                   {
                    value:5,
                    label:"Forum"
                },
                   {
                    value:6,
                    label:"Documentation"
                },
                   {
                    value:7,
                    label:"Academy"
                },
                   {
                    value:8,
                    label:"Status"
                },
                   {
                    value:9,
                    label:"Changelog"
                },
                   {
                    value:10,
                    label:"Careers"
                },
                   {
                    value:11,
                    label:"Contact"
                },
                   {
                    value:12,
                    label:"Privacy Notice"
                },
                   {
                    value:13,
                    label:"Terms & Conditions"
                },
                   {
                    value:14,
                    label:"Impressum"
                },
            ]
        }
    }
};
</script>

<style lang="scss" scoped>
.footerMain {
  width: 100%;
  height: 100%;
//   outline: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.el-col{
    // outline: 1px solid red;
    display: flex;
    align-items: center;
    height: 28px;
}
.navButton{
    font-size: 12px;
    margin-left: 10px;
    background: #333333;
    color: #fff;
    border: none;
    padding: 0px;
    cursor: pointer;    
}
.navButton:hover{
    border-bottom: 1px solid #fff;
}
.footerImg{
    width: 15px;
    margin-left: 10px;
    cursor: pointer;
}
.version{
    font-size: 12px;
    margin-left: 10px;
}
</style>