skl-www/src/views/Home.vue

<template>
  <div class="home">
    <el-carousel height="100px" class="hfbox" direction="vertical" autoplay :interval="3000">
      <el-carousel-item>
        <a class="hf" href="http://www.news.cn/zt/djxxjy/index.html">
          <img src="../assets/hf1.jpg" class="hfimg">
        </a>
      </el-carousel-item>
      <el-carousel-item>
        <a class="hf" href="http://www.gov.cn/zhuanti/zggcddescqgdbdh/index.htm">
          <img src="../assets/hf2.jpg" class="hfimg">
        </a>
      </el-carousel-item>
      <el-carousel-item>
        <a class="hf" href="http://www.news.cn/zt/djxxjy/index.html">
          <img src="../assets/hf1.jpg" class="hfimg">
        </a>
      </el-carousel-item>
      <el-carousel-item>
        <a class="hf" href="http://www.gov.cn/zhuanti/zggcddescqgdbdh/index.htm">
          <img src="../assets/hf2.jpg" class="hfimg">
        </a>
      </el-carousel-item>
    </el-carousel>
    <div class="listBox">
      <banner class="lists"></banner>
      <threeList parentCode="02" class="listItem" :imgUrl="newsImgUrl" :data="news" :isImg="false" title="社科要闻" code="ztjy1"></threeList>
      <threeList parentCode="10" :imgUrl="threeImggg" :data="threeDatagg" :isImg="false" title="通知公告" code="101"></threeList>
    </div>
    <div class="listBox">
      <lists parentCode="03" title="社会组织建设" code="031" :imgUrl="corporationimgUrl" :tabsList="corporationList" :tabsType="null" :data="corporation" isImg @tabClick="btnClick({ ...$event, type: 'corporation' })"></lists>
      <lists parentCode="04" title="社会科学普及" class="listItem" :imgUrl="prizeImgUrl" :tabsList="prizeList" :tabsType="null" :data="prize" isImg @tabClick="btnClick({ ...$event, type: 'prize' })"></lists>
      <threeList parentCode="07" :imgUrl="threeImg" :data="threeData" code="07"></threeList>
    </div>
    <div class="listBox">
      <lists parentCode="05" title="智库基金项目" :imgUrl="buildsImgUrl" :tabsList="buildsList" tabsType="border-card" :data="builds" @tabClick="btnClick({ ...$event, type: 'builds', limit: 6 })"></lists>
      <lists parentCode="06" title="社会科学评奖" class="listItem" :imgUrl="universalImgUrl" :tabsList="universalList" tabsType="border-card" :data="universal" @tabClick="btnClick({ ...$event, type: 'universal', limit: 6 })"></lists>
      <div class="xzbox">
        <threeList code="09" parentCode="09" class="three" :imgUrl="threeImgzc" :data="threeDatazc"></threeList>
        <el-image :src="xzUrl" class="xz" @click="imgClick('111', '11')"></el-image>
      </div>
    </div>
    <div class="listBox">
      <el-image :src="sknj" class="sknj"></el-image>
      <el-image :src="szsklUrl" class="szskl" @click="imgClick('08', '08')"></el-image>
    </div>
    <links class="links"></links>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import banner from '../components/banner/banner.vue';
