vue 一个简单的项目 之一 首页 step4

下面要来写，图标区域页面布局。

就是下图，被框起来的部分。

    

那么，首先去码云上，新建一个分支 index-icons。

然后，本地把新分支拿下来。

git pull

git checkout index-icons (切换到该分支)

ok.

开启项目服务 npm run start

在项目目录 src/pages/home/components 下，新建一个 Icons.vue .给它一个初始的内容。

    

然后，我们在Home.vue 中引入并使用这个组件。

    

这个区域的宽高比来大致为 2:1 ，因此与上面一步一样，需要做一个占位，如下。

    

下面写小图标的样式。

    

但是上面的代码会有问题，如下，父元素，没有把子元素包裹住。

    

    

然后，添加文字 和 文字的样式。

<template>
  <div class="icons">
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png">
      </div>
      <p class="icon-desc">红门</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeIcons"
}
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl'
  .icons
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 50%
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          height: 100%
          display: block
          margin: 0 auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        color: $darkTextColor
        text-align: center
</style>

ok, 下面就是效果。