web-center/src/components/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :sapn="24" class="top">
        <div class="w_1270">
          <top :info="info"></top>
        </div>
      </el-col>
      <el-col :sapn="24" class="banner">
        <banner :info="info"></banner>
      </el-col>
      <el-col :sapn="24" class="menu">
        <menuInfo :menuList="menuList" :backColor="backColor"></menuInfo>
      </el-col>
      <el-col :sapn="24" class="main">
        <div class="w_1270">
          <el-col class="main_1">
            <el-col :span="11" class="lunbo">
              <lunbo :carouselList="carouselList"></lunbo>
            </el-col>
            <el-col :span="9" class="noticeNews">
              <noticeNews :noticeNewsList="noticeNewsList"></noticeNews>
            </el-col>
            <el-col :span="4" class="kuaisu">
              <kuaisu></kuaisu>
            </el-col>
          </el-col>
          <el-col class="main_2">
            <el-col :span="11" class="zhidao">
              <zhidao :zhidaoList="zhidaoList"></zhidao>
            </el-col>
            <el-col :span="9" class="law">
              <law :lawList="lawList"></law>
            </el-col>
            <el-col :span="4" class="daohang">
              <daohang :list="list" v-on="$listeners"></daohang>
            </el-col>
          </el-col>
          <el-col :span="24" class="main_3">
            <weilai></weilai>
          </el-col>
          <el-col :span="24" class="main_4">
            <el-col :span="11" class="service">
              <service :serviceList="serviceList"></service>
            </el-col>
            <el-col :span="9" class="huji">
              <huji :hujiList="hujiList"></huji>
            </el-col>
            <el-col :span="4" class="xiazai">
              <xiazai :xiazaiList="xiazaiList"></xiazai>
            </el-col>
          </el-col>
        </div>
        <el-col :span="24" class="main_5">
          <recruit :recruitList="recruitList" :zixunList="zixunList"></recruit>
        </el-col>
        <div class="w_1270">
          <el-col :span="24" class="login">
            <login></login>
          </el-col>
          <el-col :span="24" class="naitve">
            <naitve :nativeList="nativeList"></naitve>
          </el-col>
        </div>
      </el-col>
      <el-col :sapn="24" class="down">
        <down :info="info" :backColor="backColor"></down>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/layout/index/top.vue';
import banner from '@/layout/index/banner.vue';
import menuInfo from '@/layout/index/menuInfo.vue';
import lunbo from '@/layout/index/lunbo.vue';
import noticeNews from '@/layout/index/noticeNews.vue';
import kuaisu from '@/layout/index/kuaisu.vue';
import zhidao from '@/layout/index/zhidao.vue';
import law from '@/layout/index/law.vue';
import daohang from '@/layout/index/daohang.vue';
import weilai from '@/layout/index/weilai.vue';
import service from '@/layout/index/service.vue';
import huji from '@/layout/index/huji.vue';
import xiazai from '@/layout/index/xiazai.vue';
import recruit from '@/layout/index/recruit.vue';
import login from '@/layout/index/login.vue';
import naitve from '@/layout/index/naitve.vue';
import down from '@/layout/index/down.vue';
export default {
  name: 'index',
  props: {
    backColor: null, //背景颜色
    info: null, //站点信息
    menuList: null, //菜单
    carouselList: null, //輪播圖
    noticeNewsList: null, //通知公告+就業動態
    zhidaoList: null, //就業指導
    lawList: null, //政策法规
    serviceList: null, //档案服务
    hujiList: null, //户籍管理
    xiazaiList: null, //下载专区
    recruitList: null, //最新招聘
    zixunList: null, //就业咨询
    nativeList: null, //网站导航
    list: null,
  },
  components: {
    top, //头部
    banner, //banner
    menuInfo, //菜单
    lunbo, //轮播图
    noticeNews, //通知公告+就业动态
    kuaisu, //快速通道
    zhidao, //就业指导
    law, //政策法规
    daohang, //导航
    weilai, //未來计划
    service, //档案服务
    huji, //户籍管理
    xiazai, //下载专区
    recruit, //最新招聘
    login, //登录
    naitve, //网站导航
    down, //底部
  },
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1270 {
  width: 1270px;
  margin: 0 auto;
}
.top {
  height: 40px;
  overflow: hidden;
  background-color: #f5f5f54f;
}
.banner {
  height: 300px;
  overflow: hidden;
}
.menu {
  height: 50px;
  overflow: hidden;
}
.main {
  min-height: 1000px;
  background: #f6f6f6;
}
.main_1 {
  height: 304px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.lunbo {
  width: 540px;
  height: 304px;
  overflow: hidden;
  margin: 0 10px 0 0;
}
.noticeNews {
  width: 460px;
  height: 304px;
  overflow: hidden;
  background-color: #fff;
  margin: 0 10px 0 0;
}
.kuaisu {
  width: 247px;
  height: 304px;
  background-color: #fff;
}
.main_2 {
  height: 369px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.zhidao {
  width: 540px;
  height: 369px;
  overflow: hidden;
  margin: 0 10px 0 0;
  background-color: #fff;
}
.law {
  width: 460px;
  height: 369px;
  overflow: hidden;
  background-color: #fff;
  margin: 0 10px 0 0;
}
.daohang {
  width: 247px;
  height: 369px;
  background-color: #fff;
}
.main_3 {
  height: 200px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.main_4 {
  display: none;
  height: 370px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.service {
  width: 540px;
  height: 369px;
  overflow: hidden;
  margin: 0 10px 0 0;
  background-color: #fff;
}
.huji {
  width: 460px;
  height: 369px;
  overflow: hidden;
  background-color: #fff;
  margin: 0 10px 0 0;
}
.xiazai {
  width: 247px;
  height: 369px;
  background-color: #fff;
}
.main_5 {
  height: 560px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.login {
  height: 50px;
  margin: 10px 0 0 0;
  overflow: hidden;
}
.naitve {
  min-height: 300px;
  margin: 30px 0 20px 0;
  overflow: hidden;
}
.down {
  height: 135px;
  overflow: hidden;
}
</style>