webnew-count/src/views/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="top">
        <top></top>
      </el-col>
      <el-col :span="24" class="menu">
        <div class="w_1200">
          <menus></menus>
        </div>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="12" class="maintopleft">
            <dynamic></dynamic>
          </el-col>
          <el-col :span="12" class="maintopright">
            <jobs :jobsList="jobsList"></jobs>
          </el-col>
          <el-col :span="8" class="context">
            <notice :noticeList="noticeList"></notice>
          </el-col>
          <el-col :span="8" class="between">
            <service :serviceList="serviceList"></service>
          </el-col>
          <el-col :span="8" class="context">
            <technology :jishuList="jishuList"></technology>
          </el-col>
          <el-col :span="24" class="lianjie">
            <links></links>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="foot">
        <div class="w_1200">
          <foot></foot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/layout/common/top.vue';
import menus from '@/layout/common/menus.vue';
import dynamic from '@/layout/index/dynamic.vue';
import jobs from '@/layout/index/jobs.vue';
import notice from '@/layout/index/notice.vue';
import service from '@/layout/index/service.vue';
import technology from '@/layout/index/technology.vue';
import links from '@/layout/index/links.vue';
import foot from '@/layout/common/foot.vue';
export default {
  name: 'index',
  props: {},
  components: {
    top,
    menus,
    dynamic,
    jobs,
    notice,
    service,
    technology,
    links,
    foot,
  },
  data: () => ({
    week: '',
    date: '',
    serviceList: [
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
    ],
    jishuList: [
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
    ],
    noticeList: [
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
    ],
    jobsList: [
      {
        title: '运行动态',
        date: '2018-03-04',
      },

      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
      {
        title: '运行动态',
        date: '2018-03-04',
      },
      {
        title: '6条数据',
        date: '2018-03-04',
      },
    ],
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  height: 730px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.maintopleft {
  height: 300px;
  background-color: #fff;
  margin: 0 10px 0 0;
  width: 595px;
}

.maintopleft .leftcontext {
  padding: 0 20px 0 20px;
  font-size: 16px;
}

.maintopright {
  height: 300px;
  background-color: #fff;
  width: 595px;
  overflow: hidden;
}

.context {
  height: 300px;
  background-color: #fff;
  margin: 10px 0 0 0;
  width: 400px;
}

.between {
  height: 300px;
  background-color: #fff;
  margin: 10px 10px 0 10px;
  width: 380px;
}

.main .lianjie {
  height: 100px;
  background-color: #fff;
  margin: 10px 0 0 0;
}
.foot {
  height: 135px;
}
</style>