import lists from '../components/list/index';
import threeList from '../components/list/threeList';
import links from '../components/link/index';
export default {
  name: 'Home',
  components: {
    banner,
    lists,
    threeList,
    links
  },
  computed: {
    ...mapState(['menusall'])
  },
  data() {
    return {
      sknj: require('../assets/sknj.jpg'),
      xzUrl: require('../assets/xz.jpg'),
      szsklUrl: require('../assets/szskl.jpg'),
      // 社团
      corporation: [],
      corporationimgUrl: require('../assets/icon1.png'),
      corporationList: [
        { title: '社会组织党建', code: '031' },
        { title: '社会组织活动', code: '032' },
        { title: '社会组织简介', code: '033' }
      ],
      // 社科普及
      prize: [],
      prizeImgUrl: require('../assets/icon3.png'),
      prizeList: [
        { title: '科普讲座', code: '041', parentCode: true },
        { title: '科普活动', code: '042', parentCode: true },
        { title: '科普周', code: '043', parentCode: true },
        { title: '科普基地', code: '044', parentCode: true },
        { title: '科普园地', code: '045', parentCode: true },
        { title: '交流培训', code: '046', parentCode: true }
      ],
      // 社科奖项
      universal: [],
      universalImgUrl: require('../assets/icon2.png'),
      universalList: [
        { title: '评奖信息', code: '061' },
        { title: '获奖成果', code: '062' },
        { title: '网上申报', code: '063' }
      ],
      // 智库建设
      builds: [],
      buildsImgUrl: require('../assets/icon4.png'),
      buildsList: [
        { title: '申报评审', code: '051' },
        { title: '立项管理', code: '052' },
        { title: '服务平台', code: '053', parentCode: true }
      ],
      // 社科要闻
      news: [],
      newsImgUrl: require('../assets/icon5.png'),
      // 成果发布
      threeImg: require('../assets/cg.jpg'),
      threeData: [],
      // 政策法规
      threeImgzc: require('../assets/zc.jpg'),
      threeDatazc: [],
      // 通知公告
      threeImggg: require('../assets/gg.png'),
      threeDatagg: []
    };
  },
  async mounted() {
    // 字典
    await this.sourceQuery();
    // 科学评奖
    await this.btnClick({ name: '061', type: 'universal', limit: 6 });
    // 智库基金
    await this.btnClick({ name: '051', type: 'builds', limit: 6 });
    // 社科要闻
    await this.btnClick({ name: '02', type: 'news', limit: 6, parentCode: true });
    // 成果发布
    await this.btnClick({ name: '07', type: 'threeData', limit: 5, parentCode: true });
    // 政策法规
    await this.btnClick({ name: '09', type: 'threeDatazc', limit: 3, parentCode: true });
    // 通知公告
    await this.btnClick({ name: '10', type: 'threeDatagg', limit: 6, parentCode: true });
    // 所有菜单
    await this.menusQueryAll();
  },
  methods: {
    ...mapActions(['contentsQuery', 'menusQueryAll', 'sourceQuery']),
    async btnClick(e) {
      const filter = { bind: e?.name };
      if (e?.parentCode) filter.parentCode = e?.name;
      if (e?.limit) filter.limit = e?.limit;
      const res = await this.contentsQuery({ ...filter });
      if (res.errcode == 0) {
        switch (e?.type) {
          case 'prize':
            this.prize = res.data;
            break;
          case 'corporation':
            this.corporation = res.data;
            break;
          case 'universal':
            this.universal = res.data;
            break;
          case 'builds':
            this.builds = res.data;
            break;
          case 'news':
            this.news = res.data;
            break;
          case 'threeData':
            this.threeData = res.data;
            break;
          case 'threeDatazc':
            this.threeDatazc = res.data;
            break;
          case 'threeDatagg':
            this.threeDatagg = res.data;
            break;
        }
      }
    },
    // 图片点击
    imgClick(code, parentCode) {
      if (code == 'ztjy') {
        const routeUrl = this.$router.resolve(`/templates/ztjy/${code}`);
        window.open(routeUrl.href, '_blank');
        return;
      }
      const item = this.$last({ menus: this.menusall, code: code });
      this.$setParentsetSession({ menus: this.menusall, iscode: item });
      this.$router.push(`/list/${code}?parentCode=${parentCode}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  // background: #f5f9ff;
  .top {
    width: 100%;
  }
  .hfbox {
    width: 68%;
    margin: 0.5% auto;
    .hf {
      width: 100%;
      height: 100px;
      cursor: pointer;
      .hfimg {
        width: 100%;
        height: 100px;
      }
    }
  }
  .listBox {
    width: 68%;
    margin: 0.5% auto;
    display: flex;
    .listItem {
      margin: 0 0.5%;
    }
  }
  .links {
    width: 68%;
  }
  .sknj {
    width: 66%;
    display: block;
    margin-right: 1%;
  }
  .szskl {
    width: 33%;
    display: block;
  }
  .xzbox {
    width: 33%;
    position: relative;
    .three {
      width: 100%;
      height: 74%;
    }
    .xz {
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 85px;
    }
  }
}
</style>