jy-docs/jydocs-pc/src/views/Home.vue

<template>
  <div class="home">

      <search-input></search-input>

      <h3>最新标讯</h3>
      <div class="new-list-group flex-r-c">
          <div class="flex-c-c">
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
          </div>
          <div class="flex-c-c">
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
              <list-item></list-item>
          </div>
      </div>

      <h3>精选推荐</h3>
      <div class="hot-keep-group flex-r-c wrap">
          <card-item></card-item>
          <card-item></card-item>
          <card-item></card-item>
          <card-item></card-item>
          <card-item></card-item>
          <card-item></card-item>
      </div>

      <el-button @click="getTest" :loading="fullscreenLoading" type="primary">模拟Ajax</el-button>
      <el-button  @click="getLoginStatus" type="info" icon="el-icon-jy-search">获取登录状态</el-button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { ajaxGetTest } from "../api/modules/user";
import { Button } from 'element-ui';
import SearchInput from "../components/Search";
import ListItem from "../components/ListItem";
import CardItem from "../components/CardItem";

export default {
  name: 'home',
  components: {
    CardItem,
    ListItem,
    SearchInput,
    HelloWorld,
    [Button.name]: Button
  },
  data () {
    return {
      fullscreenLoading: false,
    }
  },
  methods: {
    getTest () {
      this.fullscreenLoading = true
      ajaxGetTest().then(res => {
        console.log(res)
        this.fullscreenLoading = false
      })
    },
    getLoginStatus: function () {
      alert(loginflag)
    }
  }
}
</script>
<style lang="scss">
    .link-item {
        margin: 0 10px;
    }

    @include diy-icon('search', 24);

    .new-list-group {
        .flex-c-c {
            padding: 20px;
            box-sizing: border-box;
        }
    }
</style>