web-common/src/views/index/index.vue

<template>
  <div id="index">
    <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" class="notice">
            <notice :noticelist="noticelist"></notice>
          </el-col>
          <el-col :span="17" class="news">
            <news :newslist="newslist"></news>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="mains">
        <div class="w_1200">
          <el-col :span="6" class="mingshi">
            <mingshi></mingshi>
          </el-col>
          <el-col :span="17" class="chengguo">
            <chengguo :chengguolist="chengguolist"></chengguo>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="mains">
        <div class="w_1200">
          <el-row>
            <el-col :span="12" class="jishu">
              <tabsList :title="`技术问答`" :list="tabsList"></tabsList>
            </el-col>
            <el-col :span="11" :push="1" class="jishu">
              <infoList :title="`党建信息`" :list="partyList"></infoList>
            </el-col>
          </el-row>
        </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 news from '../../layout/index/news.vue';
import notice from '../../layout/index/notice.vue';
import mingshi from '../../layout/index/mingshi.vue';
import chengguo from '../../layout/index/chengguo.vue';
import footinfo from '../../layout/index/foot.vue';
import infoList from '../../layout/index/infoList.vue';
import tabsList from '../../layout/index/tabsList.vue';
export default {
  name: 'index',
  props: {
    topInfos: null,
    topInfo: null,
    noticelist: null, //公告列表
    newslist: null, //新闻列表
    chengguolist: null, //成果展示
    partyList: null, //党建信息
    tabsList: null, //标签页列表
    footlist: null,
  },
  components: {
    top,
    native,
    notice,
    news,
    mingshi,
    chengguo,
    footinfo,
    infoList,
    tabsList,
  },
  data: () => ({}),
  created() { },
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  height: 150px;
}
.menu {
  margin-bottom: 20px;
  height: 70px;
}
.main {
  margin-bottom: 20px;
  height: 400px;
}
.main .notice {
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px #ccc;
  overflow: hidden;
}
.main .news {
  float: right;
  width: 880px;
  height: 400px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px #ccc;
}
.mains {
  margin-bottom: 20px;
  height: 400px;
}
.mains .mingshi {
  height: 400px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px #ccc;
}
.mains .chengguo {
  float: right;
  width: 880px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px #ccc;
  overflow: hidden;
}
.down {
  min-height: 100px;
}
.jishu {
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px #ccc;
  overflow: hidden;
}
</style>