<template>
  <div>
    <div style="height: 110vh">
      <div class="view intro-2" style="height: 100vh">
        <div class="full-bg-img">
          <div class="mask rgba-purple-light">
            <div class="container flex-center">
              <div class="white-text text-center">
                <h2>
                  Welcome to home
                </h2>
                <h4>
                  欢迎回家
                </h4>
                <p>
                  乐观的心态看待世界，世间处处是快乐；以平静的心态看待事物，你会看到事物的两面，其实，时时刻刻我们都在分享快乐，有时，只是因为你没有细心品味罢了。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="m-5">
        我小时候，身为军人的父亲长年在外地工作，于是抚养我的重任便落到母亲身上。
        四岁那年的一个夏夜，一向身体棒得像只小老虎的我，偏偏因热伤风和盗汗引发了高烧，浑身烫得像个火球一般。母亲吓坏了，连忙用自行车载着我，拼命往医院赶。
        从医院返回时，已经是子夜时分。静谧的小镇街道早已一片漆黑，地面上却依旧像蒸笼一般湿热。离我家还有十来分钟路程，而且还要经过一个百余米长、坑坑洼洼的下坡路。我家在城乡接合部，当时周围没有路灯。鼻腔里满是湿润的泥土芬芳，耳畔伴着路两侧田野里蛐蛐和田鸡此起彼伏的叫声，眼前不时掠过一两只萤火虫和蝙蝠。闷热的夜幕中，却不见往昔月亮那熟悉的身影，母亲只能借着零散微弱的星光，慢慢地骑着车。
        在老家，年轻的母亲因为胆子大而出名，可我的小手却依稀触摸到她胳膊光洁皮肤上冒出罕见的鸡皮疙瘩。她一向车技不错，可当时自行车居然连续摇晃起来。我早已吓得缩成一团，见母亲这样，更是浑身哆嗦着，只得紧紧搂住她。
        转眼就到那段下坡路了，母亲准备下车推着走。这时，身后突然打来两道近光灯，虽然不是很刺眼明亮，却也把眼前黑漆漆坑坑洼洼有些积水的路面，顿时照得亮堂清晰起来。
      </p>
      <img alt="a duck" src="../assets/duck.jpg">
      <HelloWorld msg="Welcome to Your MDB Vue.js App"/>
      <Blog/>
    </div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue';
  export default {
    name: "Home",
    components: {
      HelloWorld
    }
  };
</script>
<style scoped>
  .view {
    background: url("../assets/background1.jpg") no-repeat center center;
    background-size: cover;
    height: 100%;
  }
</style>

<template>
  <div id="app">
    <mdb-navbar position="top" dark transparent scrolling>
      <mdb-navbar-brand href="#">小蓝枣演示</mdb-navbar-brand>
      <mdb-navbar-toggler>
        <mdb-navbar-nav>
          <mdb-nav-item to="/" waves-fixed>主页</mdb-nav-item>
          <mdb-nav-item to="blog" waves-fixed>工具</mdb-nav-item>
          <mdb-nav-item href="#" waves-fixed>报表</mdb-nav-item>
          <mdb-dropdown tag="li" class="nav-item">
            <mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle>
            <mdb-dropdown-menu>
              <mdb-dropdown-item>工作</mdb-dropdown-item>
              <mdb-dropdown-item>学习</mdb-dropdown-item>
              <div class="dropdown-divider"></div>
              <mdb-dropdown-item>交流</mdb-dropdown-item>
            </mdb-dropdown-menu>
          </mdb-dropdown>
        </mdb-navbar-nav>
        <form>
          <mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInput
            waves waves-fixed />
        </form>
      </mdb-navbar-toggler>
    </mdb-navbar>
    <router-view/>
  </div>
</template>
<script>
  import {
    mdbNavbar,
    mdbNavItem,
    mdbNavbarNav,
    mdbNavbarToggler,
    mdbInput,
    mdbNavbarBrand,
    mdbDropdown,
    mdbDropdownItem,
    mdbDropdownMenu,
    mdbDropdownToggle
  } from "mdbvue";
  export default {
    name: "Home",
    components: {
      mdbNavbar,
      mdbNavItem,
      mdbNavbarNav,
      mdbNavbarToggler,
      mdbInput,
      mdbNavbarBrand,
      mdbDropdown,
      mdbDropdownItem,
      mdbDropdownMenu,
      mdbDropdownToggle
    }
  };
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
#app {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  margin-top: 0px;
  text-align: center;
  color: #2c3e50;
}
</style>
<style scoped>
  .navbar .dropdown-menu a:hover {
    color: inherit !important;
  }
</style>