<template>
  <div >
    <div class="container" v-if="!isPhone">
      <banner id="banner" />
      <helpList id="helpList" @gotorecommend="gotorecommend" />
      <recommend id="recommend" ref="recommend" />
      <moreLoginList id="moreLoginList" />
      <loginList id="loginList" :title="'了解更多'" />
      <!-- <silder :showForm="showForm" @changeStatus="changeStatus" /> -->
    </div>
    <div v-else>
      <minIndex />
    </div>
  </div>
</template>
<style lang="less" scoped>
.container {
  min-height: 1000px;
}
</style>
<script>

import { isMobile } from "@/util";
import helpList from "./blocks/helpList.vue";
import banner from "./blocks/banner";
import recommend from "./blocks/recommend";
import moreLoginList from "./blocks/moreLoginList";
import loginList from "./blocks/loginList.vue";
import silder from "@/components/silder.vue";
import minIndex from "./minIndex"
export default {
  name: "indexpage",
  components: {
    banner,
    silder,
    helpList,
    recommend,
    moreLoginList,
    loginList,
    minIndex
  },
  data() {
    return {
      showForm: false,
    };
  },
  methods: {
    changeStatus(val) {
      console.log(val);
      this.showForm = val;
    },
    gotorecommend(num) {
      document.getElementById("recommend").scrollIntoView();
      this.$refs.recommend.activeName = num;
      console.log();
    },
  },
  computed: {
    isPhone() {
      return isMobile();
    },
  },
};
</script>
