<style scoped lang="stylus">
@import '~styles/varibles.styl';

.icons {
  overflow: hidden;
  width: 100%;
  height: 0;
  // 撑开的宽度是父元素宽度的50%，父元素为body，也就是100%。其实也就是页面宽度的一半
  padding-bottom: 50%;
  background-color: pink;

  .icon {
    float: left;
    width: 25%;
    height: 0;
    // 撑开的高度是父元素宽度的25%，父元素为icons，其宽度为100%。其实也就是页面宽度的25%
    padding-bottom: 25%;
    background-color: green;
    display: flex;
    align-items: center;
    flex-direction: column;

    .icon-image {
      width: 50%;
      height: 0;
      padding-bottom: 50%;
      overflow: hidden;
      margin: 0.2rem 0;

      img {
        width: 100%;
      }
    }

    .icon-desc {
      color: $baseColor;
    }
  }
}