一.Vue2.5开发去哪儿网app首页④——图标区域页面布局_去哪儿网移动端ui界面布局-优快云博客

本文链接：https://blog.youkuaiyun.com/Vansal/article/details/87551222

在码云中创建index-icons分支进行开发，通过浮动布局实现8个图标自动排列成两行，每个图标包含图片和描述，用于景点门票、一日游等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同样，在码云中新建一个index-icons分支，接下来的开发都会在这个分支上

git转至index-icons分支三部曲

git pull
git checkout index-icons
git status

在components下新建一个Icons组件，导入到Home组件中，Icons组件内容：

icons使用浮动布局，8个icon自动分布2行，icon内图片和描述使用子绝父相

<template>
  <div class="icons">
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="景点门票">
      </div>
      <p class="icon-desc">景点门票</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" alt="一日游">
      </div>
      <p class="icon-desc">一日游</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" alt="杭州必游">
      </div>
      <p class="icon-desc">杭州必游</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" alt="春节出游">
      </div>
      <p class="icon-desc">春节出游</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png" alt="滑雪季">
      </div>
      <p class="icon-desc">滑雪季</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png" alt="西湖">
      </div>
      <p class="icon-desc">西湖</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png" alt="泡温泉">
      </div>
      <p class="icon-desc">泡温泉</p>
    </div>
    <div class="icon">
      <div class="icon-img">
        <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png" alt="西溪湿地">
      </div>
      <p class="icon-desc">西溪湿地</p>
    </div>
  </div>
</template>

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

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

显示效果