web-common/src/views/news/list.vue

<template>
  <div id="list">
    <el-row style="overflow-y: hidden;">
      <el-col :span="24" class="top">
        <div class="w_1200">
          <top :topInfo="topInfo" :topInfos="topInfos"></top>
        </div>
      </el-col>
      <el-col :span="24" class="menu">
        <div class="w_1200">
          <native></native>
        </div>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="6">
            <newsLeft v-if="type === 'least'"></newsLeft>
            <menuLeft v-else-if="type === 'needMenu'"></menuLeft>
            <!-- TODO:还有cg(成果交流)和jl(交流)两个侧菜单 -->
          </el-col>
          <el-col :span="18">
            <newsRight :newsRightList="newsRightList" :total="total"></newsRight>
            <!-- <noLeft v-else :newsRightList="newsRightList"></noLeft> -->
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="down">
        <footinfo :topInfo="topInfo"></footinfo>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '../../layout/index/top.vue';
import native from '../../layout/index/native.vue';
import newsRight from '../../layout/news/newsRight.vue';
import menuLeft from '../../layout/list/mainLeft.vue';
import newsLeft from '../../layout/news/newsLeft.vue';
import footinfo from '../../layout/index/foot.vue';
export default {
  name: 'list',
  props: {
    topInfos: null,//头部
    topInfo: null,//网络头部
    newsRightList: null,//新闻右侧列表
    total: null,
    type: { type: String }
  },
  components: {
    top,//头部
    native,//导航
    newsLeft,//新闻左侧
    newsRight,//新闻右侧
    footinfo,//底部信息
    menuLeft,//菜单
  },
  data: () => ({}),
  created() { },
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  height: 150px;
}
.menu {
  height: 60px;
}
.down {
  min-height: 100px;
}
.main {
  min-height: 500px;
  margin: 20px 0;
}
</style>