test/src/views/kjzx/index copy.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <top></top>
        </el-col>
        <el-col :span="24">
          <menus></menus>
        </el-col>
        <el-col :span="24" class="main">
          <div class="w_1200">
            <el-col :span="24" class="one">
              <el-col :span="10" class="left">
                <el-col :span="24" class="top animate__animated animate__backInDown">
                  <tpxw :tpxwList="tpxwList"></tpxw>
                </el-col>
                <el-col :span="24" class="down animate__animated animate__backInUp">
                  <mtjj :mtjjList="mtjjList"></mtjj>
                </el-col>
              </el-col>
              <el-col :span="14" class="right animate__animated animate__fadeInRightBig">
                <kjdt :kjdtList="kjdtList"></kjdt>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <foot></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/components/common/top.vue';
import menus from '@/components/common/menus.vue';
import foot from '@/components/common/foot.vue';
// 科技资讯
import tpxw from '@/layout/kjzx/tpxw.vue';
import mtjj from '@/layout/kjzx/mtjj.vue';
import kjdt from '@/layout/kjzx/kjdt.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: concolumn } = createNamespacedHelpers('concolumn');
const { mapActions: connews } = createNamespacedHelpers('connews');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    top,
    menus,
    foot,
    // 科技资讯
    tpxw,
    mtjj,
    kjdt,
  },
  data: function() {
    return {
      // 图片新闻
      tpxwList: [],
      // 媒体聚焦
      mtjjList: [],
      // 科技动态
      kjdtList: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...concolumn({ columnquery: 'query', columnfetch: 'fetch' }),
    ...connews({ connewsquery: 'query', connewsfetch: 'fetch' }),
    async search() {
      let res = await this.columnquery();
      if (this.$checkRes(res)) {
        let tpxw = res.data.find(i => i.site == 'tpxw');
        if (tpxw) {
          let res = await this.connewsquery({ limit: 6, column_id: tpxw.id });
          if (this.$checkRes(res)) this.$set(this, `${tpxw.site}List`, res.data);
        }
        let kjdt = res.data.find(i => i.site == 'kjdt');
        if (kjdt) {
          let res = await this.connewsquery({ limit: 18, column_id: kjdt.id });
          if (this.$checkRes(res)) this.$set(this, `${kjdt.site}List`, res.data);
        }
        let mtjj = res.data.find(i => i.site == 'mtjj');
        if (mtjj) {
          let res = await this.connewsquery({ limit: 5, column_id: mtjj.id });
          if (this.$checkRes(res)) this.$set(this, `${mtjj.site}List`, res.data);
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  min-height: 500px;
  margin: 10px 0;
  .one {
    height: 680px;
    overflow: hidden;
    .left {
      height: 680px;
      overflow: hidden;
      margin: 0 10px 0 0;
      .top {
        height: 340px;
        background: #fff;
        margin: 0 0 10px 0;
      }
      .down {
        height: 330px;
        overflow: hidden;
        background: #fff;
      }
    }
    .right {
      width: 690px;
      height: 680px;
      background: #fff;
    }
  }
}
</style>