<template>
  <div id="detail">
    <el-row style="overflow-y:hidden;">
      <el-col :span="24" class="top">
        <div class="w_1200">
          <top :topinfo="topinfo" :menulist="menulist"></top>
        </div>
      </el-col>
      <el-col :span="24" class="banner">
        <banner :bannerinfo="bannerinfo"></banner>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="4" class="noticeleft">
            <noticeleft :leftmenu="leftmenu"></noticeleft>
          </el-col>
          <el-col :span="20" class="noticeright">
            <noticeright :noticedetail="noticedetail"></noticeright>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="foot">
        <foot :footinfo="footinfo"></foot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '../../../layout/master/index/top.vue';
import banner from '../../../layout/master/news/banner.vue';
import noticeleft from '../../../layout/master/notice/noticeleft.vue';
import noticeright from '../../../layout/master/notice/noticeright.vue';
import foot from '../../../layout/master/index/foot.vue';
export default {
  name: 'detail',
  props: {
    topinfo: null, //头部内容
    menulist: null, //导航
    bannerinfo: null, //banner图片
    leftmenu: null, //左侧导航
    noticedetail: null, //通知右侧内容
    footinfo: null, //底部内容
  },
  components: {
    top,
    banner,
    noticeleft,
    noticeright,
    foot,
  },
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  height: 140px;
}
.banner {
  height: 526px;
}
.main {
  height: 1694px;
  padding: 90px 0 0 0;
}
.main .noticeleft {
  width: 303px;
  height: 1694px;
  margin: 0 14px 0 0;
}
.main .noticeright {
  width: 883px;
  height: 1694px;
}
.foot {
  height: 109;
}
</style>
