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 { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
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: [],
    jishuList: [],
    noticeList: [],
    jobsList: [],
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...news({ newsQuery: 'query', newsFetch: 'fetch' }),

    async search() {
      let res = await this.newsQuery({ skip: 0, limit: 6, col_name: '工作动态', status: 2 });
      if (this.$checkRes(res)) this.$set(this, `jobsList`, res.data);
      res = await this.newsQuery({ skip: 0, limit: 6, col_name: '通知通告', status: 2 });
      if (this.$checkRes(res)) this.$set(this, `noticeList`, res.data);
      res = await this.newsQuery({ skip: 0, limit: 6, col_name: '科技合作', status: 2 });
      if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
      res = await this.newsQuery({ skip: 0, limit: 6, col_name: '技术问答', status: 2 });
      if (this.$checkRes(res)) this.$set(this, `jishuList`, res.data);
    },
  },
};
</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>