<template>
  <div class="header_bg">
    <el-row type="flex" class="up_header">
      <el-col :span="4">
      </el-col>
      <el-col :span="16" style="z-index: 400;">
          <span class="up_left">
            艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
          </span>
        <span class="up_right">
            广东祥睿陶瓷有限公司
          </span>
      </el-col>
    </el-row>
    <el-row type="flex" class="down_header">
      <el-col :span="4">
      </el-col>
      <el-col :span="16">
        <div class="down_left">
          <a href="/">
            <el-image
              :src="require('@/assets/header/logo.png')"></el-image>
          </a>
        </div>
        <div class="down_right">
          <ul >
            <li v-for="(item,index) in navList" :key="index" class="nav">
              <a :href="item.href" class="nav_item">
                {{ item.title }}
              </a>
              <ul class="subNav" v-if="item.children">
                <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
                  <a :href="childrenItem.href">
                    {{ childrenItem.title }}
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      navList: [
        {
          href: '/',
          title: '网站首页',
        },
        {
          href: '',
          title: '关于我们',
          children:[
            {
              href: '',
              title:'企业简介'
            },
            {
              href: '',
              title:'品牌文化'
            },{
              href: '',
              title:'企业观点'
            },{
              href: '',
              title:'企业文化'
            }
          ]
        }, {
          href: '',
          title: '产品中心',
          children:[
            {
              href: '',
              title:'瓷抛大理石'
            },
            {
              href: '',
              title:'通体大理石'
            },{
              href: '',
              title:'中板通体大理石'
            },{
              href: '',
              title:'大板通体大理石'
            },{
              href: '',
              title:'银河系大板'
            },{
              href: '',
              title:'仿古砖600x600'
            },{
              href: '',
              title:'金刚大理石'
            },{
              href: '',
              title:'岩板'
            },{
              href: '',
              title:'微水泥'
            }
          ]
        }, {
          href: '/news',
          title: '新闻资讯',
          children:[
            {
              href: '/news',
              title:'公司新闻'
            },
            {
              href: '',
              title:'行业动态'
            },{
              href: '',
              title:'瓷砖百科'
            }
          ]
        }, {
          href: '',
          title: '形象展示',
          children:[
            {
              href: '',
              title:'资质荣誉'
            },
            {
              href: '',
              title:'工程案例'
            }
          ]
        }, {
          href: '',
          title: '招商加盟',
          children: [
            {
              href: '',
              title:'支持策略'
            },
            {
              href: '',
              title:'加盟条件'
            },
          ]
        }, {
          href: '',
          title: '联系我们'
        }
      ]
    }
  }
}
</script>

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

  .up_header {
    border-bottom: 1px solid #333;
    height: 36px;

    .up_left {
      color: #fff;
      display: inline;
      line-height: 36px;
      float: left;
      margin-left: 90px;
      font-size: 12px;
    }

    .up_right {
      color: #ccc;
      display: inline;
      float: right;
      line-height: 35px;
      font-size: 12px;
    }
  }

  .down_header {
    position: relative;
    width: 100%;
    float: left;
    padding: 4px 0;
    z-index: 30;

    .down_left {
      position: absolute;
      top: -30px;
      float: left;

      > a:hover:after {
        border: none;
      }
    }

    .down_right {
      position: relative;
      float: right;

      >ul {
        display: inline;
        float: left;

        >.nav {
          position: relative;
          display: inline;
          width: 100px;
          float: left;

          > .nav_item {
            color: #fff;
            display: inline-block;
            position: relative;
            height: 85px;
            line-height: 85px;
            font-size: 14px;
          }
          .nav_item:hover{
            text-decoration: underline;
          }

          .subNav{
            display: none;
            clear: both;
            position: absolute;
            top: 85px;
            left: 0;
            width: 100px;
            background-color: #000;
            padding: 12px 0;
            >li{
              width: 100%;
              text-align: center;
              height: 35px;
              line-height: 35px;
              >a{
                color: #fff;
                font-size: 12px;
              }
              >a:hover{
                text-decoration: underline;
              }
            }
          }

        }
        >.nav:hover {
          .subNav{
            display: block;
          }
        }
      }
    }
  }
}
</style>
