<template>
  <div class="footer_bg">
    <el-row type="flex" class="up_footer">
      <el-col :span="4">
      </el-col>
      <el-col :span="16">
        <div class="up_left">
          <el-image
            style="margin-bottom: 15px"
            :src="require('@/assets/footer/elogo.png')"></el-image>
          <div>
            广东祥睿陶瓷有限公司
          </div>
        </div>
        <div class="up_middle">
          <ul>
            <li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
              <a>{{ footerItem.title }}</a>
              <div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
                  <a>{{ footerItems.name }}</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="up_right">
          <el-image
            style="width: 100px; height: 100px"
            :src="require('@/assets/footer/qr.jpg')"></el-image>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="down_footer">
      <el-col :span="3">
      </el-col>
      <el-col :span="18">
        <div>
          版权所有©广东祥睿陶瓷有限公司 2018-2019 未经本网书面授权，请勿转载、摘编或建立镜像，否则视为侵权。
        </div>
        <div>
          地址：佛山市禅城区华夏陶瓷博览城陶博会展三环路5座B3 技术支持：弈天网络
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      footerList: [
        {
          title: '关于我们',
          items: [
            {
              name: '企业简介'
            },
            {
              name: '品牌文化'
            },
            {
              name: '企业观点'
            }
          ]
        },
        {
          title: '新闻资讯',
          items: [
            {
              name: '公司新闻'
            },
            {
              name: '行业动态'
            },
            {
              name: '瓷砖百科'
            }
          ]
        },
        {
          title: '形象展示',
          items: [
            {
              name: '资质荣誉'
            },
            {
              name: '工程案例'
            }
          ]
        },
        {
          title: '招商加盟',
          items: [
            {
              name: '支持策略'
            },
            {
              name: '加盟条件'
            }
          ]
        },
        {
          title: '联系我们',
          items: [
            {
              name: '联系方式'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.footer_bg {
  height: 276px;
  width: 100%;
  background-color: #111;
  color: #fff;

  .up_footer {
    color: #fff;
    width: 100%;
    float: left;
    padding: 50px 0 50px;
    font-size: 12px;

    .up_left {
      float: left;
      margin-right: 15px;

      > div {
        font-size: 14px;
        clear: both;
        width: 251px;
        line-height: 36px;
        float: left;
        text-align: center;
        background-color: #111;
      }
    }

    .up_middle {
      ul {
        float: left;

        li {
          color: #eee;
          display: inline;
          float: left;
          padding: 0 40px 0 40px;
          border-right: 1px solid #444;
          font-size: 14px;

          > a {
            color: #fff;
            font-size: 15px;
            line-height: 26px;
          }

          > a:hover {
            text-decoration: underline;
          }

          .item {
            color: #aaa;
            font-size: 13px;
              > a {
                line-height: 24px;
              }
            > a:hover{
              text-decoration: underline;
            }
          }
        }
      }
    }

    .up_right {
      float: right;
    }
  }

  .down_footer {
    color: #aaa;
    width: 100%;
    float: left;
    padding: 12px 0;
    font-size: 12px;
    border-top: 1px solid #333;
    text-align: center;
  }
}
</style>
