web-common/src/views/master/news/detail.vue

<template>
  <div id="detail">
    <el-row>
      <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="mainLeft">
            <noticeleft :leftmenu="leftmenu"></noticeleft>
          </el-col>
          <el-col :span="20" class="mainRight">
            <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: 529px;
  margin-bottom: 72px;
}
.main {
  height: 1622px;
}
.mainLeft {
  width: 303px;
  margin-right: 14px;
  text-align: center;
}
.mainRight {
  width: 883px;
  background-color: #f8f2f2;
  height: 1568px;
  text-align: center;
}
</style>