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

<template>
  <div class="home">
      <div class="top-search-group flex-c-c center">
        <h5>剑鱼文库，最实用的招投标资料库</h5>
        <search-input @submit="goSubmit"></search-input>
      </div>

      <div class="new-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>最新文档</h5>
                  <i class="el-icon-jy-Frame"></i>
              </div>
          </div>

          <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>
      </div>

      <div class="hot-down-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>热门下载</h5>
                  <i class="el-icon-jy-Frame-1"></i>
              </div>
          </div>

          <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>
      </div>

      <div class="keep-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>精选推荐</h5>
              </div>
          </div>
          <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>
      </div>
  </div>
</template>

<script>
import { ajaxGetTest } from '../api/modules/user'
import { Button } from 'element-ui'
import SearchInput from '../components/Search'
import ListItem from '../components/ListItem'

export default {
  name: 'home',
  components: {
    ListItem,
    SearchInput,
    [Button.name]: Button
  },
  data () {
    return {
      fullscreenLoading: false
    }
  },
  beforeCreate: function () {
    $('body').addClass('view_index')
  },
  beforeDestroy: function () {
    $('body').removeClass('view_index')
  },
  methods: {
    goSubmit (search) {
      this.$router.push({
        name: 'search',
        query: search
      })
    },
    getTest () {
      this.fullscreenLoading = true
      ajaxGetTest().then(res => {
        console.log(res)
        this.fullscreenLoading = false
      })
    },
    getLoginStatus: function () {
      alert(loginflag)
    }
  }
}
</script>
<style lang="scss">
  .page--docs--index.view_index {
    .page-container {
      background-image: url("~@/assets/images/wenkuBanner.png");
      background-repeat: no-repeat;
    }
  }

</style>
<style scoped lang="scss">
    @include diy-icon('search', 24);
    @include diy-icon('Frame', 24);
    @include diy-icon('Frame-1', 24);

    .keep-group {
        margin-top: 38px;
        padding-bottom: 50px;
    }

    .new-group {
        margin-top: 54px;
    }

    .hot-down-group {
        border-radius: 12px;
        background: url("~@/assets/images/dateGetBg.png") no-repeat;

        background-size: 100% 100%;
        width: 100%;
        height: auto;
        padding: 24px;
        padding-bottom: 34px;
        box-sizing: border-box;
        margin-top: 40px;
        .new-list-group {
            background-color: white;
            border-radius: 8px;
        }
    }

    .title-group {
        margin-bottom: 16px;
        h5 {
            color: #1D1D1D;
            font-family: Microsoft YaHei;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: 0px;
            text-align: left;
            margin-right: 9px;
        }
    }

    .top-search-group {
      width: 100%;
      height: 323px;
      h5 {
        color: #1D1D1D;
        font-family: Microsoft YaHei;
        font-size: 20px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 40px;
      }
    }

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